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

落日映苍穹つ 2022-07-31 15:20 166阅读 0赞

绪上

## 一、注意事项 ##

1. <form> 元素必须设置 method 和 action 属性  
  
  
2. 每个表单元素必须设置唯一的 "id" 属性。  
   该 id 在站点的页面中必须是唯一的。  
   这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。  
  
  
3. 每个表单元素必须有一个标记（label）。  
   请设置 label 的 for 属性来匹配元素的 id。

## 二、各种属性的使用 ##

### 【文本框】 ###

data-role="fieldcontain" 大于480px 自动与label 同到一行

如果不希望使用 jquery-mobile的样式  
data-role="none"

## 【搜索框】 ##

加上data-role="fieldcontain" 一行 不加每个标签一行

<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-type="horizontal"  
  
  
预选某个按钮 可以使用：  
input 的 checked

### 【选择菜单】 ###

普通选择菜单，有点丑

自定义选择菜单  
使用属性：data-native-menu="false"

### 【多选菜单】 ###

需要使用自定义的  
multiple="multiple"   
data-native-menu="false"

<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>

max - 规定允许的最大值  
min - 规定允许的最小值  
step - 规定合法的数字间隔  
value - 规定默认值

<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>

### 【翻转切换开关】 ###

data-role="slider"  
  
  
默认选中可加 selected

<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>

\-----颜色主题------

### 【主题样式】 ###

a默认。黑色背景上的白色文本。  
b蓝色背景上的白色文本 / 灰色背景上的黑色文本  
c亮灰色背景上的黑色文本  
d白色背景上的黑色文本  
e橙色背景上的黑色文本  
  
  
一般情况下 使用上面的颜色 可以直接使用属性  
data-theme="e"  
  
  
如果要改变对话框(遮罩)的背景色  
data-overlay-theme="e" （放在page上）  
  
  
改变可折叠的背景颜色  
data-theme="b" data-content-theme="e" （放在collapsible）  
  
  
主题划分按钮  
data-split-theme="e" （放在 listview）

### 【添加新样式】 ###

/*为工具条添加样式*/
    改变背景色 需要改俩个地方：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}