移动端框架

安装:

CDN:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

或者:下载文件

页面:

<!-- HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body> <div data-role="page" id="pageone"> //id属性用于唯一标识页面
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div> <div data-role="content">
<p>Welcome!</p>
<a href="#pagetwo" data-rel="dialog">转到页面二</a> //实现两个页面之间的跳转,且pagetwo以对话框形式出现
</div> <div data-role="footer">
<h1>页脚文本</h1>
</div>
</div> <div data-role="page" id="pagetwo">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div> <div data-role="content">
<p>Goodbye!</p>
<a href="#pageone">转到页面一</a> //实现两个页面之间的跳转
</div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>

过渡:

<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
data-transition:过渡方式
过渡 描述
fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面,引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。
data-direction:过渡方向

按钮:

jQuery Mobile 中的按钮可通过三种方法创建:

  • 使用 <button> 元素(表单提交)
  • 使用 <input> 元素(表单提交)
  • 使用 data-role="button" 的 <a> 元素(页面间的链接)
  • <a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>
    <!-- data-inline="true" 按钮适应其他内容,不再独占一行-->
<div data-role="controlgroup" data-type="horizontal">
<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> <!--
data-role="controlgroup" 按钮组
data-type="horizontal" 排列方向,或vertical
-->

后退按钮:

<a href="#" data-role="button" data-rel="back">返回</a>
<!-- 会忽略href的值 -->

更多用于按钮的 data-* 属性

属性 描述
data-corners true | false 规定按钮是否有圆角。
data-mini true | false 规定是否是小型按钮。
data-shadow true | false 规定按钮是否有阴影。
按钮图标:
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
属性值 描述
data-icon="arrow-l" 左箭头
data-icon="arrow-r" 右箭头
data-icon="delete" 删除
data-icon="info" 信息
data-icon="home" 首页
data-icon="back" 返回
data-icon="search" 搜索
data-icon="grid" 网格
定位图标:
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>

只显示图标:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
<!-- data-iconpos="notext" -->

定位页眉和页脚

放置页眉和页脚的方式有三种:

  • Inline - 默认。页眉和页脚与页面内容位于行内。
  • Fixed - 页面和页脚会留在页面顶部和底部。
  • Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部,but also over the page content. It is also slightly see-through

<div data-role="header" data-position="inline"></div>   <!-- 行内-->
<div data-role="footer" data-position="inline"></div> <div data-role="header" data-position="fixed"></div> 固定
<div data-role="footer" data-position="fixed"></div> <div data-role="header" data-position="fixed" data-fullscreen="true"></div> 全屏,点击可使工具栏消失,适合播放器或者阅读器
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

导航栏:

<div data-role="header">
<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>
</div>
<!-- 其中的链接自动转换为按钮 -->

可折叠内容块:

<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>
<!-- 折叠标题 只能用h1~h6标题元素 -->

可折叠内容块集合-手风琴:

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

网格:

类名控制

网格类 列宽度 对应
ui-grid-a 2 50% / 50% ui-block-a|b
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e

 主题:

data-theme,取值为a,b,c,d,e;对应五种不同的主题,可以自己搭配使用

												

Jquery Mobile基本元素的更多相关文章

  1. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  2. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  3. jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/35258199 学习jQuery Mob ...

  4. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  5. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  6. jquery mobile 问问多多

    jquery mobile  问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了

  7. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  8. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  9. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

随机推荐

  1. Delphi窗体之间互相调用的简单问题

    问题是这样的,我的程序主窗口Form1上面有一个数据连接(ADOCONNECTION1)和ADOQUERY,然后还有一些数据感知组件用于浏览用的,我打算点击From1中的一个“修改数据”按钮,就弹出F ...

  2. Nginx split_client模块

    一般用户AB测试根据比例调用指定的接口  默认编译进nginx Syntax: split_clients string $variable { ... } Default: — Context: h ...

  3. ftell 的使用

    ftell一般用于读取文件的长度,下面补充一个例子,读取文本文件中的内容: #include <stdio.h> #include <stdlib.h> int main() ...

  4. linux-shell系列4-init

    #!/bin/bash # 过滤出MAC地址MAC=`ifconfig |awk '{print $5}'|sed -n '1p;1q'` # 过滤网卡名字NET_NAME=`ifconfig |aw ...

  5. BZOJ1150[CTSC2007]数据备份Backup——模拟费用流+堆+链表

    题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味 的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游 ...

  6. BZOJ2084[Poi2010]Antisymmetry——回文自动机

    题目描述 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一样,就称作“反对称”字符串.比如00001111和010101就是反对称的,1001就不是.现在给出一个长度为N的0 ...

  7. CH2601 电路维修(算竞进阶习题)

    01边bfs 这题很容易想到的就是根据符号的情况建图,把每个点方格的对角线看成图的节点,有线相连就是边权就是0,没有就是1 然后跑最短路,但是最短路用的优先队列维护是有logn的代价的 这题还有一个更 ...

  8. CH2401 送礼物(算竞进阶习题)

    双向dfs 数据不是很大,但是如果直接暴搜的话2^45肯定过不了的.. 所以想到乱搞!!要让程序跑的更快,肯定要减下搜索树的规模,再加上这道题双搜的暗示比较明显(逃),所以就来乱搞+双搜求解 所以先从 ...

  9. C/C++ 程序库

    C/C++ 程序库 // --------------------------------------------- 来几个不常见但是很变态的库吧: bundle: 把几乎所有常见的压缩库封装成了一个 ...

  10. python学习日记(格式化输出,初始编码,运算符)

    格式化输出 顾名思义,按照个人意愿定制想输出的格式. name = input('请输入姓名:') age = int(input('请输入年龄:')) job = input('请输入工作:') h ...