JQuery 主题

jQuery具有两个不同的样式主题,分别为A和B,每个按钮,条形图,内容块等都有不同的颜色。

查询主题化的语法如下所示:

<div data-role="page" data-theme="a|b">

一个简单的A主题Example,如下所示:

<!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>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>

一个简单的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>
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by bytekits.com,汇天下文字,成非凡梦想!!!