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: , ,

Comments

Post a Comment

Popular posts from this blog

Text Clips for Programmers Notepad 2 (XHTML)

Update (23 June, 2005) : Added DOCTYPEs. More Programmers Notepad 2 text clips. Some tags are not included (b, big, i, small, sub, sup) as these can be replaced with existing tags (em, strong), or styled using CSS. Create a file in the clips sub directory of the Programmers Notepad directory, with the extension .clips (i.e. xhtmltags.clips) and paste in the following code: <?xml version="1.0"?> <clips name="XHTML Tags"> <clip name="------ DOCTYPEs ------"></clip> <clip name="XHTML 1.0 transitional"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">|]]></clip> <clip name="XHTML 1.0 strict"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">|]]></clip> <clip name="XHTML 1.1...
Read more

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define. // get new dimensions so it fits within the maximum // o = original dimensions / image, m = maximum dimensions function shrink(o, m) { // r = resized var r = {width: o.width, height: o.height}; // if an image, rather than an object, resize it if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o; if(r.width > m.width) { r.height = r.height * (m.width / r.width); r.width = m.width; if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } } else if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } return r; } To use, simply supply the image and the dimensions to constrain it to: var image = document.getElementById("image"); var max = {width: 1024, ...
Read more

Select box manipulation with jQuery

If you read the jQuery mailing list , you may be aware that I have updated my plugins for working with select boxes . Summary of changes: addOption replaces any options with the same value (so think of it as an add/replace options plugin selectOptions selected options in addition to what was already selected, but there is now an option for it not to do this There are two new methods: copyOptions which is for copying options between select boxes ajaxAddOption allows you to add options via AJAX (i.e. could be used for create options dynamically from a server script)
Read more