《跟我学jQuery Mobile框架技术及应用实例（第5部分）.doc》由会员分享，可在线阅读，更多相关《跟我学jQuery Mobile框架技术及应用实例（第5部分）.doc（11页珍藏版）》请在三一文库上搜索。
1、杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料目 录1.1跟我学jQuery Mobile框架技术及应用实例（第5部分）21.1.1页面头部栏（顶部工具栏）21.1.2页面底部栏（底部工具栏）31.1.3定位头部栏和尾部栏41.2jQuery Mobile 导航栏51.2.1导航栏的位置和创建方法51.2.2页面底部的导航栏81.2.3在内容区域中超过 5 个按钮91.1 跟我学jQuery Mobile框架技术及应用实例（第5部分）1.1.1 页面头部栏（顶部工具栏）1、头部栏的一般组成头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索），可以添加按钮到头部的左
2、侧或右侧。下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧。首页欢迎来到我的主页搜索而下面的代码，将添加一个按钮到头部标题文本的左侧：首页欢迎来到我的主页注意：在页面的头部中可以包含一个或两个按钮，而在尾部中则没有限制。尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮。2、如何将按钮放置在右边如果把按钮的链接标签放置在 元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，需要指定class为ui-btn-right。下面为代码示例：欢迎来到我的主页搜索1.1.2 页面底部栏（底部工具栏）1、 尾部栏比头部栏更灵
3、活在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮。 在Facebook关注我 在Twitter关注我 在Instagram关注我2、 尾部的样式与头部不同没有内边距和空间，且按钮不居中。为了解决这个问题，请把 ui-btn 放置在尾部的 class 上。如下为代码示例： 在Facebook关注我 在Twitter关注我 在Instagram关注我3、 将尾部中的按钮进行水平或垂直组合 在Facebook关注我 在Twitter关注我 在Instagram关注我1.1.3 定位头部栏和尾部栏1、头部和尾部可以通过三种方式进行定位（1）Inline - 默认。头部栏和尾部栏与页面内
4、容内联。（2）Fixed - 头部栏和尾部栏固定在页面的顶部和底部。（3）Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。使用 data-position 属性来定位头部栏和尾部栏的定位方式。2、Inline 定位（默认）3、Fixed 定位4、Fullscreen 定位要启用全屏定位，请使用 data-position=fixed，并添加 data-fullscre
5、en 属性到元素。全屏定位适用于照片、图像和视频。固定定位和全屏定位中，通过点击屏幕将隐藏和显示头部栏和尾部栏。1.2 jQuery Mobile 导航栏1.2.1 导航栏的位置和创建方法1、 导航栏通常位于头部和尾部内，从而可以让导航易于访问。导航栏一般是由一组水平排列的链接组成，通常包含在头部或尾部内。在默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role=button）。2、 使用 data-role=navbar 属性来定义导航栏欢迎来到我的主页 主页Home 第二页 搜索 我的内容 我的底部默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：
6、1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33,3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行（查看更多实例）。3、激活按钮当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。如果想在不点击链接时获得这种外观，可以使用 class=ui-btn-active样式定义。首页而如果对于多个页面则可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 ui-state-persist 和 ui-btn-active 到链接的 class中。 欢迎来到我的主页 首页 页面二 本例设有 ui-btn-ac
7、tive 类，请注意首页按钮时突出显示的（已选）。 请点击页面二按钮，看看会发生什么。 我的页脚 1.2.2 页面底部的导航栏1、代码示例没有应用data-iconpos属性时，图标放在下面。 欢迎来到我的主页 该例演示页脚中的导航栏。 更多 更少 删除 喜爱 信息 2、如何在页面底部内的导航栏中定位图标 更多 更少 删除 喜爱 信息 1.2.3 在内容区域中超过 5 个按钮1、在导航栏中 10 个按钮的代码示例应用和标签实现一行两个按钮的布局效果。 更多 更少 删除 喜爱 信息 向前 向后 星形 选项 搜索 JQM对于导航按钮的布局采用如下的实现策略：（1）5个按钮之内则是等分100%的宽度（2）5个以上的按钮则是采用一行两个按钮等分宽度2、内联导航链接按钮实现伸缩布局 内联导航链接按钮内联导航链接按钮内联导航链接按钮内联导航链接按钮此时不再需要应用和标签包装各个按钮，而是直接将按钮放入到导航条中。杨教授工作室，版权所有，盗版必究， 11/11页