效果：

（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的更多相关文章

  1. jquerymobile知识点三：弹出层popup

    弹出层popup很简单,主要就是弹出验证,登陆注册,提交信息之类的,下面是我写好的一个demo... <div data-role="popup" id="popu ...

  2. JQueryMobile + PhoneGap 经验总结

    1. pageinit & pageshow JQM的官方手册重点提醒了使用$(document).bind(‘pageinit’)代替$(document).ready(). 但当你需要对某 ...

  3. jquery-mobile pop

    一.弹框 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. html5+jqueryMobile编写App推广注册页

    html5+jqueryMobile的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jquer ...

  5. [deviceone开发]-do_Webview加载JQueryMobile的示例

    一.简介 JQueryMobile是JQuery的移动版,不过它并没有像JQuery那么成功.我们只是使用JQueryMobile来展示do_Webview加载第三方js框架.适合所有开发者.二.效果 ...

  6. 关于淘宝店铺装修弹出层popup的记录

    小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...

  7. 背水一战 Windows 10 (36) - 控件（弹出类）: ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  8. jQueryMobile示例页面代码

    这是一个jQueryMobile示例页面 示例效果:http://hovertree.com/texiao/jquerymobile/ 可以在手机或者触屏浏览器查看效果. 以下是HTML代码: < ...

  9. WPF Popup 控件导致被遮挡内容不刷新的原因

    WPF Popup 控件导致被遮挡内容不刷新的原因 周银辉 今天在写一个WPF控件时用到了Popup控件,很郁闷的情况是:当popup关闭时,原来被popup挡住的界面部分不刷新,非要手动刷新一下(比 ...

随机推荐

  1. shell中$0,$?,$!等的特殊用法【转载】

    本文转载自:http://blog.sina.com.cn/s/blog_464f6dba0100psy9.html ----------------------------------------- ...

  2. 15个不起眼但非常强大的 Vim 命令

    如果我的关于这个话题的最新帖子没有提醒到你的话,那我明确地说,我是一个 vim 的粉丝.所以在你们中的某些人向我扔石头之前,我先向你们展示一系列“鲜为人知的 Vim 命令”.我的意思是,一些你可能以前 ...

  3. 绘图（CGContext）

    转自 http://blog.csdn.net/zhenyu5211314/article/details/24230581 0 CGContextRef context = UIGraphicsGe ...

  4. html+javascript实现可拖动弹出层、对话框、可提交

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  5. javascript获取对应页面的代码

    window.onload = function () { function getUrls(url) {//核心代码是url2这行代码,通过.replace()方法将对应的字符串替换成其他方式 va ...

  6. Android dp和px之间转换 及 获取坐标

    dp.px.sp转换 public class DensityUtil { /** * 将px值转换为dip或dp值,保证尺寸大小不变 * * @param pxValue * @param scal ...

  7. [Angular 2] ngrx/store

    @ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...

  8. SQL优化(Oracle)

    (转)SQL优化原则 一.问题的提出 在应用系统开发初期.因为开发数据库数据比較少.对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,可是假设将应用系统提交实际应用后,随着数 ...

  9. linux grep常用参数

    # grep [-acinv] [--color=auto] '搜寻字符串' filename选项与参数:-c :计算找到 '搜寻字符串' 的次数-i :忽略大小写的不同,所以大小写视为相同-n :顺 ...

  10. openvpn server部署笔记

    openvpn server 部署 1.准备 安装依赖 yum -y install gcc gcc-c++ openssl-devel openssl pam-devel 2.安装 lzo cd / ...