jQuery Mobile插件

jQuery Mobile插件库

智能手机平板电脑创建网站或应用  http://api.jquerymobile.com/classes/

教程:http://www.w3school.com.cn/jquerymobile/jquerymobile_pages.asp

jQuery Mobile 提供Ajax驱动的导航系统、面向移动设备优化的交互式元素,又以高级的触碰时间处理程序。

HTML5规范允许我们在元素中插入任何需要的属性,只要该属性前缀data-即可。这种属性在页面渲染器件会被忽略,但jQuery脚本却可以访问他们。页面包含jQuery Mobile之后,脚本可以扫描页面中的data-* 属性,然后为相应的元素添加适合移动设备的特性。

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

特别注意,这里添加<meta>标签,用于定义页面的视口(viewport)。这个声明是告诉浏览器将其页面内容缩放到签好填满设备的宽度。


jQuery Mobile 是创建移动web应用程序的框架、适用于所有流行的智能手机和平板电脑、使用HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局

在HTML5中 <script>标签中没有type="text/javascript",因为javascript是HTML5以及所有现代浏览器中的默认脚本语言


jQuery Mobile 适用于所有移动设备,它在台式计算机存在兼容性问题(由于有限的CSS3支持)

data-role=" page "  是现实在浏览器中的页面

data-role=" header " 创建页面上方的工具栏(常用于标题和搜索按钮)

data-role=" content " 定义页面的内容,比如文本、图像、表单和按钮等等

data-role=" footer " 创建页面底部的工具栏

HTML5 data-* 属性用于通过jQuery Mobile 为移动设备创建“对触控有好的”交互外观

    <div data-role="page" id="pageOne">
        <div data-role="header">
            <h1>Welcome to my Page</h1>
        </div>
        <div data-role="content">
            <p>This is my First Page</p>
            <a href="#pageTwo" data-rel="dialog">two</a>
        </div>
        <div data-role="footer">
            <h1>footer</h1>
        </div>
    </div>

    <div data-role="page"  id="pageTwo">
        <div data-role="header">
            <h1>Welcome to my two page</h1>
        </div>
        <div data-role="content">
            <p>two two</p>
            <a href="#pageOne">return one</a>
        </div>
        <div data-role="footer">
            <h1>footer</h1>
        </div>
    </div>

页面跳转页可以通过id 也可以通过对话窗口 data-rel=“dialog”


jQuery Mobile 过渡效果

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

fade( 默认,淡入淡出下一页)                                                     flip ( 从后向前翻动到下一页)

      

flow(抛出前当前页面,引入下一页)                                     pop(想弹出窗口那样转到下一页)

     

slide(从右向左滑动)                                                                 slidefade(从右到左并淡入到下一页)

     

slidedown(从上往下滑动到下一页)                                    slideup(从下到上翻动下一页)

    

turn(转向下一页)                                                                      none(无过渡效果)

    

以上支持反向运动

<a href="#XX" data-transition="slide" data-direction="reverse">XX</a>


jQuery Mobile 按钮

移动应用程序构建与触控操作的便利之上

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

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

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

<button> <input> 元素用于表单,jQuery Mobile 中的按钮会自动获得样式,这增强了他们在设备上的交互可能性,推荐使用 data-role="button"


导航按钮

<a href="#XX"  data-role="button">转到XX</button>

行内按钮 

data-inline="true"

组合按钮

data-role="controlgroup" + data-type="horizontal | vertical"

            <div data-role="controlgroup" data-type="horizontal | vertical">
                <a href="#pageOne" data-role="button" >转到第一页</a>
                <a href="#pageOne" data-role="button" >转到第一页</a>
                <a href="#pageOne" data-role="button" >转到第一页</a>
            </div>
后退按钮

data-rel="back" (忽略锚 的href值)
 

Data属性 描述
data-corners true | false 规定按钮是否有圆角
data-icon Icon Reference 规定按钮的图标。默认没有图标
data-iconpos left | right | top 
 bottom | notext
规定图标的位置
data-iconshadow true | false  规定按钮是否有阴影
data-inline true | false 规定按钮是否形内的
data_mini true | false 规定按钮小型的还是常规尺寸的
data-shadow true | false 规定按钮是否阴影
data-theme letter ( a-z ) 规定按钮主题的颜色

jQuery Mobile 按钮图标

属性值 描述
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" 网格

jQuery Mobile工具栏

工具栏元素常放置于页眉和页脚中-以实现“已访问”的导航

<div data-role="header">
            <a href="#" data-role="button">Home</a>
            <h1>welcome</h1>
            <a href="#" data-role="button">Search</a>
        </div>
如果H1之后放置按钮链接,需要添加 " ui-btn-right "才会向右显示

        <div data-role="header">
            <h1>welcome</h1>
            <a href="#" data-role="button" class="ui-btn-right">Search</a>
        </div>
页脚栏

与页眉相比,页脚更具伸缩性-他们更实用且多变,所以能包含所需数量的按钮:

        <div data-role="footer">
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
        </div>

而与页眉的样式不同(它会见去一些内边距和空白,并且按钮不会居中)。如要修正这个问题,加class="ui-btn"

        <div data-role="footer" class="ui-btn">
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
        </div>

水平居中or垂直居中组合
        <div data-role="footer" class="ui-btn">
            <div class="controlgroup" data-type="vertical / horizontal">
                 <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
                 <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
                 <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
             </div>
        </div>
定位页眉和页脚

Inline-默认。页眉和页脚与页面内容位于形内

Fixed-页面和页脚会留在页面顶部和底部

Fullscreen-与fixed类似;页面和页脚会留在页面顶部和底部

<div data-role="header" data-position="inline"></div>

<div data-role=“header” data-position="fixed"></div>

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>

fullscreen 对于招聘、图片和视频处理非常理想

对于fixed 和fullscreen 定位,触摸屏将隐藏和显示页眉和页脚




















阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。详细代码(https://github.com/yana77) https://blog.csdn.net/yana_loo/article/details/54582678
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭