在用jqm做为html5手机应用开发的时候,也是遇到很多的问题,虽然jqm学习起来上手很快,功能demo也可以,今天就总结一下jqm中遇到的问题,
①日期控件:
jqm的日期小功能是可以直接拿来用,不需要再去找第三方的库来做专门的日期插件,
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<meta>标签中最后的user-scalable="no"是禁止这个html网页缩放,
引入jqm的几个文件之后,就可以做日期插件了
两个做日期插件的api:
http://api.jqueryui.com/datepicker/#entry-examples
https://github.com/arschmitz/jquery-mobile-datepicker-wrapper
②在做单选框radio的选择的时候,需要将一些模块显示,另一些模块隐藏,并且要刷新之前的选中状态
单选
var t1=$('input:radio[name="YDDL"]:checked').val(); //获取单选框的值
<span style="font-size:14px;"> $("input[name='GGG']").change(function(){ //单选框选择改变的时候触发的事件
if($("#GGG_1").prop("checked")){
$("#gmmc").show();
}
else{
$("#gmmc").hide();
$("input[name='otherIlls4']").prop("checked", false).checkboxradio("refresh");
}
})</span>
复选
<pre name="code" class="html"> var text=""; //用循环的方式获取多选框的值,并且用"-"链接起来
$('input[name="otherIlls"]:checked').each(function(){
text += "-"+$(this).val();
});
③disabled不能禁用组件
在有时候需要禁用一些组件来达到我们程序的一些功能,但是在开发过程中会遇到给元素加disabled属性的
时候元素的视图组件并没有被禁用,其中经常遇到的是:这个组件被包含的父布局中,禁用这个组件必须从父元素
着手,
$("input[name='tj_sex']").change(function(){
if($("#male").prop("checked")){
$("#jzs_gja").parent().hide();//用到parent()获取父窗口然后hide()这个元素
$("#jzs_zga").parent().hide();
$("#yjsys").hide();
$("#rfybk").hide();
$("#bdyc").hide();
}else{
$("#jzs_gja").parent().show();
$("#jzs_zga").parent().show();
$("#jzs_lca").parent().show();
}
});
$("input[name='tj_sex']").prop("checked", false).checkboxradio("refresh");
$("input[name='tj_sex']").attr("disabled", true);
$("#age").unbind("touchend");//用unbind("touchend")让这个元素不能触摸达到disabled的作用,当然这些是
用jqm的时候遇到的,jqm里面的元素disabled是用的
$("#id").addClass('ui-disabled'); 取消禁用用
$("#id").removeClass("ui-disabled");