2013年8月1日 星期四

可以取代新版 Opera 15 或 Chrome 書籤列的快速書籤選單

可以取代新版 Opera 15 或 Chrome 書籤列的快速書籤選單

Wayne Fu 0 A+

(Pic from: iconarchive.com)
新版 Opera 15 摒棄書籤及書籤列,認為用「快速撥號」可以取代,但相信沒幾位使用者能夠同意這件事。其操作不但花時間,「快速撥號」畫面能擺放的網頁 logo 也是有限。

我想到的解決方法為利用滑鼠手勢套件,藉滑鼠按鍵組合來執行 javascript,在畫面中央直接顯現含書籤的快速選單,可以解決沒有書籤列的困境。而且使用起來,比原本書籤列的設計更方便、快速。

因此這個方案,不但 Opera 適用,Chrome 也可以嘗試看看。如果想先測試效果,可以按下面這個按鈕,模擬滑鼠按鍵組合所跳出的快速選單──




2013.11.28 補充

Opera 18 可開啟隱藏書籤列,請看這篇「讓 Opera 18 能使用書籤列及書籤選單的調校心得



一、功能介紹

首先下面這是效果圖──




1. 選單位置:使用滑鼠按鍵組合所跳出的快速選單,會自行調整高度、位置,在畫面正中央浮動,不會隨畫面捲動消失。

2. 自訂書籤:使用者需自行設定快速選單中的書籤,例如網站名稱及網址。

3. 自訂細項:快速選單的字體大小、顏色、CSS 配置等細項都可自訂。

4. 執行效果:按下網址後會另開視窗,並關閉快速選單。

5. 關閉選單:開啟選單後若不使用,滑鼠只要曾移到選單上,那麼滑鼠只要離開選單,在網頁任何地方按一下,選單即會自動消失。



二、安裝準備動作

執行程式碼必須先安裝滑鼠手勢套件,請參考「讓新版 Opera 15 能滾輪換頁+滑鼠手勢加強」:

1. Chrome:如果是 Chrome 瀏覽器,任一能夠執行 js 程式碼的滑鼠手勢套件都可以。

2. Opera 15:建議先安裝 Mouse Stroke,如果滑鼠手勢不敷使用,再另外安裝 CrxMouse



三、快速選單 js 程式碼

以下為快速選單的 javascript 程式碼──


以下為修改細項的說明,請配合以上的程式碼行號對照。

不過建議稍後再回來看怎麼修改,請先將以上的程式碼複製起來,然後跳到「四、從套件安裝程式碼」,先將這個功能安裝起來,測試一下效果。

C~E:每一行都可看到兩組藍色字串,左邊的字串請置換為網站名稱,右邊的字串請置換為網址。

F:超過三組書籤時,可複製本行程式碼,參照 C~E 行的模式填入網站名稱及網址即可。

H~L:這幾行如何修改參數或 CSS 配置,請參考後面綠字的備註即可。

M 行為了節省空間,將程式碼壓縮了,若要參考原始檔請下載這個檔案「bookmark-menu-source.js」。



四、從套件安裝程式碼

下面兩個套件只要擇一安裝即可。


1. Mouse Stroke

如果是新版 Opera 的話,建議優先安裝 Mouse Stroke,以下為安裝程式碼的流程:

從「Opera」→「延伸套件」→ Mouse Stroke 的「選項」→ 捲到最下方的右下角區塊──



如上圖,按下「創建自訂手勢」




依上圖 A~D 順序:

A. 自訂這個手勢的名稱,例如圖中的「書籤選單」

B. 選擇「the top frame」

C. 貼上「三、快速選單 js 程式碼」的程式碼

D. 按「確認」




接著畫面捲回最上方,依上圖 A~C 順序:

A. 按下「存檔」

B. 假設我們使用的是「按著右鍵時點擊左鍵」這個手勢,如圖拉下這個選單,應該可以在最下面看到剛剛設定的「書籤選單」,選擇這個手勢即可。如果沒看到的話,可以按 F5 重整頁面就可以了。

C. 最後再按一次「存檔」

這樣就完成所有動作了,可以隨便開個網頁,例如 google.com 試試看效果,「按著右鍵時點擊左鍵」就能叫出書籤選單

效果沒問題後,再回到「三、快速選單 js 程式碼」輸入自己的書籤。


2. CrxMouse

如果 Mouse Stroke 的手勢不敷使用,那麼 新版 Opera 可利用 CrxMouse 來安裝程式碼:

從「Opera」→「延伸套件」→ CrxMouse 的「選項」



假設利用搖桿手勢來啟動書籤選單的話,如上圖勾選「開啟搖桿手勢」




依上圖 A~E 順序:

A. 進入搖桿手勢後,假設一樣用「按著右鍵時點擊左鍵」的方式啟動選單的話,如上圖在「按住滑鼠右鍵」勾選「啟用」。

B. 在「點擊左鍵」的下方選擇「運行自定義腳本」

C. 填入腳本的名稱,例如圖中的「書籤選單」

D. 貼上「三、快速選單 js 程式碼」的程式碼

E. 按「保存」

這樣就完成所有動作了,可以隨便開個網頁,例如 google.com 試試看效果,「按著右鍵時點擊左鍵」就能叫出書籤選單。

效果沒問題後,再回到「三、快速選單 js 程式碼」輸入自己的書籤。



五、小結

這個快速選單有書籤列沒有的優點:

  • 滑鼠操作方便,不必移動到網頁上方才能點選書籤。
  • 書籤另開新頁面,不會在當前頁面打開。


不過也有其缺點:

在非網頁的狀態下無法生效,例如 Opera 的「快速撥號」頁面,或是一些系統設定的頁面。這是因為在這些頁面下,滑鼠手勢的套件無法生效,這也是舊版 Opera 原生滑鼠手勢,強大的全域生效功能令人懷念的原因。

無論如何,既然 Opera 的書籤列已經回不來了,相信花點時間安裝這個快速書籤選單,會是個很好的替代選擇。


Opera 相關調校心得:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP