jQueryMobile之Popup
效果:
(1):Tooltip
(2):Menu
(3):NestedMenu
(4):Login
------
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>The title</h1>
</div> <div data-role="content">
<h1>The content</h1> <a href="#popupInfo" data-rel="popup" data-role="button" data-inline="true">Tooltip</a>
<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true">Menu</a>
<a href="#popupNested" data-rel="popup" data-role="button" data-inline="true">Nested Menu</a>
<a href="#popupLogin" data-rel="popup" data-role="button" data-inline="true">Login</a> <div data-role="popup" id="popupInfo" data-theme="e" class="ui-content">
<p>Here is a tiny popup being used like a tooltip.</p>
</div> <div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="true" data-theme="b" style="min-width:210px;">
<li><a href="#">Options</a></li>
<li><a href="#">Methods</a></li>
<li><a href="#">Events</a></li>
</ul>
</div> <div data-role="popup" id="popupNested" data-theme="none">
<div data-role="collapsible-set" data-theme="b" data-content-theme="c"
data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div data-role="collapsible" data-inset="false">
<h2>Farm animals</h2>
<ul data-role="listview">
<li><a href="#">Chicken</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Chicken</a></li>
</ul>
</div>
<div data-role="collapsible" data-inset="false">
<h2>Farm animals</h2>
<ul data-role="listview">
<li><a href="#">Chicken</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Chicken</a></li>
</ul>
</div>
<div data-role="collapsible" data-inset="false">
<h2>Pets</h2>
</div>
</div>
</div> <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<form>
<div style="padding: 10px 20px;">
<h3>Please sign in</h3>
<input type="text" name="user" value="" placeholder="Username" data-theme="a"/>
<input type="password" name="pwd" value="" placeholder="Password" data-theme="a"/>
<button type="submit" data-theme="b">Sign in</button>
</div>
</form>
</div>
</div> <div data-role="footer">
<h4>The footer</h4>
</div>
</div>
</body>
</html>
jQueryMobile之Popup的更多相关文章
- jquerymobile知识点三:弹出层popup
弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popu ...
- JQueryMobile + PhoneGap 经验总结
1. pageinit & pageshow JQM的官方手册重点提醒了使用$(document).bind(‘pageinit’)代替$(document).ready(). 但当你需要对某 ...
- jquery-mobile pop
一.弹框 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- html5+jqueryMobile编写App推广注册页
html5+jqueryMobile的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jquer ...
- [deviceone开发]-do_Webview加载JQueryMobile的示例
一.简介 JQueryMobile是JQuery的移动版,不过它并没有像JQuery那么成功.我们只是使用JQueryMobile来展示do_Webview加载第三方js框架.适合所有开发者.二.效果 ...
- 关于淘宝店铺装修弹出层popup的记录
小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...
- 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu
[源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...
- jQueryMobile示例页面代码
这是一个jQueryMobile示例页面 示例效果:http://hovertree.com/texiao/jquerymobile/ 可以在手机或者触屏浏览器查看效果. 以下是HTML代码: < ...
- WPF Popup 控件导致被遮挡内容不刷新的原因
WPF Popup 控件导致被遮挡内容不刷新的原因 周银辉 今天在写一个WPF控件时用到了Popup控件,很郁闷的情况是:当popup关闭时,原来被popup挡住的界面部分不刷新,非要手动刷新一下(比 ...
随机推荐
- HDOJ 2102
如果传送门'#'的另一层是传送门'#'或者是墙'*',就可以理解为这两层的这个位置都是'*'了 还有就是传送门'#'传过去可以是空地'.' 也可以是目的地'P',不要忽略了 #include < ...
- G - Oil Skimming - hdu 4185(二分图匹配)
题意:在大海里有一些石油 ‘#’表示石油, ‘.’表示水,有个人有一个工具可以回收这些石油,不过只能回收1*2大小的石油块,里面不能含有海水,要不就没办法使用了,求出来最多能回收多少块石油 分析:先把 ...
- Hbase设计实战
Hbase设计实战 本文通过一个游戏公司客户实际案例的讲解,分析了 Hbase 表设计及开发在实际案例中的运用,对比了不同的 Hbase 设计考量对客户端访问模式及检索性能的差异.读者通过案例中 Hb ...
- 【错误总结之(一)】error LNK2038: 检測到“_ITERATOR_DEBUG_LEVEL”的不匹配项: 值“0”不匹配值“2”
1>cvblob.lib(cvblob.obj) : error LNK2038: 检測到"_ITERATOR_DEBUG_LEVEL"的不匹配项: 值"0&quo ...
- Android常用ProgressDialog设置
public static ProgressDialog initDialog(Context context) { ProgressDialog progressDialog = new Progr ...
- 学做酷炫有爱的免费网页,学习 Github Page 教你分分钟搭建自己的博客
Github Page 网页搭建教程,教你分分钟搭建自己的博客 很多其它美丽的网页搭建教程教程.请看这里:http://www.duobei.com/course/8506331668 waterma ...
- LVS+Keepalived实现MySQL从库读操作负载均衡
http://www.osyunwei.com/archives/7464.html (学习运维知识好站) 说明: 操作系统:CentOS 5.X 64位 MySQL主服务器:192.168.21.1 ...
- Cocos2D-X2.2.3学习笔记12(瞬间动作)
到眼下我们已经学习了有 坐标系统 内存管理 UI系统 事件处理 几何图形 今天我们来学习动作管理OK 我们来看看类结构图 CCAction 全部动作的基类 以下派生了三个子类:CCFiniteTi ...
- python Sina微博自动转发带抽奖字样的微博,添加关注,取消关注
项目地址:https://github.com/chengshuyi/SinaWeibo 具有的功能 转发带抽奖字样的微博并可以@相应数量的好友 提取关注并添加关注 取消关注 获取粉丝列表
- TP框架多表联查
join方法import("@.ORG.Page"); $Form = M('gly'); $where=''; if ($_PO ...