|
In this article I will talk about how to create custom jquery theme roller and use it in your page.
By default, if we place a Slider, a Toggle Switch and a Button on the page, it looks like below.
jQuery provided 5 different themes like shown below. Check jQuery Themes for more details.
Let's see how we can create our custom theme.
Step 1: Visit jQuery Mobile Theme Roller
Step 2: Click on + sign to add theme
Step 3: On click of + sign theme D will be added as shown along with new swatch.
Swatch D
Step 4: Expand Header/Footer Bar, Content Body, Button: Normal, Button: Hover and Button Pressed. All fill be filled with default values as shown below.
Step 5: Now change the colors as shown below or you can create you own.
On putting the color codes your swatch will look like below.
Step 6: Now click on Download theme zip file which will bring Download Theme popup where one need to enter theme name and click on Download Zip button.
Step 7: Now unzip the downloaded file and open themes folder inside it. You will get two css file and one image folder. Copy the minified file and put it into your project.
Step 8: Add the minified css file in the header section of web page as shown below.
< head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="jquerymobilecustomtheme.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css" />
</head>
Step 9: Make sure to put data-theme="d" in html elements.
<div data-role="fieldcontainer">
<label for="qty1">
Quantity:</label>
<input id="qty1" type="range" name="qty" min="1" max="100" value="5" data-highlight="true" data-track-theme="d">
</div>
<br />
<label for="ts">
Toggle Switch</label>
<select id="ts" name="ts" data-role="slider" data-track-theme="d">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<a href="javascript:void(0)" data-role="button" data-inline="true" data-shadow="false" data-theme="d">Delete</a>
Step 10: Browse the page and you will notice custom them on your page.
This ends the article of jQuery Mobile Custom Theming.
|