jQuery - Theming

首页 / jQuery / Theming

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

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

无涯教程网

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

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

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

来源:LearnFk无涯教程网

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

运行上面代码输出

这一章《jQuery - Theming》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

相关文章

邱岳的产品手记 -〔邱岳 - 49讲〕

说透敏捷 -〔宋宁 - 13讲〕

大厂晋升指南 -〔李运华 - 44讲〕

Spark性能调优实战 -〔吴磊 - 34讲〕

使用 chart.js v2 删除图表上的图例

如何滚动到AngularJS中的页面顶部?

如何禁用在div内单击

如何在 JQuery UI 自动完成中使用 source:function()... 和 AJAX

具有动态大小图像的马赛克网格画廊

如何使用jQuery触发类更改事件?

视频推荐〔jQuery-40-级联查询优化〕

更多视频 »
好记忆不如烂笔头。留下你的足迹吧 :)