You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.1 KiB
106 lines
3.1 KiB
---
|
|
layout : 'default'
|
|
css : 'module'
|
|
|
|
title : 'UI Modules'
|
|
description : 'Modules are interface elements whose behavior is an essential part of their definition'
|
|
type : 'Semantic'
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Settings</a>
|
|
</div>
|
|
</div>
|
|
|
|
<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.
|
|
|
|
<h3 class="ui header">Common Settings</h3>
|
|
<table class="ui celled table segment">
|
|
<thead>
|
|
<th>Name</th>
|
|
<th>Usage</th>
|
|
</thead>
|
|
<tr>
|
|
<td>name</td>
|
|
<td>Name used in debug logs to differentiate this widget from other debug statements.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>debug</td>
|
|
<td>Provides standard debug output to console.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>performance</td>
|
|
<td>Provides performance logging to console of internal method calls.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verbose</td>
|
|
<td>Provides extra debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>namespace</td>
|
|
<td>Namespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>metadata</td>
|
|
<td>An object containing any metadata attributes used.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>selectors</td>
|
|
<td>An object containing all selectors used in the module, these are usually children of the module.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>classNames</td>
|
|
<td>An object containing all classnames used in the module.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>errors</td>
|
|
<td colspan="2">A javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 class="ui header">Changing Settings</h3>
|
|
<ol class="ui list">
|
|
<li>A settings object can be passed in when initializing the plugin
|
|
<br>
|
|
<div class="code">
|
|
$('.foo')
|
|
.module({
|
|
moduleName: 'Godzilla',
|
|
verbose: true
|
|
})
|
|
;
|
|
</div>
|
|
</li>
|
|
<li>Default settings for the module can be overridden by modifying $.fn.module.settings.
|
|
<br><div class="code">$.fn.module.settings.moduleName = 'Godzilla';</div>
|
|
</li>
|
|
<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.
|
|
<br>
|
|
<div class="code">
|
|
$('.foo')
|
|
// lets initialize that!
|
|
.module()
|
|
// oh wait forgot something
|
|
.module('setting', 'moduleName', 'Godzilla')
|
|
;
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
<h3 class="ui header">Reading Settings</h3>
|
|
<p>Settings can also be read programmatically:
|
|
<div class="code">
|
|
$('.foo').module('setting', 'moduleName');
|
|
// outputs godzilla
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|