MUI+html5+script 不同页面间转跳(九宫格)
在点击图片/标题需要跳转到详情页面的使用场景中,首先定义图片元素的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 不同页面间转跳(九宫格)的更多相关文章
- mui框架如何实现页面间传值
mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...
- HTML5 Web存储 页面间进行传值
在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...
- Android实现不同Active页面间的跳转
Intent intent = new Intent(); intent.setClass(ErrorPageActive.this, LoginActive.class); startActivit ...
- Html学习之一(锚点链接的使用,页面间的跳转)
页面一: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- 【HarmonyOS】【DevEco Studio】NOTE04:How to Jump to a Page(页面间的跳转)
页面创建与基本设置 创建页面 创建两个新页面,分别为AbilityPage1.AbilityPage2 设置页面基本内容 以AbilityPage1为例 导包 import com.example.m ...
- android开发 单击按钮 实现页面间的跳转
我的MainActivity.java部分代码 public class MainActivity extends ActionBarActivity { //不要定义button类型,会出错 Vie ...
- MUI框架-02-注意事项-适用场景-实现页面间传值
MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...
- Metro 页面间跳转报错、打包和安装一个本地的Metro类型应用
1.模板页面间传值跳转报错误 参照:http://www.cnblogs.com/dagehaoshuang/archive/2012/08/31/2665166.html#2862480 强烈推荐, ...
- ionic页面间跳转的动画实现
1. 在<ion-view>标签中加入: nav-direction="back"或nav-direction="forward" 2.用$stat ...
随机推荐
- Leetcode1/242/383-HashMap常用方法以及遍历排序方式
HashMap常用方法以及遍历排序方式 常用方法 map.containsKey() map.put() map1.equals(map2) 遍历方式 Iterator<Map.Entry< ...
- TTL 机制排毒,线上k8s的Job已经通过API 增加了Job的TTL 时长,且成功响应,为什么系统还是清理了Job?
TTL 机制排毒,线上k8s的Job已经通过API 增加了Job的TTL 时长,且成功响应,为什么系统还是清理了Job? 面试官:"已完成 Job 的 TTL 机制了解嘛?简单说说TTL存在 ...
- PAT B1091 N-自守数
输入样例: 3 92 5 233 输出样例: 3 25392 1 25 No '解题思路:判断的时候将结果转换成字符串,判断后面几位数字和输入数字是否相同,掉进了N是从1到10的坑,而不是1到9 ...
- 判断H5页面是在小程序的webview环境中,还是在微信环境中,还是不在微信
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascrip ...
- 论文解读(Graph-MLP)《Graph-MLP: Node Classification without Message Passing in Graph》
论文信息 论文标题:Graph-MLP: Node Classification without Message Passing in Graph论文作者:Yang Hu, Haoxuan You, ...
- Ubuntu中hyperledger-fabric2.3.0环境搭建
系统环境 hyperledger-fabric在Ubuntu安装过程,fabric版本为2.3.0 首先安装相关软件 1.安装docker 直接参考下面这篇文档安装好docker-ce即可 Ubunt ...
- Java语言学习day05--7月2日
今日内容介绍1.引用类型变量的创建及使用2.流程控制语句之选择语句 ###01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scanner类是属于引用数据类型,我们先了解下 ...
- Vue 组件实战
目录 Vue 组件 axios实现数据请求 计算属性 案例一:首字母大写 案例二:过滤案例 监听属性 局部组件 全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 普通标签使用 组 ...
- 我发现 Linux 文档写错了
作者:小林coding 图解计算机基础网站:https://xiaolincoding.com 大家好,我是小林. 周末的时候,有位读者疑惑为什么 Linux man 手册中关于 netstat 命令 ...
- C#使用进程调用bash,不断往bash内插入命令并执行
呃呃呃,遇到了一个非常恶心得问题,现在就是,有几十万条数据需要当作参数调用python脚本 一次一次输入命令过去缓慢,经过了多层考虑决定使用进程来解决(不知道线程怎么开启bash得) 原理非常简单,类 ...