1

我在 Drupal 7 主题中使用 Jquery Mobile 1.0.1。我想自定义后退按钮，但无法更改数据值的属性。

这是在 Jquery Mobile 加载之前插入的脚本：

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;    

});

Jquery Mobile 包装后的标记看起来像

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

1 回答 1

1

这是更改主页按钮图标的方法。更改data-icon不会更改图标，因为类ui-icon-home已添加到span按钮的第二个中。因此，不要更改data-icon, remove class ui-icon-homeadd then class ui-icon-arrow-l，而是执行以下操作。

按钮

<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"});
});
于 2013-03-13T12:58:49.193 回答