美文网首页
8-2 jQuery Mobile 基本组件

8-2 jQuery Mobile 基本组件

作者: 陈小陌丿 | 来源:发表于2016-09-23 00:30 被阅读0次

页面

页面使用例子

<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>

例子解释

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

多页面 和 页面跳转

例子

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">转到页面二</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
    <a href="externalfile.html">转到外部页面</a>
    <a href="#pageone" data-rel="dialog">以弹窗的形式打开页面一</a>
  </div>
</div>

例子解释

  • 通过ID可以区分不同页面
  • 在链接使用 #页面名 可以跳转到不同页面
  • 如果需要跳转到外部页面的话 需要指定页面地址
  • 使用 ** data-rel="dialog" ** 参数可以 以弹框的形式打开新页面

页面过渡效果

浏览器支持

  • Internet Explorer 10 支持 3D 转换（更早的版本不支持）
  • Opera 仍然不支持 3D 转换

主要是通过 data-transition属性来实现的

例子

<!DOCTYPE html>
<html>
    
    <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>
    
    <body>
        <div data-role="page" id="pageone">
            <div data-role="header">
                <h1>欢迎来到我的主页</h1>
            </div>
            <div data-role="content">
                <p>点击链接来查看滑动效果（从右向左滑动到下一页） </p>
                <a href="#pagetwo" data-transition="slide">滑动到页面二</a>
            </div>
            <div data-role="footer">
                <h1>页脚文本</h1>
            </div>
        </div>
        <div data-role="page" id="pagetwo">
            <div data-role="header">
                <h1>欢迎来到我的主页 </h1>
            </div>
            <div data-role="content">
                <p>点击链接来查看反向的滑动效果（从左向右滑动到前一页）</p>
                <a href="#pageone" data-transition="slide" data-direction="reverse">滑动到页面一（反向）</a>
            </div>
            <div data-role="footer">
                <h1>页脚文本</h1>
            </div>
        </div>
    </body>
</html>

例子解释

  • **data-transition="slide" ** 设置页面切换效果， 从右向左滑动到下一页。
  • data-direction="reverse" 通过设置 reverse 可以进行反方向切换。
  • 页面默认是淡入淡出到下一页， 即 fade；

data-transition 可使用的值

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

按钮

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

    使用 <button> 元素
    <button>按钮</button>

    使用 <input> 元素
    <input type="button" value="按钮">

    使用 data-role="button" 的 <a> 元素
    <a href="#" data-role="button">按钮</a>

注意：
在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 < a> 元素在页面间进行链接，使用 <input> 或 <button> 元素进行表单提交。

导航按钮

如需通过按钮来链接页面，请使用 data-role="button" 的 < a > 元素

<a href="#pagetwo"data-role="button">转到页面二</a>

行内按钮

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline="true"

<a href="#pagetwo" data-role="button"data-inline="true">转到页面二</a>

组合按钮

jQuery Mobile 提供了对按钮进行组合的简单方法。
请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮

<divdata-role="controlgroup" data-type="horizontal"> 
    <a href="#anylink" data-role="button">按钮 1</a> 
    <a href="#anylink" data-role="button">按钮 2</a> 
    <a href="#anylink" data-role="button">按钮 3</a>
</div>

提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。

后退按钮

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

<a href="#" data-role="button" data-rel="back" >返回</a>

按钮实例

<!DOCTYPE html>
<html>
    
    <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>
    
    <body>
        <div data-role="page" id="pageone">
            <div data-role="header">
                <h1>
                    这里是导航按钮
                </h1>
            </div>
            <div data-role="content">
                <a href="#pagetwo" data-role="button" data-transition="slide">
                    转到页面二
                </a>
            </div>
            <div data-role="footer">
                <h1>
                    这里是导航按钮END
                </h1>
            </div>
        </div>
        <div data-role="page" id="pagetwo">
            <div data-role="header">
                <h1>
                    这里是行内按钮
                </h1>
            </div>
            <div data-role="content">
                <p>
                    再见！
                </p>
                <a href="#pagethree" data-role="button" data-inline="true">
                    转到页面三
                </a>
                <a href="#pagethree" data-role="button" data-inline="true">
                    转到页面三
                </a>
                <a href="#pagethree" data-role="button" data-inline="true">
                    转到页面三
                </a>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
        <div data-role="page" id="pagethree">
            <div data-role="header">
                <h1>
                    分组按钮
                </h1>
            </div>
            <div data-role="content">
                <div data-role="controlgroup" data-type="horizontal">
                    <p>
                        水平分组：
                    </p>
                    <a href="#pagefour" data-role="button">
                        转到页面四
                    </a>
                    <a href="#pagefour" data-role="button">
                        转到页面四
                    </a>
                    <a href="#pagefour" data-role="button">
                        转到页面四
                    </a>
                </div>
                <br>
                <div data-role="controlgroup" data-type="vertical">
                    <p>
                        垂直分组（默认）：
                    </p>
                    <a href="#pagefour" data-role="button">
                        转到页面四
                    </a>
                    <a href="#pagefour" data-role="button">
                        转到页面四
                    </a>
                    <a href="#pagefour" data-role="button">
                        转到页面四
                    </a>
                </div>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
        <div data-role="page" id="pagefour">
            <div data-role="header">
                <h1>
                    后退按钮实例
                </h1>
            </div>
            <div data-role="content">
                <a href="#" data-role="button" data-rel="back">
                    后退
                </a>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
    </body>

</html>

用于按钮的 data-*常用属性

|属性 | 值 | 描述|
|:---||:---||:---|
|data-corners | true OR false | 规定按钮是否有圆角。 |
|data-mini | true OR false | 规定是否是小型按钮。 |
|data-shadow | true OR false | 规定按钮是否有阴影。 |

jQuery Mobile Data 属性

http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp

按钮图标

如需向您的按钮添加图标，请使用 data-icon 属性

语法

<a href="#anylink" data-role="button" data-icon="search">搜索</a>
<button data-icon="search">test</button>
<input type='button' data-icon="search" value='test' />

例子

<!DOCTYPE html>
<html>
    
    <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>
    
    <body>
        <div data-role="page" id="pageone">
            <div data-role="header">
                <h1>
                    带有图标的按钮
                </h1>
            </div>
            <div data-role="content">
                <a href="#home" data-role="button" data-inline="true" data-rel="dialog"  data-icon="home">
                    首页
                </a>
                <a href="#options" data-role="button" data-inline="true" data-rel="dialog" data-icon="grid">
                    选项
                </a>
                <a href="#search" data-role="button" data-inline="true" data-rel="dialog" data-icon="search">
                    搜索
                </a>
                <a href="#pagetwo" data-role="button" data-icon="arrow-r" data-iconpos="right">
                    下一页
                </a>
                <a href="#info" data-role="button" data-rel="dialog" data-icon="info" data-iconpos="top">
                    信息
                </a>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
        <div data-role="page" id="pagetwo">
            <div data-role="header">
                <h1>
                    带有图标的按钮
                </h1>
            </div>
            <div data-role="content">
                <a href="#pageone" data-role="button" data-icon="back" data-inline="true">
                    返回
                </a>
                <a href="#pageone" data-role="button" data-icon="arrow-l">
                    上一页
                </a>
                <a href="#info" data-role="button" data-rel="dialog" data-icon="info" data-iconpos="top">
                    信息
                </a>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>
                    首页
                </h1>
            </div>
            <div data-role="content">
                <p>
                    家是心之所在！
                </p>
                <a href="#pageone" data-role="button" data-inline="true" data-icon="back">
                    返回
                </a>
                 <a href="#" data-role="button" data-icon="search" data-iconpos="notext">只显示图标</a>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
        <div data-role="page" id="options">
            <div data-role="header">
                <h1>
                    选项
                </h1>
            </div>
            <div data-role="content">
                <p>
                    您刚敲击了选项按钮！
                </p>
                <a href="#pageone" data-role="button" data-inline="true" data-icon="back">
                    返回
                </a>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
        <div data-role="page" id="search">
            <div data-role="header">
                <h1>
                    搜索
                </h1>
            </div>
            <div data-role="content">
                <p>
                    没有搜索结果！
                </p>
                <a href="#pageone" data-role="button" data-inline="true" data-icon="back">
                    返回
                </a>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
        <div data-role="page" id="info">
            <div data-role="header">
                <h1>
                    信息
                </h1>
            </div>
            <div data-role="content">
                <p>
                    jQuery Mobile 很有趣！
                </p>
            </div>
            <div data-role="footer">
                <h1>
                    页脚文本
                </h1>
            </div>
        </div>
    </body>

</html>

例子解析

  • ** data-icon="back"** 用来指定图标类型
  • ** data-iconpos="top"** 用来指定图标被放置的位置（top， right，bottom，left ）
  • ** data-iconpos="notext"** 可以让按钮只显示图标不显示文字

图标参考手册

http://www.runoob.com/jquerymobile/jquerymobile-ref-icons.html

未完待续。。。

相关文章

网友评论

      本文标题：8-2 jQuery Mobile 基本组件

      本文链接：https://www.haomeiwen.com/subject/egazettx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|8-2 jQuery Mobile 基本组件|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！