无涯教程-jQuery - 主题切换

无涯教程
83 阅读2分钟

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

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

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

  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.jquery.com/jquery-1.11.3.min.js"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.jquery.com/jquery-1.11.3.min.js"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">
  </span><span class="tag">&lt;script</span><span class="pln"> 
     </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">



</head>


<body>
<div data-role="page" id="pageone" data-theme="a">
<div data-role="header">
<h1>Learnfk Point</h1>
</div>


     </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">data-role</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-content"</span><span class="tag">&gt;</span><span class="pln">
        
        </span><span class="tag">&lt;p&gt;</span><span class="pln">Text link</span><span class="tag">&lt;/p&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">A Standard Text Link</span><span class="tag">&lt;/a&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-btn"</span><span class="tag">&gt;</span><span class="pln">Link Button</span><span class="tag">&lt;/a&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">A List View:</span><span class="tag">&lt;/p&gt;</span><span class="pln">
            
        </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">data-role</span><span class="pun">=</span><span class="atv">"listview"</span><span class="pln"> </span><span class="atn">data-autodividers</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="atn">data-inset</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Android </span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
           </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">IOS</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
            
        </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"fullname"</span><span class="tag">&gt;</span><span class="pln">Input Field:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
        </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"fullname"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"fullname"</span><span class="pln"> 
           </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Name.."</span><span class="tag">&gt;</span><span class="pln">    
        </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"switch"</span><span class="tag">&gt;</span><span class="pln">Toggle Switch:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
            
        </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-role</span><span class="pun">=</span><span class="atv">"slider"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"on"</span><span class="tag">&gt;</span><span class="pln">On</span><span class="tag">&lt;/option&gt;</span><span class="pln">
           </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"off"</span><span class="pln"> </span><span class="atn">selected</span><span class="tag">&gt;</span><span class="pln">Off</span><span class="tag">&lt;/option&gt;</span><span class="pln">
        </span><span class="tag">&lt;/select&gt;</span><span class="pln">
            
     </span><span class="tag">&lt;/div&gt;</span><span class="pln">

     </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">data-role</span><span class="pun">=</span><span class="atv">"footer"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;h1&gt;</span><span class="pln">Learnfk point</span><span class="tag">&lt;/h1&gt;</span><span class="pln">
     </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



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


     </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">data-role</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-content"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">Text link</span><span class="tag">&lt;/p&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">A Standard Text Link</span><span class="tag">&lt;/a&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-btn"</span><span class="tag">&gt;</span><span class="pln">Link Button</span><span class="tag">&lt;/a&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">A List View:</span><span class="tag">&lt;/p&gt;</span><span class="pln">
            
        </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">data-role</span><span class="pun">=</span><span class="atv">"listview"</span><span class="pln"> </span><span class="atn">data-autodividers</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="atn">data-inset</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">Android </span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
           </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">IOS</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
            
        </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"fullname"</span><span class="tag">&gt;</span><span class="pln">Input Field:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
        </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"fullname"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"fullname"</span><span class="pln"> 
           </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Name.."</span><span class="tag">&gt;</span><span class="pln">    
        </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"switch"</span><span class="tag">&gt;</span><span class="pln">Toggle Switch:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
            
        </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"switch"</span><span class="pln"> </span><span class="atn">data-role</span><span class="pun">=</span><span class="atv">"slider"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"on"</span><span class="tag">&gt;</span><span class="pln">On</span><span class="tag">&lt;/option&gt;</span><span class="pln">
           </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"off"</span><span class="pln"> </span><span class="atn">selected</span><span class="tag">&gt;</span><span class="pln">Off</span><span class="tag">&lt;/option&gt;</span><span class="pln">
        </span><span class="tag">&lt;/select&gt;</span><span class="pln">
            
     </span><span class="tag">&lt;/div&gt;</span><span class="pln">

     </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">data-role</span><span class="pun">=</span><span class="atv">"footer"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;h1&gt;</span><span class="pln">Learnfk point</span><span class="tag">&lt;/h1&gt;</span><span class="pln">
     </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



</body>
</html>

运行上面代码输出

参考链接

www.learnfk.com/jquery/jque…

avatar
文章
阅读
粉丝