jQuery Mobile Listview splitTheme Option
jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops. jQuery Listview is a widget used to create beautiful lists. It is a simple and responsive Listview used to view the unordered lists.
In this article, we are going to implement the jQuery Mobile Listview splitTheme option. The jQuery Mobile Listview splitIcon comes with multiple themes used as splitTheme. The different themes have different colors.
Syntax: To implement the splitTheme, we need to pass a single character from a-z in the small case where each letter depicts a color theme.
$(".items").listview({
splitTheme:"a",
});
-
Get the splitTheme option:
var splitTheme = $(".items").listview( "option", "splitTheme" ); -
Set the splitTheme option:
$( ".items" ).listview( "option", "splitTheme", "b" );
Example 1: In this example, we are using the light theme in splitTheme using the character ‘a’. We have a list view with one of the list items having two links. On clicking the link, the popup opens with a message and two options either to proceed to the link or close the pop-up. The pop-up is also from the jQuery Mobile UI library.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= <script src= </script> <script src= </script> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3>jQuery Mobile Listview splitTheme Option</h3> <ul class="items"> <li> <a href= Data Structures </a> </li> <li> <a href= Interview preparation </a> <a href="#java" data-rel="popup" data-position-to="window" data-transition="pop"> Java Programming </a> </li> <li> Java Programming </a> </li> </ul> <div data-role="popup" id="java" class="ui-content" style="max-width:280px; padding-bottom:2rem;"> <h3>GeeksforGeeks</h3> <p> Open the Java Tutorial link by clicking the Open button given below to learn java from GeeksforGeeks. </p> class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini"> Open </a> <a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini"> Cancel </a> </div> <script> $(".items").listview({ splitIcon: "star", splitTheme: "a", }); </script> </body> </html> |
Output:
Example 2: We have used the dark theme in splitTheme using the character ‘b‘.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= <script src= </script> <script src= </script> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3>jQuery Mobile Listview splitTheme Option</h3> <ul class="items"> <li> <a href= Data Structures </a> </li> <li> <a href= Interview preparation </a> <a href="#java" data-rel="popup" data-position-to="window" data-transition="pop"> Java Programming </a> </li> <li> Java Programming </a> </li> </ul> <div data-role="popup" id="java" class="ui-content" style="max-width:280px; padding-bottom:2rem;"> <h3>GeeksforGeeks</h3> <p> Open the Java Tutorial link by clicking the Open button given below to learn java from GeeksforGeeks. </p> class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini"> Open </a> <a href="" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini"> Cancel </a> </div> <script> $(".items").listview({ splitIcon: "star", splitTheme: "b", }); </script> </body> </html> |
Output:
Reference: https://api.jquerymobile.com/listview/#option-splitTheme
Please Login to comment...