mui如何去掉屏蔽的mui下拉刷新 onclickk location等方法

来源：蜘蛛抓取(WebSpider) 时间：2016-10-29 04:43 标签： mui下拉刷新 onclick
移动前端框架mui开发注意事项
mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问
关于mui页面的dom，你需要知道如下规则。
固定栏靠前
所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具
条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之
前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；
### 一切内容都要包裹在mui-content中
除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：
.mui-bar-nav&~&.mui-content&{&&
&&&&padding-top:&44px;&&
.mui-bar-footer&~&.mui-content&{&&
&&&&padding-bottom:&44px;&&
.mui-bar-tab&~&.mui-content&{&&
&&&&padding-bottom:&50px;&&
你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。
始终为button按钮添加type属性
若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。
页面初始化：必须执行mui.init方法
mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；
页面跳转：抛弃href跳转
当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验
障碍；为解决这个问题，建议使用[mui.openWindow方法](http://dcloudio.github.io/mui
/javascript/#openwindow)打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页
面；扩展阅读：
页面关闭：勿重复监听backbutton
mui框架自动封装了逻
辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过
addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行
逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。
点击：忘记click
快速响应是mobile
App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延
迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，
统统使用如下代码：
[javascript]
element.addEventListener('tap',function(){&&
&&&&&&&&//点击响应逻辑&&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。【已解决】请教如何用button的onclick=window.location.href把函数返回值作为参数传递
【已解决】请教如何用button的onclick=window.location.href把函数返回值作为参数传递
昵称: zyiyeshu &时间:
昵称: 浮石 &时间:
昵称: zyiyeshu &时间:
昵称: FFFXXX &时间:
昵称: jiaxueq &时间:MUI移动端页面跳转
MUI移动端页面跳转
今天整理MUI移动端页面跳转的几种方法和遇到的不同的坑
先上设置button、label和a标签的代码：
&button type=&button& class=&mui-btn& onclick=&jumpToDetailView()&id=&jumpToDetail&&查看企业详情&/button&
&div class=&div&&
&label class=&test& id=&test&&this is a test label&/label&
&a class=&atest& id=&at&&this is a test&/a&
跳转方法一：button类型使用onclick='',函数跳转
function jumpToDetailView(){
alert('123');
mui.openWindow({
url:'details/detail.html',
id:'detail.html'
这种方法貌似只对button有效，在验证函数时，alert验证有效且不影响函数
跳转方法二：添加监听事件跳转
document.getElementById('at').addEventListener('tap',function(){
//alert('test a');
mui.openWindow({
url:'details/detail.html',
id:'detail.html'
添加监听事件对所有跳转都有效，但是在验证的过程中，使用了alert以后发现弹出框不显示且跳转不起作用，不知道具体什么原因，等以后找到原因再补充。
跳转方法三：使用.on形式跳转
基于官网（）上的描述“除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定”。
参考样例：
mui(&.mui-table-view&).on('tap','.mui-table-view-cell',function(){ //获取id var id = this.getAttribute(&id&); //传值给详情页面，通知加载新数据 mui.fire(detail,'getDetail',{id:id}); //打开新闻详情 mui.openWindow({ id:'detail', url:'detail.html' });})
以下是本宝宝的一些失败的例子，希望好心人士看到能指出问题所在。不过我也不会放弃的，如果找到了正确方法我会及时更新的。在这里先自我检讨一下。
//label使用.on形式跳转
// mui('.test').on('tap',function(e){
// //alert('test label');
// mui.openWindow({
// url:'details/detail.html',
// id:'detail.html'
// mui('#test').on('tap',function(e){
// //alert('test label');
// mui.openWindow({
// url:'details/detail.html',
// id:'detail.html'
//a标签使用.on形式跳转
// mui('.atest').on('tap','a',function(e){
// //alert('test a');
// mui.openWindow({
// url:'details/detail.html',
// id:'detail.html'
我的热门文章
即使是一小步也想与你分享web前端开发（35）
转自：http://blog.csdn.net/sweblish/article/details/6308468
location.href不跳转的解决办法
相信很多人通过链接的onclick事件做跳转操作时，出现location.href不跳转的问题，下面对onclick事件中location.href的几种测试，来解决这个location.href不跳转的问题。
&script type=&text/javascript&&&&&
function ToUrl(x)&&&
&&&&& location.href=x;&&&
&/script&&&&
&a href=&javascript:;& onclick=&javascript:ToUrl('');&&
location.href不跳转测试1&/a&&&&
&a href=&javascript:void(0);&
&onclick=&javascript:ToUrl('');&&
location.href不跳转测试2&/a&&&&
&a href=&javascript:void(0);&
&onclick=&javascript:ToUrl('');&&
location.href不跳转测试3&/a&&&&
&a href=&#& onclick=&javascript:ToUrl('');&&
location.href不跳转测试4&/a&&&&
&a href=&###& onclick=&javascript:ToUrl('');&&
location.href不跳转测试5&/a&&&
测试之后相信大多数人出现location.href不跳转的问题都在测试1和测试2下，测试3，4，5三种方法均成功跳转！问题解决！
小提示：测试4点击后会回到页面顶部，所以请选择测试3，5两种方法！
ps:这是转发的文章。from ：/BLOG/cj/1039.html
版权声明：本文为博主原创文章，未经博主允许不得转载。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：256364次
积分：4037
积分：4037
排名：第5724名
原创：108篇
转载：265篇
评论：29条
(1)(5)(9)(10)(13)(23)(11)(21)(24)(18)(32)(12)(23)(30)(44)(35)(62)(4)

我要回帖

更多关于 mui下拉刷新 onclick 的文章

 

随机推荐