LinkList Class (JavaScript, HTML)
Client-side version of LinkList Class (C#, ASP.NET). Works in a similar way:
var links = new WebDeveloperBlog.LinkList(); links.Add("Home", "home.aspx", "Home Page"); links.Add("Page 1", "test.html"); links.Add("Page 2", "page2.aspx"); links.Add("Page 3", "page3.aspx"); // need to set CssClass for 'Inline' and 'Block' types links.CssClass = "myclass"; // use inline type (surround with span tags) links.ListType = "Inline"; document.write("<p>Inline ListType<\/p>" + links.ToString()); // use block type (surround with div tags) links.ListType = "Block"; // change separator links.Separator = " | "; document.write("<p>Block ListType<\/p>" + links.ToString()); // use ordered list type (surround with ol, li tags) links.ListType = "OrderedList"; document.write("<p>OrderedList ListType<\/p>" + links.ToString()); // use unordered list type (surround with ul, li tags) links.ListType = "UnorderedList"; document.write("<p>UnorderedList ListType<\/p>" + links.ToString());
The code:
if(typeof WebDeveloperBlog != "object") { var WebDeveloperBlog = new Object(); } WebDeveloperBlog.LinkList = function() { // keeps track of the links, not the be modified this.Links = new Array(); this.CssClass = null; this.Separator = " > "; // ListType can be "Block", "Inline", "UnorderedList" or "OrderedList" this.ListType = "UnorderedList"; } WebDeveloperBlog.LinkList.prototype = { Add : function(text,url,tooltip) { if(this.Links) { this.Links.push(new Array(text,url,tooltip)); } return new Array(text,url,tooltip); }, ToString : function() { var sb = new String(); if(this.ListType == "UnorderedList" || this.ListType == "OrderedList" ) { if(this.ListType == "UnorderedList") { sb = sb.concat("<ul"); } else { sb = sb.concat("<ol"); } if(this.CssClass) { sb = sb.concat(" class=\"" + this.CssClass + "\""); } sb = sb.concat(">"); } if (this.CssClass && this.ListType == "Inline") { sb = sb.concat("<span class=\"" + this.CssClass + "\">"); } if (this.CssClass && this.ListType == "Block") { sb = sb.concat("<div class=\"" + this.CssClass + "\">"); } for(i=0;i<links.Links.length;i++) { if(i!=0 && (this.ListType == "Inline" || this.ListType == "Block")) { sb = sb.concat(this.Separator); } if(this.ListType == "UnorderedList" || this.ListType == "OrderedList" ) { sb = sb.concat("<li>"); } if(this.Links[i][1] != location.href) { sb = sb.concat("<a href=\"" + this.Links[i][1] + "\""); // if a tooltip is defined, add it if(this.Links[i][2]) { sb = sb.concat(" tooltip=\"" + this.Links[i][2] + "\""); } sb = sb.concat(">" + this.Links[i][0] + "<\/a>"); } else { sb = sb.concat(this.Links[i][0]); } if(this.ListType == "UnorderedList" || this.ListType == "OrderedList" ) { sb = sb.concat("<\/li>"); } } if (this.CssClass && this.ListType == "Inline") { sb = sb.concat("<\/span>"); } if (this.CssClass && this.ListType == "Block") { sb = sb.concat("<\/div>"); } if (this.ListType == "OrderedList") { sb = sb.concat("<\/ol>"); } if (this.ListType == "UnorderedList") { sb = sb.concat("<\/ul>"); } return sb; } }
Tags: Web Developer Blog, JavaScript, HTML
Comments