From 7cf520c0b85c2d1551b529f388c8a23ac0dd7d39 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sun, 21 Sep 2014 12:42:29 -0400 Subject: [PATCH] Additional info on dropdown init --- server/documents/modules/dropdown.html.eco | 168 ++++++++++++++++++--- 1 file changed, 148 insertions(+), 20 deletions(-) diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index 68e342820..4a9700201 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -911,7 +911,10 @@ themes : ['Default'] -

Simple Dropdown (No Javascript)

+

Simple Dropdown States

+
+ Adding state classes only affects simple dropdowns, to trigger states +

Active

An active dropdown has its menu open

@@ -944,23 +947,144 @@ themes : ['Default']

Initializing

-

Initializing a dropdown

-
-
-
Select
- -
-
Option 1
-
Option 2
+
+

Simple

+

Initializing a dropdown with pre-existing html allows for the greatest performance, and most formatting flexibilty

+
A ui dropdown select element will be hidden until javascript can create html, this is to avoid the flash of unstyled content, and the change in element height adjusting page flow
+
+
+ +
Gender
+ +
+
Male
+
Female
+
+
+ $('.ui.dropdown') + .dropdown() + ; +
-
- $('.ui.dropdown') - .dropdown() - ; +
+

Converting form elements

+

For convenience, select elements can automatically be converted to selection dropdown. A select options with blank string values will be converted to prompt text.

+
+ +
+
+ $('#select') + .dropdown() + ; +
+ +
+ +
+

Searching Dropdowns

+

Using a search selection dropdown will allow you users to search more easily through large lists. This can also be converted directly from a form select element.

+
+ $('#search-select') + .dropdown() + ; +
+ + +
+ +
+

Behavior

All the following behaviors can be called using the syntax:

@@ -1280,13 +1404,14 @@ themes : ['Default']

A button can be formatted with a dropdown.

You can change the default action that occurs on selection to different presets built into ui dropdown.

For example, using the combo preset will change the preceding buttons text value to the current selected alue

-
- $('.combo.dropdown') - .dropdown({ - action: 'combo' - }) - ; -
+
+
+ $('.combo.dropdown') + .dropdown({ + action: 'combo' + }) + ; +
Save
@@ -1300,6 +1425,7 @@ themes : ['Default']
+

Link Dropdowns

@@ -1311,6 +1437,7 @@ themes : ['Default'] }) ;
+
Go to
@@ -1547,3 +1674,4 @@ themes : ['Default']
+