Tema mudah alih jQuery
jQuery Mobile menyediakan 2 gaya tema berbeza, daripada "a" hingga "b" - butang, bar alat, blok kandungan, dsb. setiap tema tidak konsisten dalam warna berbeza.
Anda boleh menyesuaikan penampilan aplikasi dengan menetapkan atribut tema data bagi elemen:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| Nilai | Penerangan | Instance | < /tr>< tr>a | Halaman berada pada latar belakang kelabu dengan teks hitam
Butang dihidupkan latar belakang kelabu dengan teks hitam Butang dan pautan yang diaktifkan ialah teks Putih dan latar belakang biruNilai atribut pemegang tempat dalam kotak input input adalah kelabu muda dan nilai nilainya adalah hitam | Cubalah keluar | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| b | Halaman mempunyai latar belakang hitam dan teks putih
| Cubalah |
<a href="#" class="ui-btn ui-btn-a|b">按钮</a><🎜><🎜>
Tajuk Tema dan Bawah
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" id="pageone"> <div data-role="header" data-theme="b"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>文本内容</p> <a href="#" class="ui-btn">按钮</a> <p>插入 <a href="#">链接</a> !</p> </div> <div data-role="footer" data-theme="b"> <h1>页面底部</h1> </div> </div> </body> </html>
Instance Running »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Bawah pengepala kotak dialog tema
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" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎!</p> <a href="#pagetwo" class="ui-btn">跳转到页面二</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header" data-theme="b"> <h1>主题对话框!</h1> </div> <div data-role="main" class="ui-content"> <p>我是一个主题对话框 - 我的头部和底部是黑色的!</p> <a href="#pageone" class="ui-btn ui-btn-inline">跳转到页面一</a> </div> <div data-role="footer" data-theme="b"> <h1>对话框底部文本</h1> </div> </div> </body> </html>
Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Butang Tema
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" id="pageone"> <div data-role="header"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>普通按钮:</p> <a href="#" class="ui-btn">灰色按钮 (默认)</a> <a href="#" class="ui-btn ui-btn-b">黑色按钮</a> <br> <p>内联按钮:</p> <a href="#" class="ui-btn ui-btn-inline">灰色按钮 (默认)</a> <a href="#" class="ui-btn ui-btn-inline ui-btn-b">黑色按钮</a> </div> <div data-role="footer"> <h1>页面底部</h1> </div> </div> </body> </html>
Run instance»
Klik butang "Run instance" untuk melihat instance dalam talian
Ikon tema
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" id="pageone"> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a> <a href="#" class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a> </div> </div> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk lihat contoh dalam talian
Tetingkap pop timbul Tema
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-b ui-btn-inline ui-corner-all">Show Popup</a> <div data-role="popup" id="myPopup" class="ui-content" data-theme="b"> <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> <p>我是主题弹窗!.</p> <p>在我右上角有个关闭按钮</p> <p><b>提示：</b> 你可以点击弹窗的外部区域来关闭弹窗。</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Jalankan instance»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Butang tema pengepala dan 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"> <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>以下按钮仅仅是用于演示，不会有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a> <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Bar Navigasi Tema
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" id="pageone"> <div data-role="header"> <h1>文本头部</h1> </div> <div data-role="main" class="ui-content"> <p>导航栏将会主动基础父元素的样式。可以通过添加 data-theme 属性来自定义按钮样式。</p> </div> <div data-role="footer" data-theme="b"> <h1>Insert Footer Text Here</h1> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home" data-theme="a">Button 1</a></li> <li><a href="#" data-icon="arrow-r">Button 2</a></li> <li><a href="#" data-icon="arrow-r">Button 3</a></li> <li><a href="#" data-icon="search" data-theme="a">Button 4</a></li> </ul> </div> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Panel Tema
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" id="pageone"> <div data-role="panel" id="myPanel" data-theme="b"> <h2>主题面板</h2> <p>我是一个主题面板!</p> <p> 你可以点击面板之外的区域来关闭，或者按下 Esc 键或滑动来关闭。</p> </div> <div data-role="header"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>点击以下按钮打开面板。</p> <a href="#myPanel" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-shadow">打开面板</a> </div> <div data-role="footer"> <h1>页面底部</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Butang dan kandungan boleh lipat tema
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" id="pageone"> <div data-role="header"> <h1>文本头部</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h1>点我 - 我是可折叠的！</h1> <p>我是折叠的内容</p> </div> </div> <div data-role="footer"> <h1>文本底部</h1> </div> </div> </body> </html>
Menjalankan contoh»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
topik senarai
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" id="pageone"> <div data-role="main" class="ui-content"> <h2>有序列表</h2> <ol data-role="listview" data-theme="b"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li data-theme="a"><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ol> <br> <h2>无序列表</h2> <ul data-role="listview"> <li><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> <br> </div> </div> </body> </html>
Run Instance »
Klik butang "Run Instance" untuk melihat contoh dalam talian
Butang Pisah Topik
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" id="pageone"> <div data-role="main" class="ui-content"> <h2>分割按钮实例</h2> <ul data-role="listview" data-inset="true" data-split-theme="b"> <li data-role="divider" data-theme="a">浏览器</li> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p> </a> <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a> </li> <li> <a href="#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox 是一款来自 Mozilla。发布于 2004 年。</p> </a> <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a> </li> </ul> </div> </div> <div data-role="page" id="download"> <div data-role="main" class="ui-content"> <h3>分割按钮实例</h3> <p>下面的按钮仅供演示。</p> <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-check ui-btn-icon-left" data-rel="back">下载</a> <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-delete ui-btn-icon-left" data-rel="back">取消</a> </div> </div> </body> </html>
Jalankan instance»
Klik Butang "Jalankan contoh" untuk melihat contoh dalam talian
Senarai tema yang boleh dilipat
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" id="pageone"> <div data-role="header"> <h1>主题化的可折叠列表</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h4>A</h4> <ul data-role="listview"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> </ul> </div> <div data-role="collapsible" data-theme="b" data-content-theme="a"> <h4>B</h4> <ul data-role="listview"> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> </ul> </div> </div> <div data-role="footer"> <h1>此处是页脚文本</h1> </div> </div> </body> </html>
Run Instance»
Klik "Run Instance" Butang Lihat Instance Dalam Talian
Borang Tema
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" id="pageone"> <div data-role="header"> <h1>主题化表单</h1> </div> <div data-role="main" class="ui-content"> <form method="post" action="demoform.asp"> <div class="ui-fieldcontain"> <label for="name">全名:</label> <input type="text" name="text" id="name" placeholder="你的名字.." data-theme="b"> <br><br> <label for="search">您需要搜索什么？</label> <input type="search" name="search" id="search" placeholder="搜索内容.."> <br><br> <label for="colors">请选择喜爱的颜色：</label> <select id="colors" name="colors" data-theme="b"> <option value="red">红色</option> <option value="green">绿色</option> <option value="blue">蓝色</option> </select> <br><br> <label for="switch">切换开关:</label> <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-theme="b"> <br><br> <div data-role="controlgroup"> <legend>请选择喜爱的电影:</legend> <label for="mov1">蜘蛛侠</label> <input type="checkbox" name="mov1" id="mov1" data-theme="a"> <label for="mov2">变形金刚</label> <input type="checkbox" name="mov2" id="mov2" data-theme="b"> </div> </div> </form> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Borang Boleh Dilipat Tema
Tambah tema baharu
jQuery Mudah Alih boleh ditambah pada halaman mudah alih Tema baharu.
Tambah atau edit tema baharu dengan mengubah suai fail CSS (jika anda telah memuat turun jQuery Mobile). Anda hanya perlu menyalin modul gaya, kemudian perintah semula nama kelas huruf (c-z), dan tambahkan warna dan fon kegemaran anda pada gaya.
Anda juga boleh menambah gaya baharu tema dalam dokumen HTML, tambah kelas bar alat: ui-bar-(a-z), tambah kelas kandungan teks: ui-body-(a-z), tambah kelas halaman: ui -tema-halaman-(a-z) .
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" id="pageone"> <div data-role="header"> <h1>主题化的可折叠列表</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h4>A</h4> <ul data-role="listview"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> </ul> </div> <div data-role="collapsible" data-theme="b" data-content-theme="a"> <h4>B</h4> <ul data-role="listview"> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> </ul> </div> </div> <div data-role="footer"> <h1>此处是页脚文本</h1> </div> </div> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
 | Dalam versi jQuery Mobile sebelumnya, JavaScript telah digunakan untuk mewarisi gaya tema induk untuk elemen. Selepas versi 1.4, rangka kerja memberi lebih perhatian kepada peningkatan prestasi dan tidak lagi menggunakan JavaScript untuk warisan, tetapi menggunakan CSS tulen.
|
|---|
