JQuery Mobile in Hindi Pages

First Page
Next Page

Web page बनाने के लिए jQuery Mobile में built-in Attribute और data-role का उपयोग किया जाता है. jQuery Mobile में jQuery और CSS विषयों की Libraries को <head> Tag के अंदर रखा जाता है.

<Body> Tag के अंदर सभी Screen या मोबाइल डिवाइस पर Page <div> Element के साथ नीचे Identify किया जाता है.

Syntax

<div data-role=”page”>
Hello Tutorialsroot .........
</div>

Container Page में HTML Markups को जो कि Valid हो उसको उपयोग किया जा सकता है.

Single Page Application

किसी भी Standard Format को बिना बदले बहुत से Pages को बनाने के लिए उपयोग किया जाता है. Standard Format का उपयोग jQuery Mobile में एक Page को बनाने के लिए उपयोग किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Single Page Application</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
   </head>
     
    <body>
     
        <div data-role="page">
         
            <div data-role="header">
                <h1>This is First Page</h1>
            </div>
            <div data-role="content">
                <h1>Hello Tutorialsroot</h1>
                <p>Welcome to Tutorialsroot</p>
            </div>
            <div data-role="footer">
                <h2>Copyright 2017. All Rights Reserved</h2>
            </div>
         
        </div>
         
    </body>
</html>

Output

Multi Page Application

एक HTML Document में एक से अधिक Pages को सम्मिलित किया जा सकता है जो एक साथ बहुत से Div Tag को जोड़कर Loaded किए जाते हैं.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Multi Page Application</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
   </head>
     
   <body>
        <div data-role="page" id="page1">
            <div data-role="header">
                <h1>This is First Page</h1>
            </div>
            <div data-role="main" class="ui-content">
                <h1>Hello Tutorialsroot!!!</h1>
                <p>This is first page</p>
                <p> For more information <a href="#page2">click here</a></p>
 
            </div>
            <div data-role="footer">
                <h2>©Copyright 2017. All Rights Reserved</h2>
                 
            </div>
         
        </div>
         
        <div data-role="page" id="page2">
            <div data-role="header">
                <h1>This is second page</h1>
            </div>
            <div data-role="main" class="ui-content">
                <h1>jQuery Mobile Tutorial</h1>
                <p>This is second page</p>
                <p><a href="#page1">Back to a previous page</a></p>
 
            </div>
            <div data-role="footer">
                <h2>© Copyright 2017. All Rights Reserved</h2>
            </div>
         
        </div>        
    </body>
</html>

Output

First Page
Next Page