Web App 开发之 jQuery Mobile 工具栏
白羽 2018-06-19 来源 :网络 阅读 882 评论 0

摘要:本文将带你了解Web App 开发之 jQuery Mobile 工具栏,希望本文对大家学WEBAPP有所帮助。


 

jQuery Mobile 中的 jQuery Mobile 工具栏。在 jQuery Mobile 中,有一套完整的工具栏和导航栏组件,这里的工具栏和导航栏并不只是提供了相应的外观样式,还自带有一些常用的辅助功能,下面为大家详细介绍。


也许你会奇怪,不是有工具栏和导航栏吗?为什么标题只写了工具栏!其实这里的工具栏和导航栏并不是分开的组件,而是统一的一套标准组件,既有工具栏的功能也有导航栏的功能,下文就直接简称工具栏了。


一.工具栏基础

在 jQuery Mobile 中,有两套标准工具栏——头部栏和尾部栏,头部栏通常是放在网页顶部,而尾部栏通常放在网站底部,值得注意的是,头部栏和尾部栏的位置并不依靠 CSS 和 JavaScript 定位,而是本身就处于文档流的顶部或底部,这样是为了尽量保证那些对于 CSS 和 JavaScript 支持并不好的设备也可以看到工具栏,另外也不用消耗多余的 CSS 和 JavaScript 资源。

可能在阅读上面这段话后,童鞋们可能有点迷惑,没关系,下面会分开介绍这些属性,相信阅读后便会理解 jQuery Mobile 的工具栏组件了。


二.头部栏

头部栏正如其名字所表达的,是处于页面头部的栏目,使用 data-role="header" 属性可以产生头部栏。除了表示标题的文字外,在头部栏的左边或右边可以放置几个可选的按钮,作为导航之用(返回上一页,回到首页等)。使用 h1 的 HTML 标签包裹文字,这段文字会被解释为标题文字,赋予相关的样式,而在 h1 标签的上下文中,可以通过使用按钮标记放置按钮,其中在 h1 标签上的按钮会被放置在头部栏左边,而在 h1 标签之下的按钮会被放置在头部栏右边。

如上面描述,在 h1 标签的上下文中,可以通过使用按钮标记放置按钮,通常自定义的按钮会使用 a 标签,给标签添加 data-rel="back" 属性会自动生成后退按钮,点击后退按钮返回的是历史记录中的上一个页面,而无视该 a 标签的 href 属性值,但是对于 C 级浏览器,情况刚好相反, C 级浏览器只会识别 href 属性值,而不会直接退回历史记录中的上一个页面,因此要设计一个良好的导航,也必须根据实际情况给 href 设定一个有意义的值,而提高 C 级浏览器的用户体验。除此之外,开发者还可以使用 data-icon 属性改变按钮上的 icon 小图标,而 data-icon 的可取值可以参考《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮》中的“带图标按钮”。

下面给出一个带有两个按钮的例子:


   

<div data-role="header">

    <a data-rel="back" href="#home" data-icon="delete">取消</a>

    <h1>常见头部栏</h1>

    <a href="#home" data-icon="check">保存</a>

</div>

   


这里必须强调一下,例子中的链接的 href 值为 "#home",这是 jQuery Mobile 所支持的一种链接, "home" 指是一个 jQuery Mobile page 的 id 值,使用这种写法可以很方便的链接到该 page ,参考文章底部 Demo 的源码可以看到完整的代码。

另外开发者也可以使用 CSS class 来控制按钮的位置:

ui-btn-left 和 ui-btn-right class 分别是控制按钮在头部栏的左边和右边,并且设置相应的 class 后,按钮的位置只根据类来分配,与它们实际在 HTML 源码中的位置无关。


   

<div data-role="header">

    <a class= "ui-btn-right" href="#home" data-rel="back" data-icon="delete">取消</a>

    <h1>使用 CSS 类控制按钮位置的自定义头部栏</h1>

    <a class="ui-btn-left" href="#home" data-icon="check">保存</a>

</div>

   


 

三.尾部栏

在 jQuery Mobile 中,使用 data-role="footer" 可以产生尾部栏,尾部栏的情况跟头部栏基本相同,也支持放置按钮,通过 CSS 类调整按钮位置,这里给出一个基本的尾部栏例子:


<footer data-role="footer">

    <h2>Demo By <a href="//kayosite.com" target="_blank" style="text-decoration: none; ">Kayo</a></h2>

</footer>

   


 

另外在尾部栏中添加一个按钮组可以很方便的做出一个工具栏,关于按钮组的使用可以参见 《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮》中的“按钮组”部分。

四.导航栏

导航栏可以为开发者提供一种简便的导航菜单方案,首先给出一个例子:


   

<div data-role="header">

    <div data-role="navbar">

        <ul>

            <li><a href="#" class="ui-btn-active">One</a></li>

            <li><a href="#">Two</a></li>

            <li><a href="#">Three</a></li>

        </ul>

    </div>

</div>

   

这里说明一下,导航栏并不一定需要头部栏包裹,不过一般建议放在头部栏或尾部栏中。要设置某一个链接为活动状态(当前状态),可以给该链接添加 "ui-btn-active" 的 class ,如例子中设置了第一个链接为当前活动状态。


五.固定位置的工具栏与全屏的工具栏

我们可以给工具栏添加 data-position="fixed" 的属性,这样工具栏就会固定在页面中,并不随页面滚动而滚动了,当工具栏滚出屏幕后,可以通过点击屏幕使其再次出现。在此基础上,若再为工具栏添加 data-fullscreen="true" 属性,则能触发工具栏全屏模式,这样页面的主体内容会占满页面,然后通过点击屏幕使工具栏出现或消失。也许你会觉得这个情景很熟悉,的确,这种方式在一些 App 上很常见,比如视频网站的 App ,播放视频时显示进度条,音量按钮,清晰度选择等,点击屏幕工具条就会消失,需要时再次点击就会出现。现在这样的功能 Web App 也做到了,并且很简便,配合出 HTML5 的一些属性,也就能方便的做出一些很酷的 Web App!

固定位置的工具栏


   

<div data-role="header" data-position="fixed">

    <a href="#home" data-rel="back" data-icon="delete">取消</a>

    <h1>固定位置的工具栏</h1>

</div>

   

固定位置的全屏工具栏


   

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

    <a href="#home" data-rel="back" data-icon="delete">取消</a>

    <h1>固定位置的工具栏</h1>

</div>

   

由于这里要显示的效果是动态的,就不放效果图了,建议大家直接查看完整 Demo 中相应的例子,其中“固定位置的全屏工具栏”在 PC 会出现相滚动条的情况,建议使用移动浏览器查看。

六.主题样式

与其他 jQuery Mobile 组件一样,工具栏也是支持使用主题样式的,可以使用 data-theme 属性在组件的标签上添加主题样式,该属性默认有五个值 a, b, c, d, e,分别代表由深到浅五种颜色,另外开发者还可以通过在 CSS 里添加相应的 class 来自定义颜色,而默认的样式则为 a ,即黑色。

七.完整 Demo

完整实例 Demo(建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览)


本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!


本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程