`

JQM Toggle switch、selectmenu动态设置默认选中值时没有效果的问题

阅读更多
静态时,ok,没问题,如下:
<label for="swicher" class="ui-hidden-accessible">Notification:</label>
		<select data-track-theme="b" data-theme="c" name="swicher" id="swicher" data-role="slider" data-mini="true" onchange="onNotification(this)">
			<option value="off">Off</option>
			<option value="on" selected>On</option>
		</select>


动态时需要jquery选择:
var storeNotification="on";
$("#swicher option[value='"+storeNotification+"']").attr("selected",true);
如果只写上面这句话时,不会有任何效果,需要加上下面这句:
$('#swicher').slider("refresh");

事实上,很多JQM控件在动态添加或删除时都有这样的问题,需要及时"refresh"。
http://hi.baidu.com/life_to_you/item/bf3621365fa5974b033edcbc

下面是selectmenu的“refresh”
<fieldset data-role="controlgroup" >
			   <select name="month" id="month" data-native-menu="true" data-theme="b">
			        <option value='' disabled selected>Month</option>
			    </select>
			    <select name="day" id="day" data-native-menu="true" data-theme="b">
			     	<option value='' disabled selected>Day</option>
			    </select>
			    <select name="year" id="year" data-native-menu="true" data-theme="b">
			        <option value='' disabled selected>Year</option>
			    </select>
			</fieldset>



	var d = new Date();
	var year=d.getFullYear();
	var month=d.getMonth()+1;
	var day=d.getDate();
//	log(year+"-"+month+"-"+day);
	var days=31;

	$("#change_birthday_page #month").empty();
	$("#change_birthday_page #month").append("<option value='' disabled selected>Month</option>");
	for(var i=1;i<13;i++){
		$("#change_birthday_page #month").append("<option value='"+i+"'>"+i+"</option>");
	}
	$("#change_birthday_page #day").empty();
	$("#change_birthday_page #day").append("<option value='' disabled selected>Day</option>");
	for(var i=1;i<days+1;i++){
		$("#change_birthday_page #day").append("<option value='"+i+"'>"+i+"</option>");
	}
	$("#change_birthday_page #year").empty();
	$("#change_birthday_page #year").append("<option value='' disabled selected>Year</option>");
	for(var i=1970;i<year;i++){
		$("#change_birthday_page #year").append("<option value='"+i+"'>"+i+"</option>");
	}
	
	$("#change_birthday_page #month").selectmenu( "refresh" );
	$("#change_birthday_page #day").selectmenu( "refresh" );
	$("#change_birthday_page #year").selectmenu( "refresh" );



navbar动态生成不刷新?
http://blog.csdn.net/danielinbiti/article/details/27333311
分享到:
评论

相关推荐

    jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

    在jqm中,可以通过设置`data-type="file"`属性来创建一个文件选择输入框。同时,为了处理文件上传,你需要使用JavaScript或jQuery来监听`change`事件,获取到用户选择的文件,并通过Ajax发送到服务器。 2. **上传...

    jqm中文时间控件

    此外,控件可能还提供了自定义配置选项,如改变时间格式、设置初始值或限制可选时间范围等功能,以满足不同应用场景的需求。 为了更好地定制和扩展这个控件,开发者可以查阅插件的文档,了解如何调用其API方法,如...

    jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo

    jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo jqm模仿iPhone jqmDemo jqm例子 jqm实战开发 jqm选项卡 使用jqm实现iPhone桌面功能,jQuery Mobile实现选项卡功能

    jqm开发的音乐播放器

    3. **动画效果**:jqMobi 提供了一些基本的动画效果,如淡入淡出、滑动等,可以轻松实现页面元素的动态展示。 4. **异步请求**:`$.ajax()` 方法支持 JSONP、GET、POST 等多种方式的异步数据请求,这对于音乐播放器...

    JQM实战源码

    3. **增强策略**:默认情况下,jQuery Mobile 在页面加载后会自动增强HTML元素,添加触控事件和视觉效果。可以通过`data-enhance="false"`阻止特定元素的增强。 **二、jQuery Mobile的组件** 1. **导航条(Navbar...

    jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    jqm+ phonegap编写的联系人

    本项目利用jqm的UI框架和PhoneGap的混合应用特性,构建了一个简单的联系人管理应用,旨在帮助用户实现对手机联系人的动态读取、添加和删除功能。虽然修改联系人功能尚未实现,但这个实例已经足以展示如何整合这两项...

    sample101:示例 jqm 模板

    2. **结构化页面**:按照 jqm 的要求,设置页面的基本结构,包括 `&lt;div data-role="page"&gt;`、`&lt;div data-role="header"&gt;`、`&lt;div data-role="content"&gt;` 和 `&lt;div data-role="footer"&gt;`。 3. **添加组件**:利用 jqm...

    jqm-demo.rar

    http://blog.csdn.net/chelen_jak/article/details/19397569 源码

    24时区APK+源码, android+JQM

    标题 "24时区APK+源码, android+JQM" 提供了一个关于Android应用程序开发的项目,其中结合了Java和jQuery Mobile(JQM)技术。这个项目旨在帮助初学者理解如何在Android平台上利用HTML来构建用户界面,并且通过JQM...

    jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全

    事实上,当 JQM 致力于统一和优化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多么大的发展。 与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;...

    jqm带参数跳转

    `jqm带参数跳转`这个主题,涉及到的关键知识点包括:页面结构、页面链接、`data-url`属性、`data-rel`属性以及使用`data-transition`控制过渡效果。 首先,jQuery Mobile 使用一个单一 HTML 文件来构建多个“页面”...

    JQM1.4.5-DEMOS:JQM 移动演示 1.4.5

    **JQM1.4.5-DEMOS: JQM 移动演示 1.4.5** 这个资源是关于jQuery Mobile(简称JQM)1.4.5版本的一个演示集合,它是一个强大的JavaScript库,专为创建响应式、触摸友好的移动Web应用程序而设计。JQM基于HTML5和CSS3,...

    jqm chart 图表

    jqm charts提供了丰富的自定义选项,包括颜色、标签、动画效果等。同时,图表支持触摸事件,如点击、滑动等,使得用户可以直接与数据交互。例如,可以添加点击事件监听器来显示详细信息或执行其他操作。 **6. 性能...

    websocket+jqm

    WebSocket 和 jQuery Mobile(jqm)是两种在现代Web开发中常用的技术。WebSocket提供了一种双向通信协议,使得浏览器和服务器可以进行实时、低延迟的数据交换,而jQuery Mobile(jqm)则是一个轻量级的移动设备框架...

    jqm4gwt-standalone-1.3.5.zip

    【jqm4gwt-standalone-1.3.5.zip】是一个开源项目的压缩包,主要结合了jqm4gwt库与jQuery Mobile的所有依赖项,适用于GWT(Google Web Toolkit)开发。这个版本是1.3.5,意味着它是经过多次迭代和优化后的稳定版本。...

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf

    Employee Directory JQM

    《员工目录JQM:利用JQuery Mobile与数据库交互构建用户界面》 在现代Web开发中,JQuery Mobile是一个强大的框架,用于创建响应式、触控优化的移动应用程序。本项目"Employee Directory JQM"就是利用这个框架的一个...

    jQM:jQM文档的免费社区应用程序的源代码-app source code community

    标题"jQM:jQM文档的免费社区应用程序的源代码-app source code community"表明这是一个关于jQM(jQuery Mobile)的项目,它是一个免费的社区应用程序的源代码。jQM是一个用于构建响应式移动Web应用的前端框架,主要...

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片[汇编].pdf

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片[汇编].pdf

Global site tag (gtag.js) - Google Analytics