Вкладки FF

Василий Литвинов · №1

Подскажите как реализовать в xul приложении вкладки как в FF.
Меня интересует как добавить к <tab> кнопки и если возможно другие елементы.

Anton · №2

Или сделать собственную привязку на нужные tab'ы (не пробовал, но мне кажется, достаточно добавить в <content.. <children/>), или вместо <tab'ов помещать в <tabs> нужные элементы.

p.s. проверил, почти достаточно, кроме добавления <children/> нужно изменить атрибут display на xul:box

Отредактировано Anton (29-06-2007 23:50:30)

Василий Литвинов · №3

Или сделать собственную привязку на нужные tab'ы (не пробовал, но мне кажется, достаточно добавить в <content.. <children/>), или вместо <tab'ов помещать в <tabs> нужные элементы.
p.s. проверил, почти достаточно, кроме добавления <children/> нужно изменить атрибут display на xul:box

а можно примером кода?

Anton · №4

1. Берём из toolkit.jar файл tabbox.xml, делаем его копию, скажем, ctabs.xml.
2. В файле ctabs.xml оставляем директиву xml, DOCTYPE, обрамляющий элемент bindgings и в нём только элемент binding с id="tab", меняем обоим элементам id, на всякий случай.
3. Элементу binding меняем также значение атрибута 'display' значением "xul:box".
4. В элемент xul:hbox добавляем тег <children/>.
5. Нужным tab'ам добавляем в стиль "-moz-binding: url(путь-к-ctabs.xml#id-элемента-binding);", в сами tab'ы добавляем нужные элементы управления, что-нибудь вроде:

Выделить код

Код:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
    <tabbox>
       <tabs>
          <tab label="1">
             <button label="11" oncommand="alert(11)"/>
             <button label="12"/>
          </tab>
          <tab label="2">
             <vbox>
                <button label="21"/>
                <button label="22"/>
             </vbox>
          </tab>
       </tabs>
    </tabbox>
 
</window>

ctabs.xml должен находится где-нибудь в chrome.

Вроде всё.

Dark-Demon · №5

распотраши tabbrowser.xml

Василий Литвинов · №6

1. Берём из toolkit.jar файл tabbox.xml, делаем его копию, скажем, ctabs.xml.
2. В файле ctabs.xml оставляем директиву xml, DOCTYPE, обрамляющий элемент bindgings и в нём только элемент binding с id="tab", меняем обоим элементам id, на всякий случай.
3. Элементу binding меняем также значение атрибута 'display' значением "xul:box".
4. В элемент xul:hbox добавляем тег <children/>.

Ничего не выходит
Можно листинг готового ctabs.xml?

вот мой ctabs.xml

Выделить код

Код:

<?xml version="1.0"?>
<bindings id="s_tabBindings"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          xmlns:xbl="http://www.mozilla.org/xbl">
  <binding id="s_tab" display="xul:box">
    <xul:hbox align="center" flex="1">
      <children>
        <xul:image/>
        <xul:label/>
        <xul:button/>
      </children>
    </xul:hbox>
  </binding>
</bindings>

Выделить код

Код:

<tabbox>
       <tabs>
          <tab label="1"  style="-moz-binding: url(chrome://content/ctabs.xml#s_tab-binding);">
             <button label="11" oncommand="alert(11)"/>
             <button label="12"/>
          </tab>
          <tab label="2">
             <vbox>
                <button label="21"/>
                <button label="22"/>
             </vbox>
          </tab>
       </tabs>
    </tabbox>

но ничего не выходит. поправте, что неправильно делаю.
получаеться вот что:

Отредактировано Василий Литвинов (01-07-2007 15:52:38)

Anton · №7

листинг готового ctabs.xml

http://pastebin.mozilla-russia.org/61131

получаеться вот что:

И у меня тоже самое получается. То же самое получится и без ctabs.xml, единственное, для чего нужна правка стандартного binding tab - чтобы дочерние элементы tab'ов могли обрабатывать пользовательский ввод.

Василий Литвинов · №8

А куда девается обрисовка вкладки. Остаются только кнопки, а стандартный вид кудато пропадает.

Anton · №9

стандартный вид кудато пропадает

может, новый binding "подшивается" неправильно ?

Вот мой скриншот: http://forum.mozilla-russia.org/uploaded/tabs.png
Нечётные tab'ы - стандартные, чётные - с изменённым binding'ом. Выглядят, по-моему, идентично.

Я, правда, не стал выяснять, где в xulrunner'е chrome, сделал в tabbox.xml копию <binding id="tab".., сделал ему id="tab2", display="xul:box" и добавил <children/> в <xul:hbox..., в xul-файле к tab'ам подшил так:

Выделить код

Код:

<tab label="1" style="-moz-binding:url(chrome://global/content/bindings/tabbox.xml#tab2);">

Добавлено Вск 01 Июл 2007 17:10:16 :
p.s. сейчас только заметил:

Василий Литвинов пишет

...
Выделить код
Код:
<binding id="s_tab"
...
Выделить код
Код:
ctabs.xml#s_tab-binding
...

id'ы разные - у binding'а "s_tab", а "подшивается" "s_tab-binding".

Добавлено Вск 01 Июл 2007 17:12:46 :
p.p.s: действительно, неправильно : )

Василий Литвинов · №10

а я все голову ломал. Спасибо!

Василий Литвинов · №11

А как сделать вкладки снизу, а не сверху как стандартные?

Infant · №12

Василий Литвинов
А поиском воспользоваться? Не ты первый спрашиваешь, например, http://forum.mozilla-russia.org/viewtopic.php?pid=84157#p84157

Добавлено Пнд 02 Июл 2007 19:03:12 :
Или http://forum.mozilla-russia.org/viewtopic.php?id=1849

Василий Литвинов · №13

Подскажите как перевернуть сами вкладки в <tabbrowser>.
Я их сделал снизу

Выделить код

Код:

<tabbrowser flex="1" id="s_browser_bottom" />

Выделить код

Код:

#s_browser_bottom tabbox {-moz-box-direction: reverse;}

Но они сами все равно смотрят вниз.
Я пробовал применить к ним стили css, но ничего не выходит реакции ноль.

Выделить код

Код:

#s_browser_bottom > tab {
	-moz-appearance: none !important;
	/*background: url("chrome://multiviews/skin/images/tabstrip/tab-background.png") center repeat-x;*/
	border: 1px solid;
	border-bottom: 3px solid;
	-moz-border-top-colors: #B5B5B5;
	-moz-border-right-colors: #91A7B4;
	-moz-border-bottom-colors: #91A7B4 transparent transparent;
	-moz-border-left-colors: #91A7B4;
	-moz-border-radius-bottomleft: 2px;
	-moz-border-radius-bottomright: 2px;
	padding: 0px 3px 1px 4px;
	margin-top: 0px;
	margin-bottom: 3px;
        }

А еще при добавлении первой(!) новой владки :

Добавляю я ее так:

Выделить код

Код:

function s_NewTab_bottom()
         {try{var myBrowser =  document.getElementById('s_browser_bottom');
              myBrowser.selectedTab = myBrowser.addTab();
	     }catch(e){alert(e);}
         }

Подскажите пожалуйста, что я неправильно делаю?

Anton · №14

1.

Василий Литвинов пишет

Подскажите как перевернуть сами вкладки в <tabbrowser>.
Я их сделал снизу
Выделить код
Код:
<tabbrowser flex="1" id="s_browser_bottom" />
Выделить код
Код:
#s_browser_bottom tabbox {-moz-box-direction: reverse;}

Вроде бы надо #s_browser_bottom > tabbox

Или

Dark-Demon пишет

распотраши tabbrowser.xml

по аналогии с <tab>

2.

А еще при добавлении первой(!) новой владки :...

Надо добавить в документ элемент <menu id="menu_closeWindow"/>. Потом будет ругань на отсутствие id="menu_close". Добавить его. Потом позаботиться о наличии в prefs.js настроек browser.chrome.site_icons, browser.chrome.favicons. Потом ещё ошибки вылезут, разобраться с ними и т. д.

В общем, насколько я понимаю, тут два варианта: либо перетащить какую-то часть кода Firefox на поддержку tabbrowser, либо обкастрировать его под свои нужды. Иначе он работать не хочет.

Отредактировано Anton (04-07-2007 19:53:34)

Василий Литвинов · №15

Вроде бы надо #s_browser_bottom > tabbox

Что с ">", что без нее кладки получаются снизу(чего и добивался). Но мне нужно чтобы сами вкладки смотрели вверх, а не вниз.
есть:

хотелось бы:

Так подскажите как я могу это сделать.

Anton · №16

Так подскажите как я могу это сделать.

Так уже подсказал. Берем tabbrowser.xml, делаем копию <binding id="tabbrowser"..., меняем местами что нужно, вырезаем код, который даёт ошибки и т. д.

Dark-Demon · №17

Василий Литвинов, открой архив со скином и переверни соответствующие картинки.

Василий Литвинов · №18

....соответствующие картинки

где ты интересно увидел там картинки? по моему это все реализуется при помощи css!

Dark-Demon · №19

через css подключаются картинки.

Полезная информация