jQueryMobile - Resumo

http://jquerymobile.com

CDN
<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>

É um framework para a interface do usuário, que é criada usando o core da jQuery e da jQuery UI.
É usada para desenvolver aplicativos mobile e sites web responsives.
Criado pela equipe da jQuery em 2010.

Características:
- Usada da mesma forma em dispositivos mobile, tablets e desktop.
- Compatível com os frameworks Ionic, Phonegap, Whitelight, etc
- Traz um conjunto de inputs de forms touch-friendly e widgets UI
- É open source e cross plataforma e cross browser
- É escrito em JavaScript e usa recursos da jQuery e jQuery UI para criar sites mobile-friendly
- Ele integra HTML5, CSS3 jQuery e jQuery UI em um único framework para a criação de páginas com o mínimo de scripts.
- Inclue o sistema de navegação com Ajax que usa animação nas mudanças de página

Vantagens

- Fácil de aprender e desenvolver aplicações para quem conhece HTML e CSS.
- Podemos criar o tema personalizado usando ThemeRoller sem escrever nenhuma linha de código. Suporta todos os HTML5 navegadores.
- Escreva o mesmo código para mobile e desktop

Exemplo Simples:
<!DOCTYPE html>
<html>
    <head>
        <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 = "pageone">
            <div data-role = "header">
                <h1>Header Text</h1>
            </div>
            <div data-role = "main" class = "ui-content">
                <h2>Welcome to TutorialsPoint</h2>
            </div>
            <div data-role = "footer">
                <h1>Footer Text</h1>
            </div>
        </div>
    </body>
</html>

Demos
http://demos.jquerymobile.com/1.4.5/

Diálogos

<a href="/portal/dialog.html" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="pop">Open dialog</a>

<a href="/portal/dialog.html" role="button" class="ui-shadow ui-btn ui-corner-all ui-btn-inline" data-transition="slidedown">data-transition="slidedown"</a>
http://demos.jquerymobile.com/1.4.0/pages-dialog/
https://api.jquerymobile.com/dialog/

Botões

http://demos.jquerymobile.com/1.4.5/button-markup/
    
<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
<div id="custom-border-radius">
    <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
</div>

<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>

<a href="#" class="ui-btn">Anchor - Inherit</a>
<a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A</a>
<a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B</a>
<button class="ui-btn">Button - Inherit</button>
<button class="ui-btn ui-btn-a">Button - Theme swatch A</button>
<button class="ui-btn ui-btn-b">Button - Theme swatch B</button>

PopUps
    
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>

ToolTip
<p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
  <p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>

Menu
<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="b">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
            <li data-role="list-divider">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Disable</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
</div>

Formulários
<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Sign in</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <h3>Please sign in</h3>
            <label for="un" class="ui-hidden-accessible">Username:</label>
            <input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
            <label for="pw" class="ui-hidden-accessible">Password:</label>
            <input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
            <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
        </div>
    </form>
</div>

Diálogos
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="a">
    <h1>Delete Page?</h1>
    </div>
    <div role="main" class="ui-content">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
    <p>This action cannot be undone.</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
    </div>
</div>

ToolBar
<div data-role="header">
    <a href="#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a>
<h1>My App</h1>
    <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button>
</div>

<div data-role="header">
    <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left">
        <a href="#" class="ui-btn ui-btn-icon-right ui-icon-plus">Add</a>
        <a href="#" class="ui-btn ui-btn-icon-right ui-icon-arrow-u">Up</a>
        <a href="#" class="ui-btn ui-btn-icon-right ui-icon-arrow-d">Down</a>
    </div>
    <h6>My header</h6>
</div>

Select
<form>
<div class="ui-field-contain">
    <label for="select-native-1">Basic:</label>
    <select name="select-native-1" id="select-native-1">
        <option value="1">The 1st Option</option>
        <option value="2">The 2nd Option</option>
        <option value="3">The 3rd Option</option>
        <option value="4">The 4th Option</option>
    </select>
</div>
</form>

Exemplos

Two Pages

<!DOCTYPE html>
<html>
   <head>
      <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</h2>
         </div>
         
         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p> For more information <a href = "#page2">click here</a></p>
         </div>
         
         <div data-role = "footer">
            <h4>Footer</h4>
         </div>
      </div>
      
      <div data-role = "page" id = "page2">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>
         
         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the  industry's standard dummy text ever since the
            1500s.</p>
            
            <p><a href = "#page1">Back to previous page</a></p>
         </div>
         
         <div data-role = "footer">
            <h4>Footer Text</h4>
         </div>
      </div>
   </body>
</html>

Grid 3 Colunas

<!DOCTYPE html>
<html>
   <head>
      <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>
      <h2>Three Column Grid Example</h2>
      <div class = "ui-grid-b">
         <div class = "ui-block-a">
            <div class = "ui-bar ui-bar-a">First Block</div>
         </div>
         
         <div class = "ui-block-b">
            <div class = "ui-bar ui-bar-b">Second Block</div>
         </div>
         
         <div class = "ui-block-c">
            <div class = "ui-bar ui-bar-a">Third Block</div>
         </div>
      </div>

      <h2>Three Column Grid button Example</h2>
      <fieldset class = "ui-grid-b">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-b">Button 1</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-a">Button 2</a>
         </div>
         
         <div class = "ui-block-c">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-b">Button 3</a>
         </div>
      </fieldset>
   </body>
</html>

 

Ícones

<!DOCTYPE html>
<html>
   <head>
      <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>

 

Posicionamento de Ícones

<!DOCTYPE html>
<html>
   <head>
      <title>Icon Setting</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>

Referência

https://www.tutorialspoint.com/jquery_mobile/index.htm

 


Adicionar comentário


Código de segurança
Atualizar

Joomla SEF URLs by Artio

Pensamento do Dia

Se alguém quiser desenvencilhar - se dos dementes, dos deficientes ou dos anciãos doentes, porque exigem demasiado tempo ou demasiado dinheiro, que contrate verdugos profissionais, mas que não se esconda atrás de uma aparência de respeitabilidade. (Stuart Horner)