jquery-mobile 学习笔记之二（表单创建）

标签：jquery-mobile   w3c   表单   

绪上

一、注意事项

二、各种属性的使用

【文本框】

<div data-role="fieldcontain">
    <label for="lname">姓：</label>
    <input type="text" name="lname" id="lname">
    <label for="fname">名：</label>
    <input type="text" name="fname" id="fname">
</div>

【搜索框】

<div data-role="fieldcontain">
  <label for="search">Search:</label>
  <input type="search" name="search" id="search">
<div data-role="fieldcontain">

【单选框】

<fieldset data-role="controlgroup">
      <legend>请选择您的性别：</legend>
        <label for="male">男性</label>
        <input type="radio" name="gender" id="male" value="male">
        <label for="female">女性</label>
        <input type="radio" name="gender" id="female" value="female">	
</fieldset>

【复选框】

<fieldset data-role="controlgroup">
        <legend>请选择您喜爱的颜色：</legend>
          <label for="red">红色</label>
          <input type="checkbox" name="favcolor" id="red" value="red">
          <label for="green">绿色</label>
          <input type="checkbox" name="favcolor" id="green" value="green">
          <label for="blue">蓝色</label>
          <input type="checkbox" name="favcolor" id="blue" value="blue">	
</fieldset>

【选择菜单】

<fieldset data-role="fieldcontain">
    <label for="day">选择日期</label>
    <select name="day" id="day">
      <option value="mon">星期一</option>
      <option value="tue">星期二</option>
      <option value="wed">星期三</option>
    </select>
  </fieldset>

<fieldset data-role="fieldcontain">
        <label for="day">选择天</label>
        <select name="day" id="day" data-native-menu="false">
         <option value="mon">星期一</option>
         <option value="tue">星期二</option>
         <option value="wed">星期三</option>
         <option value="thu">星期四</option>
         <option value="fri">星期五</option>
         <option value="sat">星期六</option>
         <option value="sun">星期日</option>
        </select>
      </fieldset>

【多选菜单】

<fieldset>
   <label for="day">您可以选择多天：</label>
   <select name="day" id="day" multiple="multiple" data-native-menu="false">
	<option>天</option>
	<option value="mon">星期一</option>
	<option value="tue">星期二</option>
	<option value="wed">星期三</option>
	<option value="thu">星期四</option>
	<option value="fri">星期五</option>
	<option value="sat">星期六</option>
	<option value="sun">星期日</option>
   </select>
   </fieldset>

【滑动条】

<div data-role="fieldcontain">
    <label for="points">Points:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100">
  </div>

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

【翻转切换开关】

<div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off">Off</option>
    </select>
</div>

【主题样式】

【添加新样式】

/*为工具条添加样式*/
改变背景色 需要改俩个地方：background 和 background-image

.ui-bar-f{border:1px solid #333;
          background:#f00;
	  color:#fff;font-weight:700;
	  text-shadow:0 -1px 0 #000;
	  background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#111));
	  background-image:-webkit-linear-gradient(#3c3c3c,#111);
	  background-image:-moz-linear-gradient(#3c3c3c,#111);
	  background-image:-ms-linear-gradient(#3c3c3c,#111);
	  background-image:-o-linear-gradient(#3c3c3c,#111);
	  background-image:linear-gradient(#3c3c3c,#111)
}

.ui-bar-f,.ui-bar-f input,.ui-bar-f select,.ui-bar-f textarea,.ui-bar-f button{font-family:Helvetica,Arial,sans-serif}
.ui-bar-f .ui-link-inherit{color:#fff}
.ui-bar-f a.ui-link{color:#7cc4e7;font-weight:700}
.ui-bar-f a.ui-link:visited{color:#2489ce}
.ui-bar-f a.ui-link:hover{color:#2489ce}
.ui-bar-f a.ui-link:active{color:#2489ce}

/*为内容添加样式*/
.ui-body-f{font-weight:bold;color:purple;}

.ui-body-f,.ui-overlay-f{border:1px solid #444;
       background:#222;color:#fff;
       text-shadow:0 1px 0 #111;
       font-weight:400;
       background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#222));
       background-image:-webkit-linear-gradient(#444,#222);
       background-image:-moz-linear-gradient(#444,#222);
       background-image:-ms-linear-gradient(#444,#222);
       background-image:-o-linear-gradient(#444,#222);
       background-image:linear-gradient(#444,#222)
}
.ui-overlay-f{background-image:none;border-width:0}
.ui-body-f,.ui-body-f input,.ui-body-f select,.ui-body-f textarea,.ui-body-f button{font-family:Helvetica,Arial,sans-serif}
.ui-body-f .ui-link-inherit{color:#fff}
.ui-body-f .ui-link{color:#2489ce;font-weight:700}
.ui-body-f .ui-link:visited{color:#2489ce}
.ui-body-f .ui-link:hover{color:#2489ce}
.ui-body-f .ui-link:active{color:#2489ce}

jquery-mobile 学习笔记之二（表单创建）

标签：jquery-mobile   w3c   表单   

原文地址：http://blog.csdn.net/wujiangwei567/article/details/47031221