{"id":14,"date":"2023-08-25T17:34:38","date_gmt":"2023-08-25T17:34:38","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?p=14"},"modified":"2023-08-25T17:34:38","modified_gmt":"2023-08-25T17:34:38","slug":"buttonMarkup","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.4\/buttonMarkup\/","title":{"rendered":".buttonMarkup()"},"content":{"rendered":"<article id=\"buttonMarkup1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">.buttonMarkup( options, overwriteClasses )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a><\/span><span class=\"version-details\">version deprecated: 1.4.0<\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Adds button styling to an element<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\"><a id=\"buttonMarkup-options-overwriteClasses\" href=\"#buttonMarkup-options-overwriteClasses\"><span class=\"icon-link\"><\/span>.buttonMarkup( options, overwriteClasses )<\/a><\/h4>\n<ul>\n<li id=\"buttonMarkup-options-overwriteClasses-options\">\n<div><strong>options<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<ul>\n<li>\n<div>\n<strong>corners<\/strong> (default: <code>true<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div>Adds the class <code>ui-corner-all<\/code> when <code>true<\/code> and removes it when <code>false<\/code>. This gives the button-styled element rounded corners.\n\t\t\t\t<p>This option is also exposed as a data-attribute: <code>data-corners=&quot;false&quot;<\/code><\/p>\n\t\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example40.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t\t<\/div>\n<\/li>\n<li>\n<div>\n<strong>icon<\/strong> (default: <code>&quot;&quot;<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>Adds an icon class by prefixing the value with the string &quot;ui-icon-&quot; and an icon position class based on the value of the <code>iconpos<\/code> option.\n\t\t\t\t<p>For example, if the value is &quot;arrow-r&quot; and the value of the <code>iconpos<\/code> option is &quot;left&quot;, then <code>.buttonMarkup()<\/code> will add the classes <code>ui-icon-arrow-r<\/code> and <code>ui-btn-icon-left<\/code> to each of the set of matched elements.<\/p>\n\t\t\t\t<p>This option is also exposed as a data-attribute: <code>data-icon=&quot;arrow-r&quot;<\/code><\/p>\n\t\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example41.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t\t<\/div>\n<\/li>\n<li>\n<div>\n<strong>iconpos<\/strong> (default: <code>&quot;left&quot;<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>Adds an icon position class by prefixing the value with the string &quot;ui-btn-icon-&quot; when the button-styled element has an icon.\n\t\t\t\t<p>For example, if the value is &quot;right&quot; and the button-styled element has an icon, then the class <code>ui-btn-icon-right<\/code> will be added to each of the set of matched elements.<\/p>\n\t\t\t\t<p>This option is also exposed as a data-attribute: <code>data-iconpos=&quot;right&quot;<\/code><\/p>\n\t\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example42.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t\t<\/div>\n<\/li>\n<li>\n<div>\n<strong>iconshadow<\/strong> (default: <code>false<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div>\n\t\t\t\t\t<strong>This option is deprecated in 1.4.0 and will be removed in 1.5.0.<\/strong>\n\t\t\t\t\t<p>Adds the class <code>ui-shadow-icon<\/code> to each of the set of matched elements when set to <code>true<\/code> and the button-styled element has an icon.<\/p>\n\t\t\t\t<p>This option is also exposed as a data-attribute: <code>data-iconshadow=&quot;true&quot;<\/code><\/p>\n\t\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example43.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t\t<span class=\"version-details\"> (version deprecated: 1.4.0)<\/span>\n<\/div>\n<\/li>\n<li>\n<div>\n<strong>inline<\/strong> (default: <code>false<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div>\n\t\t\t\t\tAdds the class <code>ui-btn-inline<\/code> to each of the set of matched elements when set to true.\n\t\t\t\t<p>This option is also exposed as a data-attribute: <code>data-inline=&quot;true&quot;<\/code><\/p>\n\t\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example44.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t\t<\/div>\n<\/li>\n<li>\n<div>\n<strong>mini<\/strong> (default: <code>false<\/code>)<\/div>\n<div>Type: <\/div>\n<div>\n\t\t\t\t\tAdds the class <code>ui-mini<\/code> to each of the set of matched elements when set to true.\n\t\t\t\t<p>This option is also exposed as a data-attribute: <code>data-mini=&quot;true&quot;<\/code><\/p>\n\t\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example45.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t\t<\/div>\n<\/li>\n<li>\n<div>\n<strong>shadow<\/strong> (default: <code>true<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div>\n\t\t\t\t\tAdds the class <code>ui-shadow<\/code> to each of the set of matched elements when set to true.\n\t\t\t\t<p>This option is also exposed as a data-attribute: <code>data-shadow=&quot;false&quot;<\/code><\/p>\n\t\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example46.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t\t<\/div>\n<\/li>\n<li>\n<div>\n<strong>theme<\/strong> (default: <code>null, inherited from parent<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>\n\t\t\t\t\tThe value is a letter a-z identifying one of the color swatches in the current theme, or <code>null<\/code>.\n\t\t\t\t\t<p>This option adds a class constructed by appending the string &quot;ui-btn-&quot; to the value to each of the set of matched elements. If set to <code>null<\/code>, no class is added, and the swatch is inherited from the element&apos;s parent.<\/p>\n\t\t\t\t\t<p>For example, a value of &quot;b&quot; will cause the class <code>ui-btn-b<\/code> to be added to each of the set of matched elements.<\/p>\n\t\t\t\t<p>This option is also exposed as a data-attribute: <code>data-theme=&quot;b&quot;<\/code><\/p>\n\t\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example47.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t\t<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li id=\"buttonMarkup-options-overwriteClasses-overwriteClasses\">\n<div>\n<strong>overwriteClasses<\/strong> (default: <code>false<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div>\n\t\t\t\tWhen set to <code>true<\/code>, <code>.buttonMarkup()<\/code> discards all classes on each of the set of matched elements and adds classes based on the values passed into the <code>options<\/code> argument. You can use this feature to increase performance in situations where the element you wish to enhance does not have any classes other than the button styling classes added by <code>.buttonMarkup()<\/code>.\n\t\t\t\t<p>Conversely, when set to <code>false<\/code>, <code>.buttonMarkup()<\/code> first parses the existing classes found on each of the set of matched elements and computes a set of existing options based on the presence or absence of classes related to button styling already present. It separately records any classes unrelated to button styling. It then merges the options specified in the <code>options<\/code> parameter with the computed options such that the <code>options<\/code> passed in take precedence, and calculates a list of classes that must be present for those options to be expressed in the element&apos;s styling. It then re-applies the classes unrelated to button styling as well as the classes that reflect the new set of options. This means that calling <code>.buttonMarkup()<\/code> on the same element multiple times will have the expected effect:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Initially corners are turned off<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#myAnchor&quot;<\/span> ).buttonMarkup({ <span class=\"hljs-attr\">corners<\/span>: <span class=\"hljs-literal\">false<\/span> });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Later on we turn off shadow - the lack of corners is retained<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#myAnchor&quot;<\/span> ).buttonMarkup({ <span class=\"hljs-attr\">shadow<\/span>: <span class=\"hljs-literal\">false<\/span> });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Later still we turn corners back on - the lack of shadow is retained<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#myAnchor&quot;<\/span> ).buttonMarkup({ <span class=\"hljs-attr\">corners<\/span>: <span class=\"hljs-literal\">true<\/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\t\t\t<\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<div class=\"warning\">\n<strong>Note:<\/strong> .buttonMarkup() is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. You can now assign the full range of button style options to your <code>button<\/code> or <code>a<\/code> elements by simply adding classes.<\/div>\n\t\t<p><\/p>\n\t\t<h2 id=\"migration\">Transition to class-based styling<\/h2>\n\t\tKeeping in mind the followings will make it easy for you to transition from the button styling based on data attributes to the class-based process:\n\t\t<ul>\n\t\t\t<li>When using icons, you must always specify an icon position class along with the icon class, because there is no longer a default icon position. In the example below the class <code>ui-btn-icon-left<\/code> is added to make sure the icon (<code>ui-icon-arrow-r<\/code>) will be displayed.\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/example.com\/&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-btn ui-icon-arrow-r ui-btn-icon-left ui-corner-all ui-shadow ui-btn-inline&quot;<\/span>&gt;<\/span>Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example48.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t<\/li>\n\t\t\t<li>Although the style-related data attributes are deprecated, the data attributes related to linking behavior remain unchanged. In the example below the button is styled using classes, but the data attributes related to linking are retained.\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\/&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-home ui-btn-icon-left&quot;<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example49.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t\t<\/li>\n\t\t\t<li>We do not recommend mixing styling based on data attributes and class-based styling during the deprecation period.<\/li>\n\t\t<\/ul>\n\t\t<h2>Button markup<\/h2>\n\t\t<p>You can use <code>.buttonMarkup()<\/code> to style any element as a button that is attractive and useable on a mobile device. It is a convenience function that allows you to manipulate the classes related to button styling. For each element in the set of matched elements this function converts the <code>options<\/code> parameter to a list of classes to be applied to the element, while respecting the element&apos;s existing classes that are not related to button styling. You may also set the parameter <code>overwriteClasses<\/code> to <code>true<\/code> for performance reasons. When <code>overwriteClasses<\/code> is set to <code>true<\/code> the function discards existing classes and applies the classes corresponding to the options provided.<\/p>\n\n\t<h2>Autoinitialization<\/h2>\n\t<p>The framework will automatically apply button styling to anchors that have the attribute <code>data-role=&quot;button&quot;<\/code> as well as <code>button<\/code> elements, anchors contained directly in bars and <a href=\"\/1.4\/controlgroup\/\">controlgroup<\/a> widgets. You can specify button styling options via data attributes that you add to the anchor or <code>button<\/code> element. The data attribute corresponding to each <code>.buttonMarkup()<\/code> option is documented in the <a href=\"#buttonMarkup-options-overwriteClasses\">options<\/a> of <code>.buttonMarkup()<\/code>. The example below shows the markup needed for an anchor-based button.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Link button<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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<p>Produces this <strong>anchor-based<\/strong> button:\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example1.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t<p><strong>Button<\/strong> based button:<\/p>\n\n\t<p><code>.buttonMarkup()<\/code> also automatically enhances <code>button<\/code> elements such as the one below:<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>&gt;<\/span>Button element<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/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<iframe src=\"\/1.4\/resources\/buttonMarkup\/example4.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\n\t<h3>Disabled appearance<\/h3>\n\t<p>You can style an anchor as disabled by adding the class <code>ui-state-disabled<\/code>.<\/p>\n\t<p><strong>Note:<\/strong> It is not inherently possible to &quot;disable&quot; anchors. The class <code>ui-state-disabled<\/code> merely adds styling to make the anchor look disabled. It does not provide the same level of functionality as the <code>disabled<\/code> attribute of a form button. It may still be possible to follow the anchor using navigation methods that do not involve the pointing device.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-state-disabled&quot;<\/span>&gt;<\/span>Link button<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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<p>Produces an <strong>anchor-based<\/strong> button styled as disabled:\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example2.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t<\/p>\n\n\t<p>In the case of <code>button<\/code> elements, you should apply the <code>ui-state-disabled<\/code> class when you set the <code>button<\/code> element&apos;s <code>disabled<\/code> attribute:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Toggle the class ui-state-disabled in conjunction with modifying the value<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ of the button element&apos;s &quot;disabled&quot; property<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;button#myButton&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .prop( <span class=\"hljs-string\">&quot;disabled&quot;<\/span>, isDisabled )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .toggleClass( <span class=\"hljs-string\">&quot;ui-state-disabled&quot;<\/span>, isDisabled );<\/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\t\t<h3>Inline buttons<\/h3>\n\n\t\t<p>By default, all buttons in the body content are styled as block-level elements so they fill the width of the screen:\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example20.html\" style=\"width:100%;height:250px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>If you have multiple buttons that should sit side-by-side on the same line, add the <code>data-inline=&quot;true&quot;<\/code> attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-inline<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span>&gt;<\/span>Cancel<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-inline<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;b&quot;<\/span>&gt;<\/span>Save<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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<iframe src=\"\/1.4\/resources\/buttonMarkup\/example22.html\" style=\"width:100%;height:220px;border:0px\"><\/iframe>\n\n\t\t<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the content column grids to put normal full-width buttons into 2- or 3-columns.<\/p>\n\n\t\t<h3>Mini version<\/h3>\n\n\t\t<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini=&quot;true&quot;<\/code> attribute to the button to create a mini version. <\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-mini<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span>&gt;<\/span>Link button<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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<p>This will produce a button that is not as tall as the standard version and has a smaller text size.\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example3.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe>\n\t\t<\/p>\n\n    <h2>Adding Icons to Buttons<\/h2>\n\t\t<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.<\/p>\n\n\t\t\t<p>An icon can be added to a button by adding a <code>data-icon<\/code> attribute on the anchor specifying the icon to display. For example:<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;delete&quot;<\/span>&gt;<\/span>Delete<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example8.html\" style=\"width:100%;height:220px;border:0px\"><\/iframe>\n\n\t\t\t<h3>Icon set<\/h3>\n\n\t\t\t<p>The following <code>data-icon<\/code> attributes can be referenced to create the icons shown below:\n\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example10.html\" style=\"width:100%;height:1970px;border:0px\"><\/iframe><\/p>\n\n\t\t\t<h3>Icon positioning<\/h3>\n\t\t\t<p>By default, all icons in buttons are placed to the left of the button text.\n\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example11.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t\t<p>This default may be overridden using the <code>data-iconpos<\/code> attribute to set the icon to the right, above (top) or below (bottom) the text. For example:<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;delete&quot;<\/span> <span class=\"hljs-attr\">data-iconpos<\/span>=<span class=\"hljs-string\">&quot;right&quot;<\/span>&gt;<\/span>Delete<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example12.html\" style=\"width:100%;height:380px;border:0px\"><\/iframe>\n\n\t\t\t<p>You can also create an icon-only button, by setting the <code>data-iconpos<\/code> attribute to <code>notext<\/code>. The button plugin will hide the text on-screen, but add it as a <code>title<\/code> attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing <code>data-iconpos=&quot;right&quot;<\/code> on the previous example with <code>data-iconpos=&quot;notext&quot;<\/code>:<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;delete&quot;<\/span> <span class=\"hljs-attr\">data-iconpos<\/span>=<span class=\"hljs-string\">&quot;notext&quot;<\/span>&gt;<\/span>Delete<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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\t<p>Creates this icon-only button:\n\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example15.html\" style=\"width:100%;height:60px;border:0px\"><\/iframe><\/p>\n\n\t\t\t<h3>Mini &amp; Inline<\/h3>\n\t\t\t<p>The mini and inline attributes can be added to produce more compact buttons:\n\t\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example16.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t\t<h3>Custom Icons<\/h3>\n\t\t\t<p>To use custom icons, specify a <code>data-icon<\/code> value that has a unique name like <code>myapp-email<\/code> and the button plugin will generate a class by prefixing <code>ui-icon-<\/code> to the <code>data-icon<\/code> value and apply it to the button: <code>ui-icon-myapp-email<\/code>.<\/p>\n\t\t\t<p>You can then write a CSS rule in your stylesheet that targets the <code>ui-icon-myapp-email:after<\/code> class to specify the icon background source. The framework contains an inline (data URI) SVG test and adds class <code>ui-nosvg<\/code> to the <code>html<\/code> element if this is not supported. If you are using SVG icons you can use this class to provide a fallback to external PNG icons.<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>.ui-icon-myapp-email:after {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  background-image: url(<span class=\"hljs-string\">&apos;data:image\/svg+xml;...&apos;<\/span>);<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>.ui-nosvg .ui-icon-myapp-email:after {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  background-image: url( <span class=\"hljs-string\">&quot;app-icon-email.png&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/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<h3>Icons and themes<\/h3>\n\t\t<p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with themed buttons.<\/p>\n\n\t\t<p>\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example17.html\" style=\"width:100%;height:450px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Icon example<\/h3>\n\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example24.html\" style=\"width:100%;height:220px;border:0px\"><\/iframe>\n\n\t\t<h2>Grouped buttons<\/h2>\n\n\t\t<p>Occasionally, you may want to visually group a set of buttons to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code>data-role=&quot;controlgroup&quot;<\/code> attribute - the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;controlgroup&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Yes<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>No<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Maybe<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/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<p>By default, grouped buttons are presented as a vertical list:\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example26.html\" style=\"width:100%;height:150px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>By adding the <code>data-type=&quot;horizontal&quot;<\/code> attribute to the <code>controlgroup<\/code> container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)<\/p>\n\n\t\t<p>\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example27.html\" style=\"width:100%;height:550px;border:0px\"><\/iframe><\/p>\n\n        <h3>Labels<\/h3>\n\t\t<p>Because the <code>label<\/code> element will be associated with each individual <code>input<\/code> or <code>button<\/code> and will be hidden for styling purposes, we recommend wrapping the buttons in a <code>fieldset<\/code> element that has a <code>legend<\/code> which acts as the combined label for the group. Using the <code>label<\/code> as a wrapper around an input prevents the framework from hiding it, so you have to use the <code>for<\/code> attribute to associate the <code>label<\/code> with the input.<\/p>\n\n\t\t<h2>Theming button-styled elements<\/h2>\n\n\t\t<p>jQuery Mobile has a rich theming system that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of &quot;a&quot; will be automatically assigned the button theme of &quot;a&quot;. Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup:\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example33.html\" style=\"width:100%;height:240px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Assigning theme swatches<\/h3>\n\t\t<p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code>data-theme<\/code> attribute on the button markup and specifying a swatch letter.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;b&quot;<\/span>&gt;<\/span>Swatch b<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/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<p>Here are 2 buttons with icons that have a different swatch letter assigned via the <code>data-theme<\/code> attribute.\n\t\t<iframe src=\"\/1.4\/resources\/buttonMarkup\/example34.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Theme variations<\/h3>\n\n\t\t<p><iframe src=\"\/1.4\/resources\/buttonMarkup\/example35.html\" style=\"width:100%;height:330px;border:0px\"><\/iframe><\/p>\n\n\t<\/div>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Adds button styling to an element<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-methods"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/types\/post"}],"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=14"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/14\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}