zoukankan      html  css  js  c++  java
  • Jquery Mobile表单

    三个前提:

    1、每个form必须设置method和action属性

    2、每个form必须有页面范围内唯一的id标识

    3、每个form必须有一个label标签,通过设置它的for属性来匹配元素的id

    <form method="post" action="demoform.asp">
      <label for="fname">First name:</label>
      <input type="text" name="fname" id="fname">
    </form>

    1、隐藏label内容:

    <form method="post" action="demoform.asp">
      <label for="fname" class="ui-hidden-accessible">姓名:</label>
      <input type="text" name="fname" id="fname" placeholder="姓名...">
    </form>

    2、域容器:

    如果需要 label 和表单元素在宽屏幕上显示正常,用带有 data-role="fieldcontain" 属性的 <div> 或<fieldset>包装 label 或表单元素:

    <form method="post" action="demoform.asp">
      <div data-role="fieldcontain">
        <label for="fname">First name:</label>
        <input type="text" name="fname" id="fname">
        <label for="lname">Last name:</label>
        <input type="text" name="lname" id="lname">
      </div>
    </form>

    fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时,它会自动将 label 与表单控件放置于同一行。当小于 480px 时,label 会被放置于表单元素之上。

    3、单选按钮:

    <form method="post" action="demoform.asp">
      <div data-role="controlgroup">
        <legend>Choose your gender:</legend>
          <label for="male">Male</label>
          <input type="radio" name="gender" id="male" value="male">
          <label for="female">Female</label>
          <input type="radio" name="gender" id="female" value="female"> 
      </div>
    </form>
    <!-- 需要添加label和id -->

    4、表单选择:

    <!-- 分组 -->
    <select name="day" id="day">
       <optgroup label="Weekdays">
        <option value="mon">Monday</option>
        <option value="tue">Tuesday</option>
        <option value="wed">Wednesday</option>
       </optgroup>
       <optgroup label="Weekends">
        <option value="sat">Saturday</option>
        <option value="sun">Sunday</option>
       </optgroup>
    </select>
    <!-- 多选 -->
    <select name="day" id="day" multiple data-native-menu="false">

    5、滑块:

    <form method="post" action="demoform.asp">
      <div data-role="fieldcontain">
        <label for="points">Points:</label>
        <input type="range" data-highlight="true"  name="points" id="points" value="50" min="0" max="100">
      </div>
    </form>

    6、切换开关:

    <form method="post" action="demoform.asp">
      <div data-role="fieldcontain">
        <label for="switch">Toggle Switch:</label>
        <select name="switch" id="switch" data-role="slider">
          <option value="on" selected>On</option>
          <option value="off">Off</option>
        </select>
      </div>
    </form>
    tips:清除JQM自动样式:data-role:none
    
          jQuery Mobile 会自动通过 AJAX 进行表单提交
  • 相关阅读:
    expect简介和使用例子(转)
    openshift网络
    openstack相关
    SDN的开源方案sonic
    OpenStack Neutron ML2 Deep Dive
    2017双11技术揭秘—阿里数据库计算存储分离与离在线混布
    es的gui工具
    django orm中blank和null的区别
    断关联多表关系阐述
    视图使用
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5596427.html
Copyright © 2011-2022 走看看