JQuery Mobile in Hindi Panels

First Page
Next Page

jQuery Mobile में Panels Widget आपको एक Flexible Content इकाइयों के लिए अनुमति देता है.

जिसका उपयोग Slide Menus को बनाने के लिये किया जाता है और यह Collapse Columns Inspect Windows आदि का Inspection करता है.

एक Panels Header, Content और Footer के समान Surface पर होना चाहिए.

इन Elements के लिए एक Sibling होती है और एक Panels को इसके बाद या उसके बाद भी जोड़ा जाना चाहिए लेकिन कभी भी Panels इसके बीच में नहीं जोड़ा जाना चाहिए.

jQuery Mobile में Panels बनाने के लिये Id को Specify करने के लिए <div> Elements में data-role="panel" Attribute को जोड़ते है और <div> Tag के अंदर HTML Markups को जोड़ते है जिसको Panels में Displayed किया जाता है.

Opening Panel

Panels को खोलने के लिए हम शुरू में एक Link को बनाते है जो <div> Panel की Id को Referenced करता है और Link पर Click करते ही Panel Open हो जाता है.

Foe Example

<a href="#panel1" class="ui-btn ui-btn-inline">Open Panel</a>

Closing Panel

Panel को Close करने के लिए सिर्फ Panel के बाहर Click करते है और या Swipe करते है या “Esc” key को दबाते है.

और यह <div> Panel के अंदर स्थित Link के साथ एक Button का उपयोग करके भी किया जा सकता है जो कि data-rel="close" एक Attribute है.

Panel id को Referenced करने के लिए href के Characteristic को भी Indicated करते है जिससे Panel को Close करते समय प्रदर्शित किया जाता है.

Foe Example

<div data-role="panel" id="panel1">
  <h2>Header Tutorialsroot</h2>
  <p>Text to display</p>
  <a href="#info" data-rel="close" class="ui-btn ui-btn-inline">Close</a>
</div>

Disable Panel

Panel को Click और Swipe करने वाले Features को Disabled करने के लिए केवल Panel में data-dismissible और data-swipe-close Attribute को Panel <div> से जोड़ते है.

से जोड़ते है

Foe Example

<div data-role="panel" id="overlayP1" data-display="overlay">
<div data-role="panel" id="revealp2" data-display="reveal">
<div data-role="panel" id="pushp3" data-display="push">

Positioning Panels

Panels Default रूप से Screen के Left में दिखाई देते हैं इसको Screen के Right में दिखाने के लिये data-position="right" Attribute को Specify करते है.

Foe Example

<div data-role="panel" id="panel1" data-position="right">

Panels Example

<!DOCTYPE html>
   <head>
      <meta charset="UTF-8">
      <title>Panel Example</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 data-role="page" id="info">
         <div data-role="panel" id="panel1" data-display="reveal" data-position="left" data-position-fixed="true" data-dismissible="false"> 
            <h1>Info</h1>
            <p>Welcome to Tutorialsroot jQuery Mobile</p> 
            <a href="#info" data-rel="close" class="ui-btn ui-btn-inline">Close</a>
         </div>

         <div data-role="header">
            <h1>Home</h1>
            <a href="#panel1" class="ui-btn ui-btn-inline ui-icon-info ui-btn-icon-notext">Open Panel</a>
         </div>

         <div data-role="main" class="ui-content">
            <p>Welcome to Tutorialsroot jQuery Mobile(Home)</p>
         </div>

         <div data-role="footer" data-position="fixed">
            <h1>Copyright 2017. All Rights Reserved</h1>
         </div>
      </div>
   </body>
</html>

Output

First Page
Next Page