5/1/2023 0 Comments Iconjar tutorialVar sushJar = new ("JAR file", sushDocs, false, true) Var sushGen = new ("Script - text version", sushDocs, false, true) Now, apply the "icon-zip" style to this HTML node's Var sushZip = new ("Zipped Files", sushDocs, false, true) Create a child node for her zipped files: Var sushDocs = new ("Susheela's Documents", root, true) First, create a parent node for her documents: Here, we'll use HTMLNodes, and we'll use the contentStyle property to apply the icon style: //for Susheela's documents, we'll use HTMLNodes. The script for creating Susheela's part of the tree is very similar. Var ahmedPdf = new ("Prospectus-PDF version", ahmedDocs, false) Var ahmedPpt = new ("Presentation", ahmedDocs, false) Now, apply the "icon-doc" style to this node's Var ahmedMsWord = new ("Prospectus", ahmedDocs, false) Create a child node for his Word document: Var ahmedDocs = new ("Ahmed's Documents", root, true) First, create a parent node for his documents: for Ahmed's documents, we'll use TextNodes. get a reusable reference to the root node: Here is the code used to create the TreeView instance above and to create the first node, "Ahmed's Documents," while applying the specific icon styles to each node: //create the TreeView instance: To apply these styles on a per-node basis in TreeView, we use the labelStyle property of TextNodes and MenuNodes and the contentStyle property of HTMLNodes. The sheet of icons is positioned so that, for example, the zip-file icon will appear when the class icon-zip is applied. The effect of these style rules is to create a 20-pixel space to the left of the styled object and to place the icon directly in that space. We do that by positioning our icons.png image uniquely for each icon we want to display: With that image in place, we can now set up our style rules to identify icons for each file type. Seven images in a single HTTP request ( read more about why reducing HTTP requests is a good idea). Which icon we want to use for each specific style. The technique known as " CSS Sprites" to specify We'll start by using a single image containing our icon set and we'll use In this example, we'll look at one strategy forĪpply custom icons to specific nodes using the YUI TreeView Control. Many tree-style implementations call for using custom Creating and Applying Custom Node Icons for Your TreeView:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |