JQueryMobile入门1

  • 示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" >
    <link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.css">
    <script type="text/javascript" src="./js/jquery.min.js" ></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.4.5.js" ></script>
    <title>JQueryMobile Demo</title>
</head>
<body>
这是一个简单的jquerymobile示例
</body>
</html>

使用dataset属性驱动的jQueryMobile组件

jQueryMobile提供了丰富的UI界面库，这些库都是基于移动设备小屏幕自适应的，使用dataset自定义属性，赋予html元素不同的功能；

  • jQueryMobile自定义属性如下：
    • data-role 定义元素在页面的功能角色,例如data-role="page"定义了一个视图页面
    • data-title 定义视图页面的标题
    • data-transition 定义视图切换的动画效果
    • data-rel 定义具有浮动层效果的视图
    • data-theme 指定元素或者组件的主题样式风格
    • data-icon 在元素内增加一个icon小图标
    • data-iconpos 定义小图标的位置，还允许设置notext值，指定只有按钮没有文字的按钮
    • data-inline 指定按钮根据内容自适应其长度
    • data-type 定义分组按钮按水平或者垂直方向排列
    • data-rel 定义具有特定功能的元素属性，例如返回按钮：data-rel="back"
    • data-add-back-btn 指定视图页自动在页眉左侧添加返回按钮
    • data-add-back-text 指定返回按钮的文本内容
    • data-position 实现在滑动屏幕时工具栏的显示还是隐藏状态
    • data-fullscreen 用于指定全屏视图页面
    • data-native-menu 指定下拉选择功能采用平台内置的选择器
    • data-placeholder 设置下拉选择功能的占位符
    • data-inset 实现嵌套列表的功能
    • data-split-icon 设置列表右侧的图标
    • data-split-theme设置列表右侧图标的主题样式风格
    • data-filter开启列表过滤搜素功能
  • 示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" >
    <link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.css">
    <script type="text/javascript" src="./js/jquery.min.js" ></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.4.5.js" ></script>
    <title>JQueryMobile Demo</title>
    <script type="text/javascript">

    </script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div data-role="page">
        <div data-role="header">页头</div>
        <div data-role="content">内容</div>
        <div data-role="footer">页尾</div>
    </div>
</body>
</html>
  • 可以将以上示例中div全部换成html5的新元素，稍作修改如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" >
    <link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.css">
    <script type="text/javascript" src="./js/jquery.min.js" ></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.4.5.js" ></script>
    <title>JQueryMobile Demo</title>
    <script type="text/javascript">

    </script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <section data-role="page">
        <header data-role="header">页头</header>
        <article data-role="content">内容</article>
        <footer data-role="footer">页脚</footer>
    </section>
</body>
</html>
  • 多视图页面
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" >
    <link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.css">
    <script type="text/javascript" src="./js/jquery.min.js" ></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.4.5.js" ></script>
    <title>JQueryMobile Demo</title>
    <script type="text/javascript">

    </script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <section data-role="page" id="first">
        <header data-role="header">页头</header>
        <article data-role="content">
        <a href="#second">转到下一页</a>
        </article>
        <footer data-role="footer">页脚</footer>
    </section>
    <section data-role="page" id="second">
        <header data-role="header">页头</header>
        <article data-role="content">
        <a href="#first">转到上一页</a>
        </article>
        <footer data-role="footer">页脚</footer>
    </section>
</body>
</html>
  • 设置页面标题
<section data-role="page" data-title="第一页" id="first">
    <header data-role="header">页头</header>
    <article data-role="content">
        <a href="#second">转到下一页</a>
    </article>
    <footer data-role="footer">页脚</footer>
</section>
  • 视图切换动画

JQueryMobile通过CSS3的transition动画机制，在多视图切换或返回按钮事件中，采用动画效果切换视图
JQueryMobile动画切换属性：

  • slide 默认方式，从右往左切换

  • slideup 从下往上

  • slidedown 从上往下

  • pop 弹出窗口

  • fade 渐变褪色方式

  • flip 旧页面翻转飞出，新页面飞入

    <a href="#second" data-transition="pop">转到下一页</a>

  • dialog对话框

只要在data-rel属性中定义了dialog属性，视图就具有dialog浮动层的效果

  <a href="#second" data-rel="dialog" data-transition="pop">转到下一页</a>
  • 页面主题

开发人员可通过data-theme属性对视图、header、footer等设置不同的主题

button组件

  • button组件
    <a href="#second" data-role="button" data-transition="pop">转到下一页</a>
  • 具有icon图标的button组件
    <a href="#second" data-role="button" data-icon="forward">转到下一页</a>
  • 通过data-iconpos来改变icon位置：left right top botton
    <a href="#second" data-role="button" data-icon="forward" data-iconpos="top">转到下一页</a>
  • 通过data-iconpos="notext" 创建没有文字，只有图标的按钮。
  • 自定义图标按钮

例如：data-icon="myapp-email" ，则在CSS中相对应的样式名称：.ui-icon-myapp-email，并在该样式中把图标设为背景，自定义图标像素大小18X18，png-8格式透明背景图片

  • 具有内联样式的button data-inline="true"
    <a href="#first" data-transition="slideup" data-role="button" data-icon="back" data-inline="true">转到上一页</a>
    <a href="#third" data-transition="slideup" data-role="button" data-icon="back" data-inline="true">转到下一页</a>
    两个按键在同一行

  • 具有分组功能的button按钮

jqm在按键列表外层增加一个div元素，并设置data-role熟悉为controlgroup,即可提供分组按钮功能
在div种定义data-type属性值为horizontal，把垂直分组按钮改变成水平排列

<section data-role="page" data-title="第三页" id="third">
    <header data-role="header">页头</header>
    <article data-role="content">
        <div data-role="controlgroup">
            <a href="#first" data-role="button" data-theme="a">首页</a>
            <a href="#second" data-role="button" data-theme="b">第二页</a>
            <a href="#first" data-role="button" data-theme="c">首页</a>
        </div>
        <div data-role="controlgroup">
            <a href="#first" data-role="button" data-icon="home" data-theme="a">首页</a>
            <a href="#second" data-role="button" data-icon="forward" data-theme="b">第二页</a>
            <a href="#first" data-role="button" data-icon="home" data-theme="c">首页</a>
        </div>
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#first" data-role="button" data-theme="a">首页</a>
            <a href="#second" data-role="button" data-theme="b">第二页</a>
            <a href="#first" data-role="button" data-theme="c">首页</a>
        </div>
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#first" data-role="button" data-icon="home" data-theme="a">首页</a>
            <a href="#second" data-role="button" data-icon="forward" data-theme="b">第二页</a>
            <a href="#first" data-role="button" data-icon="home" data-theme="c">首页</a>
        </div>
    </article>
    <footer data-role="footer">页脚</footer>
</section>
Paste_Image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,663评论 25赞 708
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4赞 61
  • GOOGLE SHOPPING 的几个要点
    记录优化 标题，描述等优化技巧。详细请查看本页最下面英文版的地址 标题： 说明(Description)： 你有1...
    4c026446f2fb阅读 1,468评论 0赞 0
  • 2017年的希腊少女轮新年小感
    反正每年临近过年就会有一帮人趁这个机会拍广告拍视频画漫画:一半是吐槽烦人的亲戚父母;一半是呼吁多抽时间回家看...
    星空释痕阅读 176评论 0赞 1