lyly
小狐狸
小狐狸
  • UID35829
  • 注册日期2011-04-02
  • 最后登录2011-08-04
  • 发帖数14
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
阅读:4897回复:16

玩一玩标签栏,导航栏,标题栏,置底

楼主#
更多 发布于:2011-04-10 06:40
无意中找到一段标签栏置底的js代码,稍微学学,发现真的很简洁,方便
还可以按照代码排列的顺序,改变置底的顺序,也许我火星,但觉得真的不错,不用什么扩展那么麻烦,我新手,也不太懂什么格式,就一段一段的排列

//uc代码置底顺序从上到下


try {
    var vbox = document.createElement('vbox');
    document.getElementById("navigator-toolbox").parentNode.insertBefore(
        vbox, document.getElementById("browser-bottombox"));
    vbox.appendChild(document.getElementById("nav-bar"));
}catch(e) {}  
//导航栏
try {
    var vbox = document.createElement('vbox');
    document.getElementById("navigator-toolbox").parentNode.insertBefore(
        vbox, document.getElementById("browser-bottombox"));
    vbox.appendChild(document.getElementById("TabsToolbar"));
}catch(e) {} 
//标签栏

try {
    var vbox = document.createElement('vbox');
    document.getElementById("navigator-toolbox").parentNode.insertBefore(
        vbox, document.getElementById("browser-bottombox"));
    vbox.appendChild(document.getElementById("titlebar"));
}catch(e) {}
//标题栏
runking
火狐狸
火狐狸
  • UID35372
  • 注册日期2011-03-03
  • 最后登录2016-01-14
  • 发帖数165
  • 经验41枚
  • 威望0点
  • 贡献值50点
  • 好评度1点
  • 社区居民
1楼#
发布于:2011-04-10 06:40
非常感谢楼主的分享!支持
asdf123456
千年狐狸
千年狐狸
  • UID32588
  • 注册日期2010-04-16
  • 最后登录2020-02-17
  • 发帖数1088
  • 经验299枚
  • 威望0点
  • 贡献值50点
  • 好评度10点
  • 社区居民
  • 忠实会员
2楼#
发布于:2011-04-10 06:40
lz非常有办法让Linux的Firefox的标题栏隐藏?
ciel
小狐狸
小狐狸
  • UID28982
  • 注册日期2009-05-26
  • 最后登录2022-04-22
  • 发帖数86
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
3楼#
发布于:2011-04-10 06:40
那位来段自动隐藏标签栏代码,感谢。
wen1jian
火狐狸
火狐狸
  • UID27994
  • 注册日期2009-02-14
  • 最后登录2014-01-10
  • 发帖数102
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
4楼#
发布于:2011-04-10 06:40
想知道楼主的按钮风格是怎么办到的?
是主题的原因吗?
lyly
小狐狸
小狐狸
  • UID35829
  • 注册日期2011-04-02
  • 最后登录2011-08-04
  • 发帖数14
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
5楼#
发布于:2011-04-10 06:40
wen1jian:想知道楼主的按钮风格是怎么办到的?
是主题的原因吗?
回到原帖



自己找的图标,用css更换
马甲
小狐狸
小狐狸
  • UID35845
  • 注册日期2011-04-03
  • 最后登录2011-05-21
  • 发帖数6
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2011-04-10 06:40
呵呵,昨晚闲的蛋疼折腾的,UC脚本+CSS
地址栏整合附件栏、状态栏、状态以及连接显示。
系统WIN7经典主题,Fx4
wen1jian
火狐狸
火狐狸
  • UID27994
  • 注册日期2009-02-14
  • 最后登录2014-01-10
  • 发帖数102
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
7楼#
发布于:2011-04-10 06:40
lyly


自己找的图标,用css更换
回到原帖


那貌似很繁琐??
白左
千年狐狸
千年狐狸
  • UID34985
  • 注册日期2010-12-29
  • 最后登录2023-11-13
  • 发帖数2039
  • 经验655枚
  • 威望0点
  • 贡献值364点
  • 好评度69点
  • 社区居民
  • 忠实会员
8楼#
发布于:2011-04-10 06:40
第三种比较好,前两者浪费了顶栏空间……

不过反正鼠标都要上下动,好像没啥意义……
-いたんですか? -ええ、ずっと
lyly
小狐狸
小狐狸
  • UID35829
  • 注册日期2011-04-02
  • 最后登录2011-08-04
  • 发帖数14
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
9楼#
发布于:2011-04-10 06:40
ciel:那位来段自动隐藏标签栏代码,感谢。回到原帖


看到一段隐藏导航栏的css,改来隐藏标签栏试了下
一般,标签栏上放的按钮无法点击下拉菜单,只放标签页就还不错
哪位高手改改,选择标签栏上,其它按钮的下拉菜单时不隐藏

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]) ~ #browser {
margin-top: 0px !important;/* 标签工具栏的宽度,负值缩小*/

}

#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]) > #TabsToolbar {
-moz-transition: max-height .4s ease-in-out 1s !important;
-moz-box-ordinal-group: 1000 !important;
padding: 0 3px !important;
position: relative !important;
z-index: 100 !important;
overflow-y: hidden !important;
max-height: 0px !important;
min-height: 0px !important;

}

/* 
#navigator-toolbox:not([customizing="true"]) > #PersonalToolbar,*/ 
#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]):hover > #TabsToolbar {
-moz-transition: max-height .2s ease-in-out !important;
max-height: 30px !important;
background:transparent !important;  /* 标签栏背景颜色或透明,如黑色:black*/

}

}
ciel
小狐狸
小狐狸
  • UID28982
  • 注册日期2009-05-26
  • 最后登录2022-04-22
  • 发帖数86
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
10楼#
发布于:2011-04-10 06:40
马甲:呵呵,昨晚闲的蛋疼折腾的,UC脚本+CSS
地址栏整合附件栏、状态栏、状态以及连接显示。
系统WIN7经典主题,Fx4
回到原帖
标签栏怎么整合的?
lyly
小狐狸
小狐狸
  • UID35829
  • 注册日期2011-04-02
  • 最后登录2011-08-04
  • 发帖数14
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
11楼#
发布于:2011-04-10 06:40
把导航栏移动到标签栏,把标签栏置底不就行了嘛,附加组件栏整合到地址栏需要uc脚本

// ==UserScript==
// @name           StatusbarInURLBar3.uc.js
// @namespace      http://d.hatena.ne.jp/Griever/
// @include        main
// @compatibility  Firefox 4.0b7
// @note           Firefox 3.6, 4.0b6 はこちら https://gist.github.com/67460/d87a8f38280d26f1ccb81fcbb1c3b6a1fcb07e90
// ==/UserScript==

(function(){
   if (!isElementVisible(gURLBar)) return;//アドレスバーが無かったらストップ
   var urlbarIcons = document.getElementById('urlbar-icons');
   var statusBar = document.getElementById('status-bar');
   //add stylish icon
   var stylishPanel = document.getElementById('stylish-toolbar-button');
   if(stylishPanel){
      stylishPanel.setAttribute("id","stylish-panel");
      stylishPanel.onclick = function(event){
         stylishOverlay.handleStatusClick(event);
      };
      statusBar.appendChild(stylishPanel);
   }
   
   statusBar.setAttribute("context", "");//ツールバーのコンテキストメニューがでないように
   urlbarIcons.insertBefore(statusBar, urlbarIcons.firstChild);

   var style = <![CDATA[
#status-bar {
  min-height: 18px !important;
  margin: 0px !important;
  border: none !important;
  background-color: transparent !important;
}
/* Remove stylish button shape and place in the location bar */
#stylish-panel {
  -moz-appearance: none !important;
  border: 0 !important;
  background: white !important;
  box-shadow: white 0 0 !important;
  padding: 2px 4px !important;
  margin: -2px !important;
  position: fixed !important;
}

#stylish-panel > dropmarker{
  display: none !important;
}
/*
.urlbar-textbox-container-children {
  opacity: 1 !important;
  -moz-transition: none !important;
}

.urlbar-origin-label {
  display: none !important;
}

.urlbar-over-link-box {
  background-image: none !important;
  padding-left: 4px !important;
}
*/

   ]]>.toString();
   var sspi = document.createProcessingInstruction(
      'xml-stylesheet',
      'type="text/css" href="data:text/css,' + encodeURI(style) + '"'
   );
   document.insertBefore(sspi, document.documentElement);
   sspi.getAttribute = function(name) {
      return document.documentElement.getAttribute(name);
   };
})()
ciel
小狐狸
小狐狸
  • UID28982
  • 注册日期2009-05-26
  • 最后登录2022-04-22
  • 发帖数86
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
12楼#
发布于:2011-04-10 06:40
lyly

看到一段隐藏导航栏的css,改来隐藏标签栏试了下
一般,标签栏上放的按钮无法点击下拉菜单,只放标签页就还不错
哪位高手改改,选择标签栏上,其它按钮的下拉菜单时不隐藏

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]) ~ #browser {
margin-top: 0px !important;/* 标签工具栏的宽度,负值缩小*/

}

#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]) > #TabsToolbar {
-moz-transition: max-height .4s ease-in-out 1s !important;
-moz-box-ordinal-group: 1000 !important;
padding: 0 3px !important;
position: relative !important;
z-index: 100 !important;
overflow-y: hidden !important;
max-height: 0px !important;
min-height: 0px !important;

}

/* 
#navigator-toolbox:not([customizing="true"]) > #PersonalToolbar,*/ 
#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]):hover > #TabsToolbar {
-moz-transition: max-height .2s ease-in-out !important;
max-height: 30px !important;
background:transparent !important;  /* 标签栏背景颜色或透明,如黑色:black*/

}

}
回到原帖


试用了,感觉不错,只是我把书签文件夹移到标签栏上,使用了这段代码,就无法点击打开文件夹,好像还和我以前用的一段标签栏置底代码冲突。


try {
    var vbox = document.createElement('vbox');
    document.getElementById("navigator-toolbox").parentNode.insertBefore(
        vbox, document.getElementById("browser-bottombox"));
    vbox.appendChild(document.getElementById("TabsToolbar"));
}catch(e) {}
lyly
小狐狸
小狐狸
  • UID35829
  • 注册日期2011-04-02
  • 最后登录2011-08-04
  • 发帖数14
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
13楼#
发布于:2011-04-10 06:40
标签栏不放其它的还行,就是要改改,我是新手,不太懂
ciel
小狐狸
小狐狸
  • UID28982
  • 注册日期2009-05-26
  • 最后登录2022-04-22
  • 发帖数86
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
14楼#
发布于:2011-04-10 06:40
只能等高手来了。
上一页
游客

返回顶部