diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index 41e9235bf..fb86e704e 100755 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -24,6 +24,7 @@ - Fixes some code samples not being properly indented **Updates** +- Block header now uses RGBA instead of solid color by default - Increased padding on attached labels - Leading on bulleted and ordered list slightly increased - Horizontal padding on icon list slightly increased diff --git a/server/documents/module.html.eco b/server/documents/module.html.eco index 0dfecd229..871caa752 100755 --- a/server/documents/module.html.eco +++ b/server/documents/module.html.eco @@ -7,267 +7,268 @@ description : 'Modules are interface elements whose behavior is an essential par type : 'Semantic' --- -<%- @partial('header') %> +<%- @partial('header', { tabs: { overview: 'Overview', init: 'Initializing', behavior: 'Behaviors', settings: 'Settings'} }) %>
-
-
- Overview - Initializing - Behaviors - Settings -
-
-

Overview

-

All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components

-
-
- -
-
Run-time Performance Analysis
-

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 onDomReady

+
+ +

All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components

+
+
+ +
+
Run-time Performance Analysis
+

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 onDomReady

+
-
-
- -
-
Human Readable Traces
-

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.

+
+ +
+
Human Readable Traces
+

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.

+
-
-
- -
-
Settings can be overwritten after initialization
-

Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.

+
+ +
+
Settings can be overwritten after initialization
+

Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.

+
-
-
- -
-
All modules include an initialize and destroy method
-

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.

+
+ +
+
All modules include an initialize and destroy method
+

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.

+
-
-
- -
-
Instance available in metadata
-

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.

+
+ +
+
Instance available in metadata
+

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.

+
+ + + View Commented Example +
- - - View Commented Example - - -

Initializing

-

UI Modules are not automatically initialized on page load. You must attach event handlers to trigger the behavior you require for each element

-

Its okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initiale with the settings provided.

-
- $(document) - .ready(function() { - // just initializing - $('.help.icon') - .popup() - ; - // initializing with settings - $('.ui.image') - .popup({ - position: 'top right' - }) - ; - }) - ; -
-
- - +
+

UI Modules are not automatically initialized on page load. You must attach event handlers to trigger the behavior you require for each element

+

Its okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initialize with the settings provided.

+
+
+
+ +
+ +
+
+
+ $(document) + .ready(function() { + // just initializing + $('.ui.image img') + .popup() + ; + // initializing with settings + $('.ui.image .help') + .popup({ + position: 'right center' + }) + ; + }) + ; +
+
+

Triggering a Behavior

+

Behaviors are an element's API. They invoke functionality or return aspects of the current state for an element

+

Behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is spaced words. Method lookup is done automatically internally.

+
+ // Sets a popup to top left position with an offset of negative five + $('.popup.icon') + .popup('set position', 'top left', -5) + ; +
+
+ // returns boolean value instead of jQuery chain + $('.popup.icon').popup('is visible'); +
+
+ // if selector size > 1 returns array of values [boolean, boolean...] + $('.many.popup').popup('is visible'); +
-

Behaviors

-

Behaviors are an elements API. These can be invoke functionality or return aspects of the current state for an element

+

Overriding Internals

+

Internal methods can be overwritten at run-time for individual instances of a module as well. For example:

+
+ // this instance will popup an alert for each log + $('.popup.icon') + .popup('internal', 'debug', function() { + window.alert(arguments[0]); + }) + ; +
-

Triggering a Behavior

-

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 spaced words. Method lookup is done internally.

-
- // Sets a popup to top left position with an offset of negative five - $('.popup.icon') - .popup('set position', 'top left', -5) - ; -
-
- // returns boolean value instead of jQuery chain - $('.popup.icon').popup('is visible'); -
-
- // if selector size > 1 returns array of values [boolean, boolean...] - $('.many.popup').popup('is visible'); -
-

Overriding Internals

-

Internal methods can be overwritten at run-time for individual instances of a module as well. For example:

-
- // this instance will popup an alert for each log - $('.popup.icon') - .popup('internal', 'debug', function() { - window.alert(arguments[0]); - }) - ; +

Common Behaviors

+

All modules have a set of core behaviors which allow you to configure the component

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUsage
initializeInitializes an element, adding page event handlers and init data
destroyRemoves all changes to the page made by initialization
refreshRefreshes cached values for a component
setting(setting, value)Allows you to modify or read a component setting
invoke(query, passedArguments, instance)Internal method used for translating sentence case method into an internal method
debug(comment, values)Displays a log if a user has logging enabled
verbose(comment, values)Displays a log if a user has verbose logging enabled
error(name)Displays a name error message from the component's settings
performance log(comment, value)Adds a performance trace for an element
performance displayDisplays current element performance trace
+
+

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

-

Common Behaviors

-

All modules have a set of core behaviors which allow you to configure the component

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameUsage
initializeInitializes an element, adding page event handlers and init data
destroyRemoves all changes to the page made by initialization
refreshRefreshes cached values for a component
setting(setting, value)Allows you to modify or read a component setting
invoke(query, passedArguments, instance)Internal method used for translating sentence case method into an internal method
debug(comment, values)Displays a log if a user has logging enabled
verbose(comment, values)Displays a log if a user has verbose logging enabled
error(name)Displays a name error message from the component's settings
performance log(comment, value)Adds a performance trace for an element
performance displayDisplays current element performance trace
+

Common Settings

+

That means class names, selectors, error output, dom metadata etc can all be controlled by altering the settings object.

+

The following is a list of common settings usually found in each javascript module. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUsage
nameName used in debug logs to differentiate this widget from other debug statements.
debugProvides standard debug output to console.
performanceProvides performance logging to console of internal method calls.
verboseProvides extra debug output to console
namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
metadataAn object containing any metadata attributes used.
selectorsAn object containing all selectors used in the module, these are usually children of the module.
classNamesAn object containing all classnames used in the module.
errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements. +
-

Settings

-

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

- -

Common Settings

-

That means class names, selectors, error output, dom metadata etc can all be controlled by altering the settings object.

-

The following is a list of common settings usually found in each javascript module. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameUsage
nameName used in debug logs to differentiate this widget from other debug statements.
debugProvides standard debug output to console.
performanceProvides performance logging to console of internal method calls.
verboseProvides extra debug output to console
namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
metadataAn object containing any metadata attributes used.
selectorsAn object containing all selectors used in the module, these are usually children of the module.
classNamesAn object containing all classnames used in the module.
errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements. -
- -

Changing Settings

-

The following examples use popup as an example for how to modify settings

-
-
-
Setting module defaults
- Default settings for the module can be overridden by modifying $.fn.module.settings. -
$.fn.popup.settings.moduleName = 'Godzilla';
-
-
-
At initialization
- A settings object can be passed in when initializing the plugin -
-
- $('.foo') - .popup({ - moduleName : 'Godzilla', - verbose : true - }) - ; -
-
-
-
After initialization
- 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. -
-
- $('.foo') - // lets initialize that! - .popup() - // oh wait forgot something - .popup('setting', 'moduleName', 'Godzilla') - // and some more things - .popup('setting', { - debug : true, - verbose : true - }) - ; +

Changing Settings

+

The following examples use popup as an example for how to modify settings

+
+
+
Setting module defaults
+ Default settings for the module can be overridden by modifying $.fn.module.settings. +
+
+ $.fn.popup.settings.moduleName = 'Godzilla'; +
+
+
+
At initialization
+ A settings object can be passed in when initializing the plugin +
+
+ $('.foo') + .popup({ + moduleName : 'Godzilla', + verbose : true + }) + ; +
+
+
+
After initialization
+ 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. +
+
+ $('.foo') + // lets initialize that! + .popup() + // oh wait forgot something + .popup('setting', 'moduleName', 'Godzilla') + // and some more things + .popup('setting', { + debug : true, + verbose : true + }) + ; +
+
+

Reading Settings

+

Settings can also be read programmatically: +

+ // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more) + $('.foo').popup('setting', 'moduleName');
-

Reading Settings

-

Settings can also be read programmatically: -

- // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more) - $('.foo').popup('setting', 'moduleName'); -
diff --git a/server/documents/modules/accordion.html.eco b/server/documents/modules/accordion.html.eco index a2e9d4770..3dbaefb6a 100755 --- a/server/documents/modules/accordion.html.eco +++ b/server/documents/modules/accordion.html.eco @@ -137,6 +137,8 @@ type : 'UI Module'
+

Examples

+

Form

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

@@ -181,30 +183,26 @@ type : 'UI Module'
- +
-
- +
-
- +
-
- +
-
@@ -221,30 +219,26 @@ type : 'UI Module'
- +
-
- +
-
- +
-
- +
-
@@ -255,8 +249,8 @@ type : 'UI Module'
+

Usage

Initializing an accordion

-

After including accordion html in a page you can attach behaviors with javascript

$('.ui.accordion') .accordion() diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco index b2f2fdad9..d51238e3e 100755 --- a/server/documents/modules/checkbox.html.eco +++ b/server/documents/modules/checkbox.html.eco @@ -124,40 +124,31 @@ type : 'UI Module'
-

Usage

+

Check Box

+

A checkbox can be initialized with javascript for increase programmatic control

-
-

Check Box

-

A checkbox can be initialized with javascript

- -
Javascript
-
- $('.ui.checkbox') - .checkbox() - ; -
-
HTML
-
+
+ $('.ui.checkbox') + .checkbox() + ; +
+
-
+
-
-

Check Box without Javascript

-

A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label

-
HTML Only
-
+

Check Box without Javascript

+

A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label

+
-
-
-
+
@@ -170,7 +161,6 @@ type : 'UI Module' $('.enable.button') .on('click', function() { $(this) - .parent() .nextAll('.checkbox') .checkbox('enable') ; @@ -179,7 +169,6 @@ type : 'UI Module' $('.disable.button') .on('click', function() { $(this) - .parent() .nextAll('.checkbox') .checkbox('disable') ; @@ -188,18 +177,15 @@ type : 'UI Module' $('.toggle.button') .on('click', function() { $(this) - .parent() .nextAll('.checkbox') .checkbox('toggle') ; }) ;
-
-
Enable
-
Disable
-
Toggle
-
+
Toggle
+
Enable
+
Disable


@@ -246,10 +232,15 @@ type : 'UI Module'
-

Settings

- +

+ Checkbox Settings +
Checkbox settings modify its behavior
+

+
- + + + @@ -265,31 +256,39 @@ type : 'UI Module'
Checkbox SettingsSettingDefaultDescription
- +

+ Callbacks +
Callback settings specify a function to occur after a specific behavior.
+

+ +
- + + + - + - + - +
CallbacksSettingContextDescription
onChangeNoneCheckbox Callback after a checkbox is either disabled or enabled.
onEnableNoneCheckbox Callback after a checkbox is enabled.
onDisableNoneCheckbox Callback after a checkbox is disabled.
-

DOM Settings

-

DOM settings specify how this module should interface with the DOM

+

DOM Settings +
DOM settings specify how this module should interface with the DOM
+

@@ -317,11 +316,9 @@ type : 'UI Module' diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index e7b73227f..3195348cd 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -9,223 +9,131 @@ type : 'UI Module' -<%- @partial('header') %> +<%- @partial('header', { tabs: 'module' }) %>
-
-
- Usage - Types - Examples - Variations - States - Behavior - Settings -
-
+
-

Usage

- -

Initializing a dropdown

-
- $('.ui.dropdown') - .dropdown() - ; -
-
-
-
Select
- -
-
Option 1
-
Option 2
+
+
+ Types + Variations + States + Behavior
-
-

Types

+

Types

-
-

Dropdown

-

A basic dropdown has no special formatting of its own

-
-
Select
- -
-
Edit
-
Remove
-
Hide
-
-
-
- -
-

Inline

-

A dropdown can be formatted to appear inline in other content

-
Show me posts trending -
-
today
+
+

Dropdown

+

A basic dropdown has no special formatting of its own

+
+
Select
-
Today
-
This Week
-
This Month
+
Edit
+
Remove
+
Hide
-
-
-

Selection

-

A dropdown can be formatted to allow selection of a menu choice.

-
- - -
Gender
-
-
Male
-
Female
+
+

Inline

+

A dropdown can be formatted to appear inline in other content

+
Show me posts trending +
+
today
+ +
+
Today
+
This Week
+
This Month
+
+
-
- -
-

Floating

-

A dropdown menu can appear to be floating below an element.

-
-
Save
-
+
+

Selection

+

A dropdown can be formatted to allow selection of a menu choice.

+
+ +
Gender
-
Edit Post
-
Remove Post
-
Hide Post
+
Male
+
Female
-
-
-

Pointing

-

A dropdown menu can be formatted to point to its content

-
-
- - Home - -
- Messages + +
+

Floating

+

A dropdown menu can appear to be floating below an element.

+
+
Save
+
+
- Inbox - Archive +
Edit Post
+
Remove Post
+
Hide Post
- - Browse - - - Help - -
-
-
-
-
- - Settings -
-
Edit
-
Remove
-
Hide
-
-
-
- - Settings -
-
Edit
-
Remove
-
Hide
-
-
-
-
-
- -
-
Edit
-
Remove
-
Hide
-
-
-
- -
-
Edit
-
Remove
-
Hide
-
-
-

Simple

-

A simple dropdown can open without javascript

-
-
- Dropdown +
+

Pointing

+

A dropdown can be formatted so that its menu is pointing

+
-
Choice 1
-
Choice 2
-
Choice 3
+ + Home + +
+ Messages +
+ Inbox + Archive +
+
+ + Browse + + + Help +
-
- - -

Examples

- -
-

Re-selecting values

-

A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.

- - Current action:
-
Hide
- -
-
Edit
-
Remove
-
Hide
-
-
- -
- -
-

Button Group

-

A button group can be formatted to show additional content as a dropdown

-
-
- +
+
+ + Settings
-
Edit User
-
Remove User
-
Make Invisible
+
Edit
+
Remove
+
Hide
-
- +
+ + Settings
-
Edit Group
-
Remove Group
-
Hide from Group
+
Edit
+
Remove
+
Hide
-
+
+
+
Edit
@@ -233,430 +141,530 @@ type : 'UI Module'
Hide
-
-
- - -
-

Combo Button

-

A button can be formatted with a dropdown

-
-
Update Post
-
- +
+
-
Edit Post
-
Remove Post
-
Hide Post
+
Edit
+
Remove
+
Hide
-
-
-

Multiple Levels

-

A dropdown menu can also contain sub menus inside of it

- My favorite animal breed is
- -
Shiba Inu
- -
-
- - Dogs +
+

Simple

+

A simple dropdown can open without javascript

+
+
+ Dropdown
-
Shiba Inu
-
Poodle
-
Labrador
-
-
-
- - Cats -
-
Aegean
-
Balinese
-
Persian
+
Choice 1
+
Choice 2
+
Choice 3
-
- -
-

Menu

-

A menu element can contain a dropdown

-
-
- - Home - - - Messages +

Variations

+ +
+

Fluid

+

A dropdown can take the full width of its parent

+
+ Link 1 + Link 2 +
All Sections
+
+
+
More
+
-
- Categories -
-
Unread
-
Promotions
-
Updates
-
-
-
Archive
+
Choice 1
+
Choice 2
+
Choice 3
- - - Browse - -
-
- Activity Feed - Profile - Events +
-
+
-
-

Form

-

A dropdown can be formatted to allow selection inside a form

-
-

Let's go ahead and get you signed up.

-
-
- - -
-
- - +

States

+ +
+

Active

+

An active dropdown menu has its menu open

+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
-
- -
- - -
...
+
+ +
+

Disabled

+

A disabled dropdown menu will not open or close

+
+
+ Dropdown
-
Male
-
Female
+
Choice 1
+
Choice 2
+
Choice 3
+ +

Behavior

+ +
+

Show

+

A dropdown can show its menu

+
+ $('.ui.dropdown') + .dropdown('show') + ; +
+
+
+

Hide

+

A dropdown can hide its menu

+
+ $('.ui.dropdown') + .dropdown('hide') + ; +
+
+
+

Toggle

+

A dropdown can toggle between menu visibility

+
+ $('.ui.dropdown') + .dropdown('toggle') + ; +
+
+
-
-

Transitions

-

A dropdown can have different transitions.

-
-
Toggle
-
+
+

Usage

+ +

Initializing a dropdown

+
+
+
Select
-
Horizontal Flip
-
Fade Up
-
Scale
+
Option 1
+
Option 2
+
+ $('.ui.dropdown') + .dropdown() + ; +
+
-

Variations

+

Examples

-
-

Fluid

-

A dropdown can take the full width of its parent

-
- Link 1 - Link 2 -
All Sections
-
-
-
More
- +
+

Re-selecting values

+

A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.

+ + Current action:
+
Hide
+ +
+ Edit +
Remove
+
Hide
+
+
+ +
+ +
+

Button Group

+

A button group can be formatted to show additional content as a dropdown

+
+
+
-
Choice 1
-
Choice 2
-
Choice 3
+
Edit User
+
Remove User
+
Make Invisible
+
+
+
+ +
+
Edit Group
+
Remove Group
+
Hide from Group
+
+
+
+ +
+
Edit
+
Remove
+
Hide
-
-

States

- -
-

Active

-

An active dropdown menu has its menu open

-
-
- Dropdown -
-
Choice 1
-
Choice 2
+ + +
+

Combo Button

+

A button can be formatted with a dropdown

+
+
Update Post
+
+ +
+
Edit Post
+
Remove Post
+
Hide Post
+
-
-
-

Disabled

-

A disabled dropdown menu will not open or close

-
-
- Dropdown +
+

Multiple Levels

+

A dropdown menu can also contain sub menus inside of it

+ My favorite animal breed is
+ +
Shiba Inu
+
-
Choice 1
-
Choice 2
-
Choice 3
+
+ + Dogs +
+
Shiba Inu
+
Poodle
+
Labrador
+
+
+
+ + Cats +
+
Aegean
+
Balinese
+
Persian
+
+
-
-

Behavior

-
-

Show

-

A dropdown can show its menu

-
- $('.ui.dropdown') - .dropdown('show') - ; -
-
-
-

Hide

-

A dropdown can hide its menu

-
- $('.ui.dropdown') - .dropdown('hide') - ; -
-
-
-

Toggle

-

A dropdown can toggle between menu visibility

-
- $('.ui.dropdown') - .dropdown('toggle') - ; -
-
- -

Settings

- -
- -

Dropdown Settings

-

Dropdown settings modify the dropdown's behavior

-
SettingclassName
- className : { radio : 'radio' } -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SettingDefaultDescription
onclickEvent used to trigger dropdown (Hover, Click)
delay -
- delay: { - show: 50, - hide: 300 - } -
- 		Time in milliseconds to debounce show or hide behavior when on: hover is used.
transition - slide down - Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration - 250 - Duration of animation events
actionautoSets a default action to occur. -
-
-
activate
-
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
+
+

Menu

+

A menu element can contain a dropdown

+
+
+ + Home + + + Messages +
+
+ Categories +
+
Unread
+
Promotions
+
Updates
+
+
+
Archive
+
+ + + Browse +
-
-
nothing
-
no action occurs
+
+ Activity Feed + Profile + Events
-
-
hide
-
Dropdown menu is hidden
+
+
+ +
+

Form

+

A dropdown can be formatted to allow selection inside a form

+
+

Let's go ahead and get you signed up.

+
+
+ +
-
-
activate
-
Dropdown menu is hidden, item activated and text is changed
+
+ +
-
-
function(){}
-
custom function is executed
+
+
+ +
+ + +
...
+
+
Male
+
Female
+
-
- -
-

Callbacks

-

Callback settings specify a function to occur after a specific behavior.

- - - - - - - - - - - - - - - - - - - - - - - - -
SettingContextDescription
onChange(value, text)DropdownIs called after a dropdown item is selected. Receieves the name and value of selection.
onShowDropdownIs called after a dropdown is shown.
onHideDropdownIs called after a dropdown is hidden.
+
+
+
+

Transitions

+

A dropdown can have different transitions.

+
+
Toggle
+
+ +
+
Horizontal Flip
+
Fade Up
+
Scale
+
+
+
+
-
- -

DOM Settings

-

DOM settings specify how this module should interface with the DOM

- - - - - - - - - - - - - - - - - - - + +
SettingDefaultDescription
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector -
- selector : { - input : '> input[type="hidden"]', - item : '.menu > .item', - menu : '.menu', - text : '> .text' - } -
-
metadata +
+ +

Settings

+ +
+ +

Dropdown Settings

+

Dropdown settings modify the dropdown's behavior

+ + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + - - -
SettingDefaultDescription
onclickEvent used to trigger dropdown (Hover, Click)
delay
- metadata: { - text : 'text', - value : 'value' - } + delay: { + show: 50, + hide: 300 + }
-
className -
- className : { - active : 'active', - disabled : 'disabled', - placeholder : 'default', - visible : 'visible' - } +
Time in milliseconds to debounce show or hide behavior when on: hover is used.
transition + slide down + Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
duration + 250 + Duration of animation events
actionautoSets a default action to occur. +
+
+
activate
+
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
+
+
+
nothing
+
no action occurs
+
+
+
hide
+
Dropdown menu is hidden
+
+
+
activate
+
Dropdown menu is hidden, item activated and text is changed
+
+
+
function(){}
+
custom function is executed
+
-
+
+ +
+

Callbacks

+

Callback settings specify a function to occur after a specific behavior.

+ + + + + + + + + + + + + + + + + + + + + + + + +
SettingContextDescription
onChange(value, text)DropdownIs called after a dropdown item is selected. Receieves the name and value of selection.
onShowDropdownIs called after a dropdown is shown.
onHideDropdownIs called after a dropdown is hidden.
-
+
-
- -

Debug Settings

-

Debug settings controls debug output to the console

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SettingDefaultDescription
nameDropdownName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error -
- error : { - action : 'You called a dropdown action that was not defined', - method : 'The method you called is not defined.', - transition : 'The requested transition was not found' - } -
-
+
+ +

DOM Settings

+

DOM settings specify how this module should interface with the DOM

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector +
+ selector : { + input : '> input[type="hidden"]', + item : '.menu > .item', + menu : '.menu', + text : '> .text' + } +
+
metadata +
+ metadata: { + text : 'text', + value : 'value' + } +
+
className +
+ className : { + active : 'active', + disabled : 'disabled', + placeholder : 'default', + visible : 'visible' + } +
+
+ +
+
+ +

Debug Settings

+

Debug settings controls debug output to the console

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
nameDropdownName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
error +
+ error : { + action : 'You called a dropdown action that was not defined', + method : 'The method you called is not defined.', + transition : 'The requested transition was not found' + } +
+
+ +
diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index ed8eea916..a587476bd 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -42,6 +42,7 @@ semantic.ready = function() { $menuPopup = $('.ui.main.menu .popup.item'), $menuDropdown = $('.ui.main.menu .dropdown'), + $pageTabMenu = $('body > .tab.segment .tabular.menu'), $pageTabs = $('body > .tab.segment .menu .item'), $downloadDropdown = $('.download.buttons .dropdown'), diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 40743eed4..a3ac3d0ed 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -159,6 +159,12 @@ a:hover { #example > .tab.segment { padding-bottom: 0em; + margin-bottom: 2em; +} + +#example > .tab.segment .fixed .tabular.menu { + position: fixed; + top: 50px; } #example > .tab.segment .vertical.menu { display: none;