Wednesday, January 16, 2013

[jQuery][CSS] 輕鬆更改 jQuery UI 的主題(Theme)

jQuery UI 對於像謝晒這種不會視覺設計的宅男工程師,是非常方便的工具,例如我們要做一個彈跳視窗,利用 jQuery UI 就可以又快速、又美觀的做出來,就連要更改配色主題也非常方便,作法如下...
原本引入的css檔
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"></link>

改成
<link href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" rel="stylesheet"></link>

或是改成
<link href="http://code.jquery.com/ui/1.9.2/themes/redmond/jquery-ui.css" rel="stylesheet"></link>

發現了嗎,只要將base改成主題名稱就可以囉,很簡單吧。如果還想知道更多主題名稱,可以去 jQuery UI Theme 查喔

備註:
1.如果主題名稱是兩個以上的單字(如:Dark Hive),只要在單字中加上"-"就可以了喔。(如:dark-hive) 參考來源

No comments:

Post a Comment