Xpoint
   [напомнить пароль]

Правильная работа с табами

Метки: [без меток]
2008-01-30 20:21:26 [обр] Frutik[досье]

Добрый день! Никак не могу разобраться как правильно работать с табами

часть кода выстрадана самостоятельно, частть выгуглена у участи ноги растут из этой темы Вкладки FF

в результате табы создаются и убираются. но картинки на кнопке close добиться так и не удалось. ну и сами табы выглядят както не совсем органично (прошу прощения за столь туманное описание)

<?xml version="1.0" encoding="KOI8-U"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<window onload="init(event);" title="Main window"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<style  type="text/css">
<![CDATA[

.tab-close-button {
    list-style-image: url('chrome://global/skin/icons/close.png');
}          

]]>
</style>                                                                                               }


<script type="application/x-javascript">
<![CDATA[

    function init(event) {
   if (event.target == document) {
           addTab('Tab 1',1,'http://yahoo.com');
            addTab('Tab 2',1,'http://google.com');
       addTab('Tab 3',1,'http://mail.ru');
   }
    }
    
    function addTab(label,value,url) {

        tabs = document.getElementById('tabs');
        tabpanels = document.getElementById('tabpanels');
          
        // Create the new tab and select it
        newTab = tabs.appendItem(label, value);

        tabs.selectedItem = newTab;
        var idx = tabs.selectedIndex;

        newTab.setAttribute("id",'tab-'+idx);
        newTab.setAttribute("class",'tabbrowser-tab');

        // Create a new panel
        var tabpanel = document.createElement('tabpanel');
        tabpanel.setAttribute('id', 'panel-' + idx);

   newTab.linkedPanel = tabpanel.getAttribute("id");

        var iframe = document.createElement('iframe');
   iframe.setAttribute('id', 'frame-' + idx);
   iframe.setAttribute('src', url);
   iframe.setAttribute('flex', 1);

   tabpanel.appendChild(iframe);
   tabpanels.appendChild(tabpanel);
       
   return true;
    }

    function closeTab() {
   tabs = document.getElementById('tabs');
   tabpanels = document.getElementById('tabpanels');
   tab_s = tabs.selectedItem;
   var idx = tabs.selectedIndex;
        tabs.advanceSelectedTab(-1,true);
        if (!idx) {
            idx = 0;
        }
        tabpanels.removeChild(tabpanels.childNodes[idx]);
   tabs.removeItemAt(idx);
   return true;
    }
]]>
</script>                                                                                               }


<hbox flex="1">
    <vbox id="left-frame" width="100px">
   <button label="add" onclick="addTab('Tab',1,'http://www.google.com')"/>

    </vbox>
    <splitter collapse="before" resizeafter="grow" persist="state">
    <grippy />
    </splitter>
    <vbox id="right-frame" flex="1">
    <tabbox orient="vertical" flex="1" id="tabbox">
            <tabs class="tabbrowser-tabs" closebutton="true" disableclose="false" id="tabs" onclosetab="closeTab()" />
        
       <image class="tabs-closebutton" onclick="closeToolbar()" />.
            <tabpanels flex="1" id="tabpanels"></tabpanels>

        
   </tabbox>
    </vbox>

</hbox>

</window>
спустя 10 минут [обр] Frutik[досье]
вот как это выглядит в браузере
Powered by POEM™ Engine Copyright © 2002-2005