jQuery Mobile弹出窗、弹出层知识汇总

前端技术 2023/09/01 JavaScript

先创建一个窗体

<div data-role=\"popup\" id=\"popupView\" class=\"ui-content\" data-overlay-theme=\"b\" data-position-to=\"window\" data-dismissible=\"false\">
　　<a href=\'javascript:void(0)\' 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>
　　<div>弹出窗内容<div>
</div>

1）点击后弹出

<a href=\"#popupView\" data-rel=\"popup\" data-transition=\"flip\" class=\"ui-btn ui-corner-all\">按钮</a>

2）页面加载后弹出

//页面延时加载<script>
setTimeout(function () {
　　$(\"#popupView\").popup(\'open\');
}, 1000);//1秒</script>

关键字说明：

data-overlay-theme: 背景色透明灰 data-position-to: 弹窗在窗口居中显示 data-dismissible: 是否允许单击窗口外任一位置关闭窗口（默认true为允许） data-transition: 弹出方式

下面通过代码实例详解jquery mobile 弹出层使用

引入文件

<head> 
<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css\"> <script src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></script> <script src=\"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js\"></script> 
</head>

弹出层基础

创建一个弹出层，要在div标签中添加一个 data-role=\"popup\" 属性，然后在添加一个a标签，并在a标签href属性中设置弹出div层的id,在a标签中添加属性

data-rel=\"popup\"
To create a popup, add the data-role=\"popup\" attribute to a div with the popup contents. Then create a link with the href set to the id of the popup div, and add the attribute data-rel=\"popup\" to tell the framework to open the popup when the link is tapped. A popup div has to be nested inside the same page as the link.
<a href=\"#popupBasic\" data-rel=\"popup\" class=\"ui-btn ui-corner-all ui-shadow ui-btn-inline\" data-transition=\"pop\">Basic Popup</a>
<div data-role=\"popup\" id=\"popupBasic\">
<p>This is a completely basic popup, no options set.</p>
</div>

简单实例

<!DOCTYPE html>
<html>
<head>
<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css\">
<script src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></script>
<script src=\"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js\"></script>
</head>
<body>
<div data-role=\"page\" id=\"pageone\">
<a href=\"#popupBasic\" data-rel=\"popup\" class=\"ui-btn ui-corner-all ui-shadow ui-btn-inline\" data-transition=\"pop\">点击我弹出层</a>
<div data-role=\"popup\" id=\"popupBasic\">
<p>弹出层测试</p>
</div>
</div> 
</body>
</html>

工具提示可以通过添加一个主题创建样本基本通过ui-content弹出并添加填充

A tooltip can be created by adding a theme swatch to a basic popup and adding padding via the ui-content class. 
<p>A paragraph with a tooltip. <a href=\"#popupInfo\" data-rel=\"popup\" data-transition=\"pop\" class=\"my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext\" title=\"Learn more\">Learn more</a></p>
<div data-role=\"popup\" id=\"popupInfo\" class=\"ui-content\" data-theme=\"a\" style=\"max-width:350px;\">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>

提示信息实例

<!DOCTYPE html>
<html>
<head>
<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css\">
<script src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></script>
<script src=\"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js\"></script>
</head>
<body>
<div data-role=\"page\" id=\"pageone\">
<p>A paragraph with a tooltip. <a href=\"#popupInfo\" data-rel=\"popup\" data-transition=\"pop\" class=\"my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext\" title=\"Learn more\">Learn more</a></p>
<div data-role=\"popup\" id=\"popupInfo\" class=\"ui-content\" data-theme=\"a\" style=\"max-width:350px;\">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
</div> 
</body>
</html>

弹出图片

<!DOCTYPE html>
<html>
<head>
<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css\">
<script src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></script>
<script src=\"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js\"></script>
</head>
<body>
<div data-role=\"page\" id=\"pageone\">
<a href=\"#popupParis\" data-rel=\"popup\" data-position-to=\"window\" data-transition=\"fade\"><img class=\"popphoto\" src=\"http://demos.jquerymobile.com/1.4.3/_assets/img/paris.jpg\" alt=\"Paris, France\" style=\"width:30%\"></a>
<a href=\"#popupSydney\" data-rel=\"popup\" data-position-to=\"window\" data-transition=\"fade\"><img class=\"popphoto\" src=\"http://demos.jquerymobile.com/1.4.3/_assets/img/sydney.jpg\" alt=\"Sydney, Australia\" style=\"width:30%\"></a>
<a href=\"#popupNYC\" data-rel=\"popup\" data-position-to=\"window\" data-transition=\"fade\"><img class=\"popphoto\" src=\"http://demos.jquerymobile.com/1.4.3/_assets/img/newyork.jpg\" alt=\"New York, USA\" style=\"width:30%\"></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=\"http://demos.jquerymobile.com/1.4.3/_assets/img/paris.jpg\" style=\"max-height:512px;\" alt=\"Paris, France\">
</div>
<div data-role=\"popup\" id=\"popupSydney\" 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=\"http://demos.jquerymobile.com/1.4.3/_assets/img/sydney.jpg\" style=\"max-height:512px;\" alt=\"Sydney, Australia\">
</div>
<div data-role=\"popup\" id=\"popupNYC\" 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=\"http://demos.jquerymobile.com/1.4.3/_assets/img/newyork.jpg\" style=\"max-height:512px;\" alt=\"New York, USA\">
</div>
</div> 
</body>
</html>

本文地址：https://www.stayed.cn/item/1636

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案