Создание вкладки плагин


Я создаю вкладку плагина. Я хочу знать, если есть лучший способ сделать это, или если у меня хорошая. Он работает просто отлично, но там могут быть некоторые ярлыки или более оптимизированный способ сделать это. Я планирую заменить startTab переменную с нужным набором, но я не совсем там еще.

Смотреть здесь текущие обновленная версия

Вот что я так далеко:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul.tabNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tabNavigation li {
    display: inline;
}
ul.tabNavigation li a {
    text-decoration: none;
    color:#000;
}
.tabViews {
    width: 100%;
    border: #8db2e3 solid 1px;
    clear:both;
    height:18px;
    margin-top: -12px;
    background: url(css/tabs/images/tabs_Lower_Header_Background.png) repeat-x;
}
.tab {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px
}
.tab .right {
    float:left;
    background:url(css/tabs/images/tab_Selected_Right.png) no-repeat;
    height:25px;
    width: 8px;
}
.tab .content {
    float:left;
    background:url(css/tabs/images/tab_Selected_Content.png) repeat-x;
    height:25px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
}
.tab .left {
    float:left;
    background:url(css/tabs/images/tab_Selected_Left.png) no-repeat;
    height:25px;
    width: 6px;
}
.tabHover {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px;
    cursor: pointer;
}
.h1 {
    float:left;
    height:25px;
    width: 14px;
}
.h2 {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.h3 {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .h1 {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .h2 {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .h3 {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}
</style>
<script type="text/javascript" src="javascript/jquery/jquery.js"></script>
<script>

$.fn.tabs = function(startTab){
    //Set currentIndex
    var currentIndex = 0;

    //Get all tab views
    var tabViews = $('.tabViews > div',$(this));

    //Current tab container
    var tabsContainer = $(this);
    //Hide all tabView containers
    tabViews.hide();


    //Get all tabs
    var $tabs = $('ul > li', tabsContainer);


    $tabs.each(function(index){
        $('a',$(this)).click(function(){
            changeTab(index);

        });


    });

     //call the changeTab method for the first time and selected the starting tab.
    changeTab(startTab);

    function changeTab(selectedIndex){

        if(selectedIndex != currentIndex){
            switchClass(selectedIndex);
            var previousSelectedTab = $('a',$tabs[currentIndex]);
            var currentSelectedTab = $('a',$tabs[selectedIndex]);

            $(previousSelectedTab.attr('href')).hide();            
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }


    }

     //Method to switch the calles for selected and non selected tabs.
    function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Left, Content, right divs
                            var classBuilder = $('div  > div',$(this))

                            //Current Selected Tab
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                $(classBuilder[0]).removeClass('h3');
                                $(classBuilder[0]).addClass('left');
                                $(classBuilder[1]).removeClass('h2');
                                $(classBuilder[1]).addClass('content');
                                $(classBuilder[2]).removeClass('h1');
                                $(classBuilder[2]).addClass('right');


                            }
                            //Previously selected tab
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');

                                $(classBuilder[0]).removeClass('left');
                                $(classBuilder[0]).addClass('h3');
                                $(classBuilder[1]).removeClass('content');
                                $(classBuilder[1]).addClass('h2');
                                $(classBuilder[2]).removeClass('right');
                                $(classBuilder[2]).addClass('h1');
                            }
                            });
    }

}

$(function() {
  $('#rfiTabs').tabs(0);
}); 

</script>
</head>
<body>
<div id="rfiTabs">
  <ul class="tabNavigation">
    <li><a href="#rfiBasic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome">
      <div class="tabHover">
        <div style="" class="h3"></div>
        <div style="" class="h2">Home</div>
        <div class="h1"></div>
      </div>
      </a></li>
  </ul>
  <div class="tabViews" style="">
    <div id="rfiBasic">Test</div>
    <div id="rfiHome">test this</div>
  </div>
</div>
</body>
</html>

Я понял, я могу оптимизировать левой, содержание и центральной части вкладки обновить CSS и jQuery для раздела наведении:

.tabHover .right {
    float:left;
    height:25px;
    width: 14px;
}
.tabHover .content {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.tabHover .left {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .right {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}

function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Lef, Content, right divs
                            var classBuilder = $('div  > div',$(this))


                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                //$(classBuilder[0]).removeClass('h3');
//                                $(classBuilder[0]).addClass('left');
//                                $(classBuilder[1]).removeClass('h2');
//                                $(classBuilder[1]).addClass('content');
//                                $(classBuilder[2]).removeClass('h1');
//                                $(classBuilder[2]).addClass('right');


                            }

                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');

                                //$(classBuilder[0]).removeClass('left');
//                                $(classBuilder[0]).addClass('h3');
//                                $(classBuilder[1]).removeClass('content');
//                                $(classBuilder[1]).addClass('h2');
//                                $(classBuilder[2]).removeClass('right');
//                                $(classBuilder[2]).addClass('h1');
                            }
                            });
    }


611
4
задан 21 февраля 2011 в 08:02 Источник Поделиться
Комментарии
1 ответ

Вы можете удалить вкладку навигация с HTML и создать его динамически в плагин, так что HTML-код будет выглядеть следующим образом:

<div id="rfiTabs">
<div class="tabViews" style="">
<div id="rfiBasic">Test</div>
<div id="rfiHome">test this</div>
</div>
</div>
</body>
</html>

вам не надо звонить

var tabsContainer = $(this);

это уже объект jQuery

внутри функции switchClass вы звоните $(этот) 3 раза можно вызвать один раз и стор значение

var $this = $(this);

вы получаете элементов из объекта jQuery и затем снова заверните его.

$(classBuilder[0]).removeClass('h3');

вы можете использовать метод EQ на jQuery

classBuilder.eq(0).removeClass('h3');

вместо

if(index == selectedIndex){

}
if(index == currentIndex){

}

использовать

if(index == selectedIndex){

} else if(index == currentIndex){

}

вы не должны проверить, если индекс == currentIndex если индекс == свойства selectedIndex

этот код repeaded дважды, но с разными названиями классе создать функцию для этого (это выглядит почти так же — если вы видите что-то вроде этого всегда создать новые функции)

$(classBuilder[0]).removeClass('h3');
$(classBuilder[0]).addClass('left');
$(classBuilder[1]).removeClass('h2');
$(classBuilder[1]).addClass('content');
$(classBuilder[2]).removeClass('h1');
$(classBuilder[2]).addClass('right');

и вы можете цепочке методов jQuery с:

classBuilder.eq(0).removeClass('h3').addClass('left');
classBuilder.eq(1).removeClass('h2').addClass('content');
classBuilder.eq(2).removeClass('h1').addClass('right');

вам не нужно перебирать $вкладок

function switchClass(selectedIndex){ 
$tabs.eq(selectedIndex)

и я думаю, что это:

var classBuilder = $tabs.eq(selectedIndex).find('div  > div');

будет такой же, как

var classBuilder = $('div  > div',$(this))

и это:

if(index == currentIndex){
var tabContainer = $('a > div',$(this))
tabContainer.removeClass('tab');
tabContainer.addClass('tabHover');

такой же, как и

$вкладок.экв(currentIndex).найти (а > див').removeClass (вкладка'').добавление('tabHover');

и в конце скрипта вы должны возвратить это , так что это может быть прикован

$('#rfiTabs').tabs(0).css('background-color', 'red');

вы также можете сделать это:

вернуть это.каждый(функция() {
ВАР свойство $this = $(это);
//и создать здесь свои вкладки
});

так что если вы называете это

$('.myalltabs').tabs(0);

это позволит создать вкладки для каждого элемента, который есть .myalltabs класс

Обновление

если ваш объект jQuery есть несколько элементов (но это нечто совсем другое)

$.fn.tabs = function(n) {

var = tabcontainer = $('<div/>').attr('class', 'mainTabClass')
.appendTo($('body'));

var nav = $('<ul>').addClass('navigation').appendTo(tabcontainer);
this.each(function() {
var $this = $(this);
var id = $this.attr('id');
$('<li>').append('<a>').appendTo(nav).children().
attr('href', '#' + id).html($this.attr('name'));
}).addClass('tabContent').detach().appendTo(tabcontainer);

nav.find('li a').click(function() {
tabcontainer.find('tabContent').removeClass('selected');
tabcontainer.find($(this).attr('href')).addClass('selected');
}).eq(n).addClass('selected');
};

в этом случае вам нужно лишь

.selected {
display: block;
}
.mainTabClass .tabContent {
display: none;
}

....
<div id="home" name="Home Page">this is home</div>
....
<div id="about" name="About me">this is about</div>
....

атрибут name в случае, если вы не имя, не личность.

$('#home, #about').tabs(1);

и у вас будет

<div class="mainTabClass">
<ul class="navigation">
<li><a href="#home">Home Page</a></li>
<li><a href="#about">About me</a></li>
</ul>
<div class="tabContent" id="home">this is home</div>
<div class="tabContent selected" id="about">this is about</div>
</div>

Я не знаю, почему вы повторили слева, справа и контент для каждой вкладки, если вам нужно использовать те - создать один экземпляр и измените его на кнопку (в случае, если вы будете иметь 100 вкладок у вас будет 3 DOM-элементов вместо 300)

6
ответ дан 21 февраля 2011 в 09:02 Источник Поделиться