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 ...
随机推荐
- [译] Facebook:我们是如何构建第一个跨平台的 React Native APP
英文原文(需FQ):https://code.facebook.com/posts/1189117404435352/ 早些时候,我们介绍过iOS版的React Native. React Nativ ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- ES6-11学习笔记--解构赋值
解构赋值:按照一定模式,从数组和对象中提取值,对变量进行赋值. 数组解构 对象解构 字符串解构 应用场景 曾经的赋值噩梦,非解构赋值数组: let arr = [1, 2, 3]; let ...
- Python 图_系列之基于邻接炬阵实现广度、深度优先路径搜索算法
图是一种抽象数据结构,本质和树结构是一样的. 图与树相比较,图具有封闭性,可以把树结构看成是图结构的前生.在树结构中,如果把兄弟节点之间或子节点之间横向连接,便构建成一个图. 树适合描述从上向下的一对 ...
- javaweb之修改功能
数据库的修改功能,主要是通过查询,保留之前的数据,得到当前想要修改的页面,并进行修改. 一.dao层 在dao层需要添加两个fangfa,一个查询,一个修改(这是整个dao层,包括之前的增删.浏览) ...
- PAT B1024科学计数法
科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...
- uniapp打包成H5部署到服务器教程
当前端uniapp写的项目开发完成的时候,需要将页面打包出来,生成H5的静态文件,部署在服务器上,通过服务器链接地址,就可以直接在手机上点开访问 了. 在网上看了一圈,好像没有找到十分详细的教程,这里 ...
- javascript,如何实现数据绑定
在三大框架 抢占前端开发技术领域的时代,基本每个框架都是实现了数据绑定, 今天我们来解密一下数据绑定的原理, 原理关乎一个很关键的东西,Object.prototype.__defineSetter和 ...
- FastAPI(六十八)实战开发《在线课程学习系统》接口开发--用户 个人信息接口开发
在之前的文章:FastAPI(六十七)实战开发<在线课程学习系统>接口开发--用户登陆接口开发,今天实战:用户 个人信息接口开发. 在开发个人信息接口的时候,我们要注意了,因为我们不一样的 ...
- 学习Java必用的9个网站,最后一个最好用!
Java语言已经成为IT编程界中一种持久的语言,从主要开放源码网站中统计的每月编程语言排名来看,Java一直位居榜首.因此,我们的程序员不能放弃学习Java呀!今日小编为大家整理了几个关于Java学习 ...