JQuery Mobile in Hindi ListView

First Page
Next Page

jQuery Mobile में ListView Items को एक Vertical Scrollable List में Managed कर सकते है क्योंकि jQuery Mobile ऐसा करने की अनुमति देता है.

jQuery Mobile में Standard HTML Lists होती है जैसे की Ordered List <ol> और Unordered <ul> Lists.

jQuery Mobile Simple List Example

<!DOCTYPE html> 
<html> 
   <head> 
      <title>jQuery Mobile Simple List Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>	
   </head> 
   <body> 
      <div id="page1" data-role="page" data-theme="a">
         <div data-role="header"> 
            <h1>jQuery Mobile Simple List Example</h1>
         </div>
         <div role="main" class="ui-content">
            <ul data-role="listview"> 
               <li><a href="#">America</a></li>
               <li><a href="#">United Kingdom</a></li>
               <li><a href="#">Canada</a></li>
               <li><a href="#">Japan</a></li>
               <li><a href="#">Australia</a></li>
               <li><a href="#">Germany </a></li>
               <li><a href="#">Sweden</a></li>
            </ul>
         </div> 

         <div data-role="footer"> 
            <h1>Tutorialsroot.com</h1>
         </div>

      </div>
   </body>
</html>

Output

jQuery Mobile Numbered List

Numbered List को बनाने के लिये एक Unordered List मे Ol Element के Inside मे Attribute data-role="listview" का उपयोग करके बनाया जाता है.

<!DOCTYPE html> 
<html> 
   <head> 
      <title>jQuery Mobile Numbered List Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>	
   </head> 
   <body> 
      <div id="page1" data-role="page" data-theme="a">
         <div data-role="header"> 
            <h1>jQuery Mobile Numbered List Example</h1>
         </div>
         <div role="main" class="ui-content">
            <ol data-role="listview"> 
               <li><a href="#">America</a></li>
               <li><a href="#">United Kingdom</a></li>
               <li><a href="#">Canada</a></li>
               <li><a href="#">Japan</a></li>
               <li><a href="#">Australia</a></li>
               <li><a href="#">Germany </a></li>
               <li><a href="#">Sweden</a></li>
            </ol>
         </div> 
         <div data-role="footer"> 
            <h1>Tutorialsroot.com</h1>
         </div>
      </div>
   </body>
</html>

Output

First Page
Next Page