From 7b1804018dbaba66c5f0b21bfc5ffc5b19369f8a Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 8 Oct 2014 17:21:55 -0400 Subject: [PATCH] Adds docs for selection/search selection in form docs --- server/documents/collections/form.html.eco | 565 ++++++++++++++++++++- server/files/javascript/form.js | 5 + server/files/javascript/semantic.js | 5 +- server/files/stylesheets/semantic.css | 2 +- 4 files changed, 564 insertions(+), 13 deletions(-) diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco index 08c38a8a4..601b7870d 100755 --- a/server/documents/collections/form.html.eco +++ b/server/documents/collections/form.html.eco @@ -198,26 +198,569 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
-

Select

-

A selection dropdown, a type of ui dropdown can be used to allow for a selection from multiple choices

-
- $('.ui.selection.dropdown') +

Selection Dropdown

+

A selection dropdown is a type of ui dropdown designed for user selection. Dropdown will automatically convert select elements initialized as dropdowns.

+
+ $('select.dropdown') .dropdown() ;
-
- -
Gender
- -
-
Male
-
Female
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+

Search Selection Dropdown

+

A search selection is a special type of ui dropdown designed for selecting between many choices.

+
+
+ + +
+
+
+
+
+ +
+
+

Basic Select

+

If javascript or ui dropdown are not a viable option, forms also can provide basic styling for select elements

+
+
+ +
+
+
+

Radio Box

Radio boxes are styled forms of standard form radio controls.

diff --git a/server/files/javascript/form.js b/server/files/javascript/form.js index 292e50f2b..3795946c1 100755 --- a/server/files/javascript/form.js +++ b/server/files/javascript/form.js @@ -5,6 +5,8 @@ semantic.validateForm.ready = function() { // selector cache var + $codeDropdown = $('.existing.code .dropdown'), + $dropdown = $('select.dropdown').not($codeDropdown), // alias handler ; @@ -14,6 +16,9 @@ semantic.validateForm.ready = function() { }; + $dropdown + .dropdown() + ; }; diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index d63ee07c3..cb307cfce 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -288,7 +288,7 @@ semantic.ready = function() { ; html += '
'; if($examples.size() === 0) { - html += '' + $(this).text() + ''; + html += '' + $(this).text() + ''; } else { html += ' ' + $(this).text() + ''; @@ -683,6 +683,9 @@ semantic.ready = function() { $demo.fadeIn(500); } } + $sectionHeaders.visibility('refresh'); + $sectionExample.visibility('refresh'); + $footer.visibility('refresh'); }, createAnnotation: function() { diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 71a63e728..763e023cb 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -324,7 +324,7 @@ a:hover { height: 1px; position: absolute; right: 100%; - top: -70px; + top: -2.5em; width: 1px; }