天天看點

《jQuery UI 開發指南》——2.2 格式化内容

本節書摘來自異步社群《jquery ui開發指南》一書中的第2章,第2.2節,作者:【美】eric sarrion 譯者:羅晴明 ,包勇明更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

使用tabs ()方法會徹底改變頁面中html元素的外觀。實際上,該方法周遊了(jquery ui内部實作)html代碼,并給相關的元素(這裡是頁籤)添加了新的css類,賦予了它們适當的樣式。

圖2-3展示了jquery ui生成的html,tabs ()方法改變了html dom(文檔對象模型)樹(代碼是用firefox的firebug擴充檢視的)。

《jQuery UI 開發指南》——2.2 格式化内容

可以修改元素的css類來自定義元素的顯示樣式。比如,如果修改了與

《jQuery UI 開發指南》——2.2 格式化内容

元素關聯的ui-state-default css類,将會得到新的頁籤外觀。同樣地,如果修改了與

《jQuery UI 開發指南》——2.2 格式化内容

元素關聯的ui-tabs-panel css類,則頁籤的内容外觀就改變了。

在html中添加一個

《jQuery UI 開發指南》——2.2 格式化内容

标簽,來修改這些元素的樣式(粗體部分所示):

《jQuery UI 開發指南》——2.2 格式化内容

必須在jquery ui樣式的後面添加自己的樣式,否則更改是會被“忽略”的。

如圖2-4所示,應用新的樣式後,頁籤及其内容的外觀改變了。

《jQuery UI 開發指南》——2.2 格式化内容

繼續閱讀