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 ...
随机推荐
- 小程序踩坑记录-上传图片及canvas裁剪图片后上传至服务器
最近在写微信小程序的上传图片功能,趟过了一些坑记录一下. 想要满足的需求是,从手机端上传图片至服务器,为了避免图片过大影响传输效率,需要把图片裁剪至适当大小后再传输 主要思路是,通过wx.choose ...
- 小程序入门系列之 tabBar
本系列为简单入门系列,以一定概括性思路来叙述内容,具体可以查看官网 大部分的电商应用都是底部或顶部多 tab 的模式. 下面我们从配置角度来分析一下: 第一个:position 配置如下: 默认是 b ...
- 设计一个基于svg的涂鸦组件(一)
基于svg写了一个涂鸦组件,说项目之前先附上几张效果图: 项目地址:SVGraffiti 由于篇幅问题,本文先总体介绍一下项目的大概情况,重点介绍一下组件间的通信方式. 一.项目说明 该项目是基于we ...
- python根据日期判断星期几(超简洁)
代码: from datetime import datetime def getWeek(week): print(date + "是星期" + str(week + 1)) d ...
- 将base64转成File文件对象
function dataURLtoFile(dataurl, filename) { //将base64转换为文件 var arr = dataurl.split(','), ...
- 2020极客大挑战Web题
前言 wp是以前写的,整理一下发上来. 不是很全. 2020 极客大挑战 WEB 1.sha1碰撞 题目 图片: 思路 题目说,换一种请求方式.于是换成post.得到一给含有代码的图片 图片: 分析该 ...
- Edu CF 103 Div. 2 (A. K-divisible Sum, B. Inflation贪心),被黑客攻了,,惨掉rank, 思维除法与取余, 不太擅长的类型
2021-01-29 题目链接: Educational Codeforces Round 103 (Rated for Div. 2) 题目 A. K-divisible Sum You are g ...
- MKL与VS2019配置方法
VS2019配置oneAPI并调用MKL库 oneAPI oneAPI是一个跨架构的编程工具,旨在简化跨GPU.CPU.FPGA和AI加速器之间的编程,可以与英特尔自身设备,或其他厂商的芯片配合使用, ...
- HMS Core 6.4.0版本发布公告
支持转化事件回传至华为应用市场商业推广,便捷归因,实时调优: 卸载分析新增卸载前路径分析,深度剖析卸载根因. 查看详情 新增关键帧能力,通过关键帧点可实现图片.文字等位置移动.旋转等动态效果,比如文字 ...
- 3D 沙盒游戏之人物的点击行走移动
前言 在 3D 游戏中,都会有一个主人公.我们可以通过点击游戏中的其他位置,使游戏主人公向点击处移动. 那当我们想要实现一个"点击地面,人物移动到点击处"的功能,需要什么前置条件, ...