Data Attributes full (ok)

https://api.jquerymobile.com/data-attribute/

Link dung js chuan: https://themeroller.jquerymobile.com/

Đọc thêm: https://jquerymobile.com/resources/

Data attribute reference

The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use data- attributes, set a custom namespace by modifying the ns global option.

Button

https://demos.jquerymobile.com/1.4.5/button-markup/

Links with data-role="button". Input-based buttons, links in toolbars and button elements are auto-enhanced, no data-role required.

V1: data-role="button" data-icon="plus"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="choose.html" data-role="button" data-icon="plus">button</a>
    </div><!-- /content -->
  </body>
</html>

V2: data-role="button" data-icon="plus" data-iconpos="right" data-inline="true"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="choose.html" data-role="button" data-icon="plus" data-iconpos="right" data-inline="true">button</a>
    </div><!-- /content -->
  </body>
</html>

V3: data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="e"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="choose.html" data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="e">button</a>
    </div><!-- /content -->
  </body>
</html>

Checkbox

https://demos.jquerymobile.com/1.4.5/checkboxradio-checkbox/

Pairs of labels and inputs with type="checkbox" are auto-enhanced, no data-role required

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div >
        <label class="btn btn-secondary">
          <input data-mini="true" type="checkbox">Checkbox 1
        </label>
        <label class="btn btn-secondary">
          <input type="checkbox">Checkbox 2
        </label>
        <label class="btn btn-secondary">
          <input type="checkbox">Checkbox 3
        </label>
      </div>
    </div><!-- /content -->
  </body>
</html>

Collapsible

https://demos.jquerymobile.com/1.4.5/collapsible/

A heading and content wrapped in a container with the data-role="collapsible"

V1: data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
        <h4>collapsible</h4>
        <p>Lorem ipsum dolor sit, amet.</p>
      </div>
    </div><!-- /content -->
  </body>
</html>

V2: data-role="collapsible" data-collapsed="true" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"

Collapsible set

https://demos.jquerymobile.com/1.4.5/collapsibleset/

A number of collapsibles wrapped in a container with the data-role="collapsibleset"

V1: data-role="collapsibleset" data-theme="a" data-content-theme="b"

C:\xampp\htdocs\oec\index.html

Controlgroup

https://demos.jquerymobile.com/1.4.5/controlgroup/

DIV or FIELDSET container with data-role="controlgroup". Visually integrate multiple button-styled elements.

V1: data-role="controlgroup"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="controlgroup">
        <a href="#" class="ui-btn ui-corner-all">No icon</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
      </div>
    </div><!-- /content -->
  </body>
</html>

V2: data-role="controlgroup" data-type="horizontal"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="controlgroup" data-type="horizontal">
        <a href="#" class="ui-btn ui-corner-all">No icon</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
      </div>
    </div><!-- /content -->
  </body>
</html>

Dialog:

https://demos.jquerymobile.com/1.2.1/docs/pages/dialog/index.html

V1: data-role="button" data-inline="true" data-rel="dialog" data-transition="pop" C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>

  <body>
    <div role="main">
      <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
  </body>

</html>

C:\xampp\htdocs\oec\dialog.html

<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example</title> 
	<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.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="dialog">
		<div data-role="header" data-theme="d">
			<h1>Dialog</h1>
		</div>
		<div data-role="content" data-theme="c">
			<h1>Delete page?</h1>
			<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
			<a href="dialog/index.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
			<a href="dialog/index.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
		</div>
	</div>
</body>
</html>

Flip toggle switch

https://demos.jquerymobile.com/1.4.5/slider-flipswitch/

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <label for="flip-1">Flip toggle switch:</label>
        <select id="flip-1" name="flip-1" data-role="slider">
          <option value="off">Off</option>
          <option value="on">On</option>
        </select>
      </form>
  </body>
</html>

Listview

https://demos.jquerymobile.com/1.4.5/listview/

OL or UL with data-role="listview"

C:\xampp\htdocs\oec\index.html

Listview item

LI within a listview

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="navbar">
        <ul>
          <li><a href="#" class="ui-btn-active">One</a></li>
          <li><a href="#">Two</a></li>
        </ul>
      </div><!-- /navbar -->
  </body>
</html>

Page

https://demos.jquerymobile.com/1.4.5/pages/

Container with data-role="page"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <!-- Start of first page -->
      <div data-role="page" id="foo">
        <div data-role="header">
          <h1>Foo</h1>
        </div><!-- /header -->
        <div role="main" class="ui-content">
          <p>I'm first in the source order so I'm shown as the page.</p>
          <p>View internal page called <a href="#bar">bar</a></p>
        </div><!-- /content -->
        <div data-role="footer">
          <h4>Page Footer</h4>
        </div><!-- /footer -->
      </div><!-- /page -->
      <!-- Start of second page -->
      <div data-role="page" id="bar">
        <div data-role="header">
          <h1>Bar</h1>
        </div><!-- /header -->
        <div role="main" class="ui-content">
          <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
          <p><a href="#foo">Back to foo</a></p>
        </div><!-- /content -->
        <div data-role="footer">
          <h4>Page Footer</h4>
        </div><!-- /footer -->
      </div><!-- /page -->
  </body>
</html>

https://demos.jquerymobile.com/1.4.5/popup

V1: data-rel="popup" > data-role="popup"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <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>
     </div>
  </body>
</html>

V2: data-rel="popup" > data-rel="back"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="#popupParis" data-rel="popup" data-position-to="window" data-transition="fade">
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/paris.jpg" alt="Paris, France" style="width:30%"></a>
      <a href="#popupSydney" data-rel="popup" data-position-to="window" data-transition="fade">
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/sydney.jpg" alt="Sydney, Australia" style="width:30%"></a>
      <a href="#popupNYC" data-rel="popup" data-position-to="window" data-transition="fade">
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/newyork.jpg" alt="New York, USA" style="width:30%"></a>
      <div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/paris.jpg" style="max-height:512px;" alt="Paris, France">
      </div>
      <div data-role="popup" id="popupSydney" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/sydney.jpg" style="max-height:512px;" alt="Sydney, Australia">
      </div>
      <div data-role="popup" id="popupNYC" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/newyork.jpg" style="max-height:512px;" alt="New York, USA">
      </div>
    </div>
  </body>
</html>

Radio button

https://demos.jquerymobile.com/1.4.5/checkboxradio-radio

Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role required

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <label>
          <input type="radio" name="radio-choice-0" id="radio-choice-0a">One </label>
        <label for="radio-choice-0b">Two</label>
        <input type="radio" name="radio-choice-0" id="radio-choice-0b" class="custom">
      </form>
    </div>
  </body>
</html>

Selectmenu

https://demos.jquerymobile.com/1.4.5/selectmenu

All select form elements are auto-enhanced, no data-role required

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <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>
    </div>
  </body>
</html>

Slider

Inputs with type="range" are auto-enhanced, no data-role required

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <label for="slider-1">Slider:</label>
        <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">
      </form>
    </div>
  </body>
</html>

Textinput

https://demos.jquerymobile.com/1.4.5/textinput/

Input type="text|number|search|etc." or textarea elements are auto-enhanced, no data-role required

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <label for="text-1">Text input:</label>
        <input type="text" name="text-1" id="text-1" value="">
        <label for="text-3">Text input: data-clear-btn="true"</label>
        <input type="text" data-clear-btn="true" name="text-3" id="text-3" value="">
      </form>
    </div>
  </body>
</html>

https://demos.jquerymobile.com/1.4.5/toolbar/

The toolbar widget is used to enhance headers and footers.

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="header" data-theme="b">
        <h1>Page Title</h1>
      </div>
      <div data-role="footer">
        <h4>Powered by jQuery Mobile</h4>
      </div>
    </div>
  </body>
</html>

https://demos.jquerymobile.com/1.4.5/toolbar-fixed/

Container with data-role="header" or data-role="footer" plus the attribute data-position="fixed"

C:\xampp\htdocs\oec\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="header" data-theme="b">
        <h1>Page Title</h1>
      </div>
      <div data-role="footer" data-position="fixed">
        <h4>Powered by jQuery Mobile</h4>
      </div>
    </div>
  </body>
</html>

Previous=== START jQuery Mobile ===NextViết một ứng dụng Restaurant Picke sử dụng "back menu" (ok)

Last updated 3 years ago

Was this helpful?

Data Attributes full (ok)

Đọc thêm: https://jquerymobile.com/resources/

Data attribute reference

Button

Checkbox

Collapsible

Collapsible set

Controlgroup

Dialog:

Flip toggle switch

Listview

Listview item

Navbar

`https://demos.jquerymobile.com/1.4.5/navbar/`

Page

Radio button

Selectmenu

Slider

Textinput