Question

我在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>

Answer 1

以下是更改“主页”按钮图标的方法。更改data-icon不会更改图标，因为类ui-icon-home已添加到按钮的第二个span中。因此，不要更改data-icon，而是删除课程ui-icon-home，然后添加课程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"}); });

JQuery Mobile - 以编程方式设置属性

1 个答案: