【Web】製作如同Mac魚眼效果的 Toolbar

tags: Javascript Web Design

• 來源：http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

Common 前言

1. 產生魚眼效果的toolbar，做出來的效果超乎預期的美觀
2. 使用上的限制
   • toolbar所需空間比想像中的大
   • 寬、高至少要預留1倍給魚眼效果及tooltip使用
3. 建議放置在不影響主畫面、主要功能操作區的地方
   • 若toolbar與主要功能操作區距離太近，會一直不停觸發toolbar

Fisheye Toolbar

• 使用 jQuery

HOW TO USE 如何實現

• Library Download
• import

<!--javascript-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/iutil.js"></script>
<script type="text/javascript" src="js/fisheye.js"></script>
<!--css-->
<link href="css/dock.css" rel="stylesheet" type="text/css">

• initial

$('#dock').Fisheye({});

常用參數

• maxWidth: item放大後的大小
• items/ itemsText/ container
• itemWidth: item原始大小
• proximity: 魚眼效果的影響範圍
• alignment
  • left
• halign
  • center, left, right
• valign
  • bottom, top

Example 範例

• html
  • javascript:void(0) ，因為沒用到，故關閉href的功能

<div class='dock' id='dock'>
    <div class='dock-container'>
        <a class='dock-item' href='javascript:void(0)' onclick='menuOnclick()'>
            <img src='img/menu.png'/>
            <span>功能</span>
        </a>
        <a class='dock-item' href='javascript:void(0)' onclick='homeOnclick()'>
            <img src='img/home.png'/>
            <span>回首頁</span>
        </a>
        <a class='dock-item' href='javascript:void(0)' onclick='logoutOnclick()'>
            <img src='img/logout.png'/>
            <span>登出</span>
        </a>
    </div>
</div>

• javascript

function menuOnclick(){}
function homeOnclick(){}
function logoutOnclick(){}

$('#dock').Fisheye({
    maxWidth: 45, 
    items: 'a', 
    itemsText: 'span', 
    container: '.dock-container', 
    itemWidth: 25, 
    proximity: 5, 
    halign: 'left'
});
    

Rewrite 自定義

1. 將tooltip改成隨文字內容改變大小
   • 打開 fisheye.js，第66行
   • block 改成 inline-block

jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'inline-block';

2. 承第1點，tooltip文字不換行、圓角

.dock-container {
    z-index: 10000; //避免被其他元件擋住
}

.dock-item span {
    white-space: nowrap; //文本不換行
    font-weight: bold;
    color: white;
    background: #333A56;
    border-radius: 5px; //圓角
}

Reference 參考資料

1. CSS Dock Menu Blog
2. CSS Dock Menu Github