初识jquery mobile

最新推荐文章于 2019-07-07 02:34:36 发布

qq_25577301

最新推荐文章于 2019-07-07 02:34:36 发布

阅读量305

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/qq_25577301/article/details/52767615

版权

php 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

对这几天学习的东西做一下总结。

这几天研究的东西有jquery mobile和bootstrap.这两个都是封装好的前端样式库。

可以引入线上文件，也可以把文件下载下来进行本地引入。今天来讲一下jquery mobile.

Jquery mobile

jQuery Mobile 是创建移动 web 应用程序的框架。适用于所有流行的智能手机和平板电脑。使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。jQuery Mobile 将“写得更少、做得更多”这一理念提升到了新的层次：它会自动为网页设计交互的易用外观，并在所有移动设计上保持一致。

下载地址：http://jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip

引入文件。

<head>
<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><span style="font-size:12px;">

jQuery Mobile 页面

</span><pre name="code" class="html"><body>
<div data-role="page">

  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="content">
    <p>我是一名移动开发者！</p>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>

</div>
</body

<pre name="code" class="html"><pre name="code" class="html"><pre name="code" class="html">data-role="page" 是显示在浏览器中的页面

data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏

jQuery Mobile 过渡效果

jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。

<a href="#anylink" data-transition="slide">滑动到页面二</a>

过渡	描述
fade	默认。淡入淡出到下一页。
flip	从后向前翻动到下一页。
flow	抛出当前页面，引入下一页。
pop	像弹出窗口那样转到下一页。
slide	从右向左滑动到下一页。
slidefade	从右向左滑动并淡入到下一页。
slideup	从下到上滑动到下一页。
slidedown	从上到下滑动到下一页。
turn	转向下一页。
none	无过渡效果。

在 jQuery Mobile 中创建按钮

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

使用 <button> 元素

使用 <input> 元素

使用 data-role="button" 的 <a> 元素

默认是占据一行的，可以加上data-inline='true'来改变宽度

还提供了对按钮进行组合的简单方法。

将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮：

如需创建后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）：

为 jQuery Mobile 按钮添加图标

<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="notext">搜索</a>

其他的可参考http://www.w3school.com.cn/jquerymobile/jquerymobile_toolbars.asp

qq_25577301

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jquery mobile

对这几天学习的东西做一下总结。这几天研究的东西有jquery mobile和bootstrap.这两个都是封装好的前端样式库。可以引入线上文件，也可以把文件下载下来进行本地引入。今天来讲一下jquery mobile.Jquery mobilejQuery Mobile 是创建移动 web 应用程序的框架。适用于所有流行的智能手机和平板电脑。使用 HTML5 和 CSS3 通过尽可
复制链接

扫一扫