效果：

（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. Java学习日记-7 抽象类和接口

    一.抽象类 abstract修饰:类和类中的方法 抽象方法:abstract type name(parameter-list);(abstract不能修饰static方法和构造函数) 引用:抽象类有 ...

  2. MVC4 Razor视图下使用iframe加载RDLC报表

    MVC视图下默认是不支持服务器端控件的,所以,为了能够通过report viewer控件加载报表,需要在MVC视图添加嵌入的页面. 起初在stackoverflow上找到一个解决方案,见这里.不过这里 ...

  3. C#三层开发做学生管理系统

    1.定义各个层 2.添加各个层之间的引用 DAL 层调用Model BLL层调用DAL和Model UI层调用BLL和Model层 Model层供各个层调用 3.根据数据库建立实体类,每张表对应一个实 ...

  4. HDU3631：Shortest Path(Floyd)

    Problem Description When YY was a boy and LMY was a girl, they trained for NOI (National Olympiad in ...

  5. 【ICIP2013】MULTI-SOURCE IMAGE AUTO-ANNOTATION

    题目:多来源图像自动标注 文中利用了不同来源的图像组内和组间的关系来增强自动标注的效果. 一方面认为,相似的图像预测的也应该是相似的,利用kNN图的关系进行组内的正则化,以此增强底层特征的联系. 另一 ...

  6. 2013级C++第15周(春)项目——输入输出流及文件文件操作

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759.内有完整教学方案及资源链接 本周程序阅读及程序调试中须要的文件,请到htt ...

  7. 实战:mysql版本号升级

    /***************************************************** mysql 5.6.19 升级到5.6.21 ********************** ...

  8. Ubuntu安装分区设置

    我的Ubuntu 安装分区 /boot   200M /          2000M /home  6000M swap    1000M /boot分区,它包含了操作系统的内核和在启动系统过程中所 ...

  9. mysql 创建数据库使用默认字符集(备忘)

    GBK: create database test2 DEFAULT CHARACTER SET gbk COLLATE gbk_chinese_ci; UTF8: CREATE DATABASE ` ...

  10. HBuilder开发app ajax跨域 解决XMLHttpRequest

    <div id="a1" onclick="testXHR()" style="font-size: 5em;">sss1< ...