JavaScript Managers

This page contains all elements that can be added with HTML and are automatically transformed into themed or cross browser classes.

Dropdown




Code
<ul class="MDropdown">
	<li><a href="/">Normal Link</a></li>
	<li><a href="/">Dropdown Link</a>
		<ul>
			<li><a href="#">Sublink 1</a></li>
			<li><a href="#">Sublink 2</a></li>
			<li><a href="#">Sublink 3</a></li>
		</ul>
	</li>
</ul>

Bar


<progress></progress> tags are turn into MProgressBar classes, which work on all browsers.

Code
<progress min="0" max="100"></progress>

<meter></meter> tags are turn into MRatingsBar classes, which also work on all browsers.

Code
<meter min="0" max="100"></meter>

Upload Button


<input type="file" /> tags are turn into MButtonUpload classes, which visually matches the MButtonBlue class.

Code
<input type="file" />

List


<li></li> tags containing 1 checkbox turn blue when the checkbox is checked.

  • List Item
  • List Item
  • List Item
  • List Item
Code
<ul>
	<li class="MListItem">
		<input type="checkbox" />
		<span>List Item</span>
	</li>
	
	<li class="MListItem">
		<input type="checkbox" />
		<span>List Item</span>
	</li>
	
	<li class="MListSeperator"></li>
	
	<li class="MListItem">
		<input type="checkbox" />
		<span>List Item</span>
	</li>
	
	<li class="MListItem">
		<input type="checkbox" />
		<span>List Item</span>
	</li>
</ul>

Tab


Any <div></div> tags with class MTabWidget and proper tab markup with automatically be given tab functionality.

This is a tab body

This is another tab body

This is another tab body

This is another tab body

Code
<div class="MTabWidget">
	<ul class="MTabContainer">
		<li class="MTab">
			<a href="#tab_body_1">Tab 1</a>
		</li>
		<li class="MTab">
			<a href="#tab_body_2">Tab 2</a>
		</li>
	</ul>
	<div class="MTabBodyContainer">
		<div id="tab_body_1">
			<p>This is a tab body</p>
		</div>
		<div id="tab_body_2">
			<p>This is another tab body</p>
			<p>This is another tab body</p>
			<p>This is another tab body</p>
		</div>
	</div>
</div>

Tool Tip


North West North North East
West East
South West South South East
Code
<table class="MWidthFull">
	<tr>
		<td><a data-mtip="nw" title="Anchored to North West">North West</a></td>
		<td><a data-mtip="n" title="Anchored to North">North</a></td>
		<td><a data-mtip="ne" title="Anchored to North East">North East</a></td>
	</tr>
	<tr>
		<td><a data-mtip="w" title="Anchored to West">West</a></td>
		<td></td>
		<td><a data-mtip="e" title="Anchored to East">East</a></td>
	</tr>
	<tr>
		<td><a data-mtip="sw" title="Anchored to South West">South West</a></td>
		<td><a data-mtip="s" title="Anchored to South">South</a></td>
		<td><a data-mtip="se" title="Anchored to South East">South East</a></td>
	</tr>
</table>