JQuery Mobile实现导航栏和页脚

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。

导航栏部分的代码一般放置在data-role为header的div的内。

<div data-role="header">
<a href="#" data-role="button" data-icon="home">首页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" data-role="button" data-icon="search">搜索</a>
</div>

一个基本的导航栏代码如上，包含两个按钮和一行文字作为标题。data-icon可以定义按钮对应的小图标。如果希望将按钮放在文本右侧，可以添加class=“ui-btn-right”样式。要注意的是，Jquery Mobile中的导航部分（header内）只能包含两个按钮。（可以想象一下，一般的手机app导航内都不会有过多的button，一般都放在页脚中）

相比之下，页脚的按钮数量没有限制，页脚放在footer中，基本代码如下：

<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">转播到QQ空间</a>
</div>

这符合一般的移动app设计模式，底部是切换到不同页面的button。切换页面的方式也很简单，注意到这里的每一个button都是用a标签定义的，其中的href就如我们上次所说，是可以进行页面转换的，只要在href后面添加另一个页面的id（即data-role为page的div）即可完成跳转。跳转的过程有很多jquery mobile内置定义的动画效果，在以后介绍。

关于页眉和页脚，除了上述所说之外，还可以使用data-position属性定义它们的位置属性，包含以下三个可选值（来自：w2cschool）：

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

Fixed – 页眉和页脚会留在页面顶部和底部。

Fullscreen - 与 fixed 类似;页眉和页脚会留在页面顶部和底部，but also over thepage content. It is also slightly see-through

关于jQuery mobile实现导航栏和页脚的相关知识就给大家介绍到这里，希望对大家有所帮助！

赞 (0)

相关推荐

  • jquery实现垂直和水平菜单导航栏

    本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下 1. HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖直导航菜单</title> <link href="css/Vmenu.css" rel="stylesheet" /> <script

  • jQuery Mobile 导航栏代码

    导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内. 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button"). 使用 data-role="navbar" 属性来定义导航栏: 复制代码 代码如下: <div data-role="header"><div data-role="navbar"><ul><li><a href="

  • jquery+css实现侧边导航栏效果

    jquery+css实现侧边导航栏效果

    最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码 这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a

  • 简单的jquery左侧导航栏和页面选中效果

    简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external

  • 超炫的jquery仿flash导航栏特效

    FLASH导航现在基本上已经是过时了,但是我们可以用jQuery来实现flash效果,非常的不错. 演示地址:http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html 复制代码 代码如下: <html>  <head>      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">      <

  • 用jquery的方法制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习导航栏的制作</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function() {

  • JQuery 浮动导航栏实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • jquery实现鼠标点击后展开列表内容的导航栏效果

    jquery实现鼠标点击后展开列表内容的导航栏效果

    本文实例讲述了jquery实现鼠标点击后展开列表内容的导航栏效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航栏,鼠标点击后展开隐藏的列表内容,用来制作一个目录是最合适不过的选择.本例是锋利的jQeury中的一个实例,这是最终的优化版本,兼容性还示曾测试,在火狐的表现尚不知情,有兴趣的朋友可测试或修正. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-click-show-table-nav-co

  • jQuery点击导航栏选中更换样式的实现代码

    jQuery点击导航栏选中更换样式的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

    解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

随机推荐