效果：

（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 Concurrent] 多线程合作 producer-consumers / queue 的简单案例

    在多线程环境下,通过 BlockingQueue,实现生产者-消费者场景. Toast 被生产和消费的对象. ToastQueue 继承了 LinkedblockingQueue ,用于中间存储 To ...

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

    Flywight Pattern, 即享元模式,用于减少对象的创建,降低内存的占用,属于结构类的设计模式.根据名字,我也将其会理解为 轻量模式. 下面是享元模式的一个简单案例. 享元模式,主要是重用已 ...

  3. bda_百度百科

    bda_百度百科 bda

  4. 在DataTable和DataView中查找指定记录

    一.在DataTable中查找 1. 使用Select方法查找没有主键的表DataTable的Select方法返回一个DataRow数组,有四个重载的函数. DataRow[] drs = dt.Se ...

  5. Java中equals和“==””的区别，String特殊

    public class TestString { /* * java中的数据类型,可分为两类: * 1.基本数据类型,也称为原始数据类型.byte,short,char,int,long,float ...

  6. 国内三大PT（Private Tracker）站分析

    除这一行外,下面全部内容都是转载.出处不明. 国内三大PT(Private Tracker)站分析 先郑重的声明一下:本文以下的内容所有是复制粘贴的,不代表老夫的观点. 事实上内容我也没细致看. 贴这 ...

  7. http to https automatic--weblogic/jboss/tomcat--reference

    weblogic reference from:http://middlewaremagic.com/weblogic/?p=2019 Many times we want to secure our ...

  8. 深入理解 CSS变形 transform(3d)

    坐标轴 在了解透视之前,首先要先了解坐标轴.3D变形与2D变形最大的不同就在于其参考的坐标轴不同.2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x.y.z三条轴组成的立体空间,x轴 ...

  9. nyoj 76

    #include <iostream> using namespace std; int main() { int i,t,n; int a[101]; cin>>t; whi ...

  10. BeanUtils--内省加强

    BeanUtils就是一个处理Bean的工具包.内部也是使用内省.但对内省做了加强. Bean的set |get不用再成对出现 核心类: BeanUtils. 1.导包