JS-jquery mobile基础

最新推荐文章于 2015-08-24 18:06:42 发布

Vincent前端路漫漫

最新推荐文章于 2015-08-24 18:06:42 发布

阅读量373

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/u010245110/article/details/46349639

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

链接：

http://api.jquerymobile.com/ API文档

http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp data属性

http://api.jquerymobile.com/data-attribute/

页面元素：

data-role = "page" - 页面

data-role = "header" - 顶部栏

data-role = "content" - 页面内容

data-role = "footer" - 底部栏

通过a链接跳转页面：

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>

页面切换效果：

<a href="#anylink" data-transition="slide">滑动到页面二</a>

切换的类型有：

按钮：

<a href="#pagetwo" data-role="button">转到页面二</a>

<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>

<div data-role="controlgroup" data-type="horizontal | vertical">
  <a href="#anylink" data-role="button">按钮 1</a>
  <a href="#anylink" data-role="button">按钮 2</a>
  <a href="#anylink" data-role="button">按钮 3</a>
</div>

<a href="#" data-role="button" data-rel="back">返回</a>

其他属性：

图标：

<a href="#anylink" data-role="button" data-icon="refresh">Refresh Page</a>

其他图标：

定位页眉和页脚：

<div data-role="header" data-position="inline | fixed"></div>
<div data-role="footer" data-position="inline | fixed"></div>

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

ps: fixed和fullsreen定位用户点击content将隐藏header和footer

导航栏：

<div data-role="navbar">
    <ul>
      <li><a href="#anylink">首页</a></li>
      <li><a href="#anylink">页面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>

ps: 当导航栏超过5个的时候就会变成2个一行，分多列

可折叠内容：

<div data-role="collapsible">
  <h1>点击我 - 我可以折叠！</h1>
  <p>我是可折叠的内容。</p>
</div>

ps:其中需要设置一个H1-H6的元素，作为折叠的按钮

data-collapsed: false - 页面加载时默认打开

折叠内容可以嵌套

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div>
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div>
</div>

ps:其中一个折叠打开其他就关闭

网格：

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

ui-gird-(a | b | c | d) - 2，3，4，5列

里面的定义各列的内容

ui-block-a 第一列，依此类推，可以多行

列表：

<ul data-role="listview">
 <li data-role="list-divider">欧洲</li>
  <li><a href="#">法国</a></li>
  <li><a href="#">德国</a></li>
</ul>

data-role="list-divider" 列表分隔符

data-autodivider="true" 自动根据字母分类

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

筛选的搜索框

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

在list中添加图标的话，会自动放大成80x80

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

在list中添加16x16的小图标

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>

在li中写两个A即可拆分连接按钮

<li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>

显示计数泡沫

表单：

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">姓名：</label>
  <input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

form 必须设置method和action

每个表单元素必须有一个label与之对应，for属性对应元素的id

每个表单元素必须有唯一id

ui-hidden-accessible - 隐藏label

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

当页面大于480px时，label会和input放在同一行

<fieldset 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"> 
  </fieldset>

单选框或者多选框用fieldset来包含，并且legend作为标题

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

可以设置单选框或多选框是水平布局还是垂直布局

下拉选择框：

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

用oprgroup进行分组

<select name="day" id="day" data-native-menu="false">

使用自定义的选择方式而不采用移动设备的选择方式

<select name="day" id="day" multiple data-native-menu="false">

允许多选

滑动条：

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

value - 默认值

min - 最小值

max - 最大值

step - 步长

<input type="range" data-hightlight="true">

高亮已选范围

切换开关：

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