MUI框架a链接href跳转失效解决方法，解决MUI页面不会滚动的方法
//解决 所有a标签 导航不能跳转页面
mui('body').on('tap','a',function(){document.location.href=this.href;});
//解决MUI页面不会滚动的方法
(function($){
$(".mui-scroll-wrapper").scroll({
bounce: false,//滚动条是否有弹力默认是true
indicators: true, //是否显示滚动条,默认是true
});
})(mui);
下面是例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head> <body>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable"> <!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
数学
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
语文
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
英语
</a>
</li>
</ul>
</div>
</div>
</aside>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">知识库</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<!-- 主页面内容容器 -->
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="data:images/4.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="data:images/1.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="data:images/2.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="data:images/3.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="data:images/4.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="data:images/1.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="knowledge.html">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板</a>
<div class="mui-collapse-content">
<p>面板2子内容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板3</a>
<div class="mui-collapse-content">
<p>面板3子内容</p>
</div>
</li>
</ul>
<div class="mui-progressbar">
<span></span>
</div>
<div class="mui-input-row mui-input-range">
<label>Range</label>
<input type="range" min="0" max="100" value="50">
</div>
</div>
</div> <div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script type="text/javascript">
(function($){
$(".mui-scroll-wrapper").scroll({
bounce: false,//滚动条是否有弹力默认是true
indicators: true, //是否显示滚动条,默认是true
});
})(mui);
mui(".mui-progressbar").progressbar({progress:50}).show(); //解决 所有a标签 导航不能跳转页面
mui('body').on('tap','a',function(){document.location.href=this.href;});
</script>
</body>
</html>
MUI框架a链接href跳转失效解决方法，解决MUI页面不会滚动的方法的更多相关文章
- MUI框架-10-MUI 数据交互-跳转详情页面
MUI框架-10-MUI 数据交互-跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现 ...
- 解决MUI阻止a标签默认跳转事件—方法总结
用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...
- MUI框架-01-介绍-创建项目-简单页面
MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问 ...
- mui框架中底部导航的跳转1
mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- 使用mui框架后a标签无法跳转
由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添 ...
- 仅IE6中链接A的href为javascript协议时不能在当前页面跳转
切页面时有时用链接A来替代按钮,这样做有几个好处 鼠标放上时默认有手状效果(不用添加cursor:pointer) 可以添加低版本IE都支持的伪类 如果点击时页面要整体刷新,即跳转,这时IE6则不尽人 ...
- 让超链接点击后不跳转,可以用href = "#"，但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成
让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成 1.<a href="javascri ...
- 跨平台移动端APP开发---简单高效的MUI框架
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...
随机推荐
- [转]Object.keys()和for in的排序问题
原文地址:https://www.jianshu.com/p/a086ff48be6e Object.keys()和for in 具有相同的排列顺序 如果属性名的类型是Number,那么Object. ...
- 稍稍解读下JDK8的HashMap
首先,源码中上来就有一大段注释,但最重要的就是第一句. 大意如下: 本map经常用作一个 binned (bucketed) hash table (下面有解释),但是,当bins很大的时候,它们会被 ...
- 浏览器和服务器 对http请求(post get) url长度限制
1. GET URL长度限制 在Http1.1协议中并没有提出针对URL的长度进行限制,RFC协议里面是这样描述的,HTTP协议并不对URI的长度做任何的限制,服务器端 必须能够处理任何它们所提供服 ...
- 分发系统介绍 expect脚本远程登录 expect脚本远程执行命令 expect脚本传递参数
expect脚本远程登录 yum install -y expect yum install -y tcl tclx tcl-devel 自动远程登录 #! /usr/bin/expect set h ...
- Java Socket 死循环while如何判断客户端断开
多线程的服务器程序 线程中等待客户端的消息 我的代码能实现服务器与客户端的通信 问题是: 当客户端中断或退出 以上代码却不能判断Socket中断 跳不出while的无限循环 解决方法: ...
- Dedecms5.7搜索结果页空白无内容的解决方法
Dedecms5.7搜索结果页空白.没有内容的解决方法 许多网友在修改dedecms5.7版本的搜索功能时搜索空白的解决方法,正解如下: 系统设置—>其他选项—->是否启用文章全文检索功能 ...
- 网络编程 -- RPC实现原理 -- Netty -- 迭代版本V3 -- 编码解码
网络编程 -- RPC实现原理 -- 目录 啦啦啦 V2——Netty -- pipeline.addLast(io.netty.handler.codec.MessageToMessageCodec ...
- 【代码审计】大米CMS_V5.5.3 目录遍历漏洞分析
0x00 环境准备 大米CMS官网:http://www.damicms.com 网站源码版本:大米CMS_V5.5.3试用版(更新时间:2017-04-15) 程序源码下载:http://www ...
- 排序算法--选择排序(Selection Sort)_C#程序实现
排序算法--选择排序(Selection Sort)_C#程序实现 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来 ...
- ffmpeg 视频转ts切片 生成m3u8视频播放列表
近期做视频点播,要求将视频文件切片成ts文件.经搜索得到以下两个命令,可完成这个任务. 一 首先将视频文件转为视频编码h264,音频编码aac格式的mp4文件 1.可以预先使用ffprob ...