MozTW 討論區
https://forum.moztw.org/

Tabbar Buttons 1.0 [無聊小玩意]
https://forum.moztw.org/viewtopic.php?f=18&t=16621		 第 1 頁 (共 1 頁)
發表人:  Merci chao [ 2006-11-26, 17:34 ]
文章主題 :  Tabbar Buttons 1.0 [無聊小玩意]
引言回覆:
我想做的事情大概是這樣的:
我想把一個按鈕移動到分頁工具列上
因此我打算先鎖定一個目標, 然後用 insertBefore() 來把按鈕移過去

基本上套件的運作方式我都想好了
而且 DOM 觀察器也能用 "class" 和 "tabs-alltabs-button" 找到 "所有分頁按鈕"
但就是無法用 var a = document.getElementsByAttribute("class", "tabs-alltabs-button"); 來找 :(
因為傳來的陣列是空的.........=="

yuoo2k 大有告訴我可以用 overlay 的方式來改 tabbar, 而且我看過很多分頁套件也是用這個方法
但這樣做只會和所有分頁套件發生嚴重的衝突.....

大家有沒有好的辦法呢 :?:
發表人:  yuoo2k [ 2006-11-26, 19:19 ]
文章主題 : 
我後來越想越不對...
DOM檢視器就可以做到 (左邊的樹狀 Node 上可以右鍵->刪除、複製、剪下、貼上)
應該沒道理不行...(DOM檢視器也是套件阿~)

後來在看 SearchWP 的時候，發現它用這個:
getAnonymousElementByAttribute
這玩意居然可以定位取出 DOM 檢視器裏呈現紅色字裡頭的 Element 來操作...QQ
(SearchWP 是用 getAnonymousElementByAttribute 來定位並改變 Searchbar 的 textbox 內容....)

我後來有稍微試了一下，這個 getAnonymousElementByAttribute 好像些限制...
沒辦法一次由最外層取得很裡層的東西，不過好像可以用接力的...

我的測試是刪掉分頁列最右邊的"列出所有分頁"那個鈕。然後再加入一個我自訂的按鈕在最左方。

var a = document.getElementById("content"); //這個是那堆紅字之外可用 id 定位到的最上層元素
var b = document.getAnonymousElementByAttribute(a, "class", "tabbrowser-tabs"); //這就是傳說中的跳板...
var c = document.getAnonymousElementByAttribute(b, "class", "tabs-alltabs-stack"); //用跳板抓到要刪的目標
c.parentNode.removeChild(c); //殺!

var m = document.createElementNS(gXUL_NS, "toolbarbutton"); //建立我的自訂按鈕
m.setAttribute("label", "Orz"); //設定按鈕的屬性...布啦布啦...
b.insertBefore(m, b.firstChild); //最左邊加入按鈕 lol
這樣就不用改 xml 也可以在執行時期動態加自己要的東西~ XD
嗯~接下來就交給你發揮了~ :wink:
發表人:  Merci chao [ 2006-11-26, 20:09 ]
文章主題 : 
OH, THANX :D
終於可以走第一步了 ==+

不過....效果好像有點怪怪的....不是太明白整個運作
還是明天有空研究一下~~
發表人:  kourge [ 2006-11-27, 06:08 ]
文章主題 : 
雖然我不是很懂 XUL 內部的 DOM 結構...可是我覺得用屬性來判斷一個元素的 class 有點危險，因為一個元素可以有好幾個 class，用空格分開。
發表人:  Merci chao [ 2006-11-27, 17:25 ]
文章主題 : 
kourge 寫:
雖然我不是很懂 XUL 內部的 DOM 結構...可是我覺得用屬性來判斷一個元素的 class 有點危險，因為一個元素可以有好幾個 class，用空格分開。

你說這樣??
代碼:
<toolbarbutton
    class="toolbarbutton-1 chromeclass-toolbar-additional"/>

一個 class 屬性可以有幾個部份, 但一個元素只可能有一個 class=""
我就沒見過有這種東西 :shock:
代碼:
<toolbarbutton
    class="toolbarbutton-1 chromeclass-toolbar-additional"
    class="autocomplete-textbox-container"/>

很多元素都有一樣的 class 屬性就是真的

但對於為何是 getAnonymousElementByAttribute 而不是 getAnonymousElementsByAttribute 就不太明白了 :roll:
發表人:  Merci chao [ 2006-11-27, 19:01 ]
文章主題 : 
現時的成果:
圖檔

代碼:
//get the area where the toolbars will move to
var a = document.getElementById("content");
var b = document.getAnonymousElementByAttribute(a, "class", "tabbrowser-tabs");
var c = document.getAnonymousElementByAttribute(b, "class", "tabs-stack");
var d = c.childNodes[1].firstChild.lastChild;

if (document.getElementById("tm-newtab")) {
    var e = c.childNodes[1].firstChild.firstChild.childNodes[1];
    // preparations for the new-tab button and the toolbar
    var z = document.createElement("hbox");
    if (true) gPrefService.setBoolPref("extensions.tabmix.newTabButton", true); //show the new-tab button box
    e.insertBefore(z, e.firstChild);
    if (true) e.lastChild.setAttribute("style", "display:none !important;"); //hide the new-tab button
    z.insertBefore(e.lastChild, z.firstChild);
    var y = z.firstChild; //set the left point where the toolbar will move to
} else {
    var y = c.childNodes[1].firstChild.firstChild.firstChild; //set the left point where the toolbar will move to
}

//move the toolbar to the left
var n = document.getElementById("###Toolbar's id###");
n.setAttribute("style","border:0px;padding:0px;margin:0px;-moz-appearance:none");
n.setAttribute("iconsize","small");
y.parentNode.insertBefore(n, y.nextSibling);

//move the toolbar to the right
var m = document.getElementById("###Toolbar's id###");
m.setAttribute("style","border:0px;padding:0px;margin:0px;-moz-appearance:none");
m.setAttribute("iconsize","small");
d.parentNode.insertBefore(m, d.nextSibling);
發表人:  kourge [ 2006-11-27, 21:56 ]
文章主題 : 
Merci chao 寫:
kourge 寫:
雖然我不是很懂 XUL 內部的 DOM 結構...可是我覺得用屬性來判斷一個元素的 class 有點危險，因為一個元素可以有好幾個 class，用空格分開。

你說這樣??
代碼:
<toolbarbutton
    class="toolbarbutton-1 chromeclass-toolbar-additional"/>

一個 class 屬性可以有幾個部份, 但一個元素只可能有一個 class=""
我就沒見過有這種東西 :shock:

我的意思正是如此...
代碼:
<toolbarbutton
    class="toolbarbutton-1 chromeclass-toolbar-additional"/>

這個 toolbarbutton 也有 toolbarbutton-1 這個 class，但是...設 x = 該元素，
x.getAttribute('class') != 'toolbarbutton-1'
而是
x.getAttribute('class') == 'toolbarbutton-1 chromeclass-toolbar-additional'
所以當你用 getElementsByAttribute 來判斷 class 的時候就很危險，因為其他擴充套件可能可以隨便給元素加幾個 class，你的擴充套件就會馬上 break（不能用）。
發表人:  yuoo2k [ 2006-11-28, 11:13 ]
文章主題 : 
我今天發現 All-In-One Sidebar (AiOS) 有把這個功能做出來了，可以參考一下...
    圖檔
它允許使用者很直覺的用自訂工具列功能來拖放所有可用的按鈕到 分頁列or狀態列 的 最左邊or最右邊。
    圖檔

AiOS 也是用 xml 檔 overlay (或說 extends) 的方式 \aios\content\tbx\tabx.xml
發表人:  Merci chao [ 2006-11-28, 12:49 ]
文章主題 : 
yuoo2k 寫:
我今天發現 (AiOS) 有把這個功能做出來了，可以參考一下...
它允許使用者很直覺的用自訂工具列功能來拖放所有可用的按鈕到 分頁列or狀態列 的 最左邊or最右邊。
AiOS 也是用 xml 檔 overlay (或說 extends) 的方式
很好的衝擊......=="
有點想放棄的念頭.......
雖然我單用 javascript 就做到了.....但感覺上有點像走別人的路..... :cry:
發表人:  Merci chao [ 2006-11-28, 12:53 ]
文章主題 : 
kourge 寫:
所以當你用 getElementsByAttribute 來判斷 class 的時候就很危險，因為其他擴充套件可能可以隨便給元素加幾個 class，你的擴充套件就會馬上 break（不能用）。

哦???? 這個我沒有研究過耶, 有很多套件會給元素改 class 的嗎??
我倒是試過更改元素的 id :roll:
發表人:  kourge [ 2006-11-29, 14:03 ]
文章主題 : 
Merci chao 寫:
kourge 寫:
所以當你用 getElementsByAttribute 來判斷 class 的時候就很危險，因為其他擴充套件可能可以隨便給元素加幾個 class，你的擴充套件就會馬上 break（不能用）。

哦???? 這個我沒有研究過耶, 有很多套件會給元素改 class 的嗎??
我倒是試過更改元素的 id :roll:

元素改 id 是很危險的啊～ <(囧)>|||
改 class 是比較常見的做法，除非擴充套件自己在記憶體內有 maintain 一個元素陣列，不然如果要省記憶體就是給元素加上 class，因為雖然 class 屬性只有一個，但是實質上可以有好幾個 class，用空格分隔。
發表人:  Merci chao [ 2006-11-29, 15:13 ]
文章主題 : 
kourge 寫:
元素改 id 是很危險的啊～ <(囧)>|||

例如說 Bookmarks Menu Button 這個套件為了做到某些功能, 故意寫了很多 function, 但我改一改一個項目的 id 就能達到同樣效果 :lol:
我也知道這是危險做法, 但為了方便沒有別的辦法了....
(我事後會還原那項目的 id 的)
發表人:  Merci chao [ 2006-11-29, 18:08 ]
文章主題 : 
純粹試玩: Tabbar Buttons 1.0 alpha

基本上這是失敗之作.....=="
為了避免出現某個錯誤, 所以禁止了使用者修改工具列
要改的話只有停用 Tabbar Buttons 才行.....
真想不到要相容於 "自訂工具列" 比套件主要的運作還難耶....
使盡所有怪招也不行的說....@@"

放置左方的功能有可會與某些分頁套件相衝, 但與 TMP 大致上相容
若果出現甚麼奇怪錯誤的話就移除了它吧, 反正現在我也不太想弄下去..... :cry:

參數如下:
引言回覆:
啟用左方的放置
tabbarbuttons.left

啟用右方的放置
tabbarbuttons.right

使用小圖示
tabbarbuttons.small

當有安裝 TMP 時顯示新增分頁按鈕
tabbarbuttons.newTabButton

放置左方的工具列的 id
tabbarbuttons.left.toolbarId

放置右方的工具列的 id
tabbarbuttons.right.toolbarId
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/