VPF::TabControl - Форум программистов

Tony

Дата 6.9.2006, 09:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Код


<html>
    <head>
        <script type="text/javascript">
        
            function changeTab(sel){
                //header
                /*
                * created by Tjomi4 05.09.2006
                */
            
                i=sel.cellIndex;
                num=sel.id.indexOf('_');
                ID=sel.id.substring(0,num);
                
                sel.className="tabPageSelected"
                tabbs=sel.parentNode;
                for (j=0;j<tabbs.cells.length;j++){
                    if(i!=j && j!=tabbs.cells.length-1)
                        tabbs.cells[j].className="tabPage";
                }
                //body
                tab_body=document.getElementById(ID);
                tab_body.cells[i].style.display="block";
                
                for(j=0;j<tab_body.cells.length;j++){
                    if(i!=j)
                        tab_body.cells[j].style.display="none";
                }
            }
            function selectDefaultTab(ID){
                obj=document.getElementById(ID);
                changeTab(obj);
            }
    
        </script>
        <style>    
          .tabControl{
            
          }      
          .tabHeader{
                
            }            
            .tabPage{
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            font: normal 12px arial;
            cursor:pointer;
            padding-left:10px;
            
            background-color:#D8E3EA;
                padding-right:10px;
                border-collapse:collapse;
            }
                
            .tabPageSelected{
                background-color: #F2F5F8;
                cursor:pointer;
                font: normal 12px arial;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:0px solid #B0BEC7;
                padding-left:10px;
                padding-right:10px;
                border-collapse:collapse;
            }
          .tabHeaderLine{
            border-bottom:1px solid #B0BEC7;
          }
            .tabControlBody tbody tr td{
                display:none;
                border-collapse:collapse;
                font: normal 12px arial;
                vertical-align: top;
            }
            
            .tabControlBody{
                background-color: #FBFCFD;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            }
        </style>
    </head>
    <body>

        <table border="0" class="tabControl" cellspacing="0" cellpadding="0" width="100%">
            <tbody>
                <tr>
                    <td>
                        <table border="0" cellspacing="0" cellpadding="0" class="tabHeader">
                            <tbody>
                                <tr>
                                    <td onclick="changeTab(this);" id="s3475394dfbgf_1" class="tabPage">
                                        qwerty
                                    </td>
                                    <td onclick="changeTab(this);" id="s3475394dfbgf_2" class="tabPage">
                                        zxcvb
                                    </td>
                                    <td onclick="changeTab(this);" id="s3475394dfbgf_3" class="tabPage">
                                        zxcvb
                                    </td>
                                    <td width="100%" class="tabHeaderLine"><img src="spacer" width="1" height="1"/></td>
                                </tr>
                            <tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="400px" valign="top">
                        <table  width="100%" class="tabControlBody" cellpadding="0" cellspacing="0" style="height:100%" border="0">
                            <tbody>
                                <tr id="s3475394dfbgf">
                                    <td>
                                        1 asdfasd ;fdng;fdng;dfg fgdfgfd gkfg fdg dfgd gdfgfg df gfgfdgdf g fdg</br>
                                        dsfdfsdf
                                    </td>
                                    <td>
                                        2 dsfsdfd
                                    </td>
                                    <td>
                                        3 xzcxcxcxzcxzcxc xzczxc
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <script type="text/javascript">document.onload=selectDefaultTab('s3475394dfbgf_1');</script>
    
    </body>
</html>

--------------------

pythonwin

Дата 7.9.2006, 16:24 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

Tony, класс!

я использую http://www.barelyfitz.com/projects/tabber/
А также есть код

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Tabs</title>
<meta http-equiv="Content-Type" content='text/html; charset=utf-8'>

<style>
.tabv {z-index:5; border-top: 1px solid #778; border-right: 1px solid #778; border-bottom: 1px solid white; border-left: 1px solid #778; position:absolute; top: 0px; width:70px; height:25px }
.tabh {z-index:3; border-top: 1px solid #448;border-right: 1px solid #448;border-bottom: 1px solid white; border-left: 1px solid #448; position:absolute;top: 0px; width:70px; height:25px }
.telo {z-index:4; border: #778 solid 1px; position:absolute; left:0px; top: 26px; width:600px; height:200px }
</style>

<script>
var objtab;
var objbd;

function Change(id) {
for (var i=1;i<=3;i++) {
objtab=document.getElementById("tab"+i);
objbd=document.getElementById("bd"+i);
if(id=="tab"+i) {
objtab.style.zIndex=5;
objtab.style.borderLeftColor="#778";
objtab.style.borderTopColor="#778";
objtab.style.borderRightColor="#778";
objbd.style.visibility="visible";
} else {
objtab.style.zIndex=3;
objtab.style.borderLeftColor="#448";
objtab.style.borderTopColor="#448";
objtab.style.borderRightColor="#448";
objbd.style.visibility="hidden";
}
}
}
</script>

</head>

<body bgcolor="#FFFFFF">
<div style="position:relative; top:0px;left:0px">
<!--
Этот <div> суёшь в то место куда нужно, а внутри него
всё будет работать как и раньше
-->
<div id="tab1" class="tabv" style="left:3px; cursor:pointer" onClick="Change('tab1')" >
&nbsp;Tab #1
</div>
<div id="tab2" class="tabh" style="left:78px; cursor:pointer" onClick="Change('tab2')">
&nbsp;Tab #2
</div>
<div id="tab3" class="tabh" style="left:153px; cursor:pointer" onClick="Change('tab3')">
&nbsp;Tab #3
</div>

<div id="bd1" class="telo" style="visibility:visible">
<br><br>Тело таба №1
</div>
<div id="bd2" class="telo" style="visibility:hidden">
<br><br>Тело таба №2
</div>
<div id="bd3" class="telo" style="visibility:hidden">
<br><br>Тело таба №3
</div>
</div>
</body>
</html>

Но твой тоже интересен - что мне больше всего понравилось - у тебя нет привязки к пикселям + размер заголовка вкладки зависит не от какой-то переменной или стиля, а от длины текста или размера рисунка + можно легко вставлять рисунок или любой другой объект.

Добавлено @ 16:25
Tony, это окончательный вариант?

Добавлено @ 16:26
+1

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 8.9.2006, 00:48 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Tony, это окончательный вариант? да вроде да. А чего не хватает?

--------------------

pythonwin

Дата 8.9.2006, 07:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

вот этот проект посмотри http://www.barelyfitz.com/projects/tabber/

может что-нибудь и можно будет добавить.

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 8.9.2006, 09:25 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Как я понимаю тебэ не хватает ,4то на смену закладки не визивается другая ункция.Например AJAX.Toest' sholknuл po koreшку таба он вклю4ился + например виозвалась 2 функция.Такето можно сдеалть так:
<td onclick="changeTab(this);invokeAjax('mouj_url')" id="s3475394dfbgf_1" class="tabPage">

--------------------

pythonwin

Дата 8.9.2006, 11:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

Цитата(Tony @ 8.9.2006, 16:25

)

invokeAjax

Это что такое?

--------------------

портал по Python
раздел на винграде по Python
язык Python

Tony

Дата 8.9.2006, 11:19 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Ты можешь сам любую функцию прописать.Я просто привёл, как будто при переклу4ении закладки(1) сраватывает вызов Ajax'a.

--------------------

pythonwin

Дата 8.9.2006, 13:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

Цитата(Tony @ 8.9.2006, 18:19

)

спасибо!

--------------------

портал по Python
раздел на винграде по Python
язык Python

SelenIT

Дата 10.11.2006, 04:19 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 1
Всего: 401

Осмелюсь предложить "до кучи" и свой вариант, простой, без AJAXа - чисто для "украшения".

Постановка задачи: пусть есть несколько блоков с заданными id-ами, есть менюшка со ссылками на них как на якоря (<a href="#id">), в виде списка. Хочется, чтобы при отсутствии JS оно так и работало (это максимум возможного в такой ситуации), а при его наличии превращалось в красивый TabControl. Должна быть возможность (опциональная) заранее спрятать все блоки, кроме одного, с помощью специального CSS-класса, чтобы это все не дергалось в момент превращения (без JS этот класс не должен влиять ни на что). На странице может быть неограниченное число таких систем блоков с разными стилями.

Мой вариант решения:

Код


function tabControl(tabsContainerId, actualTabClass, hiddenTabClass) {
   this.tabsId = tabsContainerId; // id списка табов
   this.aCSS = actualTabClass; // CSS-класс активного заголовка таба
   this.hCSS = hiddenTabClass; // CSS-класс скрытого тела таба
   // добавление стилей, скрывающих тела табов, кроме нужного
   // если JS отключен, все тексты будут просто выведены друг за другом
   document.write('<style type="text/css">\n'+
                  'div.'+this.hCSS+' { display: none; }\n'+
                  '#'+this.tabsId+' a { cursor:default; }\n'+
                  '<\/style>\n');
   // постановка в очередь на инициализацию объекта при загрузке страницы
   // (спасибо AKS за помощь в технологии добавления обработчиков)
   (function ah(o, e, f) {
      o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent ? o.attachEvent('on'+e, f) : '';
   }) (window, 'load', (function ii(x) { return function() {x.init() }}) (this));
}

tabControl.prototype.init = function() {
   this.tabs = document.getElementById(this.tabsId).getElementsByTagName('li'); // заголовки табов
   this.divs = []; // тела табов
   this.actIndex = 0; // индекс активного таба
   for (var i=0, hideCnt = 0, t, a; t=this.tabs[i]; i++) {
      // находим соответствующий заголовку блок и убираем более ненужную ссылку
      a = t.getElementsByTagName("a")[0];
      this.divs[i] = document.getElementById(a.href.split('#')[1]);
      a.removeAttribute("href");
      // добавляем реакцию на клик
      t.onclick = (function(ob,num) { return function() { ob.activate(num); return false; } })(this,i);
      // считаем не скрытые по умолчанию дивы
      if (this.divs[i].className.indexOf(this.hCSS)!=-1) hideCnt++;
      // активным табом станет первый из не скрытых по умолчанию
      if (hideCnt && !this.actIndex) this.actIndex = i;
   }
   // скрываем все табы, кроме активного (если не все они еще скрыты)
   if (hideCnt < this.divs.length-1) for(var i=0, d; d=this.divs[i]; i++) {
      if (i!=this.actIndex && d.className.indexOf(this.hCSS)==-1) d.className += ' '+this.hCSS;
   }
   // выделяем визуально заголовок активного таба
   this.activate(this.actIndex);
}

tabControl.prototype.activate = function(i) {
   // Визуальная смена активного таба. По идее, тут все очевидно ;)
   this.tabs[this.actIndex].className = this.tabs[this.actIndex].className.replace(this.aCSS, '');
   this.divs[this.actIndex].className += ' '+this.hCSS;
   this.tabs[i].className += ' '+this.aCSS;
   this.divs[i].className = this.divs[i].className.replace(this.hCSS, '');
   this.actIndex = i;
}

и пример использования (оформление табов, как и идея скрипта, пришли из этой темы):

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Еще один TabControl)</title>
    <style type="text/css">
#cont * { margin: 0; padding: 0; }
#tabs { margin: 0 auto; list-style-type: none; display: table; border-spacing: 3px 0; }
#tabs li { display: table-cell; font: normal 1em/1em courier new, monospace; background: #1A7515 url(bg0.gif) 0 -50px no-repeat; color: #A4D9A1; }
#tabs li a { display: block; padding: 0.2em 1.5em; background: url(bg1.gif) 100% -50px no-repeat; }
#tabs li.actual { background: #A4D9A1 url(bg0.gif) 0 0 no-repeat; color: #1A7515; }
#tabs li.actual a { background: url(bg1.gif) 100% 0 no-repeat; }
#main { background: #A4D9A1; margin: 0; padding: 2em 0; font: normal 0.76em/1em verdana, sans-serif; color: #1A3515; }
#main div { margin: 0 2em; padding: 0.5em 0; height: 10em; }
     </style>
     <!--[if lte IE 6]>
     <style>
#cont { position: relative; width: 100%; }
#tabs, #tabs li, #tabs li span { margin: 0; float: left; display: inline; }
#tabs { position: relative; left: expression((this.offsetParent.clientWidth - this.offsetWidth - 3)/2+'px'); }
#tabs li { margin-left: 3px; }
#main { clear: left; width: 100%; }
     </style>
     <![endif]-->
     <script type="text/javascript" src="tabcontrol.js"></script>
     <script type="text/javascript">
new tabControl('tabs', 'actual', 'hidden');
     </script>
</head>
<body>
    <div id="cont">
        <ul id="tabs">
            <li><a href="#t1">Первая</a></li>
            <li><a href="#t2">Вторая</a></li>
            <li><a href="#t3">Последняя</a></li>
        </ul>
    </div>
    <div id="main">
        <div id="t1" class="hidden">Текст первой вкладки.</div>
        <div id="t2">Текст второй вкладки. Она открывается по умолчанию, т.к. ей единственной не назначен CSS-класс <i>hidden</i>.</div>
        <div id="t3" class="hidden">А тут текст последней вкладки.</div>
    </div>
</body>
</html>

А вот так это безобразие работает (проверено в FF2, Opera 8-8.5-9, IE6).

Известные баги тестовой версии: пока это нельзя использовать в XHTML, отдаваемом с честным Content-type (из-за использования document.write, в принципе знаю как обойти, но цена - усложнение и ухудшение совместимости).

Это сообщение отредактировал(а) SelenIT - 10.11.2006, 04:21

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

pythonwin

Дата 10.11.2006, 06:46 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

SelenIT, спасибо, за пример! smile

а твой tabcontrol может содержать рисунки в заголовках?

--------------------

портал по Python
раздел на винграде по Python
язык Python

SelenIT

Дата 10.11.2006, 12:56 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 1
Всего: 401

pythonwin, может, в какой-то мере пример их уже содержит smile

А вообще все ограничено только фантазией дизайнера/верстальщика и возможностью браузеров, обязательны только наличие списка и ссылки на якоря в каждом пункте...

Это сообщение отредактировал(а) SelenIT - 13.11.2006, 03:49

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

SelenIT

Дата 13.11.2006, 03:53 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 1
Всего: 401

Сделал новую версию "безобразия":

теперь работает и в XHTML;
заголовки табов теперь можно делать не только списком, но и таблицей, и не только (единственное требование - ссылки должны быть напрямую вложены в <li>, <td> и т.д., но и в противном случае нужно лишь изменить код ф-ции activate - добавить нужное кол-во раз .parentNode);
исправлен баг с первоначальной "активацией" заголовка, если по умолчанию тела нескольких вкладок не были спрятаны соотв. CSS-классом.

Пример также обновлен, добавлена демонстрация вложенного TabControl-а с заголовками в таблице.

Код


// конструктор: передаем ему ID общего контейнера табов, класс выделенного заголовка, класс скрытого тела таба
function tabControl(tabsContainerId, actualTabClass, hiddenTabClass) {
   this.tabsId = tabsContainerId;
   this.aCSS = actualTabClass;
   this.hCSS = hiddenTabClass;
   // динамически добавляем стили, нужные только при наличии JS
   this.addStyle('div.'+this.hCSS, 'display: none;');
   this.addStyle('#'+this.tabsId, 'cursor:default;');
   // ставим в очередь на инициализацию при загрузке
   (function ah(o, e, f) {
      o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent ? o.attachEvent('on'+e, f) : '';
   }) (window, 'load', (function ii(x) { return function() {x.init() }}) (this));
}

// вспомогательная ф-ция динамического добавления стилей, браузероспецифичная
// ей передаем селектор и соответствующий ему стиль (в виде строк)
tabControl.prototype.addStyle = 
   document.styleSheets && (tabControl.s = document.styleSheets[document.styleSheets.length - 1]) // есть ли встроенный метод для работы с CSS?
   ? tabControl.s.addRule // есть метод IE ?
      ? function(sel, styl) { tabControl.s.addRule(sel, styl) } // IE
      : function(sel, styl) { tabControl.s.insertRule (sel + ' {' + styl + '}', tabControl.s.cssRules.length) } // Gecko, Safari, Opera 9+
   : function(sel, styl) { // Opera 8
       var s = document.createElement('style');
       s.innerHTML = sel + ' {' + styl + '}';
       (document.documentElement||document.body).appendChild(s);
     }

// инициализация
tabControl.prototype.init = function() {
   // находим ссылки внутри контейнера
   this.tabs = document.getElementById(this.tabsId).getElementsByTagName('a');
   this.divs = [];
   this.actIndex = null;
   this.unhidden = [];
   for (var i=0, t; t=this.tabs[i]; i++) {
      // находим блок, на кото. ведет текущая ссылка
      this.divs[i] = document.getElementById(t.href.split('#')[1]);
      // убираем саму ссылку
      t.removeAttribute("href");
      // добавляем реакцию на клик
      t.parentNode.onclick = (function(ob,num) { return function() { ob.activate(num); return false; } })(this,i);
      // если блок не спрятан по умолчанию - запомним его, первый из таких блоков будет активным табом
      if (this.divs[i].className.indexOf(this.hCSS)==-1) this.unhidden[this.unhidden.length] = this.divs[i];
      if (this.unhidden.length && this.actIndex==null) this.actIndex = i;
   }
   // если все блоки были спрятаны - открываем и затем активируем первый
   if (this.unhidden.length<1) {
      this.divs[0].className = this.divs[0].className.replace(this.hCSS,'');
      this.actIndex = 0;
   }
   // прячем все неспрятанные блоки, кроме первого (активного)
   else 
   for(var i=1, d; d=this.unhidden[i]; i++) {
      d.className += ' '+this.hCSS;
   }
   this.activate(this.actIndex);
}

// визуальная смена активного таба
tabControl.prototype.activate = function(i) {
   this.tabs[this.actIndex].parentNode.className = this.tabs[this.actIndex].className.replace(this.aCSS, '');
   this.divs[this.actIndex].className += ' '+this.hCSS;
   this.tabs[i].parentNode.className += ' '+this.aCSS;
   this.divs[i].className = this.divs[i].className.replace(this.hCSS, '');
   this.actIndex = i;
}

P.S. Обнаружил и исправил еще один баг начальной загрузки - вариант, когда по умолчанию ни один див не спрятан, я предусмотрел, а вот если все спрятаны... теперь тоже предусмотрел smile

Это сообщение отредактировал(а) SelenIT - 14.11.2006, 01:51

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

pythonwin

Дата 13.11.2006, 06:55 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

SelenIT, ++1 smile

Добавлено @ 07:05
SelenIT, а рисунки в заговках и AJAX сможешь доделать?

--------------------

портал по Python
раздел на винграде по Python
язык Python

Izabela

Дата 28.5.2007, 11:51 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

Tony, а где у тебя AJAX используетса?

--------------------

Izabela

Дата 29.5.2007, 19:29 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

Tony, попробовала дивами вместо таблицы

Код



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <script type="text/javascript">
        var  itab_body = new Array();  
            function changeTab(sel){
                //header
          
                sel.className="tabPageSelected"
                var tab_head=sel.parentNode;
                var i;
                 if(sel == document.getElementById('first')){i=0}
                 if(sel == document.getElementById('second')){i=1}
                 if(sel == document.getElementById('third')){i=2}
                 var len = tab_head.getElementsByTagName('div').length;
                 for (j=0;j < len;j++){
                    if(i!=j && j!=len-1)
                       tab_head.getElementsByTagName('div')[j].className="tabPage";
                }
                //body
             //var tab_body=tab_head.parentNode.childNodes[3];//ето в ИЕ не хочет идти
              var tab_body=document.getElementById("tab_body");
               var itab_body = tab_body.getElementsByTagName("div");
               itab_body[i].style.display="block";
                var m_blen =itab_body.length;
                for(j=0;j < m_blen;j++){
                    if(i!=j)
                        itab_body[j].style.display="none";
                }
                           

            }
            function selectDefaultTab(ID){
                obj=document.getElementById(ID);
                changeTab(obj);
            }
    
        </script>
        <style>    
          .tabControl{
            border: 0px solid red;
            
          }      
          .tabHeader{
                border: 0px solid black
            }            
            .tabPage{
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            font: normal 12px arial;
            cursor:pointer;
            padding-left:10px;
            
            background-color:#D8E3EA;
                padding-right:10px;
                border-collapse:collapse;
                float:left;
            }
                
            .tabPageSelected{
                background-color: #F2F5F8;
                cursor:pointer;
                font: normal 12px arial;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:0px solid #B0BEC7;
                padding-left:10px;
                padding-right:10px;
                border-collapse:collapse;
            }
          .tabHeaderLine{
            border-bottom:1px solid #B0BEC7;
          }
            
            .tabControlBody{
                background-color: #FBFCFD;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            width: 400px;
            height: 500px;
            }
        </style>
    </head>
    <body>

        <div class="tabControl">
            
                        <div class="tabHeader">
                            
                                    <div  onclick="changeTab(this);" id="first" class="tabPage" style="float:left;">
                                       First_tab
                                    </div>
                                    <div onclick="changeTab(this);" id="second" class="tabPage" style="float:left;">
                                       Second_tab
                                    </div>
                                    <div onclick="changeTab(this);" id="third" class="tabPage" style="float:left;">
                                       and last tab
                                    </div>
                                 <div  class="tabHeaderLine" style="float:left; width:1px; height:1px;"> </div>
                        </div>
                        
                      
                  
             
                        <div id="tab_body"  class="tabControlBody" style="clear:left;" >
                        
                                <div>
                                   
                                       I have done so much with so little for so long that I am now qualified to do anithing with nothing
                                </div>        
                                <div >
                                     Nadiaaaaaa
                                </div>
                                
                                <div >
                                       Υ 㨫泠顢첮뮠- 䰠乸쬠ⳮ顭ࡧ歫堭 ౮㡫鹼⿮

                                </div>
                        </div>
                  
            
           
    </div>
        
        <script type="text/javascript">document.onload=selectDefaultTab("first");</script>
    
    </body>
</html>

только во

Добавлено через 46 секунд
хочу переделать класом

--------------------

pythonwin

Дата 30.5.2007, 07:39 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36

Цитата

хочу переделать класом

? в js нет классов
http://ru.wikipedia.org/wiki/JavaScript

--------------------

портал по Python
раздел на винграде по Python
язык Python

Izabela

Дата 30.5.2007, 09:46 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

pythonwin, можна симулиовать smile

Код




function Person( name, surname )
{
   this.name    = name;
   this.surname = surname;
}

var salvo = new Person( ‘Salvatore’, ‘Vetro’ );

джава скрипт

Добавлено через 56 секунд
ой,симулировать

--------------------

AKS

Дата 2.6.2007, 14:07 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52

Izabela, а нужно ли "симулировать" класс? Я попылся обойтись такими "инструментами":

Код


<div id='tabs'>
    <ul>
        <li>
            <h5 onclick='Izabela(this)'>First tab</h5>
            <p>I have done so much with so little for so long that 
               I am now qualified to do anithing with nothing
            </p>
        </li>
        <li>
            <h5 onclick='Izabela(this)'>Second tab</h5>
            <p>Nadiaaaaaa</p>
        </li>
        <li>
            <h5 onclick='Izabela(this)'>Last tab</h5>
            <p>adf</p>
        </li>
    </ul>
    <div id='content'></div>
</div>

Код


#tabs ul {
    margin:0;
    padding:0;
}
#tabs li {
    list-style:none;
    float:left;
}
#tabs li h5 {
    border:1px solid #B0BEC7;
    font:normal 12px arial;
    cursor:pointer;
    background-color:#D8E3EA;
    margin:0;
    padding:0 3px;
}
#tabs li h5.selected {
    background-color: #F2F5F8;
    border-bottom:medium none;
}
#tabs li p {
    display:none;
}
#tabs p {
    margin:0;
    padding:0;
}
#content {
    clear:both;
    background-color: #FBFCFD;
    border:1px solid #B0BEC7;
    border-top:medium none;
    width:400px;
    height:500px;
}

Код


window.onload = function () {
    document.getElementById('tabs')
            .getElementsByTagName('h5')[0].onclick(); // открывается 1-ый таб
}

var Izabela = function () {
    var activeTab,
        getSibling = function (aElement) {
            while (aElement.nodeType === 3) {
                aElement = aElement.nextSibling;
            }
            return aElement;
        };
    return function (aElement) {
        if (aElement === activeTab) {
            return;
        }
        var content = document.getElementById('content'),
            child = content.firstChild;
        if (activeTab) {
            activeTab.parentNode.appendChild(child);
            activeTab.className = '';
        }
        content.appendChild(getSibling(aElement.nextSibling));
        (activeTab = aElement).className = 'selected';
    }
}();

Izabela

Дата 4.6.2007, 09:49 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

AKS а как ето роботает

Код


var Izabela =function(){
do smth
}();// вот ето  :shok

расскажы плззззззз

--------------------

AKS

Дата 4.6.2007, 17:42 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52

Цитата(Izabela @ 4.6.2007, 09:49

)

...как ето роботает...расскажы

Oффтоп, конечно, но "счас расскажю". smile

(надеюсь, модераторы удалят оффтоп)

Цитата(Izabela @ 4.6.2007, 09:49

)

}();// вот ето smile

Это не

, это вызов функции. Вызываемая безымянная функция возвращает (return function (aElement) { ... }) другую функцию, которая будет доступна по "имени Изабела".
Вот так, вроде бы не очень сложно - функции могут возвращать разные value, в том числе и объекты, в т.ч. и функции (ух - вроде правильно выразил свои мысли ;) )...

Izabela

Дата 4.6.2007, 19:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

AKS, большое спасибо

--------------------

Izabela

Дата 18.6.2007, 19:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

tab control via ajax:) and with JQuery

Код



/*********************/
/*   Izabela                */
/********************/
Tab = {};
Tab.init = function (id) {
    Tab.head = $("<div></div>").addClass("tabHeader");//create main tabs head
    Tab.head.appendTo($(id));//to what append tabs 
    Tab.body = $("<div></div>").addClass("tabControlBody");//create main tabs body
    Tab.body.appendTo($(id));
    /*******create your extra tab here*/
    Tab.createTab("new", "MyXml.xml");
    Tab.createTab("tabik", "Second.xml");
    Tab.createTab(":)))))", "some.xml");
    /*********************************/
    Tab.nice();
};
Tab.nice = function () {
    var line = $("<div></div>");
    line.attr("class", "tabHeaderLine");
    line.appendTo(this.head);
    widthHead = this.head.width();
    heightHead = this.head.height();
    widthBody = this.body.width();
    count = (this.head.children().length) - 1;
    widthNice = (widthBody - widthHead) + count;
    line.width(widthNice);
    line.css("left", (widthHead + (count * 2)));
    document.all ? line.height(heightHead + 7) : line.height(heightHead - 1);
};
Tab.createTab = function (head, data) {
    Tab.createHead(head);
    Tab.createBody(data);
};
Tab.createHead = function (nameMe) {
    var el = $("<div>" + nameMe + "</div>").addClass("tabPage");
    el.appendTo(this.head);
    el.bind("click", Tab.changeTab);
};
Tab.defaultTab = function (num) {
    var dom = Tab.head.get();
    var jq = dom[0].childNodes[num];
    $(jq).click();
};
Tab.createBody = function (url) {
    Tab.processData = function () {
        Tab.request = $.ajax({type:"GET", url:url, async:false, dataType:"xml"});
        return Tab.request.responseXML.documentElement.firstChild.data;
    };
    what = Tab.processData();
    var el = $("<div>" + what + "</div>");
    el.appendTo(this.body);
};
Tab.changeTab = function (e) {
    $(this).attr("class", "tabPageSelected");
    var parent = $(this).parent();
    var dom = parent.get();
    var index, k;
    for (k in dom[0].childNodes) {
        if (this == dom[0].childNodes[k]) {
            index = k;
        }
    }
    var len = dom[0].childNodes.length;
    for (var j = 0; j < len; j++) {
        if (index != j && j != len - 1) {
            dom[0].childNodes[j].className = "tabPage";
        }
    }
    var tabBody = dom[0].nextSibling;
    tabBody.childNodes[index].style.display = "block";
    for (j = 0; j < tabBody.childNodes.length; j++) {
        if (index != j) {
            tabBody.childNodes[j].style.display = "none";
        }
    }
};
function choose(n) {//for stupid IE loading events 
    Tab.defaultTab(n);
}

Код



<html>
    <head>
        <base href="<%=basePath%>">

        <title>My JSP 'MyJsp.jsp' starting page</title>

        <script type="text/javascript" src="lib/jquery.js"> 
        </script>
        
         <script type="text/javascript" src="tab.js"> 
        </script> 
        
        <link rel="stylesheet" type"style/css" href="tab.css" />  
        </head>  
    <body>
    <script type="text/javascript">  
      $(document).ready(function(){
      Tab.init("#main");
      choose(0);  
       });
        </script>
        <div id ='main' class="tabControl" align ="left" width ="800px">            
        </div>   
    </body>
</html>

Код



@CHARSET "UTF-8";
 .tabControl{
            border: 0px solid red;
width: 400px;
height: 500px;
        
          }      
          .tabHeader{
                margin:0px;
          padding:0px;
          float:left;
            }            
            .tabPage{
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            font: normal 12px arial;
            cursor:pointer;
            padding-left:10px;
            float:left;
            background-color:#D8E3EA;
                padding-right:10px;
                border-collapse:collapse;
                float:left;
            }
                
            .tabPageSelected{
            float:left;
                background-color: #F2F5F8;
                cursor:pointer;
                font: normal 12px arial;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-top:1px solid #B0BEC7;
            border-bottom:1px solid #FBFCFD;
                padding-left:10px;
                padding-right:10px;
                border-collapse:collapse;
            }
          .tabHeaderLine{
            border-bottom:1px solid #B0BEC7;
            position:absolute;
            top:8px;
          }
            
            .tabControlBody{
           margin:0px;
          padding:0px;
                background-color: #FBFCFD;
                border-right:1px solid #B0BEC7;
            border-left:1px solid #B0BEC7;
            border-bottom:1px solid #B0BEC7;
            float:left;
            
            width: 400px;
            height: 400px;
            }

Код


<?xml version="1.0" encoding="UTF-8"?>//second and some идентичный
<xml-body>
Hello from xml
</xml-body>

конечно хочу чтоб поправили smile

--------------------

AKS

Дата 18.6.2007, 19:48 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 2
Всего: 52

Цитата(Izabela @ 18.6.2007, 19:02

)

конечно хочу чтоб поправили

Для начала - вот эта строчка лишняя однозначно:

Цитата

//for stupid IE loading events

;)

ksnk

Дата 18.6.2007, 20:07 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386

Вот этот вот кусочек,

Код


   <script type="text/javascript">  
      $(document).ready(function(){
      Tab.init("#main");
      choose(0);  
       });
        </script>

следует добавить в конец скрипта tab.js вот так

Код


      $(function(){
      Tab.init("#main");
      choose(0);  
       });

Забавно! А чем не устроили стандартные плагины к jQuery? Tabs, к примеру?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Izabela

Дата 19.6.2007, 11:18 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

AKS,
ksnk, спасибо smile

еще хотелось б smile

возвращать не только жорстко прописание данные

Код


return Tab.request.responseXML.documentElement.firstChild.data;

а определять по параметру

--------------------

ksnk

Дата 19.6.2007, 14:17 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386

Цитата(Izabela @ 19.6.2007, 11:18

)

а определять по параметру

Не понимаю... А почему бы не передавать url в функцию CreateBody с параметром? Пусть там кто-нибудь его как-нибудь отделает... Или я чего-то не понял?

Вообще-то некрасиво определять набор TAB'ов в скрипте, Обычно, его определяют в HTML, а скрипт остается без изменений. Способов описания Табов очень много, нужно просто выбрать подходящий к ситуации.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Izabela

Дата 19.6.2007, 16:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

Цитата

Вообще-то некрасиво определять набор TAB'ов в скрипте, Обычно, его определяют в HTML, а скрипт остается без изменений. Способов описания Табов очень много, нужно просто выбрать подходящий к ситуации.

Знаю.....не знаю как сделать

Цитата

Способов описания Табов очень много, нужно просто выбрать подходящий к ситуации.

подскажи как легко изменить етот код...я в свою очередь попробую переделать

--------------------

ksnk

Дата 19.6.2007, 17:44 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386

Вот так, к примеру, это сделано в

Код


        <div id="container-3">
            <ul>

                <li><a href="#fragment-7"><span>One</span></a></li>
                <li><a href="#fragment-8"><span>Two</span></a></li>
                <li><a href="#fragment-9"><span>Three</span></a></li>
            </ul>
            <div id="fragment-7">
                Lorem ipsum dolor sit amet,
            </div>
            <div id="fragment-8">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-9">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

Это - статические Таб'ы, которые сразу размещаются в HTML страничке, а вот так можно описать табы с Ajax'ом

Код


        <div id="container-9">

            <ul>
                <li><a href="ahah_1.html"><span>One</span></a></li>
                <li><a href="ahah_2.html"><span>Two</span></a></li>
                <li><a href="ahah_3.html"><span>Three</span></a></li>
            </ul>
        </div>

Эти примеры взяты из демки плагина Tab для jQuery

Можно использовать теги DT/DD для разметки заголовков/мяса табов. Основной смысл - чтобы при отключенном Javascript юзеру все-таки хоть что-то разумно выглядещее на экран выводилось.

Работа с таким описанием на jQuery пишется примерно так
initTab('#container-9'), к примеру, а уже эта процедура бегает по 'ul>li>a', смотрит - не начинается ли href с # и делает либо статический либо Ajax таб ...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

AcidSlayer

Дата 16.8.2007, 15:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 26
Регистрация: 15.8.2007
Где: UA

Репутация: нет
Всего: нет

мне ндао сделать в Радио кнопкой такуюже ситуацыю

AcidSlayer

Дата 17.8.2007, 18:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 26
Регистрация: 15.8.2007
Где: UA

Репутация: нет
Всего: нет

Всё, ншаол выход елси интересно могу выложыть, и табы красивые могу научить вас делать...

Izabela

Дата 20.8.2007, 14:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 13.2.2007
Где: Lviv

Репутация: нет
Всего: 3

AcidSlayer конечно выложы

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »