Question

我正在尝试添加这个简短的功能 - 根据jQuery UI选项卡中的活动选项卡交换图像 - 下面的更大的功能，这是向UI添加前进/后退和#URL功能的jQuery地址插件标签：http://www.asual.com/jquery/address/

我需要添加较短的函数，以便在选项卡更改时触发 - 因此它会更改#headerwrapper中的图像 - 但我无法准确地确定在主地址函数中触发选项卡更改的位置。关于如何将这个较短的函数添加到jQuery地址的任何想法？

图像更改功能我需要添加到下面的主要功能，以便在标签更改触发时运行：

 var img = $(ui.panel).data("image");
    $("#headerwrapper")
    .animate({ opacity: 'toggle' }, function() {
    $(this).css("background-image", "url(" + img + ")")
    .animate({ opacity: 'toggle' });
    });
    }

主jQuery标签地址功能：

<script type="text/javascript">
var tabs,
tabulation = false,
initialTab = 'home',
navSelector = '#tabs .ui-tabs-nav',
navFilter = function(el) {
return $(el).attr('href').replace(/^#/, '');
},
panelSelector = '#tabs .ui-tabs-panel',
panelFilter = function() {
$(panelSelector + ' a').filter(function() {
return $(navSelector + ' a[title=' + $(this).attr('title') + ']').size() != 0;
}).each(function(event) {
$(this).attr('href', '#' + $(this).attr('title').replace(/ /g, '_'));
});
};

if ($.address.value() == '') {
$.address.value(initialTab);
}

$.address.init(function(event) {

$(panelSelector).attr('id', initialTab);

$(panelSelector + ' a').address(function() {
return navFilter(this);
});

panelFilter();

tabs = $('#tabs')
.tabs({
load: function(event, ui) {
$(ui.panel).html($(panelSelector, ui.panel).html());
panelFilter();
},
fx: {
opacity: 'toggle', 
duration: 'fast'}
})
.css('display', 'block');

$(navSelector + ' a').click(function(event) {
tabulation = true;
$.address.value(navFilter(event.target));
tabulation = false;
return false;
});

}).change(function(event) {

var current = $('a[href=#' + event.value + ']:first');

$.address.title($.address.title().split(' - ')[0] + ' - ' + current.text());

if (!tabulation) {
tabs.tabs('select', current.attr('href'));
}

}).history(true);

document.write('<style type="text/css"> #tabs { display: none; } </style>');
</script>

如何将函数添加到另一个jQuery函数？

0 个答案: