jQuery Mobile的使用方法

安装:  <link rel="stylesheet" href="下载到本地的文件目录.min.css" media="screen" title="no title">这个是jQuery Mobile库,下载网址:jquerymobile.com

      <script src="./js/jquery-1.12.4.min.js"></script>这个是jQuery的库,下载网址:jquery.com/download

       <script src="./js/jquery.mobile-1.4.5.min.js"></script>这个是jQuery Mobile库,下载网址:jquerymobile.com

 Demo:需要引入meta, 为了使我们的网站适应移动设备屏幕尺寸. 并设置不要让页面缩放, 让他以1:1的比例.

     <meta name="viewport" content="width=device-width,initial-scale=1">

    在body标签内写:

      <div data-role=‘page‘>
            <div data-role="header">……</div>
            <div role="main">……</div>
            <div data-role="footer">……</div>
          </div>

  注意:

  data-role参数表:

   page:页面容器,其内部的mobile元素将会继承这个容器上所设置的属性

   header:页面标题容器,这个容器内部可以包含文字、返回按钮、功能按钮等元素

   footer:页面页脚容器,这个容器内部也可以包含文字、返回按钮、功能按钮等元素

   content:页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素

   controlgroup:将几个元素设置成一组,一般是几个相同的元素类型

   fieldcontain:区域包裹容器,用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔

   navbar:功能导航容器,通俗的讲就是工具条

   listview:列表展示容器,类似手机中联系人列表的展示方式

   list-divider:列表展示容器的表头,用来展示一组列表的标题,内部不可包含链接

   button:按钮,将链接和普通按钮的样式设置成为jQueryMobile的风格

   none:阻止框架对元素进行渲染,使元素以html原生的状态显示,主要用于form元素。

 显示顶部和底部:在顶部和底部分别加入下面的属性, 就可以让跟着页面跑的顶部和底部固定下来.

    data-position="fixed"

 页,主题及布局

  页面切换: 当我们页面进行跳转的时候, 需要加上动画效果, 下面就会jQeruy mobile提交的效果.

   data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

  这里面fade代表的是淡入淡出;filp是翻转的意思;pop是从中心渐显展开;slide是从右侧向左滑入页面;slideup是从底部向上滑入;slidedown是从上向下滑入;

  对话框:如果需要使用对话框属性, 可能在链接中增加下面属性就能将页面变成对话框.

      data-rel="dialog"

  button按钮的添加:使用data-role=“button”,或者利用函数:$(选择器).button();

      参考代码:(三种方法)

       <button type="button" name="button">按钮</button>

          <input type="button" value="按钮">

        <a href="链接地址" data-role="button">按钮</a>

      有时候,你想把一组按钮放进一个单独的容器内,使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内,然后给该容器添加 data-role=“controlgroup” 属性.

        <div data-role="controlgroup">

         <a href="链接地址" data-role="button">Yes</a>

         <a href="链接地址" data-role="button">No</a>

         <a href="链接地址" data-role="button">Maybe</a>

         </div>

       默认情况下,组按钮表现为垂直列表,如果给容器添加 data-type=“horizontal” 的属性,则可以转换为水平按钮的列表,按钮会横向一个挨着一个地水平排列,并设置只有足够大以适应内容的宽度.

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

         <a href="链接地址" data-role="button">Yes</a>

         <a href="链接地址" data-role="button">No</a>

         <a href="链接地址" data-role="button">Maybe</a>

         </div>

时间: 2024-10-10 13:41:11

jQuery Mobile的使用方法的相关文章

jQuery Mobile中$.mobile.buttonMarkup方法使用具体解释

近期在群里遇到多数网友提到$.mobile.buttonMarkup()方法的使用. 我这里就列了一下api的使用说明,以后大家看博客就能解决这个问题.如有不对的地方,请留言指出! jQuery Mobile暴露的方法都是使用$.mobile来引用. $.mobile.buttonMarkup( options, overwriteClasses ) 加入按钮的样式元素 当中options为对象,overwriteClasses为布尔类型,默觉得false.当设置为true,buttonmark

jQuery Mobile中jQuery.mobile.changePage方法使用详解

jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mobile.changepage是过时的jQuery Mobile 1.4.0及将被删除在1.5.0.使用pagecontainer部件的change()法代替. 注意该方法是在内部使用的页面加载和转换作为一个结果,点击一个链接或提交表单时.跳转外部页面全部没有效果,必须是内部的DIV页面才有效果.

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web App “使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新. 该系列的文章实质上分成四个部分,分别是总体概况.jQuery Mobile 组件.jQuer

jquery mobile使用过程中遇到的一些问题及解决方法

最近在项目在综合考虑了可能维护性和应用本身的复杂性,采用了HTML5 + JQuery Mobile的文案. 记录一下遇到的两个问题. 1)为了在手机上运行的更快,canvas中底图决定调用 putImageData 来复制,但在android 2.3系统上,canvas 的 putImageData 有很严重的锯齿,canvas.translate(0.5, 0.5)也是没有效果.如下图,前面是正常画出的底图,后面是 putImageData 后的底图. 解决办法, if (android 2

jQuery mobile 学习12 表单的使用方法及访问设备判断

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

jQuery Mobile学习笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

jquery mobile 移动web(2)

button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon ="" 1.arrow-1左箭头 2.arrow-r 右箭头 3.arrow-u 上箭头 4.arrow-d 下箭头 5.delete 删除 6.plus 加号 7.minus 减号 8.check 对号 9.gear 齿轮 10.refresh 刷新 11.forward 前进 12.back 返

jquery mobile 教程

简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代

jQuery Mobile 手动显示ajax加载器

在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/zht666/article/details/8563025 <script> //显示加载器 function showLoader() { //显示加载器.for jQuery Mobile 1.2.