jQuery之換膚與cookie外掛程式

2021-09-06 11:52:36 字數 1812 閱讀 3297

有時候乙個網頁可以有多個**進行選擇,也就是不同的背景,或是一整套新的css,能使整個頁面變成另一種風格。

這個功能可以用jquery來實現。外加cookie外掛程式。有了cookie,就可以長時間的儲存選擇後的背景樣式,而不至於每次重新整理介面都會轉入預設的畫面。

效果如下:

**之div+css研讀:

#div_side_0,#div_side_1

#skin

#skin li

#skin_0

#skin_1

#skin_2

#skin_3

#skin_4

#skin_5

#skin_0.selected

#skin_1.selected

#skin_2.selected

#skin_3.selected

#skin_4.selected

#skin_5.selected

在html部分,通過乙個ul、li來進行導航的布局。兩個div進行內容的布局。在ul中設定了margin、padding、width、list-style、border、overflow等值。

在li中設定了float、width、height等。這裡的背景用的很巧妙。

background-position 屬性設定背景影象的起始位置。

這個屬性設定背景原影象(由 background-image 定義)的位置,背景影象如果要重複,將從這一點開始。巧妙的利用了position+位置的組合。

當選中時,x位置不變,y位置向下移動15px,這樣就會出現打鉤的那個畫面。這種處理非常之巧妙。

用乙個,解決了很多問題。

下面進行jquery**的研讀

版本一:

這裡是簡單的實現了效果,更換按鈕,更換**。

但是並沒有實現cookie。

這段**主要實現兩個動作,乙個是變換按鈕的選中狀態,乙個是改變相應的**css。通過js物件this獲得標籤為this.id的jquey物件,這種處理也很巧妙。

另乙個,將css檔名命名與屬性id相結合,也很巧妙。

修改cssfile的屬性值href為新的css。

版本二:

這裡面多了乙個動作,就是設定了cookie。

然後通過cookie值是否存在來做出相應的動作,如果cookie值存在,就直接將**設為cookie值的值。

這裡用到的是jquery的cookie外掛程式。

jquery操作cookie的外掛程式,大概的使用方法如下

$.cookie('the_cookie'); //讀取cookie值

$.cookie(』the_cookie』, 『the_value』); //設定cookie的值

$.cookie(』the_cookie』, 『the_value』, );//新建乙個cookie 包括有效期 路徑 網域名稱等

$.cookie(』the_cookie』, 『the_value』); //新建cookie

$.cookie(』the_cookie』, null); //刪除乙個cookie

不過這段**不好的地方,就是有大量的重複**,可以模組化,函式化。這也是**優化的一種。

版本三:

用到就呼叫函式,引數變化即可。

jQuery之換膚與cookie外掛程式

有時候乙個網頁可以有多個 進行選擇,也就是不同的背景,或是一整套新的css,能使整個頁面變成另一種風格。這個功能可以用jquery來實現。外加cookie外掛程式。有了cookie,就可以長時間的儲存選擇後的背景樣式,而不至於每次重新整理介面都會轉入預設的畫面。效果如下 之div css研讀 div...

Qt之介面換膚

首先,新建兩個 按需新增 字尾名為qss的檔案,例如 black.qss white.qss,將它們加入資源檔案 qrc 中。分別在 black.qss white.qss 檔案中編寫自己的樣式 例如 black.qss 提示 qtooltip white.qss 提示 qtooltip qss 請...

jQuery設定 獲取瀏覽器會話Cookie

jquery 段可為使用者會話設定 獲取瀏覽器cookie。當使用者單擊某些內容時,這可以用於儲存檢視狀態。下面的示例顯示cookie被儲存以儲存元素的可見性。event to hide element element hide cookie cookie name not in view even...