JQuery外掛程式Style定製化方法的分析與比較

2022-09-13 14:48:13 字數 1952 閱讀 9709

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 日曆 外掛程式,這些問題都...