http://rhinohorns.blogspot.com/2007/12/jquery-plugin.html 鼠軌滑動選單特效 - 改寫為 jQuery Plugin

之前撰寫了一篇「鼠軌滑動選單特效」，這次直接把它改寫成為 jQuery 的 Plugin，使用起來就更直接了，往後只需要在 jQuery 的環境下，最好的情況一行碼即可以使需要套用的區塊都能有這項功能。

原本控制滑動和鎖定的兩個函式不需更動，暫不改寫為 jQuery 語法，整個保留下來 (為免文章不致太冗長，完整語法可參考展示頁的原始碼)。

//設定是否鎖定操作頁.<br />function sh_lockScroll(ob){<br />    ...<br />}<br /><br />//設於 onmouseover(event,this)中, 以做為操作頁上下滑動用.<br />function sh_autoScroll(e,ob){<br />    ...<br />}

接下來就是製成 jQuery Plguin 的程式碼，我們把必要的動作包含進去，

• 小區塊顯示大範圍需要設的 CSS， overflow:hidden。
• 綁定滑動予 onmousemove。
• 綁定鎖定予 onclick。

程式碼如下。

(function(){<br />    //sh_scrollMenu 是這個自製 Plugin 的名稱<br />    jQuery.fn.sh_scrollMenu = function(){<br />        //每個符合搜尋條件的元素皆套用<br />        return jQuery(this).each(function(){<br />        <br />        //設定 overflow:hidden<br />        jQuery(this).css("overflow","hidden");<br />        <br />        //滑動區塊<br />        jQuery(this).mousemove(function(e){<br />            sh_autoScroll(e,this);<br />        });<br />        <br />        //鎖定區塊<br />        jQuery(this).click(function(){<br />            sh_lockScroll(this);<br />        });<br />      });<br />    };<br />})();

之後我們在需要將某個區塊設定效果的地方呼叫這個 Plugin 即可，下述是在 window.onload 時將 class 為「scrollMenu」的 div 綁定這個鼠軌滑動選單特效。

jQuery(document).ready(function(){<br />    jQuery("div.scrollMenu").sh_scrollMenu();<br />});

所以純 html 的陳設就會比較簡潔，

<div id="musicMenu" class="scrollMenu"><br />    <font color="#444444"><b> 第一項</b></font>    <br />    <hr height="1"><br />    ...<br />    <font color="#444444"><b> 第二十項</b></font>    <br /></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><div id="musicMenu1" class="scrollMenu"><br />    <font color="#444444"><b> 第一項</b></font>    <br />    <hr height="1"><br />    ...<br />    <font color="#444444"><b> 第二十項</b></font>    <br /></div>

整體這樣看起來頁面的程式碼就更易讀了，也能更加利用到 jQuery 提供的方便 Selectors。