jqm或html5页面在触摸屏中disabled,单选,多选的change()事件

来源:互联网 发布:初一英语点读软件 编辑:程序博客网 时间:2024/06/16 07:22

在用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");


0 0