2011-09-21 42 views
7

我使用的jQuery UI的各種小部件,如對話框,按鈕等我想繼續使用主題爲我的其他網頁元素,如錯誤/警告通知和突出顯示樣式。所以我去的ThemeRoller頁面,查看他們使用什麼樣的CSS左右,例如,警示通知:如何將jQuery UI主題應用於我的常規HTML?

<div class="ui-widget"> 
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
     <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
     <strong>Alert:</strong> Sample ui-state-error style.</p> 
    </div> 
</div> 

有一個包裝的div,跨度背景圖標等難道我只是複製這些或不jQuery UI javascript爲我創建了一些?將主題應用於非小部件html的正確方法是什麼?

回答

4

只需將其應用於您自己的HTML。不需要Javascript(除了懸停狀態)。

當您使用jQueryUI的小部件時,Javascript會使用這些類創建所有HTML。

如果您需要懸停狀態,則必須切換ui-state-hover類。對於那些你需要使用Javascript:

$('.ui-state-error').hover(function(){ 
    $(this).toggleClass('ui-state-hover'); 
}); 
+0

適用於我自己的html?帶類ui-widget和類ui-state-error和ui-corner-all的wrapper div? –

+0

@at。 - 正確。只需複製這段HTML,並按原樣使用它。 –

1

您可以在默認情況下只能使用的ThemeRoller網站上的預先定義的元素:按鈕,圖標,標題欄等,所有的jQuery的小部件一樣日期選擇器,對話框,突出顯示/錯誤 - 幾乎所有的元素你在http://jqueryui.com/themeroller/#themeGallery看到。

要歸檔這個,您必須複製html標籤和適當的html標籤類,瀏覽器會將您包含的themeroller.css中的樣式應用到它。

但是,這也意味着您的佈局有限。只要您將正確的css類(.ui-state-default,.ui-state-hover,.ui-state-disabled,圖標等)應用於您的html,您仍然可以包含其他非美化器元素能夠使用themeswitcher - 請參閱http://jqueryui.com/docs/Theming/API以獲取適用類的完整列表。

+0

此鏈接已損壞。 –

+0

對不起;當我在2年前發佈這篇文章時,它正在工作。 – iHaveacomputer