Наши проекты Mozilla Россия MozUtil Bugzilla Планета

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

Mozilla Россия — свежие версии программ Mozilla, а также масса полезной информации по каждому продукту.

Страницы: 1

№126-08-2007 16:58:51

Диня
Участник
 
Группа: Members
Зарегистрирован: 26-08-2007
Сообщений: 16
UA: Firefox 2.0

TAB SCROLL

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

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

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

Скажем прямо, я новичек в этой области и почти сразу запутал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>

Отредактировано Диня (26-08-2007 17:00:22)

Отсутствует

 

№227-08-2007 09:14:02

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785

Re: TAB SCROLL

Диня
ну думаю, что здесь нужно использовать 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>

Отсутствует

 

№327-08-2007 09:42:24

Диня
Участник
 
Группа: Members
Зарегистрирован: 26-08-2007
Сообщений: 16
UA: Firefox 2.0

Re: TAB SCROLL

shutnik  пишет

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

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

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

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

shutnik  пишет

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

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

Отсутствует

 

№427-08-2007 09:53:13

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785

Re: TAB SCROLL

Диня

Диня пишет

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>

Отсутствует

 

№527-08-2007 10:05:50

Диня
Участник
 
Группа: Members
Зарегистрирован: 26-08-2007
Сообщений: 16
UA: Firefox 2.0

Re: TAB SCROLL

shutnik пишет

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

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

shutnik пишет

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

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

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

Отсутствует

 

№627-08-2007 11:20:00

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785

Re: TAB SCROLL

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

>> 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

Отредактировано shutnik (27-08-2007 11:20:56)

Отсутствует

 

№727-08-2007 12:39:11

Диня
Участник
 
Группа: Members
Зарегистрирован: 26-08-2007
Сообщений: 16
UA: Firefox 2.0

Re: TAB SCROLL

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 это объывается...

Отсутствует

 

№827-08-2007 14:13:50

Shutnik
Участник
 
Группа: Extensions
Зарегистрирован: 12-11-2005
Сообщений: 3785

Re: TAB SCROLL

Диня

Может быть, конечно у меня что-то не так. Но при заключении в тег <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"

. нет?

Отсутствует

 

№928-08-2007 06:53:11

Диня
Участник
 
Группа: Members
Зарегистрирован: 26-08-2007
Сообщений: 16
UA: Firefox 2.0

Re: TAB SCROLL

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); 
}

Отсутствует

 

Страницы: 1

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]