<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>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>UI Modules are not automatically initialized on page load. You must attach event handlers to trigger the behavior you require for each element</p>
<p>Its okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initiale with the settings provided.</p>
<i class="help link icon" data-content="This appears in the default location"></i>
<img class="ui medium image" src="/images/demo/photo.jpg" data-content="This pop-up appears to the top right">
</div>
<h2 class="ui dividing header">Behaviors</h2>
<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>
<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>
<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>
<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>
<br><div class="code" data-title="Example: Overriding a Popup's Log Name">$.fn.popup.settings.moduleName = 'Godzilla';</div>
</div>
</div>
<div class="item">
<div class="item">
<div class="header">At initialization</div>
<div class="header">At initialization</div>
A settings object can be passed in when initializing the plugin
A settings object can be passed in when initializing the plugin
<br>
<br>
<div class="code">
<div class="code" data-title="Example: Settings popup's log name at initialization">
$('.foo')
$('.foo')
.popup({
.popup({
moduleName : 'Godzilla',
moduleName : 'Godzilla',
@ -205,7 +247,7 @@ type : 'Semantic'
<div class="header">After initialization</div>
<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.
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.
<br>
<br>
<div class="code">
<div class="code" data-title="Example: Changing a Popup's log name after Initialization">
$('.foo')
$('.foo')
// lets initialize that!
// lets initialize that!
.popup()
.popup()
@ -222,8 +264,8 @@ type : 'Semantic'
</div>
</div>
<h3 class="ui header">Reading Settings</h3>
<h3 class="ui header">Reading Settings</h3>
<p>Settings can also be read programmatically:
<p>Settings can also be read programmatically:
<div class="code">
<div class="code" data-title="Reading Settings">
// outputs godzilla
// outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more)
<p>A checkbox can also be used without using javascript by creating the check box as a label with a for tag matching the <code>id</code> attribute of the input field.</p>
<h4 class="ui header">Check Box without Javascript</h4>
<p>A checkbox can also be used without using javascript by matching the <code>id</code> attribute of the input field to the <code>for</code> attribute of the accompanying label</p>