{"id":10,"date":"2023-08-25T17:34:37","date_gmt":"2023-08-25T17:34:37","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?page_id=10"},"modified":"2023-08-25T17:34:37","modified_gmt":"2023-08-25T17:34:37","slug":"tabs","status":"publish","type":"page","link":"https:\/\/api.jquerymobile.com\/1.4\/tabs\/","title":{"rendered":"Tabs Widget"},"content":{"rendered":"

Tabs<\/h2>\n

The jQuery UI tabs widget is bundled unchanged with jQuery Mobile. Thus, its API documentation<\/a> fully describes its functionality.<\/p>\n

Options and autoinitialization<\/h2>\n

When used with jQuery Mobile's autoinitialization features, the options documented on the widget's API documentation page can also be provided as data-*<\/code> attributes in the markup. You can add the data-role="tabs"<\/code> attribute to your tabs widget markup to indicate that the element is to be turned into a tabs widget.<\/p>\n

Ajax considerations<\/h2>\n

jQuery Mobile provides an extension to the tabs widget (tabs.ajax<\/code>). The extension provides no new API, however, it modifies the way in which the widget evaluates whether displaying the content referred to by the href<\/code> attributes of the links that play the role of tabs requires retrieval via Ajax. It is necessary to include this extension if your project consists of multiple external jQuery Mobile pages, one of which features a tabs widget.<\/p>\n

Note:<\/b> Use of links to open popup's and panels is not currently recommended in conjunction with the tabs widget. Clicking these links will remove the active state style of the selected tab.<\/div>\n
\n\t

Example:<\/h2><\/header>\n\t
\n\t\t

A basic example of tabs.<\/span><\/h4>\n\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
40<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<!doctype html<\/span>><\/span><\/code><\/div><\/div>
<html<\/span> lang<\/span>="en"<\/span>><\/span><\/code><\/div><\/div>
<head<\/span>><\/span><\/code><\/div><\/div>
  <meta<\/span> charset<\/span>="utf-8"<\/span>><\/span><\/code><\/div><\/div>
  <meta<\/span> name<\/span>="viewport"<\/span> content<\/span>="width=device-width, initial-scale=1"<\/span>><\/span><\/code><\/div><\/div>
  <title<\/span>><\/span>collapsible demo<\/title<\/span>><\/span><\/code><\/div><\/div>
  <link<\/span> rel<\/span>="stylesheet"<\/span> href<\/span>="\/\/code.jquery.com\/mobile\/1.4.5\/jquery.mobile-1.4.5.min.css"<\/span>><\/span><\/code><\/div><\/div>
  <script<\/span> src<\/span>="\/\/code.jquery.com\/jquery-1.10.2.min.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
  <script<\/span> src<\/span>="\/\/code.jquery.com\/mobile\/1.4.5\/jquery.mobile-1.4.5.min.js"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/div><\/div>
<\/head<\/span>><\/span><\/code><\/div><\/div>
<body<\/span>><\/span><\/code><\/div><\/div>
 <\/code><\/div><\/div>
<div<\/span> data-role<\/span>="page"<\/span> id<\/span>="page1"<\/span>><\/span><\/code><\/div><\/div>
  <div<\/span> data-role<\/span>="header"<\/span>><\/span><\/code><\/div><\/div>
    <h1<\/span>><\/span>jQuery Mobile Example<\/h1<\/span>><\/span><\/code><\/div><\/div>
  <\/div<\/span>><\/span><\/code><\/div><\/div>
  <div<\/span> role<\/span>="main"<\/span> class<\/span>="ui-content"<\/span>><\/span><\/code><\/div><\/div>
    <div<\/span> data-role<\/span>="tabs"<\/span>><\/span><\/code><\/div><\/div>
      <div<\/span> data-role<\/span>="navbar"<\/span>><\/span><\/code><\/div><\/div>
        <ul<\/span>><\/span><\/code><\/div><\/div>
          <li<\/span>><\/span><a<\/span> href<\/span>="#fragment-1"<\/span> class<\/span>="ui-btn-active"<\/span>><\/span>One<\/a<\/span>><\/span><\/li<\/span>><\/span><\/code><\/div><\/div>
          <li<\/span>><\/span><a<\/span> href<\/span>="#fragment-2"<\/span>><\/span>Two<\/a<\/span>><\/span><\/li<\/span>><\/span><\/code><\/div><\/div>
          <li<\/span>><\/span><a<\/span> href<\/span>="#fragment-3"<\/span>><\/span>Three<\/a<\/span>><\/span><\/li<\/span>><\/span><\/code><\/div><\/div>
        <\/ul<\/span>><\/span><\/code><\/div><\/div>
      <\/div<\/span>><\/span><\/code><\/div><\/div>
      <div<\/span> id<\/span>="fragment-1"<\/span>><\/span><\/code><\/div><\/div>
        <p<\/span>><\/span>This is the content of the tab 'One', with the id fragment-1.<\/p<\/span>><\/span><\/code><\/div><\/div>
      <\/div<\/span>><\/span><\/code><\/div><\/div>
      <div<\/span> id<\/span>="fragment-2"<\/span>><\/span><\/code><\/div><\/div>
        <p<\/span>><\/span>This is the content of the tab 'Two', with the id fragment-2.<\/p<\/span>><\/span><\/code><\/div><\/div>
      <\/div<\/span>><\/span><\/code><\/div><\/div>
      <div<\/span> id<\/span>="fragment-3"<\/span>><\/span><\/code><\/div><\/div>
        <p<\/span>><\/span>This is the content of the tab 'Three', with the id fragment-3.<\/p<\/span>><\/span><\/code><\/div><\/div>
      <\/div<\/span>><\/span><\/code><\/div><\/div>
    <\/div<\/span>><\/span><\/code><\/div><\/div>
  <\/div<\/span>><\/span><\/code><\/div><\/div>
<\/div<\/span>><\/span><\/code><\/div><\/div>
<\/body<\/span>><\/span><\/code><\/div><\/div>
 <\/code><\/div><\/div>
<\/html<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
Demo:<\/h4>\n\t\t
<\/div>\n\n\t<\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"
A single content area with multiple panels, each associated with a header in a list.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-10","page","type-page","status-publish","hentry","category-widgets"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/pages\/10\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}