在点击图片/标题需要跳转到详情页面的使用场景中,首先定义图片元素的id为“tyzc”,是同一类下的第一个图片

<img src="img/img3.png" width="40" height="40" id="tyzc" pageTarget="index2">
//pageTarget是自定义的
<div class="mui-media-body">拟退役资产</div> 

1-

<script type="text/javascript">
mui("#tyzc")[0].addEventListener("tap",function(){//转化为DOM元素后,要绑定的图片id为tyzc的第一个元素
    alert(test);
    window.location.href="index.html";
})
</script> 

2-

<script type="text/javascript">
mui("img")[0].addEventListener("tap",function(){//转化为DOM元素后,限定为img类,然后绑定img的第一个元素
alert(test);window.location.href="index.html";
})
</script>

3-

<a href="#">//在每个要跳转的元素后添加<a>超链接标签,用自己要跳转的url地址代替#

4-  将九宫格中的图片批量绑定要跳转的页面  以上为单个图片的跳转,要实现批量操作多个图片的跳转时:

<script type="text/javascript">
mui('.mui-content').on('tap', 'img', function() { var pageName = this.getAttribute("pagetarget");
window.location.href = pageName+".html";
});
</script>

  

 

MUI+html5+script 不同页面间转跳(九宫格)的更多相关文章

  1. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

  2. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  3. Android实现不同Active页面间的跳转

    Intent intent = new Intent(); intent.setClass(ErrorPageActive.this, LoginActive.class); startActivit ...

  4. Html学习之一(锚点链接的使用,页面间的跳转)

    页面一: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  5. 【HarmonyOS】【DevEco Studio】NOTE04:How to Jump to a Page(页面间的跳转)

    页面创建与基本设置 创建页面 创建两个新页面,分别为AbilityPage1.AbilityPage2 设置页面基本内容 以AbilityPage1为例 导包 import com.example.m ...

  6. android开发 单击按钮 实现页面间的跳转

    我的MainActivity.java部分代码 public class MainActivity extends ActionBarActivity { //不要定义button类型,会出错 Vie ...

  7. MUI框架-02-注意事项-适用场景-实现页面间传值

    MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...

  8. Metro 页面间跳转报错、打包和安装一个本地的Metro类型应用

    1.模板页面间传值跳转报错误 参照:http://www.cnblogs.com/dagehaoshuang/archive/2012/08/31/2665166.html#2862480 强烈推荐, ...

  9. ionic页面间跳转的动画实现

    1. 在<ion-view>标签中加入: nav-direction="back"或nav-direction="forward" 2.用$stat ...

随机推荐

  1. vue+koa2即时聊天,实时推送比特币价格,爬取电影网站

    技术栈 vue+vuex+vue-router+socket.io+koa2+mongodb+pm2自动化部署+图灵机器人+[npm script打包,cdn同步,服务器上传一个命令全搞定] 功能清单 ...

  2. 在Nginx或Tengine服务器上安装证书

    阿里云SSL证书服务支持下载证书并安装到Nginx.Tengine服务器上,本文介绍了证书安装的具体操作. 前提条件 已准备远程登录工具,例如PuTTY或者Xshell. 背景信息 本文档以CentO ...

  3. C# 一个基于.NET Core3.1的开源项目帮你彻底搞懂WPF框架Prism

    --概述 这个项目演示了如何在WPF中使用各种Prism功能的示例.如果您刚刚开始使用Prism,建议您从第一个示例开始,按顺序从列表中开始.每个示例都基于前一个示例的概念. 此项目平台框架:.NET ...

  4. 【图像处理】Golang 获取JPG图像的宽高

    一.背景 有些业务需要判断图片的宽高,来做一些图片相关缩放,旋转等基础操作. 但是图片缩放,旋转,拼接等操作需要将图片从 JPG 格式转成 RGBA 格式操作,操作完毕后,再转回 JPG 图片. 那如 ...

  5. Python数据展示 - 生成表格图片

    前言 前一篇文章介绍了推送信息到企业微信群里,其中一个项目推送的信息是使用Python自动生成的表格,本文来讲讲如何用Python生成表格图片. 选一个合适库 Python最大的优点就是第三方库丰富, ...

  6. unity 编辑器扩展简单入门

    unity 编辑器扩展简单入门 通过使用编辑器扩展,我们可以对一些机械的操作实现自动化,而不用使用额外的环境,将工具与开发环境融为一体:并且,编辑器扩展也提供GUI库,来实现可视化操作:编辑器扩展甚至 ...

  7. golang内存对齐分析(转载)

    问题 type Part1 struct { a bool b int32 c int8 d int64 e byte } 在开始之前,希望你计算一下 Part1 共占用的大小是多少呢? func m ...

  8. Go汇编语法和MatrixOne使用介绍

    目录 MatrixOne数据库是什么? Go汇编介绍 为什么使用Go汇编? 为什么不用CGO? Go汇编语法特点 操作数顺序 寄存器宽度标识 函数调用约定 对写Go汇编代码有帮助的工具 avo tex ...

  9. 数据结构篇(3)ts 实现双向链表

    如今终于到了双向链表了,此前在Node结构中的prev指针终于派上了用场.由于双向链表多了一个前向指针,所以有些操作和单向链表比较起来反而更加的简单. class DbList extends Cir ...

  10. CAS如何解决ABA问题

    点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. CAS如何解决ABA问题 什么是ABA:在CAS过程中,线程1.线程2分 ...