最近用jquery mobile做一个应用,其中设计了一个左右各一个按钮的按钮组,然后想在代码里面写成在一定条件下将按钮设为disable,否则设为enable。
我在html中是这样写的
<div data-role="controlgroup" id="group" data-type="horizontal" style="text-align: center;">
<a href="javascript:goHome()" data-role="button" data-icon="home"
data-theme="a" id="homeBtn" class="ui-disabled">Home</a>
<a href="javascript:goBack()" data-role="button" data-icon="back"
data-theme="a" id="backBtn" class="ui-disabled">Back</a>
</div>
在javascript中是这样写的
if(currentPath == 'file:///sdcard'){
$("#homeBtn").attr("class", "ui-disabled");
$("#backBtn").attr("class", "ui-disabled");
}else{
$("#homeBtn").removeAttr("class");
$("#backBtn").removeAttr("class");
}
这样写本身应该没问题,可是实际运行却不行,后来我看了
http://www.wglong.com/main/artical!details?id=4这篇博客,里面提到了jquery mobile各类组件在改变值后要刷新,然后想到之前用的listview和select这两个控件刷新的问题,觉得应该也是要刷新一下。我又加了按钮的刷新:
if(currentPath == 'file:///sdcard'){
$("#homeBtn").attr("class", "ui-disabled");
$("#backBtn").attr("class", "ui-disabled");
}else{
$("#homeBtn").removeAttr("class");
$("#backBtn").removeAttr("class");
}
$("#homeBtn").buttonMarkup( "refresh" );
$("#backBtn").buttonMarkup( "refresh" );
这样之后,按钮确实按我设定的条件显示disable或enable了,但是原本左右并排的两个按钮变为了上下并排,后来又想到是要把controlgroup也刷新一下,加上
$("#group").controlgroup("refresh");
接着我又发现还有一个问题,那就是按钮原本的圆角没了,都变成了直角,我百度后搜到了这篇文章
http://www.itlead.com.cn/article/html/148/2012-02-01/content-7679.shtml给了我启发。我查过jquery mobile的源码后发现有ui-btn-corner-all这个class,所以又把代码改成
if(currentPath == 'file:///sdcard'){
$("#homeBtn").attr("class", "ui-disabled");
$("#backBtn").attr("class", "ui-disabled");
}else{
$("#homeBtn").removeAttr("class");
$("#backBtn").removeAttr("class");
}
$("#homeBtn").buttonMarkup( "refresh" );
$("#homeBtn").addClass("ui-btn-corner-all");
$("#backBtn").buttonMarkup( "refresh" );
$("#backBtn").addClass("ui-btn-corner-all");
$("#group").controlgroup("refresh");
我感觉jquery mobile的官方api还是写的太简单,尤其是方法和事件部分,而且移动web框架的应用还不是很广泛,网上能查到的很少,所以才让我解决这么个小问题都费了这么大番周折。
分享到:
相关推荐
jQuery mobile相册的一种样式
jQuery单选多选按钮样式美化代码jquery.1.10.2.min.js,有删除功能,按钮类型有圆心、圆钩、方心、方钩。
jQuery Mobile教学课件及示例代码
《jQuery Mobile快速入门》源代码,内含各个章节源代码
jQuery mobile表单样式,比较复杂的应用
jQueryMobile源代码
Jquery Mobile中的按钮,学习Jquery Mobile中的简单Jquery Mobile
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制
《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf《响应式网页开发实战》...
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码...jQuery Mobile 解决了不同设备兼容的问题,因为它只使用HTML,CSS和 JavaScript,这是所有移动网络浏览器的标准!
jQueryMobile jQueryMobile.js jQueryMobile开发
原书名:jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社: Addison-Wesley Professional 作者: (荷)Adriaan de Jonge (美)Phil Dutson 译者: 包勇明 程学彬 出版社:人民邮电出版社 ...
html5 开发 jquery.mobile.theme-1.4.5.min.css 样式表
jQuery Mobile源代码
3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。 4.通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容...
jquery.mobile-1.4.5 jquery.mobile-1.4.5 jquery.mobile-1.4.5
jQuery mobile多种样式的导航
jquery mobile 1.4.5.js
本文实例讲述了jQuery实现的点击按钮改变样式功能。分享给大家供大家参考,具体如下: 1. css代码:index4.css @CHARSET "UTF-8"; .sd{ font-weight: bold; color: black; background: red; } 2. jsp代码:...
jquery.icheck.js复选框样式和单选按钮样式代码