Jquery有两个不同的样式主题,如A和B.Each,按钮,条形图,内容块等具有不同的颜色.
J查询主题的语法如下所示 :
<div data-role = "page" data-theme = "a|b">
简单的主题示例如下所示 :
<!DOCTYPE html> < html> < head> < meta name ="viewport"content ="width = device-width,initial-scale = 1"> < link rel ="stylesheet" href ="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> < script src ="https://code.jquery.com/jquery-1.11.3.min.js"> </script> < 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> </head> < body> < div data-role ="page"id ="pageone"data-theme ="a"> < div data-role ="header"> < h1> Tutorials Point</h1> </div> < div data-role ="main"class ="ui-content"> < p>文字链接</p> < a href ="#">标准文字链接</a> < a href ="#"class ="ui-btn">链接按钮</a> < p>列表视图:</p> < ul data-role ="listview"data-autodividers ="true"data-inset ="true"> < li>< a href ="#"> Android</a></li> < li>< a href ="#"> IOS</a></li> </ul> < label for ="fullname">输入字段:</label> < input type ="text"name ="fullname"id ="fullname" placeholder ="Name .."> < label for ="switch">拨动开关:</label> < select name ="switch"id ="switch"data-role ="slider"> < option value ="on"> On</option> < option value ="off"已选择>关闭</选项> </select> </div> < div data-role ="footer"> < h1>教程指向</h1> </div> </div> </body> </html>
这应该产生以下结果 :
简单的B主题示例如下所示 :
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script> <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> </head> <body> <div data-role = "page" id = "pageone" data-theme = "b"> <div data-role = "header"> <h1>Tutorials Point</h1> </div> <div data-role = "main" class = "ui-content"> <p>Text link</p> <a href = "#">A Standard Text Link</a> <a href = "#" class = "ui-btn">Link Button</a> <p>A List View:</p> <ul data-role = "listview" data-autodividers = "true" data-inset = "true"> <li><a href = "#">Android </a></li> <li><a href = "#">IOS</a></li> </ul> <label for = "fullname">Input Field:</label> <input type = "text" name = "fullname" id = "fullname" placeholder = "Name.."> <label for = "switch">Toggle Switch:</label> <select name = "switch" id = "switch" data-role = "slider"> <option value = "on">On</option> <option value = "off" selected>Off</option> </select> </div> <div data-role = "footer"> <h1>Tutorials point</h1> </div> </div> </body> </html