jQuery Mobile 表单输入元素

来源:互联网 发布:免费防火墙软件排名 编辑:程序博客网 时间:2024/05/17 07:30

输入字段:是通过标准的HTML元素编写的 jQuery Mobile会为它们设置专门针对移动设备的美观易用的样式,同时还可以使用新的HTML5 <input>类型

               e.g.

               <label  for="inputId">描述</label>

               <input  type="text"  name="inputName"  id="inputId"  placeholder="提示文本" />   // type="date" | type="email"

文本框:<textarea>多行文本输入(会自动扩大,以适应用户输入的文本行)

               e.g.

               <form  method="post"  action="action.asp">

                      <div  data-role="fieldcontain">

                            <label  for="textareaId">textarea:</label>

                            <textarea   name="textareaName"  id="textareaId"  />

                      </div> 

               </form>

搜索框: type="search" (HTML5,提供输入搜索词的文本字段,带有搜索的样式)

             e.g.

             <div  data-role="fieldcontain">

                    <label  for="searchId">search</label>

                    <input  type="search"  name="search"  id="search" />

             </div>

单选按钮:type="radio"     预选中-checked

              用<fieldset   data-role="controlgroup">包装组合,用<legend>定义标题 

              水平分组-data-type="horizontal"   //水平排列

               e.g.               

               <fieldset  data-role="controlgroup"  data-type="horizontal">

                     <legend>单选标题</legend>

                     <label  for="radioId1">radio1</label>

                     <input  type="radio"  name="radioName"  id="radioId1"  value="radioValue1">

                     <label  for="radioId2">radio2</label>

                     <input  type="radio"  name="radioName"  id="radioId2"  value="radioValue2" checked>

              </fieldset>

复选框:type="checkbox"     预选中-checked 

            用<fieldset   data-role="controlgroup">包装组合,用<legend>定义标题

            可用域窗口来包装   

            e.g.  

           <div  data-role="fieldcontain">             

                 <fieldset  data-rold="controlgroup">

                       <legend>复选标题</legend>

                       <label  for="checkboxId1">checkbox1</label>

                      <input  type="checkbox"  name="checkboxName"  id="checkboxId1"  value="checkboxValue1"  checked>

                       <label  for="checkboxId2">checkbox2</label>

                       <input  type="checkbox"  name="checkboxName"  id="checkboxId2"  value="checkboxValue2">

                   </fieldset>

           </div>

0 0