読み込まれるすべての Web ページにナビゲーション サイドバーを配置する Greasemonkey スクリプトを作成しようとしていますが、各ページのコンテンツの一部を隠すことなくこれを行う方法はまだわかりません。divページのコンテンツを覆わずに、読み込まれる各ページの横にを配置する方法はありますか?
質問する
2614 次
1 に答える
3
リンクした質問の受け入れられた回答は、サイドバーではなくトップバーを示しながら、ページ全体にオフセットを配置しました。この手法は、ページの左側のスライスを切り取る (隠す) ため、右側のサイドバーにはお粗末です。
その方法 (私はお勧めしません) に行きたい場合のより良いテクニックは、ページ幅を調整することです。完全な Greasemonkey スクリプトの 1 つの方法を次に示します。
// ==UserScript==
// @name _Sidebar on page
// @include https://stackoverflow.com/questions/14722302/*
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
var sidebarWidth = "100px";
$("html").css ( {
position: "relative",
width: "calc(100% - " + sidebarWidth + ")"
} );
$("body").append ( ' \
<div id="gmRightSideBar"> \
<ul> \
<li><a href="http://dailypuppy.com/">Link 1</a></li> \
<li><a href="http://puppyfind.com/">Link 2</a></li> \
</ul> \
</div> \
' );
GM_addStyle ( " \
#gmRightSideBar { \
position: fixed; \
top: 0; \
right: 0; \
margin: 1ex; \
padding: 1em; \
background: orange; \
width: calc(" + sidebarWidth + " - 2ex) \
} \
#gmRightSideBar ul { \
margin: 0ex; \
} \
#gmRightSideBar a { \
color: blue; \
} \
" );
CSS を使用してすべての配置とスタイルを設定し、jQuery を使用してコードを簡素化し、より堅牢で移植性を高めます。
ただし、ページを圧縮または移動して、レイアウトを破壊する可能性があるのではなく、右側のコンテンツの一部を隠してください。 これはほとんどの場合、通常は無視される無駄なスペースです(および他のいくつかのリンクと研究)。
ホバーしないとサイドバーがほとんど見えず、表示を切り替える便利なキーボード ショートカットがある場合は、右側のコンテンツが部分的に隠れてしまうことがあってもまったく問題ありません。私はこの手法を何年も使用してきましたが、うまく機能しています。
これを行うための完全な Greasemonkey スクリプトは次のとおりです。
// ==UserScript==
// @name _Add a Sidebar to a page with auto fade and keyboard shortcut
// @include https://stackoverflow.com/questions/14722302/*
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
$("body").append ( ' \
<div id="gmRightSideBar"> \
<p>F9 toggles visibility</p> \
<ul> \
<li><a href="http://dailypuppy.com/">Link 1</a></li> \
<li><a href="http://puppyfind.com/">Link 2</a></li> \
</ul> \
</div> \
' );
//-- Fade panel when not in use
var kbShortcutFired = false;
var rightSideBar = $('#gmRightSideBar');
rightSideBar.hover (
function () {
$(this).stop (true, false).fadeTo (50, 1 );
kbShortcutFired = false;
},
function () {
if ( ! kbShortcutFired ) {
$(this).stop (true, false).fadeTo (900, 0.1);
}
kbShortcutFired = false;
}
);
rightSideBar.fadeTo (2900, 0.1);
//-- Keyboard shortcut to show/hide our sidebar
$(window).keydown (keyboardShortcutHandler);
function keyboardShortcutHandler (zEvent) {
//--- On F9, Toggle our panel's visibility
if (zEvent.which == 120) { // F9
kbShortcutFired = true;
if (rightSideBar.is (":visible") ) {
rightSideBar.stop (true, false).hide ();
}
else {
//-- Reappear opaque to start
rightSideBar.stop (true, false).show ();
rightSideBar.fadeTo (0, 1);
rightSideBar.fadeTo (2900, 0.1);
}
zEvent.preventDefault ();
zEvent.stopPropagation ();
return false;
}
}
GM_addStyle ( " \
#gmRightSideBar { \
position: fixed; \
top: 0; \
right: 0; \
margin: 1ex; \
padding: 1em; \
background: orange; \
width: 100px; \
z-index: 6666; \
opacity: 0.9; \
} \
#gmRightSideBar p { \
font-size: 80%; \
} \
#gmRightSideBar ul { \
margin: 0ex; \
} \
#gmRightSideBar a { \
color: blue; \
} \
" );
于 2013-02-06T07:20:00.580 に答える