用Userscript添加jQuery选项卡

我正在使用tampermonkey/Greasemonkey脚本将我自己的用户脚本添加到网页，并且正在寻找向设置页面添加额外选项卡。这些选项卡最初是使用jQuery UI选项卡（页面加载）构建的。我遇到的问题是，当我尝试自己调用相同的选项卡函数以轻松添加选项卡时，它们似乎不起作用。事实上，他们似乎什么都不做，没有发生任何错误。用Userscript添加jQuery选项卡

这似乎是所有相关代码的建立标签（与建立在一个单独的CSS文件中的类

<script> 
    $(function() { 
     $("#optionTabs").tabs(); 
     $("#optionTabs").tabs('select', 0); 
     $("#optionTabs").css("display", "block"); 
    }); 
</script> 

<div id="optionTabs" style="display: block;" class="ui-tabs"> 
    <ul class="ui-tabs-nav"> 
     <li class="ui-state-default ui-tabs-selected"> 
      <a href="#optionTabs-1">Gameplay</a> 
     </li> 
     <li class="ui-state-default"> 
      <a href="#optionTabs-2">User Interface</a> 
     </li> 
     <li class="ui-state-default"> 
      <a href="#optionTabs-3">NEW TAB</a> 
     </li> 
    </ul> 

    <div id= "optionTabs-1" class="ui-tabs-panel"> 
     content 
    </div> 
    <div id= "optionTabs-2" class="ui-tabs-panel ui-tabs-hide"> 
     some content 
    </div> 
    <div id= "optionTabs-3" class="ui-tabs-panel ui-tabs-hide"> 
     MY CONTENT 
    </div> 
</div>

我试着用下面的代码，没有成功。

$('div #optionTabs ul').append('<li class="ui-state-default"><a href="#optionTabs-3">NEW TAB</a></li>') 
$('div #optionTabs').append('<div id="optionTabs-3" class="ui-tabs-panel ui-tabs-hide">MY CONTENT</div>') 
$('#optionTabs').tabs('refresh')

前两行工作正常; div和ul添加正确，我可以在HTML中看到它，但是我实际上无法点击该标签并使其正常工作。与一个解决方法工作，但我觉得那里更简单，更有效的方式做我在做什么（忽略明显减少jQuery选择的）：

$('[href = "#optionTabs-3"]').parent().on('click', function(){ 
    $('div [id*="optionTabs-"]').not('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); //hide current page 
    $('#optionTabs-3').attr('class', 'ui-tabs-panel'); //display my content 
    $('[class*="ui-state-default ui-tabs-selected"').attr('class','ui-state-default'); //make current active tab normal 
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default ui-tabs-selected'); //make my tab look active 

}) 
$('[href *="optionTabs-"').not('#optionTabs-3').on('click', function(){ 
    $('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); 
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default'); //make my tab look INactive 
})

再次，虽然这工作，我不知道为什么，我已经看到工作简单的方法（即。附加一些内容和刷新选项卡，而不是定义我自己的事件处理程序）在这里不起作用。我认为这可能与Tampermonkey/Greasemonkey的沙盒有关，但我不确定。有人请赐教吗？

编辑：我认为，如果我尝试使用unsafeWindow，我可能会得到这个工作，但我不想出于各种原因，首先是安全性。

来源

2014-02-12 Vasu

尝试.live代替。对

$('[href = "#optionTabs-3"]').parent().live('click', function(){ 
    $('div [id*="optionTabs-"]').not('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); //hide current page 
    $('#optionTabs-3').attr('class', 'ui-tabs-panel'); //display my content 
    $('[class*="ui-state-default ui-tabs-selected"').attr('class','ui-state-default'); //make current active tab normal 
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default ui-tabs-selected'); //make my tab look active 

}) 
$('[href *="optionTabs-"').not('#optionTabs-3').live('click', function(){ 
    $('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); 
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default'); //make my tab look INactive 
})

来源

2014-02-12 04:55:57

如果我没记错的话'.live'已被弃用，'.on'现在是附加的事件处理程序的正确方法是什么？ – Vasu

用Userscript添加jQuery选项卡

回答

相关问题