Plugins:HTMLHelper

<< Back to Dashboard

Exploring the HTMLHelper Plugin

Overview

A cool utility that helps you when working with HTML, from creating doc types, to managing your js/css assets, to rendering tables and lists from data

img

Create image tags using the SES base URL or not.

Returns

• This function returns any

Arguments

Examples

The first parameter src can be used to pass in the source URL of the image or a structure of name-value pairs to use in the construction of the image.

#html.img('includes/images/picture.png')#
// produces <img src="http://site.com/includes/images/picture.png" />

#html.img(src="includes/images/pic.png",noBaseURL=false)#
// produces <img src="includes/images/pic.png" />

#html.img('includes/images/picture.png',"image","myImages",200,200,"Cool Image","friend")#
// produces <img src="http://site.com/includes/images/picture.png" alt="image" class="myImages" width="200" height="200" title="Cool Image" rel="friend" />

You can also use the src argument as a cool structure of name value pairs that match the arguments in the function:

#html.img({img="includes/images/picture.png",alt="image",title="Cool Image"})#
// produces <img src="http://site.com/includes/images/picture.png" alt="image" title="Cool Image"/>

slugify

Create a URL safe slug from a string, mostly used to create nice permalinks

Returns

• This function returns string

Arguments

Examples

You can easily use this tag to generate nice identifier permalink slugs from text.

#html.slugify("Sept. Is great- for me--and you")#
//produces sept-is-great-for-me-and-you

tag

Surround content with a tag

Returns

• This function returns any

Arguments

Examples

You can easily use this tag to generate any HTML/XML tag in a more convenient method:

#html.tag("MyTag","MyContent",{class="cool",id="awesome"}#
//produces <MyTag class="cool" id="awesome">MyContent</MyTag>

#html.tag("Property","1000",{name="maxElements"})#
//produces <Property name="maxElements">1000</Property>

ol

Create ordered lists according to passed in values and arguments, compressed HTML

Returns

• This function returns any

Arguments

Examples

You can use the values element as a simple list of values to represent in a list or actually pass in an array of values or a query:

// List
#html.ol("1,2,3")#
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>

//Array
#html.ol([1,2,3])#
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>

//Query MUST use the column value to tell which value to render
#html.ol(values=myQuery,column=name)#
<ol>
<li>luis</li>
<li>pio</li>
<li>peter</li>
</ol>

ul

Create un-ordered lists according to passed in values and arguments, compressed HTML

Returns

• This function returns any

Arguments

Examples

You can use the values element as a simple list of values to represent in a list or actually pass in an array of values or a query:

// List
#html.ul("1,2,3")#
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

//Array
#html.ul([1,2,3])#
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

//Query MUST use the column value to tell which value to render
#html.ul(values=myQuery,column=name)#
<ul>
<li>luis</li>
<li>pio</li>
<li>peter</li>
</ul>

table

Convert a table out of data (either a query or array of structures or array of entities)

Returns

• This function returns any

Arguments

Examples

// Create a table out of a query with the following columns: [id,name,createDate,modifydate]
#html.table(data=myQuery, includes="name,createDate", attributes={border=1})#

// Create a table out of a query with the following columns: [id,name,createDate,modifydate]
#html.table(data=myQuery, excludes="id", attributes={border=1})#

// Create a table out of an array of structures
data = [
  {id=1,name="luis"},
  {id=2,name="luis2"}  
]
#html.table(data=data, attributes={border=1})#

// Create a query out of an array of entities
#html.table(data=entityLoad('User'), attributes={border=1})#

addStyleContent

Open and close xhtml style tags so you can easily just add content

Returns

• This function returns any

Arguments

Examples

#html.addStyleContent("body{padding:0,margin:10px}")#

//produces
<style type="text/css">body{padding:0,margin:10px}</style>

link

Create link tags, using the SES base URL or not

Returns

• This function returns any

Arguments

Examples

The href attribute can be a single location or a structure of name-value pairs that simulates the function's arguments:

#html.link('includes/styels.css')#
// produces <link href="http://mysite.com/includes/styles.css" rel="stylesheet" type="text/css" />

#html.link(src="includes/styles/my.css",noBaseURL=false)#
// produces <link href="includes/styles/my.css" rel="stylesheet" type="text/css" />

#html.link(href='includes/sytles.css',media="print")#
// produces <link href="http://mysite.com/includes/styles.css" rel="stylesheet" type="text/css" media="print"/>

You can also use the href argument as a cool structure of name value pairs that match the arguments in the function:

#html.link({href="includes/styles.css",media="print"})#
// produces <link href="http://mysite.com/includes/styles.css" rel="stylesheet" type="text/css" media="print"/>

br

Generate line breaks

Returns

• This function returns any

Arguments

Examples

#html.br(3)#
//produces <br/><br/><br/>

heading

Generate header tags

Returns

• This function returns any

Arguments

Examples

#html.heading("My Awesome Title")#
// produces <h1>My Awesome Title</h1>

#html.heading("My Awesome Title",2)#
// produces <h2>My Awesome Title</h2>

addAsset

Add a js/css asset(s) to the html head section. You can also pass in a list of assets via the asset argument to try to load all of them. You can also make this method return the string that will be sent to the header instead.

Returns

• This function returns any

Arguments

Examples

// Load to the <head> assets without repeating them during a single request
addAsset("includes/js/jquery.js,includes/js/myJS.js,includes/styles/mystyles.css");
addAsset("includes/js/jquery.js, includes/styles/awesome.css");
// Will still only include the assets that have not been already declared before

meta

Helps you generate meta tags

Returns

• This function returns any

Arguments

Examples

#html.meta("description","My awesome site")#
//Produces
<meta name="description" content="My awesome site">

// Note the third parameter. Can be "equiv" or "name"
#html.meta('Content-type', 'text/html; charset=utf-8', 'equiv')# 
// produces 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

#html.meta([{'name' = 'robots', 'content' = 'no-cache'}]);
// produces 
<meta name="robots" content="no-cache" />

// You can also use an entire array of structs
meta = [
	{name="robots", content="no-cache"},
	{name="description",content="my awesome site"},
	{name="content-type", content="text/html; charset=utf-8", type="equiv"}
]

#html.meta(meta)#
// Produces:
<meta name="robots" content="no-cache" />
<meta name="description" content="my awesome site" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

nbs

Generate non-breaking spaces ( )

Returns

• This function returns any

Arguments

Examples

#html.nbs(3)#
// produces    

addJSContent

Open and close xhtml javascript tags so you can easily just add content

Returns

• This function returns any

Arguments

Examples

#html.addJSContent("function myAlert(){ alert('awesome'); }function slide(){ $('##mydiv').slideUp(); }")#

// produces 
<script type="text/javascript"><![CDATA[
function myAlert(){ alert('awesome'); }
function slide(){ $('##mydiv').slideUp(); }
//]]></script>

docType

Render a doctype by type name: xhtml11,xhtml1-strict,xhtml-trans,xthml-frame,html5,html4-strict,html4-trans,html4-frame. The default is html5.

Returns

• This function returns any

Arguments

Examples

#html.doctype()#
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

#html.doctype('html4-trans')#
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

The available doc types can be seen in the code below:

'xhtml11' 		 : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">'
'xhtml1-strict' : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
'xhtml1-trans' : default	 : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
'xhtml1-frame'	 : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">'
'html5'		 : '<!DOCTYPE html>'
'html4-strict'	 : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">'
'html4-trans'	 : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'
'html4-frame'	 : '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">'

More From The Community

• Blog: A Look at ColdBox Resource Management by Aaron Greenlee [Sep 14, 2010]