這兩天一直在研究這個問題。原因很簡單:在仿Prowe V3這款主題時,評論列表那個地方,網頁一直沒辦法實現原作的樣式,即:評論條目1、2、3、4、5、6……背景色輪換交替顯示。我知道這個效果對Z-Blog來說實現有點困難,必須借助JS來達成(其實WP也是倚靠JS來實現的),而我偏偏又對JS似懂非懂。沒辦法,只得硬著頭皮去請教haphic,結果他丟給了我一段JS代碼,說是針對這個問題的。哇,頭暈!說實話,我一點兒也沒看懂。怎么辦呢?接下來的幾天時間里,一直在思考這個問題。工夫不負有心人呵,總算讓我寫出了一個有效的代碼。這里發出來,與大家共享下——
先說下做法吧,首先要更改列表模板中評論板塊的布局,改成如下結構:
commment1 commment2 commment3 commment4 commment5 依此類推……
接著,再定義隔行屬性以及判斷函數(注意:下面的JS定義代碼必須放到
前面)
OK,這樣就可以啦,就是這么簡單。
注意:在這里,style下的css樣式是機動的,可任由你定義,最終效果可以五花八門,比如做成一左一右的交替……
當然,你或許會說:現在都xhtml+css時代了,還用表框來套?也對,那再來個改進吧——用li元素來裝每一條評論,這樣顯示速度也會好于用表格裝吧。樣式及JS代碼如下:
div布局結構如下:
- commment1
- commment2
- commment3
- commment4
- commment5
- 依此類推……
OK,也完成了,更簡單吧?
最后一點小提示:據我充當“小白鼠”測試,此法目前只在IE下有效,火狐、谷歌等瀏覽器,貌似都不支持。暈哦,找時間繼續改進!先看兩個運用的范例吧——
這個就是Prowe V3原作的評論列表樣式,背景色交替顯示。
這個是haphic新主題的評論列表樣式,一右一右交替顯示。
不知道他們的JS與我寫的差別在哪兒。暫時嫉妒一下呵。
Copyright@ 2011-2016 版權所有:大連千億科技有限公司 遼ICP備11013762-3號 google網站地圖 百度網站地圖 網站地圖
公司地址:大連市沙河口區中山路692號辰熙星海國際2317 客服電話:0411-39943997 QQ:2088827823 37482752
法律聲明:未經許可,任何模仿本站模板、轉載本站內容等行為者,本站保留追究其法律責任的權利! 隱私權政策聲明