jQuery Mobile 彈出框是一個非常方便的工具,可以讓網頁開發者在移動端快速實現彈窗功能。在使用jQuery Mobile彈出框時,我們只需要簡單地引入相關的JS和CSS文件即可。下面是一個基本的jQuery Mobile彈出框示例:
<!-- 引入jQuery Mobile核心文件 --> <link rel="stylesheet" > <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <!-- 定義彈出框模板 --> <div data-role="popup" id="myPopup" data-dismissible="false"> <p>這是一個彈出框!</p> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-check ui-btn-icon-left" data-rel="back">確定</a> </div> <!-- 觸發彈出框 --> <a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-plus ui-btn-icon-left">點我彈出框</a>
可以看到,我們首先在頁面中引入了jQuery Mobile的核心樣式和腳本文件。接著,我們定義了一個彈出框模板,其中data-role="popup"表示這是一個彈出框組件,id為"myPopup"。然后,在頁面中觸發彈出框的按鈕上,我們使用了data-rel="popup"來指定這個按鈕要觸發哪個彈出框。在這個按鈕的href屬性中,我們使用#myPopup來指向之前定義的彈出框模板。這樣,點擊按鈕時就會觸發這個彈出框。
除此之外,jQuery Mobile彈出框還有很多其他的設置和屬性,例如可以設置彈出框的位置、動畫效果、關閉按鈕等等。如果想要學習更多關于jQuery Mobile彈出框的內容,建議去官網查看相關文檔。