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

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

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

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

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