如何通過按下按鈕來更改由jquery Mobile中的小部件創建的選項卡？

我已經在Jquery mobile中爲Tabs創建了這個小部件。我想，當我按下按鈕第二個選項卡應該被選中。選項卡工作正常罰款我只是希望它通過按下按鈕來改變選項卡。所以我想要一個Jquery函數。這是Tab小部件代碼。如何通過按下按鈕來更改由jquery Mobile中的小部件創建的選項卡？

退房的問題，我面對的鏈接Sample code here for this query

(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>

來源

2012-03-15 Moiz Kachwala

做你螢火蟲或相同的工具進行調試，檢查元素，當你按下tab和地點的代碼在你的問題，我認爲該元素將是小部件的變化。 – viyancs 2012-03-15 04:50:55

我知道哪裏需要改變。當我更改$ navbtns.eq（0）.addClass（'ui-btn-active'）;到$ navbtns.eq（2）.addClass（'ui-btn-active'）;該選項卡被選中。我想通過調用一個函數來完成。在函數中，我沒有得到在tab.js – 2012-03-15 04:53:24

您可以使用回調來訪問的標籤

，

function callback(eltab){ 
    //to set second tab is active 
    eltab.eq(2).addClass('ui-btn-active'); 
}

在widget選項創建

，並調用callback($navbtns);。

_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) 

    /* 
    * adding the callback 
    */ 

    callback($navbtns); 

    //$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; 
});`

來源

2012-03-15 05:08:49 viyancs

中聲明的變量，所以我應該在按鈕單擊時調用此回調函數？ – 2012-03-15 05:33:58

是的，你可以在任何地方放置回調，但必須定義第一個'callback（）'函數。 – viyancs 2012-03-15 05:47:48

真正appriciate你的幫助...但我怎麼做到這一點？因爲主要回調是在Tab.js文件中完成的。如果我在頁面加載中放置函數，那麼我需要將參數傳遞給它。我希望默認第一個標籤應該被選中，當我按下第三個標籤時應該被選中。 – 2012-03-15 05:55:44

如何通過按下按鈕來更改由jquery Mobile中的小部件創建的選項卡？

回答

相關問題