JQuery Mobile in Hindi Forms Slider




JQuery Mobile में हम अपने Page पर एक Slider Widget को Add करने के लिये type="range" Attribute के साथ एक Standard Input का उपयोग करते है.

Forms Slider में Input की Value को Starting Position में Handle करने के लिये Configure का उपयोग किया जाता है और जो कि Value Input Text Input मे Populated है.

JQuery Mobile में Slider आपको Slider के Handle को Slide करके एक Value को Select करने की Permission देता है.

Form Slider Controls

Slider आपको Value की एक Range को और एक Numeric Value को Select करने की Permission देता है.

JQuery Mobile में Slider आपको Slide के लिए एक Value Provide करता है जिससे आप एक और value को Select कर सकते हो.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Form Multiple Selection Example</title>
      <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">
      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <div data-role="page">
         <div data-role="header">
            <h2>Form Multiple Selection Example</h2>
         </div>
         
         <div data-role="main" class="ui-content">
            <form method="POST" action="sliderdemo.php">
               <label for="slider1">Simple Slider</label>
               <input type="range" name="slider1" id="slider1" min="0" max="100" value="50">

               <label for="range-1">Show Value:</label>
               <input type="range" name="range-1" id="range-1" min="0" max="100" value="20" data-show-value="true">

               <label for="range-2">Popup Value:</label>
               <input type="range" name = "range-2" id = "range-2" min="0" max="100" value="50" data-popup-enabled="true">

               <label for="range-3">Highlight slider:</label>
               <input type="range" name="range-3" id="range-3" min="0" max="100" value="20" data-highlight="true">

               <input type="submit" value="Submit" name="submit" data-inline="true">
            </form>
         </div>
      </div>
      
   </body>
</html>

Output

Flip Toggle Switch

Form Slider मे Flip Toggle Switch का उपयोग true/false और on/off Buttons के लिये किया जाता है.

Flip Switch &l&;input type="checkbox"> का उपयोग करके बनाया गया है और इसलिए ये Attribute data-role="flipswitch" को Specify कर रहा है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Flip Toggle Switch Example</title>
      <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">
      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <div data-role="page">
         <div data-role="header">
            <h2>Flip Toggle Switch Example</h2>
         </div>
         
         <div data-role="main" class="ui-content">
            <form method="post" action="switchdemo.php">
               <h3>Basic Flipswitch</h3>
               <input name="flip" type="checkbox" data-role="flipswitch">

               <h3>Basic checkbox switch with custom labels</h3>
               <input name="flip1" type="checkbox" data-role="flipswitch" 
                  data-on-text="YES" data-off-text="NO" ><br/>

               <input type="submit" value="Submit" name="submit" 
                  data-inline="true">
            </form>
         </div>
      </div>
      
   </body>
</html>

Output