> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/data-attributes-full-ok.md).

# Data Attributes full (ok)

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](https://api.jquerymobile.com/data-attribute/global-config).

## [Button](https://api.jquerymobile.com/button/)&#x20;

[**`https://demos.jquerymobile.com/1.4.5/button-markup/`**](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>
```

![](/files/3lm2kmmgFYy7CdTK2Buv)

**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>
```

![](/files/3Lvhch9Px091y2yjT1sU)

**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>
```

![](/files/HEp8r9lsY066cSLaB6Kj)

## [Checkbox](https://api.jquerymobile.com/checkboxradio/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/checkboxradio-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>
```

![](/files/f6NWeCzCoLlNOBRwYhPc)

## [Collapsible](https://api.jquerymobile.com/collapsible/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/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>
```

![](/files/HE92FrWIma6Wlf4j2fqF)

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

![](/files/5nyZ9vtbh1TyUrqpWBnF)

## [Collapsible set](https://api.jquerymobile.com/collapsibleset/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/collapsibleset/`](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

![](/files/xzN2u25goOXfzbtEf5ct)

## [Controlgroup](https://api.jquerymobile.com/controlgroup/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/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>
```

![](/files/9Ir8bKO5oTcFZfYb1SLk)

**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>
```

![](/files/Q5xYd2vO8ebBtv5SpyWw)

## [Dialog](https://api.jquerymobile.com/dialog/):&#x20;

[`https://demos.jquerymobile.com/1.2.1/docs/pages/dialog/index.html`](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>
```

![](/files/nZeoHxznvJlpLm47XvAP)

## [Flip toggle switch](https://api.jquerymobile.com/flipswitch/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/slider-flipswitch/`](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://api.jquerymobile.com/listview/)&#x20;

[h`ttps://demos.jquerymobile.com/1.4.5/listview/`](https://demos.jquerymobile.com/1.4.5/listview/)

`OL` or `UL` with `data-role="listview"`

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

![](/files/gvkkoyZRmVS0Cu4OlozE)

### [Listview item](https://api.jquerymobile.com/listview/)&#x20;

`LI` within a listview

## [Navbar](https://api.jquerymobile.com/navbar/)&#x20;

## [`https://demos.jquerymobile.com/1.4.5/navbar/`](https://demos.jquerymobile.com/1.4.5/navbar/)

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

![](/files/SJLomjAMvZjjRZr3RvBY)

## [Page](https://api.jquerymobile.com/page/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/pages/`](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>
```

## [Popup](https://api.jquerymobile.com/popup/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/popup`](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>
```

![](/files/Kppj6E4HrsbTVNGdDEpw)

**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://api.jquerymobile.com/checkboxradio/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/checkboxradio-radio`](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>
```

![](/files/i0tZUoEy6BlSf7cySfv9)

## [Selectmenu](https://api.jquerymobile.com/selectmenu/)

&#x20;[`https://demos.jquerymobile.com/1.4.5/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>
```

![](/files/fzbU3teqfOMbXk65p7ik)

### [Slider](https://api.jquerymobile.com/slider/)&#x20;

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://api.jquerymobile.com/textinput/) &#x20;

[`https://demos.jquerymobile.com/1.4.5/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>
```

![](/files/sGnPDVo4puoDD0004r8A)

### [Toolbar](https://api.jquerymobile.com/toolbar/)

&#x20;[`https://demos.jquerymobile.com/1.4.5/toolbar/`](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>
```

![](/files/vC0SbECjbYTHsaXKQouR)

### [Fixed toolbar](https://api.jquerymobile.com/toolbar/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/toolbar-fixed/`](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>
```

![](/files/va4VeVCCfcQq9UmFiomP)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/data-attributes-full-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
