效果：

（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] LinkedList / Queue - 源代码学习笔记

    简单地画了下 LinkedList 的继承关系,如下图.只是画了关注的部分,并不是完整的关系图.本博文涉及的是 Queue, Deque, LinkedList 的源代码阅读笔记.关于 List 接口 ...

  2. [Design Pattern] Mediator Pattern 简单案例

    Meditor Pattern,即调解模式,用一个调解类类处理所有的沟通事件,使得降低多对象之间的沟通难度,属于行为类的设计模式.为了方便理解记忆,我也称其为,沟通模式. 下面是一个调解模式的简单案例 ...

  3. 「Githug」Git 游戏通关流程

    Githug 他喵的这是个啥!?难道不是 GitHub 拼错了么,和 Git 什么关系? 和游戏又有什么关系? 其实,他的元身在这里:https://github.com/Gazler/githug  ...

  4. NSTemporaryDirectory 临时文件

    唯一标识 : NSString*identifier=[[NSProcessInfoprocessInfo]globallyUniqueString]; 创建临时文件路径: NSString *fil ...

  5. iOS图片处理

    http://www.cnblogs.com/kenshincui/p/3959951.html

  6. Oracle Dataguard三种保护模式

    Oracle Dataguard提供了三种数据保护模式,在此分别总结一下三种数据保护模式的特点. 1.最大保护模式1)这种模式提供了最高级别的数据保护能力:2)要求至少一个物理备库收到重做日志后,主库 ...

  7. Struts2学习笔记(一):Struts2开发环境的配置

    一.Struts2应用所需的jar文件. 开发struts2应用需要依赖的jar文件在解压目录下的lib文件夹里面.开发struts2程序最少需要的jar文件为:struts2-core-2.xx.j ...

  8. SpringMVC进行文件的上传以及多文件的上传(转)

    基本的SpringMVC的搭建在我的上一篇文章里已经写过了,这篇文章主要说明一下如何使用SpringMVC进行表单上的文件上传以及多个文件同时上传的步骤 SpringMVC 基础教程 框架分析:htt ...

  9. leetcode第一刷_Word Ladder II

    这道题非常难. 之前的题目我提到过一次用两个vector来做层序遍历的,就是由于这道题.要想最后恢复出单词变换的路径,就须要事先保存,依据dp中路径恢复的启示,保存的应该是一个单词的前一个变换节点.可 ...

  10. Java基础知识强化70：正则表达式之引入案例（QQ号码校验）

    1. 校验QQ号码的案例,如下: package cn.itcast_01; import java.util.Scanner; /* * 校验qq号码. * 1:要求必须是5-15位数字 * 2:0 ...