源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery-mobile表单的创建方法详解

  • 时间:2020-01-14 06:34 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery-mobile表单的创建方法详解
本文实例讲述了jquery-mobile表单的创建方法。分享给大家供大家参考,具体如下: [b]一、注意事项[/b] 1. <form> 元素必须设置 method 和 action 属性 2. 每个表单元素必须设置唯一的 "id" 属性。 该 id 在站点的页面中必须是唯一的。 这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。 3. 每个表单元素必须有一个标记(label)。 请设置 label 的 for 属性来匹配元素的 id。 [b]二、各种属性的使用[/b] 【文本框】 data-role="fieldcontain" 大于480px 自动与label 同到一行
<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>

如果不希望使用 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 【选择菜单】 普通选择菜单,有点丑
<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>

[b]自定义选择菜单[/b] 使用属性:
data-native-menu="false"
<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>

【多选菜单】 需要使用自定义的
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>

[b]颜色主题[/b] 【主题样式】 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}

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《[url=http://www.1sucai.cn/Special/200.htm]jQuery常用插件及用法总结[/url]》、《[url=http://www.1sucai.cn/Special/451.htm]jQuery扩展技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/514.htm]jQuery切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/628.htm]jQuery遍历算法与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》、《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》及《[url=http://www.1sucai.cn/Special/75.htm]jquery选择器用法总结[/url]》 希望本文所述对大家jQuery程序设计有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部