`
ahuadoreen
  • 浏览: 6954 次
社区版块
存档分类
最新评论

jquery mobile中用js代码改变按钮样式的问题

阅读更多
最近用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 css3手机表单页面布局按钮样式

    jQuery Mobile 是一个轻量级的框架,专为触摸设备设计,它提供了一套完整的组件和交互模式,包括表单、页面布局和按钮样式等。CSS3 则是新一代的CSS规范,引入了许多新的功能和样式效果,为网页设计提供了更多可能性...

    jQuery Mobile快速入门源代码

    这个压缩包包含了《jQuery Mobile快速入门》这本书的配套源代码,适合初学者深入理解jQuery Mobile的基础用法和实践操作。 jQuery Mobile 的核心特性包括: 1. **统一的用户界面 (UI) 框架**:jQuery Mobile 提供...

    jQuery单选多选按钮样式美化代码.zip

    在这个"jQuery单选多选按钮样式美化代码.zip"压缩包中,包含了一套利用jQuery实现的单选和多选按钮的美化方案。下面我们将详细探讨这一主题。 首先,`jquery.1.10.2.min.js`是jQuery的核心库文件,版本为1.10.2,这...

    jQuery mobile相册的一种样式

    jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,我们将深入探讨如何利用jQuery Mobile创建一个具有吸引力的相册展示。 首先,jQuery Mobile的核心是其...

    jQueryMobile源代码

    1. `js`目录:包含了所有核心的JavaScript文件,如`jquery.mobile.core.js`(核心功能)、`jquery.mobile.event.js`(事件处理)和`jquery.mobile.widget.js`(组件系统)等。 2. `css`目录:包含样式表文件,如`...

    jQuery Mobile源代码.zip

    《jQuery Mobile 源代码深度解析》 jQuery Mobile 是一个流行的前端框架,专为移动设备设计,用于构建响应式和触控友好的网页应用。它基于 jQuery 和 jQuery UI,提供了丰富的组件、统一的事件处理以及优化的触控...

    android jqueryMobile 类库和实例源代码

    - `js`文件夹下的`jquery.mobile.js`包含了主要的JavaScript代码,可以看到对DOM操作、事件绑定、动画效果的实现。 - `css`文件夹内的`jquery.mobile.css`则是样式定义,包括了各个组件的样式规则,有助于理解UI布局...

    jQuery Mobile教学代码

    jQuery Mobile教学课件及示例代码

    jQuery Mobile 所需要的部署文件

    3. **jQuery Mobile JavaScript**:这是jQuery Mobile的核心库,负责处理触摸事件、页面加载和转换、以及组件的动态化。同样,可以链接到CDN或本地的JS文件。 4. **可能的额外文件**:根据示例的复杂性,可能会有...

    JQueryMobile js/css/1.2版本/1.4版本

    `js`文件包含了JQuery Mobile的JavaScript实现,提供事件处理、动画效果和数据绑定等功能。`css`文件则包含了框架的样式规则,用于定义组件的外观和布局。 JQuery Mobile 1.2 版本是早期的一个稳定版本,可能适合...

    jquery.mobile.js制作活动页面数字随机抽奖代码

    利用jQuery Mobile的样式,我们可以轻松地将其设置为吸引人的样式。例如,我们可以设置背景颜色、字体大小和动画效果,使数字滚动更生动有趣。 接下来,我们需要编写抽奖逻辑。这通常涉及到JavaScript,特别是...

    jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

    jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制

    jQueryMobile-HTML5模板

    3. **可定制的主题系统**:jQuery Mobile提供了一套主题引擎,允许开发者通过简单的CSS修改,轻松改变整个应用的外观和风格。 4. **丰富的组件库**:包括按钮、表单、列表视图、工具栏、滑块、开关、对话框等多种...

    jQuery Mobile实战源码

    在源码中,你会发现`jquery.mobile.js`是主要的JavaScript库,它包含所有jQuery Mobile的功能。这个文件中,jQuery Mobile将DOM元素转换为可触摸的交互元素,并提供了一系列API和方法,如`.page()`用于初始化页面,`...

    jquerymobile设计完整例子

    jQuery Mobile 提供了预定义的样式和布局结构,用于创建美观的登录界面。在这个例子中,我们可以看到如何利用`&lt;form&gt;`元素配合`&lt;input type="text"&gt;`(用户名)和`&lt;input type="password"&gt;`(密码)来创建输入框,...

    jQuery Mobile音乐播放实例源码

    jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码...jQuery Mobile 解决了不同设备兼容的问题,因为它只使用HTML,CSS和 JavaScript,这是所有移动网络浏览器的标准!

    jquerymobile制作的各种漂亮界面源代码

    在jQuery Mobile项目中,`css`子目录存放主题样式,`js`子目录存储jQuery和jQuery Mobile的库文件,`img`子目录则包含图标和其他图形资源。正确引用这些文件,能使界面呈现一致且美观的效果。 总的来说,jQuery ...

    jQueryMobile1.1.0.js

    jQueryMobile jQueryMobile.js jQueryMobile开发

    jquery mobile datepicker 手机端日期选择器

    `jquery.mobile.datebox.min.css`是该插件的样式文件,包含预设的样式规则,确保日期选择器在不同主题下保持一致的视觉效果。开发者可以根据需求调整这些样式,以符合应用的整体风格。 `jquery-1.6.4.min.js`是...

Global site tag (gtag.js) - Google Analytics