Educational

Theming

Written by

Saim Khalid

in

Jquery has two different styling themes as A And B.Each with different colors for buttons, bars, content blocks, and so on.

The syntax of J query theming as shown below −

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

A Simple of A theming Example as shown below −

<!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"&gt;&lt;script src = "https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;&lt;script src = "https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;&lt;script 
     src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div data-role = "page" id = "pageone" data-theme = "a"&gt;&lt;div data-role = "header"&gt;&lt;h1&gt;Tutorials Point&lt;/h1&gt;&lt;/div&gt;&lt;div data-role = "main" class = "ui-content"&gt;&lt;p&gt;Text link&lt;/p&gt;&lt;a href = "#"&gt;A Standard Text Link&lt;/a&gt;&lt;a href = "#" class = "ui-btn"&gt;Link Button&lt;/a&gt;&lt;p&gt;A List View:&lt;/p&gt;&lt;ul data-role = "listview" data-autodividers = "true" data-inset = "true"&gt;&lt;li&gt;&lt;a href = "#"&gt;Android &lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href = "#"&gt;IOS&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;label for = "fullname"&gt;Input Field:&lt;/label&gt;&lt;input type = "text" name = "fullname" id = "fullname" 
           placeholder = "Name.."&gt;&lt;label for = "switch"&gt;Toggle Switch:&lt;/label&gt;&lt;select name = "switch" id = "switch" data-role = "slider"&gt;&lt;option value = "on"&gt;On&lt;/option&gt;&lt;option value = "off" selected&gt;Off&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;div data-role = "footer"&gt;&lt;h1&gt;Tutorials point&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




This should produce following result −https://www.tutorialspoint.com/jquery/src/atheme.htm





A Simple of B theming Example as shown below −





<!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"&gt;&lt;script src = "https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;&lt;script src = "https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;&lt;script 
     src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div data-role = "page" id = "pageone" data-theme = "b"&gt;&lt;div data-role = "header"&gt;&lt;h1&gt;Tutorials Point&lt;/h1&gt;&lt;/div&gt;&lt;div data-role = "main" class = "ui-content"&gt;&lt;p&gt;Text link&lt;/p&gt;&lt;a href = "#"&gt;A Standard Text Link&lt;/a&gt;&lt;a href = "#" class = "ui-btn"&gt;Link Button&lt;/a&gt;&lt;p&gt;A List View:&lt;/p&gt;&lt;ul data-role = "listview" data-autodividers = "true" data-inset = "true"&gt;&lt;li&gt;&lt;a href = "#"&gt;Android &lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href = "#"&gt;IOS&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;label for = "fullname"&gt;Input Field:&lt;/label&gt;&lt;input type = "text" name = "fullname" id = "fullname" 
           placeholder = "Name.."&gt;&lt;label for = "switch"&gt;Toggle Switch:&lt;/label&gt;&lt;select name = "switch" id = "switch" data-role = "slider"&gt;&lt;option value = "on"&gt;On&lt;/option&gt;&lt;option value = "off" selected&gt;Off&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;div data-role = "footer"&gt;&lt;h1&gt;Tutorials point&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts