你的位置:首页 > Java教程

[Java教程]jquery mobile 移动web


轻量级框架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"