Edit the index.html file created earlier and replace the content with the following:.Let’s take a look at some of the icons displayed in jQuery UI widgets by default: Before we start modifying icons used in our theme, we need to take a closer look at the role they play in widgets. Icons are similar to interaction cues, they help guide the user through the application workflow by given subtle hints. We use icons inside widgets to decorate them and to add meaning. Several jQuery UI widgets have icons from the theming framework embedded inside them. Open index.html in your web browser you should see something similar to the following:.At the same level as the jqueryui directory, create a new index.js file with the following content.At the same level as the jQuery UI directory, create a new index.html file with the following content:.If you haven’t already, download and extract the jQuery UI package into a directory called jQuery UI from.It’s time to set up an environment for examples throughout the remainder of this article. You’ll find that at one point or another, you need new icons that better reflect the concepts of your application domain. Sometimes, the provided icon set will only go so far. Using these classes, we can give existing jQuery UI widgets new icons or we can place them strategically in our application user interface where they prove helpful. Not only are the icon graphics provided to us – we can choose icon colors in the ThemRoller application – but we also have powerful CSS class we use to apply the icons. Some of these icons are already used in some widgets, for instance, the accordion uses arrow icons by default. The jQuery UI theming framework provides a large selection of icons we can use in our user interfaces. In these scenarios, we’re often better off using a combination of text and an icon. For instance, displaying a “trashcan” button in the toolbar might confuse the user if there are several things displayed on the same page, even if they’ve selected something. Another potentially harmful use is using icons in places where a text description would better inform the user. Having a button with a “trashcan” icon in the tool-bar does make sense-it means I want to delete what I’m looking at. Using icons out of context defeats their purpose – you don’t want a button with a “down arrow” icon in your toolbar. The benefit of using icons is that they’re incredibly space-efficient, as long as they’re descriptive. The window containing your web browser has icons for the maximize, minimize, and close actions. ![]() ![]() On your desktop, you see icons that represent the various application shortcuts as well as any files you’ve placed there. In any user interface, we see icons all over the place. Create new themes for your JQuery site with this step-by-step guide What are theme icons?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |