<p>All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components</p>
<p>Semantic modules all provide the ability to log performance traces to the console, allowing you to see which aspects of the module are more or less performant and to track total init time <code>onDomReady</code></p>
</div>
</div>
<div class="item">
<i class="check icon"></i>
<div class="content">
<div class="header">Human Readable Traces</div>
<p>Unlike other component libraries which hides explanations of behavior in inline comments which can only be read by combing the source, semantic modules provide run-time debug output to the javascript console telling you what each component is doing as it is doing it.</p>
</div>
</div>
<div class="item">
<i class="check icon"></i>
<div class="content">
<div class="header">Settings can be overwritten after initialization</div>
<p>Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.</p>
</div>
</div>
<div class="item">
<i class="check icon"></i>
<div class="content">
<div class="header">All modules include an initialize and destroy method</div>
<p>All events and metadata are namespaced and can be removed after initialization, modules automatically handle destroy/init events to allow users to lazy-initialize a plugin multiple times with no issues.</p>
</div>
</div>
<div class="item">
<i class="check icon"></i>
<div class="content">
<div class="header">Instance available in metadata</div>
<p>Modules store their instance in metadata meaning that, in a pinch, you can directly modify the instance of a UI element by modifying its properties.</p>
</div>
</div>
</div>
<h2 class="ui dividing header">Behaviors</h2>
<p>Behaviors are an elements API. These can be invoke functionality or return aspects of the current state for an element</p>
<h3 class="ui header">Triggering a Behavior</h3>
<p>Behaviors are triggered in Semantic using a familiar syntax. API behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is <b>spaced words</b>. Method lookup is done internally.</p>
<td>Initializes an element, adding page event handlers and init data</td>
</tr>
<tr>
<td>destroy</td>
<td>Removes all changes to the page made by initialization</td>
</tr>
<tr>
<td>refresh</td>
<td>Refreshes cached values for a component</td>
</tr>
<tr>
<td>setting(setting, value)</td>
<td>Allows you to modify or read a component setting</td>
</tr>
<tr>
<td>invoke(query, passedArguments, instance)</td>
<td>Internal method used for translating sentence case method into an internal method</td>
</tr>
<tr>
<td>log(comment, values)</td>
<td>Displays a log if a user has logging enabled</td>
</tr>
<tr>
<td>verbose(comment, values)</td>
<td>Displays a log if a user has verbose logging enabled</td>
</tr>
<tr>
<td>error(name)</td>
<td>Displays a name error message from the component's settings</td>
</tr>
<tr>
<td>performance log(comment, value)</td>
<td>Adds a performance trace for an element</td>
</tr>
<tr>
<td>performance display</td>
<td>Displays current element performance trace</td>
</tr>
</tbody>
</table>
<h2 class="ui dividing header">Settings</h2>
<p>Settings in UI widgets are any part of a widget definition which is mutable. Most UI widgets have a set of common settings which are useful across all plugins.
<p>Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object</p>
<h3 class="ui header">Common Settings</h3>
<table class="ui celled table segment">
<thead>
<th>Name</th>
<th>Usage</th>
</thead>
<p>That means class names, selectors, error output, dom metadata etc can all be controlled by altering the settings object.</p>
<p>The following is a list of common settings usually found in each javascript module.
<li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
</div>
<div class="item">
<div class="header">After initialization</div>
Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Types</a>
<a class="item">Variations</a>
<a class="item">Behaviors</a>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Basic</h4>
<p>A basic accordion does not add any extra formatting</p>
<div class="ui basic accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Accordion</h4>
<p>A standard accordion</p>
<div class="ui accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="example">
<h4 class="ui header">Basic</h4>
<p>A basic accordion does not add any extra formatting</p>
<div class="ui basic accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Fluid</h4>
<p>An accordion can take up the width of its container</p>
<div class="ui fluid accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
All the following behaviors can be called using the syntax <code>$('.foo').accordion('behavior name', argumentOne, argumentTwo)</code>
<p>An accordion can take up the width of its container</p>
<div class="ui fluid accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
</div>
<div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Usage</h2>
<h3 class="ui header">Initializing an accordion</h3>
<div class="code">
<h3 class="ui header">Initializing an accordion</h3>
<div class="code">
$('.ui.accordion')
.accordion()
;
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
<div class="ui tab" data-tab="settings">
All the following behaviors can be called using the syntax <code>$('.foo').accordion('behavior name', argumentOne, argumentTwo)</code>
<h3 class="ui header">
Accordion Settings
<div class="sub header">Accordion settings modify its behavior</div>
<td>Set to false to allow multiple sections to be open at the same time</td>
</tr>
<tr>
<td>collapsible</td>
<td>true</td>
<td>Set to false to require an accordion to always have a section open</td>
</tr>
<tr>
<td>duration</td>
<td>500</td>
<td>Duration in ms of opening animation</td>
</tr>
<tr>
<td>easing</td>
<td>easeInOutQuint</td>
<td>EaseInOutQuint is included with accordion, for additional options consider <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery easing</a>)</td>
<div class="sub header">Accordion settings modify its behavior</div>
</h3>
<table class="ui red celled definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>exclusive</td>
<td>true</td>
<td>Set to false to allow multiple sections to be open at the same time</td>
</tr>
<tr>
<td>collapsible</td>
<td>true</td>
<td>Set to false to require an accordion to always have a section open</td>
</tr>
<tr>
<td>duration</td>
<td>500</td>
<td>Duration in ms of opening animation</td>
</tr>
<tr>
<td>easing</td>
<td>easeInOutQuint</td>
<td>EaseInOutQuint is included with accordion, for additional options consider <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery easing</a>)</td>
<div class="sub header">Form settings modify the form validation behavior</div>
</h3>
<table class="ui red celled definition table segment">
<table class="ui red celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
@ -315,7 +315,7 @@ type : 'UI Behavior'
<div class="sub header">Validation rules are a set of conditions required to validate a field</div>
</h3>
<div class="ui info message">Validation rules are found in <code>settings.rules</code>, to add new global validation rules, modify <code>$.fn.form.settings.rules</code> to include your function.</div>
jlukic
11 years ago