Skip to content

Modules

Jump to bottom Edit New page
fahimc edited this page Feb 10, 2013 · 9 revisions

Here is a list of the available modules. All of the modules have the following attributes:
###Attributes

  • any element style: you can provide any style attribute within the module node (must be camel case).
  • id: this will provide the module with an id.
  • classname: this will set the class name of the module.
  • width: set the width.
  • height: set the height.
  • navigateTo: attaches a click event to navigate to a different view. Provide an index.
  • link: link the module to an external link. Provide the url.
  • target: this is the target for the link attribute (_self,_blank etc..).

#Module List Image
HTML
Text
Carousel
Map
Header
Youtube
Navigation Bar
Button
Form
Form Input Field
Form Hidden Field
Form Submit Button
Footer
Table

Image

###Attributes

  • src: the image source

Example:

<image src="resource/image/image1.jpg"  classname="image" />  `

HTML

You can put HTML code within side this node wrapped in . ###Attributes

Example:

<html><![CDATA[<p>this is the HTML module.</p>]]></html>  `

Text

You can put text within side this node wrapped in . ###Attributes

Example:

<text><![CDATA[this is the Text module.]]></text>  `

Carousel

Add modules within the carousel node. ###Attributes disablebuttons: remove the left and right buttons.
auto: if set to 'true' it will auto run the carousel. Example:

<carousel width="300px" height="150px" classname="carousel" disablebuttons="true">
        <image src="resource/image/image1.jpg"  classname="image" />
	<image src="resource/image/image2.jpg"  classname="image" />
	<image src="resource/image/image3.jpg"  classname="image" />
	<image src="resource/image/image4.jpg"  classname="image" />
	<image src="resource/image/image5.jpg"  classname="image" />
</carousel>

Map

Add a google map with a longitude and latitude values. ###Attributes lat: latitude.
lng: longitude.

Example:

<map width="100%" height="70%" lat='51.50591' lng='-0.021714'></map>

Header

Create a page header and you can add an image or text. ###Attributes src: the image source.
text: text as the heading. home: if set to 'true' then it will add a home button in the header.

Example:

<header src="resource/image/logo.png"  classname="logo"  home="true"/>

or

<header text="TeaBreak" home="true"/>

Youtube

Add a youtubr video using a video id. ###Attributes videoid: the video id.

Example:

<youtube width="100%" height="70%" videoid="JW5meKfy3fY"></youtube>

Navbar

Add a navigation bar with text buttons evenly divided. Just add navbutton nodes to this module node. ###Attributes for 'navbutton' text: add the button text. navigateTo: provide the index of the view to navigate to.

Example:

<navbar>
  <navbutton text="Home" navigateTo="0" />
  <navbutton text="Scroll" navigateTo="2" />
  <navbutton text="Map" navigateTo="3"  />
  <navbutton text="Form" navigateTo="5" />
</navbar>

Button

Adds a button ###Attributes text: add the button text.
navigateTo: provide the index of the view to navigate to.
link: link the module to an external link. Provide the url.
target: this is the target for the link attribute (_self,_blank etc..).

Example:

<button text="Next" navigateTo="1" marginBottom="100px"/>

Form

Adds a form. provide form nodes with in this node. ###Attributes type: if it is set to 'email' it will send an email.
src: to change the url for the email submission script.

Example:

<form type="email" src="#">
	<input type="from" text="email address" />
	<hidden type="to" value="xx@xx.xom"/>
	<input type="subject" text="subject" />
	<input type="body" text="body" />
	<submit text="Submit" />
</form>

Form Input Field

Adds an input field to a form. ###Attributes type: *from=email address for user *subject=the subject of the email *body=the body of the email text: this is the legend for the input field.

Example:

<input type="from" text="email address" />

Form Hidden Field

Adds a hidden field to a form. ###Attributes type: *to= if the value is for the recipient email value:email address of the recipient

Example:

<hidden type="to" value="xx@xx.com"/>

Form Submit Button

Adds submit button. This will submit the form. ###Attributes text:button text.

Example:

<submit text="Submit" />

Footer

Create a page footer and you can add an image or text. This will sit at the bottom of the view. ###Attributes src: the image source.
text: text for the footer.

Example:

<footer text="fahimchowdhury.com" />

Table

Create a table. You need to add rows with modules within it and ensure you set the 'cols'. ###Attributes cols: number of columns colwidth + n: this sets the width of the columns. n is the column number (colwidth1 or colwidth2). you can provide as many of these attributes as you require.
tableborder: add a number for the thickness of the border. bordercolor: add the colour of the border.

Example:

<table cols="2" colwidth1="30%" tableborder="1" bordercolor="#ccc">
			<row>
				<image src="resource/image/image1.jpg"  />
				<text padding="20px"></text>
			</row>
			<row>
				<image src="resource/image/image2.jpg" height="400px"  />
				<text padding="20px"></text>
			</row>
			<row>
				<image src="resource/image/image3.jpg"  />
				<text padding="20px"></text>
			</row>
</table>
Add a custom footer
Add a custom sidebar
Clone this wiki locally