jQuery UI theme
All jQuery UI plug-in allows developers to seamlessly integrate UI widgets to the look and feel of their sites or applications. Each widget is defined by CSS styles, and contains two style information: the standard jQuery UI CSS framework styles and specific plug-in style.
jQuery UI CSS framework provides a semantic representation of the class to indicate the role of a small component elements, such as title, content, or clickable area. These are consistent in all the small parts, and a clickable tab (tab), accordion (accordion) or button (Button) have the same ui-state-default , class, to show that they are clickable of. When the user hovers at the top of these elements, the class becomes ui-state-hover , then these elements become elected in ui-state-active . The class of consistency makes the appearance consistent performance of all of the elements or components having a similar role in the interaction state.
CSS style frame is encapsulated in a separate file, named ui.theme.css . This file through ThemeRoller application to modify. Frame style contains only affect the appearance and feel of the property, as long as the colors, background images, icons and so on. So these are "safe" style, it will not affect the plug-in function. This separation means that developers can use in theme.css modify the color and image files to create a custom look and feel. Since the future of plug-ins or bug fixes will be available, and these can be used without modification by the theme.
Since the frame style cover only look and feel, so it needs to include specific plug-in style sheets, these style sheets include all extra widgets allow functional structure style rules, such as size, padding, margins, positioning, float. Each widget stylesheets themes/base folder, and with the plug-in name, such as "jquery.ui.accordion.css". These patterns must be carefully edited scripts because they provide a framework covering styles together.
We encourage all developers to create plug-in jQuery, jQuery UI CSS framework makes it easier for end users to use custom themes and plug-ins.
Theming
Here are three of the jQuery UI widget relating to the general procedure:
- Download ThemeRoller topics: first create a theme is to use ThemeRoller to generate and download a theme. This application will create a new
ui.theme.cssfile and contains all the necessary background images and icons spriteimagesfolder. This method is the first to create and maintain the theme of the way, but the options it provides limited ThemeRoller custom. - Modify the CSS file: In order to further the look and feel of the controls, you can choose from the default theme (Smoothness) begins, or from one topic generated by the ThemeRoller Start, and then adjust
ui.theme.cssfile, a separate plug-in or any stylesheet. For example, you can easily adjust the angle of the radius of all the buttons is different from the values of other UI components, or use a custom icon to change the path wizard. Styles range through a little bit, you can even use more than one theme in a UI. For easier maintenance, the proposed change onlyui.theme.cssfiles and images. - Re-write custom CSS: To maximize control the look and feel, you can start writing again on each widget and CSS, without the use of plug-in framework classes or a specific stylesheet. If you want to look and feel can be achieved by modifying the CSS or using highly customized tags, then you can use this method. This approach requires deep expertise in CSS terms, and require manual updates for a future plug-ins.