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.

Output:

Example 2: We have used the dark theme in splitTheme using the character ‘b‘.

Output:

Reference: https://api.jquerymobile.com/listview/#option-splitTheme