轻量级框架jQuery Mobile
  所需文件
    <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mobile-1.1.2.css"/>
    <script type="text/javascript" src="jquery.mobile-1.1.2/jquery-1.6.4.js"></script> jquery 应放在 mobile 上面。
    <script type="text/javascript" src="jquery.mobile-1.1.2/jquery.mobile-1.1.2.js"></script>
  dataset自定义属性,要求前缀必须带有“data-”字符,“data-”后面允许使用任何值,它允许开发人员将这类属性添加到HTML标签中,
  充当元素的私有数据存储区域,不允许元素的原有功能,也不会影响布局。
jQuery Mobile 使用的自定义属性。
  1.data-role
    定义元素在页面中的功能角色,该属性允许定义不同的组件,元素及页面视图。
  2.data-title
    定义jQueru Mobile 视图页面的标题。
  3.data-transition
    定义视图切换的动画效果。
  4.data-rel
    定义具有浮动层效果的视图。
  5.data-theme
    指定元素或组件内的主体样式风格。
  6.data-icon
    在元素内增加一个icon 小图标。
  7.data-iconpos
    定义icon小图标的位置。
  8.data-inline
    指定按钮根据内容自适应其长度。
  9.data-type
    定义分组按钮按水平或垂直方向排列。
  10.data-rel
    定义具有特定功能的元素属性, 例如返回按钮 data-rel="back".
  11.data-add-back-btn
    指定视图页面自动在页眉左侧添加返回按钮。
  12.data-back-btn-text
    指定由试图页面自动创建的返回按钮的文本内容。
  13.data-position
    该属性的作用是实现在滑动屏幕时工具栏的显示或隐藏状态。
  14.data-fullscreen
    用于自定全屏视图页面。
  15.data-native-menu
    指定下拉选择功能采用平台内置的选择器。
  16.data-placeholder
    设置下拉选择功能的占位符。
  17.data-inset
    实现内嵌列表的功能。
  18.data-split-icon
    设置列表右侧的图标。
  19.data-split-theme
    设置列表右侧图片的主题样式风格。
  20.data-filter
    开启列表过滤搜索功能。
  简单配置一个页面
  <section data-role="page">
    <header data-role="header">页头</header>
    <article data-role="content">内容</article>
    <footer data-role="footer">页脚</footer>
  </section>

改变页面标题的视图
  data-title="标题"
  视觉切换动画。 data-transition="slide" slide 左右切换 slideup 从下到上 slidedown 从上到下 pop 以弹出的 fade 渐变褪色 flip 翻转飞出。
  <section data-role="page" id="firstView">
    <header data-role="header">第1个视图</header>
    <article data-role="content"><a href="#secondView" data-transition="flip">切换第2个视图</a></article>
    <footer data-role="footer">页脚</footer>
  </section>
  <section data-role="page" id="secondView">
    <header data-role="header">第2个视图</header>
    <article data-role="content"><a href="#firstView" data-transition="flip">切换第1个视图</a></article>
    <footer data-role="footer">页脚</footer>
  </section>

  页面主题:data-theme = "a"

jquery mobile 移动web(1)的更多相关文章

  1. JQuery Mobile移动Web应用开发(1): UI开发工具RID介绍

    工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. ...

  2. 利用JQuery Mobile开发web app

    什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...

  3. jquery mobile 移动web

    轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...

  4. jQuery Mobile 移动 web 应用程序框架

    在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...

  5. jquery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水 ...

  6. jquery mobile 移动web(5)

    有序列表 <div data-role="content"> <ol data-role="listview" data-theme=&quo ...

  7. jquery mobile 移动web(2)

    button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...

  8. jquery mobile 移动web(4)

    下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div ...

  9. jquery mobile 移动web(3)

    可折叠功能块. div 元素的 data-role 属性设置为 collapsible 代码如下: <div data-role="collapsible"> < ...

随机推荐

  1. java面试知识

    Java基础部分 https://www.cnblogs.com/xiaolovewei/p/9571770.html MySQL部分 https://www.cnblogs.com/xiaolove ...

  2. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  3. 如何才能快速入门python3?

    一些朋友自学python过程中,发现书也能看懂,书上的玩具代码也能看懂,但为啥自己不能做习题,不能写代码解决问题,自己不能动手写代码? 原因是初学者没有学会计算思维.解决问题的方法.编程思路. 编程思 ...

  4. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  5. 003Linux常用命令

    文件操作 01  命令 : list----列出目录信息 命令格式: ls [-选项] [目录] 选项 : -a --all 不忽略以"."开头的隐藏文件 : -d --direc ...

  6. Myeclipse中进行JUnit单元测试

    最近学习了在myeclipse中进行单元测试,写点东西总结总结. JUnit单元测试: 测试对象为一个类中的方法. juint不是javase中的部分,所以必须导入jar包,但是myeclipse自带 ...

  7. Android—PopupWindow的简单使用

    PopupWindow 是一个可以显示在当前 Activity 之上的浮动容器,这个Demo要实现的功能是,点击布局中的两个按钮,进而控制PopupWindow的显示与消失,代码中有详细的注释首先看一 ...

  8. CodeMirror教程,CodeMirrorAPI中文信息

    <html> <head>     <link rel="stylesheet" href="codemirror.css"> ...

  9. 【java开发系列】—— JDOM创建、修改、删除、读取XML文件

    有很多中操作XML文件的方法,这里介绍一下JDOM的使用方法和技巧. JDOM下载地址 创建XML文档 XML文件是一种典型的树形文件,每个文档元素都是一个document元素的子节点.而每个子元素都 ...

  10. 关于java文件名字影响系统配置

    测试OAM和OIF单点登录过程中,wlsh.sh中一个命令运行不过.查看一个java文件中有_en标示.修改名称,去掉_en后可以通过.