效果：

（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. C++ 通过Thunk在WNDPROC中访问this指针

    本文基本只讨论原理,具体实现请参见后续文章<C++ 通过Thunk在WNDPROC中访问this指针实现细节> 当注册窗口类时,WNDCLASSEX结构的lpfnWndProc成员应设置为 ...

  2. ubunt 基于deb 配置本地apt 源 分成仅本机使用,局域网使用2种

    dpkg-scanpackages /software /dev/null | gzip>/software/Packages.gz

  3. 封装实现UIButton左文字右图片

    #import "TitleButton.h" @implementation TitleButton - (instancetype)initWithFrame:(CGRect) ...

  4. win7安装ruby on rails

    开发机:win7 旗舰版 - 64位 1,安装ruby,下载rubyinstaller-2.0.0-p451.exe 下载地址:http://rubyinstaller.org/downloads/ ...

  5. 如何安装Windows 8系统中的telnet组件

    知识点分析:Window 8 系统中Telnet没有默认安装,成为了一个可选组件,“启用或关闭Windows功能”下即可添加此组件. 操作步骤:1.系统桌面下同时按住键盘上 “Windows” 和“X ...

  6. java异常面试常见题目

    在Java核心知识的面试中,你总能碰到关于 处理Exception和Error的面试题.Exception处理是Java应用开发中一个非常重要的方面,也是编写强健而稳定的Java程序的关键,这自然使它 ...

  7. object- c 字符串操作

    Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString ,这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改,除非重 ...

  8. UGUI的9个重要回调函数

    using UnityEngine; using System.Collections; using UnityEngine.EventSystems; //句柄 public class Butto ...

  9. SKTexture类

    继承自 NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit.framewo ...

  10. Laravel 4 Quick Tip: Custom Error Pages

    App::error(function($exception, $code) { switch ($code) { case 403: return Response::view('errors.40 ...