mCustomScrollbar外掛程式自定義滾動條

2022-09-12 05:21:13 字數 1473 閱讀 5587

可以先看一下這個外掛程式可以選擇的樣式,

1.如何使用

mcustomscrollbar

a:載入 mcustomscrollbar 的樣式檔案。

通過下面的**,引入外掛程式包中的 jquery.mcustomscrollbar.css 樣式表檔案。

b:載入必須的 js 檔案。

必要的js檔案(我的demo包裡有

)注意:載入順序也要按照上面**的順序,如果不注意載入的順序,可能會導致失敗,

可以把這段**放在文件的底部來縮短載入網頁內容的時間。這裡使用了 google 的 cdn 加速服務來載入 jquery 和 jquery ui,當然你也可以把這兩個庫上傳到自己的伺服器上。另外注意下 jquery ui 這個外掛程式被作者精簡了,只包含這個外掛程式必須的模組,大小也只有 43kb。

如果當你在使用類似 google 或者 sina 的常用 j**ascript 庫的加速服務的話,更推薦採用下面的這種 fallback 的寫法,如果 cdn 的 j**ascript **沒有載入成功,就會引用本地的庫,而不會導致外掛程式無法使用:

2:在頁面中新增內容和 mcustomscrollbar 的樣式

沒有內容當然談不上出現這個外掛程式的效果了。就上述示例**來說,我們應該在頁面中定義乙個 class 為 content 的 內容塊。並新增一些測試資料:

測試資料.......還有很多很多

這樣當然不算完,自定義滾動條的樣式,必須要出現滾動條才可以,所以我們還要對這個塊加上一些 css 來讓它出現滾動條,否則是沒有效果的。加上的樣式很簡單,就是定義乙個寬或者高或者寬高都定義,然後再定義乙個 overflow 值為 auto。這樣如果內容超出了指定的寬高,就會出現乙個滾動條。例:

css除了引入mcustomscrollbar.min.css,還需要自己寫出現下拉條區域的樣式
.demo-box

3:應用 mcustomscrollbar

這裡我使用了(function($))(jquery);來包裹 jquery **,這是為了避免衝突。我還用了window load ($(window).load()) 來啟用我的外掛程式功能,因為這樣,就可以保證在頁面物件全部載入完成之後,載入我的外掛程式。當然,你也可以使用常規的 jquery **載入方法,但是你要明白 ready 和 load 方法之間的不同。一般的 jquery **載入方法如下:

自定義滾動條外掛程式

本外掛程式是對tinyscrollbar外掛程式的乙個封裝。因為在用的時候需要同時引用css和js檔案,同時還需要修改dom結構,比較麻煩,為了方便起見,將tinyscrollbar.css和tinyscrollbar.js檔案都用js引入,修改dom的方法也放在js檔案中。具體 使用方法 1 引入...

自定義外掛程式

自定義外掛程式 建立自定義外掛程式1.建立工程 qt4 designer plugin 後續配置都使用預設值,這裡我們建立乙個 qhist 外掛程式。2.新建後,直接編譯,會產生如下錯誤 1 link fatal error lnk1181 cannot open input file qtdesi...

自定義外掛程式

工具類方法 擴充套件的語法 extend 呼叫 方法名 物件級別的方法 擴充套件語法 fn.extend 呼叫 選擇器 方法名 工具類 工具類方法 extend extend rtrim function str randomcode function num else if num 4 retur...