1

我在标题中有一个“主页”按钮，在很多地方都有这个“标准”代码：

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

我想从一段 javascript 代码中渲染它，因为它在 index.html 中多次出现- 以减少代码冗余并更容易更改。（我想使用 jQuery，所以跨浏览器功能还可以）

下面的代码应该:)有效，我做错了什么？

（我尝试从不同的角度解决它，我可以写出文本，输出其他 html 等 - 但我不能同时处理 data-* 和标准 html attr）

编码：

在 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");      
    })
})

我将 main.js 称为 index.html 中的最后一个 js 文件

4

2 回答 2

1

您的代码无效。

也许你的意思是

演示（请注意，使用 .data 设置时，数据属性不会显示在检查元素中）

$( 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 回答
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 回答