5x8小时服务热线:131 4102 7650(同微信)
您当前的位置:首页 > 网站常识 - 网站建设

深入了解Jquery Mobile Popup的使用

来源:网站制作公司 标签:Jquery MobilePopuphtml5手机网站
分享到:
大家对弹出浮层都不陌生,这里小编主要是针对于手机页面中,使用Jquery Mobile来呈现浮层对话窗Popup的讲解。希望对你有帮助哦!

弹出式窗口小组件,可用于各种类型的弹出窗口,比如从一个小的提示弹窗到一个大幅照片的弹窗,都可以实现。基本的弹窗容器没有padding样式。
a)基本弹窗Popup basics
<div id="popupDemo" data-role="popup">...</div>
<a href="#popupDemo" data-rel="popup" data-transition="pop">点击这里</a>

b)工具提示框Tooltip,相比基本的弹窗多了一个class="ui-content",增加了padding内填充的样式。
<div id="popupDemo" data-role="popup" class="ui-content">...</div>
<a href="#popupDemo" data-rel="popup" data-transition="pop">点击这里</a>
data-transition="pop"可以实现弹窗出现时有一个动画过度效果,非常完美!

c)照片弹窗Photo lightbox
这里是单张图片的弹窗展示,代码如下:
<a href="#popupParis" data-rel="popup" data-position-to="window" data-transition="fade">
   <img class="popphoto" src="../_assets/img/paris.jpg">
</a>
<div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="b" data-corners="false">
   <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
   <img class="popphoto" src="../_assets/img/paris.jpg">
</div>

d)导航弹窗Menu
一个菜单可以通过添加一个ListView来以弹窗出现,效果也是非常的棒!
<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="b">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
            <li data-role="list-divider">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Disable</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
</div>

e)嵌套菜单Nested menu
嵌套菜单也可以通过添加ListView来以弹窗出现。
<a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">Choose a creature...</a>
<div data-role="popup" id="popupNested" data-theme="none">
    <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="false">
        <h2>Farm animals</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Chicken</a></li>
                <li><a href="#" data-rel="dialog">Cow</a></li>
                <li><a href="#" data-rel="dialog">Duck</a></li>
                <li><a href="#" data-rel="dialog">Sheep</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Pets</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Cat</a></li>
                <li><a href="#" data-rel="dialog">Dog</a></li>
                <li><a href="#" data-rel="dialog">Iguana</a></li>
                <li><a href="#" data-rel="dialog">Mouse</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Ocean Creatures</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Fish</a></li>
                <li><a href="#" data-rel="dialog">Octopus</a></li>
                <li><a href="#" data-rel="dialog">Shark</a></li>
                <li><a href="#" data-rel="dialog">Starfish</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
        <h2>Wild Animals</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Lion</a></li>
                <li><a href="#" data-rel="dialog">Monkey</a></li>
                <li><a href="#" data-rel="dialog">Tiger</a></li>
                <li><a href="#" data-rel="dialog">Zebra</a></li>
            </ul>
        </div><!-- /collapsible -->
    </div><!-- /collapsible set -->
</div><!-- /popup -->

f)表单弹窗Form
可以将一个表单作为弹窗来实现,当鼠标点击弹窗,焦点会自动到第一个表单元素。如下:
<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Sign in</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <h3>Please sign in</h3>
            <label for="un" class="ui-hidden-accessible">Username:</label>
            <input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
            <label for="pw" class="ui-hidden-accessible">Password:</label>
            <input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
            <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
        </div>
    </form>
</div>

g)确认对话框Dialog
可以创建一个风格样式的对话框,添加data-dismissible="false" 属性,完成于用户之间的交互
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="a">
    <h1>Delete Page?</h1>
    </div>
    <div role="main" class="ui-content">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
    <p>This action cannot be undone.</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
    </div>
</div>

h)可关闭的弹出框 Closing popups
只要在弹出框中增加close的a link即可。如:
<a href="#" class="ui-btn-right" data-rel="back">关闭</a>
按钮可以在右上角,也可以在左上角,class为ui-btn-right or ui-btn-left
如果使用框架自带的按钮样式,可以这样写:class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right"

i)定位 Position
默认弹出框的位置,是以鼠标单击点为中心,上下左右居中显示。如果要以浏览器窗口为中心,居中对齐,可以添加data-position-to属性到链接link中,并制定值为window,如下:
<a href="#popupDiv" data-rel="popup" data-transition="pop" data-pisition-to="window">点击打开弹出框</a>

j)过度动画Transitions
在默认没有过度动画的情况下,弹出框会尽可能快的显示出来。为了让弹出框Pop有个过度显示的效果,

可以添加属性data-transition到链接弹窗的a link中。如:
<a href="#popupDiv" data-rel="popup" data-transition="pop" data-pisition-to="window">点击打开弹出框</a>
具体的属性值有:pop fade flip turn flow slide slidefade slideup slidedown

k)主题Theme
弹窗有2个主题样式选项:data-theme  和 data-overlay-theme
data-theme:主要指的是弹窗本身的主题样式选项,有2个值,a和b。a代表是白色背景,b代表是黑色背景。
data-overlay-theme:主要指的是弹窗后面的背景层的主题样式选项,有2个值a和b,a代表是白色背景,b代表是黑色背景。

l)带箭头的弹窗arrow
当弹窗设置了data-arrow属性,那么弹窗会沿着某边缘打开并显示出来。
data-arrow的值可以以下三种:
true :和l,t,r,b是一样的效果
false or "":弹窗出现不带任何箭头
一个逗号分隔的字符串(l,t,r,b)l代表left t代表top r代表right b代表bottom,注意这里可以组合为l,t 、  l,b 、  r,t 、 r,b四种形式。

m)预渲染标记Pre-rendered markup
为了节省启动时间,可以设置预渲染弹窗标记。如下举例:
<a href="#pre-rendered" data-rel="popup" class="ui-btn" aria-owns="pre-rendered" aria-haspopup="true" aria-expanded="false">Open Popup</a>
<div style="display: none;"><!-- placeholder for pre-rendered --></div>
<div id="pre-rendered-popup" class="ui-popup-container fade ui-popup-hidden ui-body-inherit ui-overlay-shadow ui-corner-all">
    <div id="pre-rendered" class="ui-popup" data-role="popup" data-enhanced="true" data-transition="fade">
        <p>This is the contents of the pre-rendered popup</p>
    </div>
</div>

看完后,你是否对Jquery Mobile的弹窗有所了解了呢,加我QQ563853099 一起交流学习!加油~
备注:本篇文章由加网编辑原创内容,转载请注明出处:转自加网

相关网站常识

更多