jquery外掛程式style定製化方法的分析與比較
最近因為專案的需要,使用了乙個jquery外掛程式。把外掛程式下下來後,很快我就發現,很多預設的外掛程式style不符合專案要求,必須要被修改。
在這個過程中,我發現自己先後使用了多種不同的方法實現外掛程式style的定製化。很高興最後找到了我認為最好的方法,對css的認識也加深了不少,感觸頗多。這篇文章就是對這些新的css的認識的乙個梳理。
做的比較好的外掛程式會在初始化時允許輸入定製化物件。
如果輸入定製化物件,外掛程式會使用定製化物件中的值,例如,
var adgallerysetting = {
width: 600, // width of the image, set to false and it will read the css width
height: 400, // height of the image, set to false and it will read the css height
var galleries = $('.ad-gallery').adgallery(adgallerysetting);
如果不輸入定製化物件,外掛程式會使用它自己的預設值,例如,
var galleries = $('.ad-gallery').adgallery();
如果外掛程式沒有提供定製化物件或你想要修改的style不在定製化物件定義裡,乙個比較直觀的方法是修改外掛程式的css檔案。這不是一種值得提倡的方法,因為這會corrupt外掛程式的本身的源**,且不利於以後外掛程式版本的更新。
大部分外掛程式還在定製化物件裡定義callback函式。如果callback函式在外掛程式完成style enhance後呼叫,你可以寫這個callback並註冊,在callback裡修改dom模型,從而完成外掛程式style的定製化。這種方法比較繁瑣,需要你花比較多的時間去理解外掛程式內部的實現。例如,
var adgallerysetting = {
// all callbacks has the adgallery objects as 'this' reference
callbacks: {
// this gets fired right before old_image is about to go away, and new_image
// is about to come in
beforeimagevisible: function(new_image, old_image) {
// do something wild!
var thing = "this is it";
//change the plugin enhanced page
1) ! important 標識。
2) **。 author (html鏈入的css檔案), reader(web surfer), user agent(browser)
3) 相關性。
這種方法,在我看來是除1.1 外最好的方法,下面是些**示例。
#descriptions
.ad-image-description {
position: absolute;
#descriptions
.ad-image-description
.ad-description-title {
display: block;
.ad-gallery
.ad-image {
width: 100%
! important;
left: 0px
! important;
根據這次的經驗,我覺得定製外掛程式style的最好方法輸入定製化物件(如果外掛程式支援的話)或css過載。有些外掛程式會以在html element中加入style="...."的方式定義style。在這種情況下,你就會發現,「! important」標識的出現是相當的令人舒心。j
JQuery對Style和css設定
一.設定屬性 方式一 jquery img attr 方式二 jquery 鍵值對 方式三 jquery 函式式 img attr title function 方式一 p addclass selected 方式一 p removeclass selected 方式一 p toggleclass ...
超輕量的可定製的回到頂部 jQuery 外掛程式
摘要 scrollup 是一款輕量的 jquery 外掛程式,用於實現定製的滾動到頂部 scroll to top 功能。scrollup 可以通過 css 完全定製,這使得它能夠非常簡單到整合到你的專案中。官方提供了 tap pill llink image 五種風格,scrollup 是一款輕量...
jQuery外掛程式之日曆外掛程式
在頁面開發中,經常遇到需要使用者輸入日期的操作。通常的做法是,提供乙個文字框 text 讓使用者輸入,然後,編寫 驗證輸入的資料,檢測其是否是日期型別。這樣比較麻煩,同時,使用者輸入日期的操作也不是很方便,影響使用者體驗。如果使用jquery ui中的datepicker 日曆 外掛程式,這些問題都...