有時候乙個網頁可以有多個**進行選擇,也就是不同的背景,或是一整套新的css,能使整個頁面變成另一種風格。
這個功能可以用jquery來實現。外加cookie外掛程式。有了cookie,就可以長時間的儲存選擇後的背景樣式,而不至於每次重新整理介面都會轉入預設的畫面。
效果如下:
**之div+css研讀:
#div_side_0,#div_side_1在html部分,通過乙個ul、li來進行導航的布局。兩個div進行內容的布局。在ul中設定了margin、padding、width、list-style、border、overflow等值。#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
在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...