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 进行表单提交
  • 相关阅读:
    Bitmap\Bytes\BitmapImage相互转换
    枚举值为什么使用1,2,4,8,16,32等2的幂方(转)
    获取电脑信息
    操作内存的帮助类
    C#调用DLL(整理)
    [原]java集合类TreeMap和TreeSet
    [原]《面试题精选》08.颠倒句子中单词的顺序
    [原]数据结构与对象的区别
    [原]初步了解Hadoop平台
    [原]《程序员面试题精选》06.查找最小的k个元素
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5596427.html
Copyright © 2011-2022 走看看