1

ヘッダーに「ホーム」ボタンがあり、この「標準」コードが多くの場所にあります。

<a href="#home" 
    data-role="button" 
    data-iconpos="right"
    data-icon="home" 
   class="ui-btn-right">
   home</a>

index.htmlに何度も表示されるため、単一のjavascriptコードからレンダリングしたいのですが、コードの冗長性を減らし、変更を容易にするためです。（jQueryを使用したいので、クロスブラウザー機能は問題ありません）

以下のコードは動作するはずです:)私は何を間違っているのですか？

（私はさまざまな角度からそれを解決しようとしました、私はテキストを書き出すことができます、他のhtmlを出すことができます。-しかし私はデータに取り組むことができません-*と標準のhtml属性を一緒に）

コード：

index.html：

<div  data-role="header">
    <a data-myButton="headerHome> </a>
</div>

main.jsで：

$( function () {    
    // put home button into the headers:        
    $("a[data-mybutton = 'headerHome']").( function () {
        $(this).href = "#home";             
        $(this).data("role","button");
        $(this).data("iconpos","right");
        $(this).data("icon","home");
        $(this).class("ui-btn-right");      
    })
})

index.htmlの最後のjsファイルとしてmain.jsを呼び出します

4

2 に答える 2

1

jQuery Mobileでは、属性を設定するだけでは不十分です。次のように、正しいページイベントを使用する必要があります。また、ボタンのスタイルを正しく変更するには、.button（関数を呼び出す必要があります。

$('#index').live('pagebeforeshow',function(e,data){    
    $("a[data-mybutton = 'headerHome']")
        .attr("href","#home")
        .data("role","button")
        .data("iconpos","right")
        .data("icon","home")
        .attr("class","ui-btn-right");  
    $("a[data-mybutton = 'headerHome']").button();
});

実例は次のとおりです：http：//jsfiddle.net/Gajotres/heSKu/

于 2013-01-22T13:53:14.663 に答える
1

あなたのコードは無効です。

おそらくあなたが意味する

デモ(.data を使用して設定した場合、データ属性は inspect 要素に表示されないことに注意してください)

$( function () {    
  $("a[data-mybutton = 'headerHome']")
    .attr("href","#home")
    .data("role","button")
    .data("iconpos","right")
    .data("icon","home")
    .attr("class","ui-btn-right");      
})
于 2013-01-22T13:28:50.537 に答える