关注我们

jQuery - 主题切换

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

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

链接：https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-theming.html

<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>Learnfk 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>Learnfk 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>Learnfk 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>Learnfk point</h1>
         </div>
      </div>
   </body>
</html>

运行上面代码输出

无涯教程网

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)