移动端框架

安装：

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. 
						
  2. (转)经典收藏 50个jQuery Mobile开发技巧集萃
		
    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...
    
		
    3. 
						
  3. jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全
		
    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/35258199 学习jQuery Mob ...
    
		
    4. 
						
  4. jQuery Mobile入门
		
    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
    
		
    5. 
						
  5. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题
		
         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...
    
		
    6. 
						
  6. jquery mobile 问问多多
		
    jquery mobile  问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了
    
		
    7. 
						
  7. jquery.mobile手机网页简要
		
    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
    
		
    8. 
						
  8. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统
		
      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery  ...
    
		
    9. 
						
  9. JQuery mobile中按钮自定义属性的改变
		
    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Yii2后台管理系统常规单据模块最佳实践
			
    后台管理系统的常规单据通常包括数据,页面,功能:其中数据,页面,功能又可以细分如下: 分类  二级分类  主要内容  注意事项  例如 数据 数据库迁移脚本  用于数据表生成及转态回滚 1.是否需要增 ...
    
			
    2. 
						
  2. 一、VScode构建.NET应用程序
			
    一.准备工具 1.安装.NET SDK(软件开发工具包) https://microsoft.com/net/core 2.安装VScode并安装 3.安装VS Code C# extension(即 ...
    
			
    3. 
						
  3. Spring Boot 构建电商基础秒杀项目 (五) 用户注册
			
    SpringBoot构建电商基础秒杀项目 学习笔记 UserService 添加 void register(UserModel userModel) throws BusinessException ...
    
			
    4. 
						
  4. FTP登录不上 显示“找不到元素”
			
    FTP登录不上 显示“找不到元素” 问题描述: 资源管理器登陆不上ftp服务器,ie现在打不开网页(包括普通的网页和ftp)360等其他浏览器可以正常打开网页. 解决方法: 应该是用了代理软件的问题, ...
    
			
    5. 
						
  5. @ControllerAdvice+@ExceptionHandler处理架构异常捕获
			
    1.注解引入 1) @ControllerAdvice - 控制器增强 @Target({ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME)  ...
    
			
    6. 
						
  6. 进入Docker容器的4种方式
			
    进入Docker容器的4种方式 在使用Docker创建了容器之后,大家比较关心的就是如何进入该容器了,其实进入Docker容器有好几多种方式,这里我们就讲一下常用的几种进入Docker容器的方法. 进 ...
    
			
    7. 
						
  7. Django+Xadmin打造在线教育系统(九)
			
    xadmin的进阶开发 因版本问题.有些配置可能无效 自定义icon xadmin的图标采用的是第三方css样式font awesome,我们可以进官网下载最新的样式替代原本的,下载地址:http:/ ...
    
			
    8. 
						
  8. [SP1043] GSS1 - Can you answer these queries I
			
    传送门:>Here< 题意:求区间最大子段和 $N \leq 50000$ 包括多组询问(不需要支持修改) 解题思路 线段树的一道好题 我们可以考虑,如果一组数据全部都是正数,那么问题等同 ...
    
			
    9. 
						
  9. 【BZOJ3992】【SDOI2015】序列统计 原根 NTT
			
    题目大意 有一个集合\(s\),里面的每个数都\(\geq0\)且\(<m\). 问有多少个长度为\(n\)的数列满足这个数列所有数的乘积模\(m\)为\(x\).答案模\(1004535809 ...
    
			
    10. 
						
  10. SPHINX 文档写作工具安装简要指南 - windows 版 - 基于python
			
    此教程基于本地己安装好 PYTHON 并配置过全局变量:一定具备相应的基础再操作: 上传图片以免产生误导,以下为文字描述,按下列操作即可: 下载 get-pip.py脚本; python get-pi ...
    
			
    11.