TAB SCROLL | Форум Mozilla Россия

>Форум Mozilla Россия
   http://forum.mozilla-russia.org/index.php
>Разработка
   http://forum.mozilla-russia.org/viewforum.php?id=18
>TAB SCROLL
   http://forum.mozilla-russia.org/viewtopic.php?id=18734

Диня > 26-08-2007 16:58:51

Доброго времени суток, уважаемые специалисты и не только! Тема может уже и набила оскомину, но всё же...

Стоит такая задача. В тулбаре нужнно добавить вкладки без панелей. Чтобы при уменьшении размера окна появлялись кнопки скрола по этим вкладкам, а также бы ла всегда видима кнопка закрытия панели вкладок. Очень напоминает вид вкладок при установленном плагине TabMix (только вместо шеврона со списком закладок, кнопка закрытия панели).

Выглядеть это по идеи должно так

Скажем прямо, я новичек в этой области и почти сразу запуталcя в стилях postion, overflow и т.п.
Копался в исходниках FireFoxa (tabbrowser.xml и т.п.) и исходниках TabMixa... но тупая вставка в XUL (естественно с удалением xul:, xbl:) ничего положительного не дала.

Может кто-нибудь нормально доходчиво объяснить как вставить этот чертов скролл в вкладки. Причем, хотелось бы без подключения описания через CSS и XML. А просто на XUL.

Может быть, есть примеры? Или где-нить в документации встречалась эта проблема???
Если, есть куда ткнуть, то смело делайте это

Заранее ОГРОМНОЕ спасибо, так как "парюсь" уже не первый день. :whiteflag:

Структура моего тулбара такова.

Выделить код

Код:

<toolbox id="navigator-toolbox">

<toolbar accesskey="A" class="chromeclass-toolbar"  id="My-Toolbar"
  context="toolbar-context-menu" toolbarname="MyToolBar">
	
	<vbox flex="1">
	  <hbox flex="1">
		<!-- Описание верхней панельки тулбара (кнопки, поля ввода и т.п.) !-->
	  </hbox>
	
	   <hbox id="MainHBox" hidden="false" flex="1">

	   <tabbox id="MainTabBox" flex="1"> <!-- чисто вкладки !-->
	   <tabs id="Mytabs" flex="1" >
			
		   <tab id="tab1" flex="1">	
		   <tab id="tab2" flex="1">	
		   <tab id="tab3" flex="1">	
		   <tab id="tab4" flex="1">		

	   </tabs>
	   </tabbox>

	   </hbox>

	   <hbox flex="1" pack="end"> <!-- Закрытие панельки -->
	    <spacer flex="1"/>
	    <toolbarbutton class="tabs-closebutton" oncommand="HideSearchBar();" />
   	   </hbox> 
	
	</vbox>

</toolbar>
</toolbox>

Shutnik > 27-08-2007 09:14:02

Диня
ну думаю, что здесь нужно использовать tab'ы, хотя, можно и их.
примерно так:

Выделить код

Код:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/global.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <vbox>
    <hbox>
      <arrowscrollbox orient="horizontal" style="width:300px">
        <button label="0"/>
        <button label="1"/>
        <button label="2"/>
        <button label="3"/>
        <button label="4"/>
        <button label="5"/>
        <button label="6"/>
        <button label="7"/>
        <button label="8"/>
        <button label="9"/>
      </arrowscrollbox>
    </hbox>
    <separator flex="1"/>
  </vbox>

</window>

Диня > 27-08-2007 09:42:24

shutnik пишет

ну думаю, что здесь нужно использовать tab'ы, хотя, можно и их.
примерно так:

Во-первых, спасибо за ответ.
Во-вторых, грубо говоря, вы предлагает не использовать табы, а сделать их симуляцию, т.е. применительно к моему примеру.

1. Ряд кнопок заключить в arrowscrollbox.
2. Сделать для него стиль, что бы не было видно боковых кнопок.
3. Создать две кнопки (вне arrowscrollbox'a), нажатие которых будет вызывать функции arrowscrollbox'a, типа Step+1, Step-1 (я к примеру).
4. Собственно, сделать стили для кнопок аля вкладки. И отрабатывая нажатие на кнопку, менять стиль в соотвествии с стилем выбранной вкладки.

Рассматриваю этот вариант как запасной.

shutnik пишет

...tab'ы, хотя, можно и их.

А вот как с ними?? Есть идеи???

Shutnik > 27-08-2007 09:53:13

Диня

Диня пишет

2. Сделать для него стиль, что бы не было видно боковых кнопок.
3. Создать две кнопки (вне arrowscrollbox'a), нажатие которых будет вызывать функции arrowscrollbox'a, типа Step+1, Step-1 (я к примеру).
4. Собственно, сделать стили для кнопок аля вкладки. И отрабатывая нажатие на кнопку, менять стиль в соотвествии с стилем выбранной вкладки.

это ещё зачем? чем не устраивают кнопки от arrowscrollbox?

Диня пишет

А вот как с ними?? Есть идеи???

а что тут необычного?

Выделить код

Код:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/global.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <vbox>
    <tabs style="width:300px">
      <arrowscrollbox orient="horizontal" style="width:300px">
        <tab label="Taaaaaaaaaaab#0"/>
        <tab label="Taaaaaaaaaaab#1"/>
        <tab label="Taaaaaaaaaaab#2"/>
        <tab label="Taaaaaaaaaaab#3"/>
        <tab label="Taaaaaaaaaaab#4"/>
        <tab label="Taaaaaaaaaaab#5"/>
        <tab label="Taaaaaaaaaaab#6"/>
        <tab label="Taaaaaaaaaaab#7"/>
        <tab label="Taaaaaaaaaaab#8"/>
        <tab label="Taaaaaaaaaaab#9"/>
      </arrowscrollbox>
    </tabs>
    <separator flex="1"/>
  </vbox>

</window>

Диня > 27-08-2007 10:05:50

shutnik пишет

это ещё зачем? чем не устраивают кнопки от arrowscrollbox?

Просто нужно как на картинке (см. выше), чтобы кнопки скролла были сбоку справа.

shutnik пишет

а что тут необычного?

Я в шоке!!!!
Нет, конечно сам пробовал так делать, но видимо все таки где-то ошибся б?:%?:!!!!!

Вообще думаю, топик будет полезен многим.
Сейчас буду пробовать реализовать... если что будут вопросы.

Shutnik > 27-08-2007 11:20:00

Диня
попробуйте так:

>> foo-toolbar.xul:

Выделить код

Код:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://foo-toolbar/content/foo-toolbar.css"?>
<overlay id="foo-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <toolbox id="navigator-toolbox">
    <toolbar id="foo-toolbar">
      <arrowscrollbox orient="horizontal" flex="1">
        <toolbarbutton label="Button #0"/>
        <toolbarbutton label="Button #1"/>
        <toolbarbutton label="Button #2"/>
        <toolbarbutton label="Button #3"/>
        <toolbarbutton label="Button #4"/>
        <toolbarbutton label="Button #5"/>
        <toolbarbutton label="Button #6"/>
        <toolbarbutton label="Button #7"/>
        <toolbarbutton label="Button #8"/>
        <toolbarbutton label="Button #9"/>
        <toolbarbutton label="Button #10"/>
        <toolbarbutton label="Button #11"/>
        <toolbarbutton label="Button #12"/>
        <toolbarbutton label="Button #13"/>
        <toolbarbutton label="Button #14"/>
        <toolbarbutton label="Button #15"/>
        <toolbarbutton label="Button #16"/>
        <toolbarbutton label="Button #17"/>
        <toolbarbutton label="Button #18"/>
        <toolbarbutton label="Button #19"/>
      </arrowscrollbox>
    </toolbar>
  </toolbox>

</overlay>

>> foo-toolbar.css:

Выделить код

Код:

#foo-toolbar crollbox {
  -moz-box-ordinal-group: 1 !important;
}
#foo-toolbar .autorepeatbutton-up {
  -moz-box-ordinal-group: 2 !important;
}
#foo-toolbar .autorepeatbutton-down {
  -moz-box-ordinal-group: 3 !important;
}

http://people.mozilla.ru/shutnik/img/sh … -02%5D.png

Диня > 27-08-2007 12:39:11

shutnik пишет

попробуйте так:

Спасибо просто огромнейшее! Вот до этого я бы вообще не дошел... сместить стрелки с помощью стиля -moz-box-ordinal-group.

Сделал по аналогии, получилось так.

Выделить код

Код:

<tabs class="foo-toolbar">
      <arrowscrollbox orient="horizontal" style="width:300px">
        <tab label="Taaaaaaaaaaab#0"/>
        <tab label="Taaaaaaaaaaab#1"/>
        <tab label="Taaaaaaaaaaab#2"/>
        <tab label="Taaaaaaaaaaab#3"/>
        <tab label="Taaaaaaaaaaab#4"/>
        <tab label="Taaaaaaaaaaab#5"/>
        <tab label="Taaaaaaaaaaab#6"/>
        <tab label="Taaaaaaaaaaab#7"/>
        <tab label="Taaaaaaaaaaab#8"/>
        <tab label="Taaaaaaaaaaab#9"/>
      </arrowscrollbox>
	  </tabs>

Собственно, на этой ноте можно было бы закончить, НО
Может быть, конечно у меня что-то не так. Но при заключении в тег <arrowscrollbox>, табы перестали выбираться.
Выбираться - менять свой стиль на выбранную вкладку.

Причем oncommand выполняется нормально для каждой вкладки.

На ум приходит считывать индекс выбранной вкладки (которая, вызвала команду), и вручную присваивать SelectedIndex объекту tabs.

Может быть есть еще какая-то хитрость???? типа передачи родительскому объекту нажатия или что-нить в таком духе?? Потому как сдается мне, что нет перехвата сообщения Select или как в DOM это объывается...

Shutnik > 27-08-2007 14:13:50

Диня

Может быть, конечно у меня что-то не так. Но при заключении в тег <arrowscrollbox>, табы перестали выбираться.

а так

Выделить код

Код:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/global.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <vbox>
    <hbox>
      <arrowscrollbox orient="horizontal" style="width:300px">
      <tabs class="foo-toolbar">
        <tab label="Taaaaaaaaaaab#0"/>
        <tab label="Taaaaaaaaaaab#1"/>
        <tab label="Taaaaaaaaaaab#2"/>
        <tab label="Taaaaaaaaaaab#3"/>
        <tab label="Taaaaaaaaaaab#4"/>
        <tab label="Taaaaaaaaaaab#5"/>
        <tab label="Taaaaaaaaaaab#6"/>
        <tab label="Taaaaaaaaaaab#7"/>
        <tab label="Taaaaaaaaaaab#8"/>
        <tab label="Taaaaaaaaaaab#9"/>
      </tabs>
      </arrowscrollbox>
    </hbox>
    <separator flex="1"/>
  </vbox>

</window>

зачем вам табы при использовании toolbar? может лучше использовать toolbarbutton?

хм. и

Выделить код

Код:

style="width:300px"

лучше заменить на

Выделить код

Код:

flex="1"

. нет?

Диня > 28-08-2007 06:53:11

shutnik пишет

Вы наверное не в городе Новосибирске живете??? Честно, поставил бы пиво!!! :beer: ОГРОМНОЕ СПАСИБО!!!
Наконец-то в поисковике по словам "TAB SCROLL" народ найдет, именно то что надо.

Тему можно считать закрытой. Получилось в результате вот что.

Выделить код

Код:

<toolbox id="navigator-toolbox">

	<toolbar accesskey="A" class="chromeclass-toolbar"  id="MyToolbar"
         context="toolbar-context-menu" toolbarname="MyToolbar"
         hidden="false" persist="hidden" flex="1">

             <!-- описание содержания тулбара !-->

        </toolbar>

		  
	<hbox id="MainHBox" hidden="false" flex="1" pack="start" align="start">

		<hbox flex="1">

		<tabbox class="MainTabBoxClass">

		<arrowscrollbox id="MainScroll" orient="horizontal" flex="1" hidden="false">
		<tabs class="ImgTabs" id="blogstab" hidden="true">

			<tab id="tab1" collapsed="false" persist="collapsed" 
			label="tab1" 	oncommand="DoIt(event, 'tab1');" />

			<tab id="tab2" collapsed="false" persist="collapsed" 
			label="tab2" 	oncommand="DoIt(event, 'tab2');" />

			<tab id="tab3" collapsed="false" persist="collapsed" 
			label="tab3" 	oncommand="DoIt(event, 'tab3');" />

		</tabs>	
                </arrowscrollbox>		
		
		</tabbox>
		<spacer flex="100"/>	
		</hbox>
		
                 <box flex="1" pack="end"> <!-- панель с плавающей кнопкой !-->
		  	<spacer flex="1"/>
				<toolbarbutton class="tabs-closebutton" oncommand="HideBar();" />
		</box> 
		
 	  </hbox>

	
   </toolbox>

Выделить код

Код:

#MyToolbar,
.ImgTabs				 
{
    list-style-image: url("chrome://mytoolbar/skin/mytoolbar_buttons.png");	
}

.ImgTabs .tab-text {padding-left: 5px; padding-right: 5px;}

.MainTabBoxClass
{
	min-width: 5px; 
	min-hight: 5px; 
	-moz-box-flex: 1; 
	overflow: none !important; 
}

.MainTabBoxClass .autorepeatbutton-up {
  -moz-box-ordinal-group: 2 !important;
  width : 15px;
}

.MainTabBoxClass .autorepeatbutton-down {
  -moz-box-ordinal-group: 3 !important;
  width : 15px;
}

#tab1 { 
-moz-image-region: rect(0px 2672px 16px 2656px); 
}

#tab2 { 
-moz-image-region: rect(0px 576px 16px 560px); 
}

#tab3 { 
-moz-image-region: rect(0px 7136px 16px 7120px); 
}