Educational

Category: UI

  • Theming

    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>

  • Widgets

    a jQuery UI widget is a specialized jQuery plug-in.Using plug-in, we can apply behaviours to the elements. However, plug-ins lack some built-in capabilities, such as a way to associate data with its elements, expose methods, merge options with defaults, and control the plug-in’s lifetime.

    Sr.No.Widgets & Description
    1AccordionEnable to collapse the content, that is broken into logical sections.
    2AutocompleteEnable to provides the suggestions while you type into the field.
    3ButtonButton is an input of type submit and an anchor.
    4DatepickerIt is to open an interactive calendar in a small overlay.
    5DialogDialog boxes are one of the nice ways of presenting information on an HTML page.
    6MenuMenu shows list of items.
    7ProgressbarIt shows the progress information.
    8Select menuEnable a style able select element/elements.
    9SliderThe basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.
    10SpinnerIt provides a quick way to select one value from a set.
    11TabsIt is used to swap between content that is broken into logical sections.
    12TooltipIts provides the tips for the users.

  • Interactions

    Interactions could be added basic mouse-based behaviours to any element. Using with interactions, We can create sortable lists, resizeable elements, drag & drop behaviours.Interactions also make great building blocks for more complex widgets and applications.

    Sr.No.Interactions & Description
    1Drag ableEnable drag able functionality on any DOM element.
    2Drop ableEnable any DOM element to be drop able.
    3Resize ableEnable any DOM element to be resize-able.
    4Select ableEnable a DOM element (or group of elements) to be selectable.
    5Sort ableEnable a group of DOM elements to be sortable.