WFHtmlTag.js

WFHtmlTag.js does not have any other JavaScript prerequisites and can be used independent of the WebFu project. Even so, the HtmlTag constructor lives in the webfu namespace.

Constructor

  • webfu.HtmlTag([arg1],[arg2], [arg3])
Creates a new HtmlTag object. All arguments are optional.
arg1: optional, String, if specified, will set HTMLTagName to arg1.
//Create an instance of the HtmlTag object.
//Set the HTMLTagName to "div"
var tag = webfu.HtmlTag("div");

arg2: optional, can be...
Boolean: Whether or not the tag is self closing.
//Create an instance of a self-closing "br" tag.
var tag = webfu.HtmlTag("br", true);
tag.Render(); //will return <br />

Object: Properties of arg2 are applied to HTMLProperties.
//Create an instance of a "div" tag
//Set style to "display:none;"
var tag = webfu.HtmlTag("div", { "style":"display:none;" });

arg3: optional, Boolean, whether or not the tag is self closing
//Create an instance of a "input" tag that is self-closing
var tag = webfu.HtmlTag("input", { "type":"text", "value":"sometext" }, true);
tag.Render() //will render <input type = "text" value = "sometext" />

Initialization arguments

These arguments mimic C#'s ability to initialize property values when calling the constructor. Multiple initialization arguments can be specified. For example:
//create <div class = "someclass">sometext</div>
var tag = webfu.HtmlTag("div", { "class":"someClass" })({ InnerText: "sometext" })

Initialization arguments include:
  • Children an array [] of HtmlTag objects
//Create a "div" with 3 children, two spans and a paragraph
var child1 = webfu.HtmlTag("span");
var tag = webfu.HtmlTag("div", { "class":"someClass" })({
"Children": [ child1, webfu.HtmlTag("span"), webfu.HtmlTag("p") ]
});
  • InnerText String. Sets InnerText to this string.
  • SelfClosing Boolean. Whether or not the tag is self-closing.

Methods

  • getHTMLProperties()
Returns the HTMLProperties object. When the tag is rendered, all of the properties on this object will be applied to the HTML tag.
var tag = webfu.HtmlTag("div");
tag.getHTMLProperties().id = "elementId";
tag.Render() //will render <div id = "elementId"></div>
  • setHTMLProperties(value)
Set the HTMLProperties object to "value". Will overwrite the existing object.
var tag = webfu.HtmlTag("div");
tag.setHTMLProperties({ "id":"elementId" });
tag.Render() //will render <div id = "elementId"></div>
  • MergeObjectProperties(value)
Loop through all properties on 'value' and apply them to the HTMLProperties object. Existing properties will be overwritten.
  • getInnerText()
Return the InnerText value
var tag = webfu.HtmlTag("div")({ InnerText:"sometext" });
return tag.getInnerText(); //returns "sometext"
  • setInnerText(value)
Set the InnerText property to 'value'.
  • getChildren()
Returns the "Children" array.
  • setChildren(array)
Set the "Children" array to "array".
  • Attr(attName, [attValue])
attName: If attValue is not passed, will return the property that maches attName on the HTMLProperties object.
attValue: Optional. If specified, will overwrite the attribute that matches "attName" with "attValue".
  • RenderBeginningOnly()
Returns a render of the beginning of the tag.
Children and InnerText are ignored.
var tag = webfu.HtmlTag("input", { "type":"text" });
tag.RenderBeginningOnly(); // returns <input type = "text">
  • RenderEndingOnly()
Returns a render of the end of the tag.
var tag = webfu.HtmlTag("input", { "type":"text" });
tag.RenderEndingONly(); // returns </input>
  • Render()
Returns a render of the tag, all children/InnerText recursively.
var tag = webfu.HtmlTag("div");
tag.Children.Add(webfu.HtmlTag("span")({ InnerText: "sometext" });
tag.Render(); //returns <div><span>sometext</span></div>
  • AddClass(clsName)
Add a CSS class if it does not already exist to the tag. If "class" property is not present, it will be created.
  • RemoveClass(clsName)
Remove a CSS class if it is present. If "class" property is not present, will be ignored.
  • IsClass(clsName)
Return true if CSS class has been specified for this tag's "class" property.
  • SanitizeForMarkup(input)
Utility method to sanitize things like ampersand, greater-than, etc. Returns the sanitized string.
  • Children.Add(htmlTag)
Add an HtmlTag instance to the children of this element.
var tag = webfu.HtmlTag("div");
var child = webfu.HtmlTag("span");
//Add "child" span to Children of "tag" div
tag.Children.Add(child);
  • Children.Remove(htmlTag)
Remove an HtmlTag instance from the children of this element.
  • Children.RemoveAt(index)
Remove an HtmlTag from this element at index.
var tag = webfu.HtmlTag("div");
tag.Children.Add(webfu.HtmlTag("p"));
tag.Children.Add(webfu.HtmlTag("p"));
tag.Children.Add(webfu.HtmlTag("p"));
tag.Children.RemoveAt(1); //remove the second paragraph tag



See this example code for a sample implementation in both server (C#) and client-side (JavaScript) code:
http://webformsutilities.codeplex.com/SourceControl/changeset/view/13827#267810

Last edited May 23, 2012 at 11:55 PM by aikeru, version 3

Comments

No comments yet.