JQuery Mobile in Hindi Toolbar

First Page
Next Page

Header और Footers को Page में कुछ अलग ही तरीके से Set किया जा सकता है. लेकिन Default रूप से Toolbar "Inline" Positioning का उपयोग करता है.

Header और Footers जो कि Natural Document को Flow करता है और Default HTML में Set बैठता है और यह सुनिश्चित करता है कि वे सभी Devices पर Ostensible है चाहे वह JavaScript और CSS की Position को Support करता है.

एक Fixed Position Toolbars को Browsers के Top और Bottom को या तो Bottom करता है जो कि CSS Fixed Position को Support करता है. जिसमें ज्यादातर Desktop Browsers, iOS5+, Android 2.2+, BlackBerry 6 और आदि शामिल हैं.

Header Bars

Page के Top पर Header को रखा जाता है और Header में Logo, Home, Services आदि जैसे Button होते हैं और इसमें 3 या 5 Buttons होते है लेकिन Footer में Buttons को रखने की कोई Limit नहीं होती है.

Footer Bars

Page के Bottom पर Footer को रखा जाता है. Footer बहुत ही ज्यादा Flexible होता है. इसलिए इसकी आवश्यकता के अनुसार आप इसमें बहुत से Buttons रख सकते हो.

ToolBar Header and Footers Examples

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>ToolBar Header and  Footers Examples</title>
      <meta name="viewport" content="width=device-width, initial-scale=1,maximum-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-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
   </head> 
   <body> 
      <div id="home" data-role="page">

         <div data-role="header">   
            <h1>Home</h1>
            <a href="#anylink" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
            <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Search</a>
         </div>

         <p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>

         <div data-role="footer" data-position="fixed" style="text-align:center;" data-fullscreen="true">
            <div data-role="controlgroup" data-type="horizontal">
               <a href="#fb" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="slide">Facebook</a> 
               <a href="#go" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="flip">Google+</a> 
               <a href="#in" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="pop">Instagram</a> 
               <a href="#tw" class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="flip">Twitter</a> 
            </div>
         </div>

      </div>

      <!-- facebook -->
      <div id="fb" data-role="page" data-title="Facebook">
         <div data-role="header">    
            <h1>Facebook</h1>
            <a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
         </div>
         <p>Welcome to Tutorialsroot jQuery Mobile(Facebook)</p>
      </div>

      <!-- Google+ -->
      <div id="go" data-role="page" data-title="Google+">
         <div data-role="header">
            <h1>Google+</h1>
            <a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
         </div>
         <p>Welcome to Tutorialsroot jQuery Mobile(Google+)</p>
      </div>

      <!-- Instagram -->
      <div id="in" data-role="page" data-title="Instagram">
         <div data-role="header">
            <h1>Instagram</h1>
            <a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
         </div>
         <p>Welcome to Tutorialsroot jQuery Mobile(Instagram)</p>
      </div>

      <!-- Twitter -->
      <div id="tw" data-role="page" data-title="Twitter">
         <div data-role="header">
            <h1>Twitter</h1>
            <a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ">Home</a>
         </div>
         <p>Welcome to Tutorialsroot jQuery Mobile(Twitter)</p>
      </div>

   </body>
</html>

Output

First Page
Next Page