JQuery Mobile - Setting attributes programmatically

Question

I use Jquery Mobile 1.0.1 inside a Drupal 7 Theme. I want to customize the Back Button but cannot change the property of the data value.

This is the script that is inserted before Jquery Mobile loads:

var $jqm = jQuery.noConflict();
    $jqm(document).bind("pageinit", function() {
    console.log("mobileinit"); // Not loaded
$jqm(".ui-btn-left").jqmData("icon", "arrow-l"); // Thus, not set
})


$jqm(document).bind("mobileinit", function() {
  console.log("mobileinit"); // This happens though

  $jqm.mobile.ns = '';
  $jqm.mobile.autoInitializePage = 1;
  $jqm.mobile.subPageUrlKey = 'ui-page';
  $jqm.mobile.activePageClass = 'ui-page-active';
  $jqm.mobile.activeBtnClass = 'ui-btn-active';
  $jqm.mobile.ajaxEnabled = 1;
  $jqm.mobile.hashListeningEnabled = 1;
  $jqm.mobile.defaultPageTransition = 'slide';
  $jqm.mobile.defaultDialogTransition = 'pop';
  $jqm.mobile.minScrollBack = 150;
  $jqm.mobile.loadingMessage = 'indlæser';
  $jqm.mobile.pageLoadErrorMessage = 'Error';
  $jqm.mobile.linkBindingEnabled = 1;
  $jqm.mobile.pushStateEnabled = 1;
  $jqm.mobile.touchOverflowEnabled = 0;    

});

The mark up after Jquery Mobile has wrapped looks like

<a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a"       data-ajax="false" data-icon="home" data-rel="home" title="Forsiden" href="/" data-theme="a"> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-text"> <span class="ui-icon ui-icon-home ui-icon-shadow"></span> </span> </a>

<a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-ajax="false" data-icon="home" data-rel="home" title="Forsiden" href="/" data-theme="a"> </a> — Lasse
– Lasse, Commented Mar 13, 2013 at 11:57
Changes can be done after jqm is loaded and on either pageinit or pagebeforeshow events. Add the markup to your question body :) — Omar
– Omar, Commented Mar 13, 2013 at 12:11
I don't understand - I already did that in the code above, and that clearly doesn't work. — Lasse
– Lasse, Commented Mar 13, 2013 at 12:24

Omar · Accepted Answer · 2013-03-13 12:58:49Z

1

Here's how to change the icon of the Home button. Changing data-icon won't change the icon since class ui-icon-home is already added into the second span of the button. So instead of changing the data-icon, remove class ui-icon-home add then class ui-icon-arrow-l, do the below.

Button

<a data-role="button" data-ajax="false" data-icon="home" data-rel="home" title="Forsiden" href="/" data-theme="a">Home</a>

JQM

$jqm(document).on("pageinit", function() {
 $jqm("[data-role='button'].ui-btn-left").buttonMarkup({icon: "arrow-l"});
});

answered Mar 13, 2013 at 12:58

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lasse Over a year ago

Thank you for your answer. Hm, I get TypeError: $jqm(...).on is not a function. I have tried changed to $jqm(...).bind but that does not help. I cannot modify the markup - this is generated by drupal (simple A-tag).

Collectives™ on Stack Overflow

JQuery Mobile - Setting attributes programmatically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related