Я создал виджет в мобильном телефоне Jquery для вкладок. Я хочу, чтобы, когда я нажимал кнопку, выбиралась 2-я вкладка. Вкладки работают отлично. Я просто хочу, чтобы она меняла вкладку нажатием кнопки. Поэтому я хочу функцию Jquery. Вот код виджета Tab.
Проверьте проблему, с которой я столкнулся Ссылка Пример кода здесь для этого запроса
(function ($, undefined) {
$.widget("mobile.tabs", $.mobile.widget, {
options: {
iconpos: 'top',
grid: null,
load: function (event, ui) { },
beforeTabHide: function (event, ui) { },
beforeTabShow: function (event, ui) { },
afterTabShow: function (event, ui) { }
},
_create: function () {
var
$this = this,
$tabs = this.element,
$navbtns = $tabs.find("a"),
iconpos = $navbtns.filter('[data-icon]').length ? this.options.iconpos : undefined;
var $content = $tabs.closest('div[data-role="page"]').find('div[data-role="content"]');
$tabs
.addClass('ui-navbar')
.attr("role", "navigation")
.find("ul")
.grid({ grid: this.options.grid });
if (!iconpos) {
$tabs.addClass("ui-navbar-noicons");
}
$navbtns
.buttonMarkup({
corners: false,
shadow: false,
iconpos: iconpos
})
.removeClass('ui-link');
// Set up the direct children of the page as the tab content, hide them
$content.children().addClass('ui-tabs-content');
// Now show the one that's active
if ($navbtns.filter('.ui-btn-active').length == 0)
$navbtns.eq(0).addClass('ui-btn-active');
$content.children('#' + $navbtns.eq($this.currentTab()).attr('href')).addClass('ui-tabs-content-active');
$navbtns.bind('click', function (event) {
navButtonClick.call(this, event);
return false;
})
.bind('tap', function (event) {
navButtonClick.call(this, event);
return false;
});
function navButtonClick(event) {
$navbtns.removeClass("ui-btn-active");
$(this).addClass("ui-btn-active");
$this.changeTab(event, {
currentTab: $navbtns.eq($this.currentTab()),
nextTab: $(this),
currentContent: $this.currentContent(),
nextContent: $content.children($(this).attr('href'))
});
event.preventDefault();
}
this._trigger('load', null, {
currentTab: $navbtns.eq($this.currentTab()),
currentContent: $this.currentContent()
});
},
currentTab: function () {
var $tabs = this.element,
$navbtns = $tabs.find("a");
return this.element.find('.ui-btn-active').parent().prevAll().length;
},
currentContent: function () {
return this.element.closest('div[data-role="page"]').find('div[data-role="content"]').children().filter('.ui-tabs-content-active');
},
changeTab: function (event, ui) {
if (this._trigger('beforeTabHide', event, ui))
ui.currentContent.siblings().andSelf().removeClass('ui-tabs-content-active');
if (this._trigger('beforeTabShow', event, ui))
ui.nextContent.addClass('ui-tabs-content-active');
this._trigger('afterTabShow', event, $.extend({}, ui, { previousContent: ui.currentContent, currentContent: ui.nextContent, nextContent: null }));
}
});
})(jQuery);
$('[data-role=page]').live('pagecreate', function(e) {
$(this).find('[data-role="tabs"]').tabs();
});
Вот HTML-часть страницы.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="tab.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page-title" class="MainClass1" data-theme="c">
<input id="Submit1" type="submit" value="Tab2" data-inline="true" />
<div class="RightCont">
<div data-role="tabs">
<ul>
<li><a href="#BattingTab" data-theme="a" class="">Batting</a></li>
<li><a href="#BowlingTab" data-theme="a" class="">Bowling</a></li>
<li><a href="#ExtrasTab" data-theme="a" class="">Extras</a></li>
<li><a href="#DetailsTab" data-theme="a" class="">Details</a></li>
</ul>
</div>
<div data-role="content">
<div id="BattingTab">
</div>
<div id="BowlingTab">
</div>
<div id="ExtrasTab">
</div>
<div id="DetailsTab">
</div>
</div>
</div>
</div>
</body>
</html>