[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏

[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏

Written In The Font

“ Wirte less Do more”

学习内容:

 

页眉工具栏和页眉button

页眉是网页身体的头不一样.以下我们演示下在页面工具栏中加入两个连接,中间一个标题.

                                                                                       image

 

show the code:

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測试</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="subone">
<div data-role="header" data-position="inline">    
<a href="#">返回</a>
<h1> 主界面 </h1>
<a href="#">很多其它</a>
</div>
</div>      
</body>
</html>
复制代码

 

导航工具栏

导航工具栏是 jQuery Mobile 的小部件.像tab页,像navbar一样.以下演示下,音乐的一个网页的案例:

                                                                                         image

 

show the code:

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jeff Li</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="subone">
<div data-role="header" data-position="inline">    
<a href="#">返回</a>
<h1>音乐 </h1>
<a href="#">很多其它</a>
<div data-role="navbar" >
<ul>
<li><a href="#">古典</a></li>
<li><a href="#">流行</a></li>
<li><a href="#">摇滚</a></li>
</ul>
</div>
</div>
<div data-role="content">  
<h3>I am a single collapsible element </h3>
<p>I am the content inside of the single collapsible element</p>
</div>
</div>      
</body>
</html>
复制代码

 

页脚工具栏

页脚工具栏,以下实现button并排显示,两端button边角变为圆角:

(左图不是圆角,右图是圆角.代码就是相差个div)

                                                    image                           image

show the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jeff Li</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="subone">
<div data-role="header" data-position="inline">    
<a href="#">返回</a>
<h1>音乐 </h1>
<a href="#">很多其它</a>
<div data-role="navbar" >
<ul>
<li><a href="#">古典</a></li>
<li><a href="#">流行</a></li>
<li><a href="#">摇滚</a></li>
</ul>
</div>
</div>
<div data-role="content">  
<h3>I am a single collapsible element </h3>
<p>I am the content inside of the single collapsible element</p>
</div>
<div data-role="footer" class="ui-bar" data-position="fixed">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">千千静听</a>
<a href="#" data-role="button">QQ音乐</a>
<a href="#" data-role="button">酷我音乐</a>
</div>
</div>  
</div>      
</body>
</html>



 

定位工具栏

定位工具栏,上面我们都用过了.定位工具栏是否已经在可视化范围内.要是工具栏使用固定位子,我们仅仅须要将该属性加入进去:

data-position=”fixed”.

也能够在page div中使用全屏定位.我们仅仅须要 <div data-role=”page” data-fullscreen=”true”>

 

Editor’s Note

路漫漫其修远兮 我将上下而求索

版权声明:本文博客原创文章,博客,未经同意,不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117650.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • python与图像处理_python图像处理书籍

    python与图像处理_python图像处理书籍第1章 基本的图像操作和处理本章讲解操作和处理图像的基础知识,将通过大量示例介绍处理图像所需的Python工具包,并介绍用于读取图像、图像转换和缩放、计算导数、画图和保存结果等的基本工具。这些工具的使用将贯穿本书的剩余章节。1.1 PIL:Python图像处理类库PIL(PythonImagingLibraryPython,图像处理类库)提供了通用的图像处理功能,以及大量有用的基本图…

    2022年10月14日
  • UDP攻击是什么呢

    UDP攻击是什么呢用户数据报协议(UDP)是一个无连接协议。当数据包经由UDP协议发送时,发送双方无需通过三次握手建立连接,接收方必须接收处理该资料包。因此大量的发往受害主机UDP报文能使网络饱和。在一起UDP洪流攻击中,UDP报文发往受害系统的随机或指定端口。通常,UDP洪流攻击设定成指向目标的随机端口。这使得受害系统必须对流入数据进行分析以确定哪个应用服务请求了数据。如果受害系统在某个被攻击埠没有运行服务,它将用ICMP报文响应一个“目标端口不可达”消息。通常,攻击中的DDOS工具会伪造攻击包的源IP地址。这有助于隐藏

  • betterintellij 2021.4 激活码【在线破解激活】

    betterintellij 2021.4 激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 微信消息接口发送信息到分组和用户,错误代码40003和40008

    微信消息接口发送信息到分组和用户,错误代码40003和400082019独角兽企业重金招聘Python工程师标准>>>…

  • Trello使用体验之如何删除一个Board

    Trello使用体验之如何删除一个Board

  • 在Spring Boot中使用Spring-data-Jpa,findOne()方法无效

    在学习SpringBoot过程中,发现在使用Jpa进行数据库操作的时候,Jpa的findOne()根据主键查数据方法无效了,让我很纳闷,之后查了一下百度,发现是SpringBoot版本问题 使用的版本是SpringBoot 2.0.4既然找不到findOne()方法,可以找一下别的嘛,然后发现里面有个叫findById()的方法,有点像了。。。。 但是神奇的发现,他的返回类型是…

    2021年11月30日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号