Tetingkap pop timbul jQuery Mobile
Tetingkap timbul ialah kotak dialog yang sangat popular, yang boleh dipaparkan pada halaman.
Tetingkap timbul boleh digunakan untuk memaparkan sekeping teks, gambar, peta atau kandungan lain.
Untuk mencipta tetingkap timbul, anda perlu menggunakan elemen <a> Tambahkan data-rel="popup" pada elemen <a> Atribut, <div> elemen menambah atribut data-role="popup". Seterusnya kami menentukan id untuk <div>, dan kemudian menetapkan nilai href bagi <a> kepada id yang ditentukan oleh <div>. Kandungan dalam <div> ialah kandungan yang dipaparkan dalam tetingkap pop timbul.
Nota: <div> tetingkap pop timbul dan pautan <a>
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a> <div data-role="popup" id="myPopup"> <p>这是一个简单的弹窗</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Jika anda perlu menambah jidar dalam dan luar pada tetingkap timbul, anda boleh menambah kelas "ui-kandungan" dalam <div>:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a> <div data-role="popup" id="myPopup" class="ui-content"> <h3>欢迎!</h3> <p>"ui-content" 类在弹窗使用 <span style="font-size:55px;">样式文本</span> 时是特别有用的，它可以使得弹窗看起来更加美观时尚。 <strong>注意：</strong> 如果需要文本会包含多行。</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Tutup pop -up window
Secara lalai, Klik di luar tetingkap timbul atau tekan kekunci "Esc" untuk menutup tetingkap timbul. Jika anda tidak mahu mengklik di luar tetingkap timbul untuk menutup tetingkap timbul, anda boleh menambah atribut data-dismissible="false" (tidak disyorkan). Anda juga boleh menambah butang tutup pada tetingkap timbul, menggunakan data-rel="back" pada butang Sifat, dan mengawal kedudukan butang melalui gaya.
| 描述 | 实例 |
|---|---|
| 右侧关闭按钮 | 尝试一下 |
| 左侧关闭按钮 | 尝试一下 |
| 使用 data-dismissible 属性 | 尝试一下 |
Meletakkan tetingkap timbul
Secara lalai, tetingkap timbul akan dipaparkan terus di atas elemen yang diklik jika anda perlu mengawal kedudukan tetingkap pop timbul, anda boleh membuka tetingkap timbul dalam Gunakan atribut kedudukan data pada pautan klik tetingkap.
Tiga cara untuk mengawal kedudukan tetingkap timbul:
| 属性值 | 描述 |
|---|---|
| data-position-to="window" | 弹窗在窗口居中显示 |
| data-position-to="#myId" | 弹窗显示在知道的 #id 元素上 |
| data-position-to="origin" | 默认。弹窗显示在点击的元素上。 |
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window">弹窗窗口显示</a> <a href="#myPopup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="#demo">弹窗显示在 id="demo" 元素上</a> <a href="#myPopup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="origin">默认显示</a> <div data-role="popup" id="myPopup1" class="ui-content"> <p>我显示在窗口的中间部分。</p> </div> <div data-role="popup" id="myPopup2" class="ui-content"> <p>我显示在 id="demo" 的元素上。</p> </div> <div data-role="popup" id="myPopup3" class="ui-content"> <p>我显示在点击的按钮上。</p> </div> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <p>这还是一个段落。</p> <p>这是一个段落。这个段落包含了子元素：这是一个插入在段落中 id="demo" 的 <span id="demo" style="color:red;">span</span> 元素 。</p> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Peralihan
Secara lalai, tetingkap timbul tidak mempunyai kesan peralihan. Jika anda perlu, anda boleh menambah kesan peralihan (peralihan mudah alih jQuery) melalui atribut data-transition="value":
Semua kejadian kesan peralihan
tika
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>以下演示了弹窗所有过渡效果的实例。</p> <p><b>注意：</b> 从性能方面上考虑， jQuery Mobile 推荐使用 "pop", "fade" 或 "none" 过渡效果。</p> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">淡入</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flip">翻转</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flow">抛出当前页后显示</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="pop">弹出</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slide">向左滑动</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidefade">向左滑动并淡入</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slideup">向上滑动 up</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidedown">向下滑动</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="turn">转向</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="none" >无过渡效果。</a> <div data-role="popup" id="myPopup" class="ui-content"> <p>这是一个简单的弹窗。</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Sempadan kecil ke arah tetingkap pop timbul
Jika anda perlu menambah sempadan kecil ke arah tetingkap timbul, anda boleh menggunakan atribut anak panah data dan tentukan nilainya "l" (kiri), "t" (atas), "r" (kanan) atau "b" (bawah):
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>点击按钮打开一个带方向边框的弹窗。</p> <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">左边</a> <a href="#myPop2" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">顶部</a> <a href="#myPop3" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">右边</a> <a href="#myPop4" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">底部</a> <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l"> <p>在左边框有个方向。</p> </div> <div data-role="popup" id="myPop2" class="ui-content" data-arrow="t"> <p>在顶部边框有个方向。</p> </div> <div data-role="popup" id="myPop3" class="ui-content" data-arrow="r"> <p>在右边框有个方向。</p> </div> <div data-role="popup" id="myPop4" class="ui-content" data-arrow="b"> <p>在底部边框有个方向。</p> </div> <p>这是一个段落，用于实例展示。弹窗显示在 <span id="demo" style="color:red;">这里</span>。</p> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
pop -kotak dialog ke atas
Anda boleh menjadikan tetingkap timbul sebagai kotak dialog standard (pengepala, kandungan dan teg bawah):
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">打开对话框弹窗</a> <div data-role="popup" id="myPopupDialog"> <div data-role="header"> <h1>头部文本</h1> </div> <div data-role="main" class="ui-content"> <h2>欢迎访问弹窗对话框!</h2> <p>jQuery Mobile 非常有意思!</p> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Tetingkap timbul gambar
Anda boleh memaparkan gambar dalam tetingkap pop timbul:Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div id="pageone" data-role="main" class="ui-content"> <p>点击图片放大它。</p> <p>注意我们在右上角添加了 "返回按钮"。</p> <a href="#myPopup" data-rel="popup" data-position-to="window"> <img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" alt="Skaret View" style="width:200px;"></a> <div data-role="popup" id="myPopup"> <p>这是我的图片！</p> <a href="#pageone" 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 src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" style="width:800px;height:400px;" alt="Skaret View"> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk lihat contoh dalam talian
Tindanan latar belakang tetingkap timbul
Anda boleh menggunakan atribut tema tindanan-data untuk menambah warna latar belakang di belakang tetingkap timbul.
Warna latar belakang tindanan adalah lutsinar secara lalai. Gunakan data-overlay-theme="a" untuk menambah latar belakang yang terang, gunakan data-overlay-theme="b" untuk menambah latar belakang tindanan gelap:
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a> <div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="b"> <p>在我身后有个深色背景。</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Tetingkap timbul gambar umum sering menggunakan tindanan latar belakang:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div id="pageone" data-role="main" class="ui-content"> <p>点击图片放大它。</p> <p>注意我们在右上角添加了 "返回按钮"。</p> <a href="#myPopup" data-rel="popup" data-position-to="window"> <img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" alt="Skaret View" style="width:200px;"></a> <div data-role="popup" id="myPopup" data-overlay-theme="b"> <p>这是我的图片！</p> <a href="#pageone" 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 src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" style="width:800px;height:400px;" alt="Skaret View"> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Nota: Seterusnya Dalam bab ini, anda akan belajar cara menggunakan borang dalam tetingkap pop timbul.
