JQuery Mobile in Hindi Icons

First Page
Next Page

jQuery Mobile हमको built-in Icons का एक Set Supply करता है. जिनका उपयोग Buttons के साथ किया जा सकता है.

jQuery Mobile में Listview Buttons जो की Buttons को और अधिक Attractive बनाते हैं.

Sr.No. Icon Area & Description
1

Icon Set

यह button में Icon को Set करने के लिए उपयोग किया जाता है.
2

Positioning Icons

Positioning Icons का उपयोग Button में Icons की Position को Specifies करने के लिए किया जाता है.
3

Icon-only

यह केवल Button में एक Icon को दिखाता है.
4

Icon shadow

Icon Shadow का उपयोग Button में Icon Shadow को Add करने के लिए किया जाता है.
5

Removing Circle

Removing Circle Icon के चारों ओर Grey Circle को निकालता है.
6

Black or White Icons

इसका उपयोग Icons के Colors को Black और White करने के लिए किया जाता है.
7

Combining alt and nodisc

यह Icon में alt और nodisc Classes को जोड़ता है.

Icon Set

Icon के लिए Position को Specifying करने के लिए आप ui-icon Class और ui-btn-icon-pos_name Class का उपयोग करके Icon में Icon Set कर सकते हो.

For Example

<!DOCTYPE html> 
<html> 
   <head> 
      <title>Icon Set 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 = "main" class = "ui-content">
         <a href = "#" class = "ui-btn ui-btn-icon-left ui-icon-grid">Grid Button</a>
         <button class = "ui-btn ui-btn-icon-left ui-icon-arrow-d-r">arrow-d-r</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-arrow-r">arrow-r</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u">arrow-u</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u-l">arrow-u-l</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-arrow-u-r">arrow-u-r</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-audio">audio</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-calendar">calendar</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-camera">camera</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-carat-l">carat-l</button>
         <button class = "ui-btn ui-btn-icon-left ui-icon-carat-r">carat-r</button>
         <button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left 
            ui-icon-check">check</button>
         <button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left 
            ui-icon-clock">clock</button>
         <button class = "ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-eye">
            eye</button>
      </div>
   </body>
</html>

Output

Icon Positioning

आप ui-btn-icon-[value] Class का उपयोग करके Icon को (Top, Right, Left, Bottom) की Position को Define कर सकते हो.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Icon Positioning 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 = "main" class = "ui-content">
         <a href = "" class = "ui-btn ui-icon-home ui-btn-icon-left">Left</a>
         <a href = "" class = "ui-btn ui-icon-home ui-btn-icon-right">Right</a>
         <a href = "" class = "ui-btn ui-icon-home ui-btn-icon-top">Top</a>
         <a href = "" class = "ui-btn ui-icon-home ui-btn-icon-bottom">Bottom</a>
      </div>
   </body>
</html>

Output

Icon Only

आप ui-btn-icon-notext Class का उपयोग करके Button में केवल एक Icon को Define कर सकते हो.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Displaying only Icon 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" id = "page1">
            <h2>Header Tutorialsroot</h2>
         <div data-role = "header">
         </div>

         <div data-role = "main" class = "ui-content">
            <a href = "" class = "ui-btn ui-icon-home ui-btn-icon-notext">Delete</a>
         </div>

         <div data-role = "footer">
            <h2>Footer Tutorialsroot</h2>
         </div>
      </div>
   </body>
</html>

Output

Icon Shadow

इसमें आप ui-shadow-icon Class का उपयोग करके अपने Button में एक Icon Shadow को जोड़ सकते हो.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Icon Shadow 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" id = "page1">
         <div data-role = "header">
            <h2>Header Tutorialsroot</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <a href = "" class = "ui-btn ui-shadow-icon ui-shadow ui-corner-all 
               ui-icon-home ui-btn-icon-notext">Delete</a>
         </div>

         <div data-role = "footer">
            <h2>Footer Tutorialsroot</h2>
         </div>
      </div>
   </body>
</html>

Output

Removing Circle

इसमें आप ui-nodisc-icon Class का उपयोग करके Icon के चारों और Grey Circle को निकाल सकते हो.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Removing Circle 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" id = "page1">
         <div data-role = "header">
            <h2>Header Tutorialsroot</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <a href = "" class = "ui-nodisc-icon ui-btn ui-shadow ui-corner-all 
               ui-btn-inline ui-icon-delete ui-btn-icon-left">Without Grey Circle</a>
         </div>

         <div data-role = "footer">
            <h2>Footer Tutorialsroot</h2>
         </div>
      </div>
   </body>
</html>

Output

Black or White Icons

आप इसमें IU-alt-icon Class का उपयोग करके किसी भी Icon का Color Black सकते हैं और Default रूप से, सभी Icon White होते हैं.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Black and White Icons 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" id = "page1">
         <div data-role = "header">
            <h2>Header Tutorialsroot</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <a href = "" class = "ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left 
               ui-corner-all">White icon</a>
               
            <a href = "" class = "ui-btn ui-btn-inline ui-icon-home ui-btn-icon-left 
               ui-corner-all ui-alt-icon">Black icon</a>
         </div>

         <div data-role = "footer">
            <h2>Footer Tutorialsroot</h2>
         </div>
      </div>
   </body>
</html>

Output

First Page
Next Page