<p>You can include url values as metadata inside the DOM.
<p>This is often easiest to include unique url data for each triggering element. For example, many follow buttons will trigger the same endpoint, but each will have its own user id.</p>
<h4 class="ui header">Request Information in Data Attributes</h4>
<p>You can include url values as html5 metadata attributes</p>
<p>This is often easiest to include unique url data for each triggering element, for example, many follow buttons will trigger the same endpoint, but each will have its own user id.</p>
<p>As a convenience, you can also specify your API action in metadata, to allow you to instantiate multiple types of api actions in one statement.</p>
<div class="ui ignored warning message">
Only variables specified in your API's URL will be searched for in metadata.
<p>Calling API on any element inside of a form, will automatically include serialized form content in your request when using a special setting <code>serializeForm</code>, or using a form as the <code>stateContext</code>.</p>
<div class="ui ignored message">
Using <code>serializeForm</code> requires including the serialize-object dependency.
<div class="ignored ui info message">Having any parent element receive the class <code>ui dimmable dimmed</code> will trigger the dimmer to display.</div>
<div class="ui dimmable dimmed segment">
<div class="ui simple dimmer"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>A dimmer can be formatted to have its colors inverted</p>
<div class="ui segment">
<div class="ui inverted dimmer"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<div class="ui show button"><i class="plus icon"></i></div>
@ -149,24 +153,24 @@ themes : ['Default']
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Puppy</h2>
<div class="ui green button">Vote</div>
<a class="ui button">View</a>
<h2 class="ui inverted header">Title</h2>
<div class="ui primary button">Add</div>
<div class="ui button">View</div>
</div>
</div>
</div>
<img src="/images/demo/highres.jpg">
<img src="/images/wireframe/image.png">
</div>
<div class="ui circular image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui mini green button">Vote</div>
<a class="ui mini button">View</a>
<div class="ui small primary button">Add</div>
<div class="ui small button">View</div>
</div>
</div>
</div>
<img src="/images/demo/photo2.jpg">
<img src="/images/wireframe/square-image.png">
</div>
</div>
@ -177,8 +181,8 @@ themes : ['Default']
<div class="ui inverted dimmer">
<div class="ui text loader">Loading</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<div class="ui show button"><i class="plus icon"></i></div>
@ -192,37 +196,49 @@ themes : ['Default']
<h2 class="ui dividing header">Usage</h2>
<h3 class="ui header">Display</h3>
<p>You can display a dimmer by either invoking .dimmer('show') on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.</p>
<div class="ignore code">
// these two are the same
$('.ui.dimmable)
.dimmer('show')
;
$('.ui.dimmable .dimmer')
.dimmer('show')
;
<div class="no example">
<h4 class="ui header">Display</h4>
<p>You can display a dimmer by either invoking .dimmer('show') on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.</p>
<div class="ignore code">
// these two are the same
$('.ui.dimmable)
.dimmer('show')
;
$('.ui.dimmable .dimmer')
.dimmer('show')
;
</div>
</div>
<h3 class="ui header">Creating Dimmers</h3>
<p>If a dimmer does not exist inside the element it will be created on first use.</p>
<div class="code" data-demo="true">
$('h3')
.dimmer('toggle')
;
<div class="no example">
<h4 class="ui header">Creating Dimmers</h4>
<p>If a dimmer does not exist inside the element it will be created on first use.</p>
<div class="code" data-demo="true">
$('h4')
.dimmer('toggle')
;
</div>
</div>
<h3 class="ui header">Showing a specific dimmer</h3>
<p>If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.</p>
<div class="code" data-demo="true">
// If a dimmer exists on a page, you can make it appear by calling it directly
$('.page.dimmer:first')
.dimmer('toggle')
;
<div class="no example">
<h4 class="ui header">Showing a Specific Dimmer</h4>
<p>If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.</p>
<div class="code" data-demo="true">
// If a dimmer exists on a page, you can make it appear by calling it directly
$('.page.dimmer:first')
.dimmer('toggle')
;
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
<p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p>
<div class="ui ignored info message">
Behaviors must be called on the same content which you originally initialize the dimmer, whether it is the <code>dimmable</code> context, or the <code>ui dimmer</code>
<td>Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.</td>
@ -363,18 +385,16 @@ themes : ['Default']
<td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
</tr>
</tbody>
</tbody>
</table>
<h3 class="ui header">
<h4 class="ui header">
Callbacks
<div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
<p>A dropdown menu can also contain sub menus inside of it</p>
My favorite animal breed is <div class="ui inline dropdown">
<input type="hidden" name="gender">
<div class="text">Shiba Inu</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Dogs</span>
<div class="menu">
<div class="item">Shiba Inu</div>
<div class="item">Poodle</div>
<div class="item">Labrador</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Cats</span>
<div class="menu">
<div class="item">Aegean</div>
<div class="item">Balinese</div>
<div class="item">Persian</div>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown example">
<h3 class="ui header">Preserving User Selections</h3>
<p>This example uses a preset text value to preserve the menu item on page navigation</p>
<div class="ui ignored info icon message">
<i class="help circle icon"></i>
<div class="content">
<p>A dropdown will automatically select on page load any menu item that includes the currently value of <code>text</code> or your dropdown's <code>hidden input</code> value.</p>
<p>This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.</p>
</div>
</div>
Current action: <div class="ui inline dropdown">
<div class="text">Hide</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Edit</div>
<div class="item">Remove</div>
<div class="item">Hide</div>
</div>
</div>
</div>
<div class="dropdown example">
<h3 class="ui header">Button Group</h3>
<p>A <a href="/elements/button.html">button group</a> can be formatted to show additional content as a dropdown</p>
<div class="ui icon buttons">
<div class="ui top left pointing dropdown button">
<p>A dropdown menu can also contain sub menus inside of it</p>
My favorite animal breed is <div class="ui inline dropdown">
<input type="hidden" name="gender">
<div class="text">Shiba Inu</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Dogs</span>
<div class="menu">
<div class="item">Shiba Inu</div>
<div class="item">Poodle</div>
<div class="item">Labrador</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Cats</span>
<div class="menu">
<div class="item">Aegean</div>
<div class="item">Balinese</div>
<div class="item">Persian</div>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown example">
<h3 class="ui header">Preserving User Selections</h3>
<p>This example uses a preset text value to preserve the menu item on page navigation</p>
<div class="ui ignored info icon message">
<i class="help circle icon"></i>
<div class="content">
<p>A dropdown will automatically select on page load any menu item that includes the currently value of <code>text</code> or your dropdown's <code>hidden input</code> value.</p>
<p>This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.</p>
</div>
</div>
Current action: <div class="ui inline dropdown">
<div class="text">Hide</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Edit</div>
<div class="item">Remove</div>
<div class="item">Hide</div>
</div>
</div>
</div>
<div class="dropdown example">
<h3 class="ui header">Button Group</h3>
<p>A <a href="/elements/button.html">button group</a> can be formatted to show additional content as a dropdown</p>
<div class="ui icon buttons">
<div class="ui top left pointing dropdown button">
<td>Event used to trigger dropdown (Hover, Click)</td>
<td>Event used to trigger dropdown (Hover, Click, Custom Event)</td>
</tr>
<tr>
<td>allowTab</td>
<td>true</td>
<td>Whether to allow a <code>tabindex</code> to be created for this element </td>
</tr>
<tr>
<td>fullTextSearch</td>
<td>true</td>
<td>Whether search selections should look for string match anywhere in string</td>
</tr>
<tr>
<td>preserveHTML</td>
<td>true</td>
<td>Whether html included in dropdown values should be preserved. (Allows icons to show up in selected value)</td>
</tr>
<tr>
<td>delay</td>
<td>
<div class="code">
delay: {
show: 50,
hide: 300
}
delay: {
show : 200,
hide : 300,
touch : 50
},
</div>
</td>
<td>Time in milliseconds to debounce show or hide behavior when <code>on: hover</code> is used.</td>
<td>Time in milliseconds to debounce show or hide behavior when <code>on: hover</code> is used, or when touch is used.</td>
</tr>
<tr>
<td>transition</td>
@ -1613,16 +1638,16 @@ themes : ['Default']
<td>Sets a default action to occur.
<div class="ui vertical divided list">
<div class="item">
<div class="header">activate</div>
<div class="description">Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm</div>
<div class="header">activate (default)</div>
<div class="description">Updates dropdown text with selected value, sets element state to active, updates any hidden fields if available</div>
</div>
<div class="item">
<div class="header">combo</div>
<div class="description">changes text of previous element matching text selector</div>
<div class="header">select</div>
<div class="description">activates menu and updates input fields, but does not change current text</div>
</div>
<div class="item">
<div class="header">select</div>
<div class="description">activates menu item but does not change text</div>
<div class="header">combo</div>
<div class="description">changes text of previous sibling element</div>
</div>
<div class="item">
<div class="header">nothing</div>
@ -1633,26 +1658,24 @@ themes : ['Default']
<div class="description">Dropdown menu is hidden</div>
</div>
<div class="item">
<div class="header">function(){}</div>
<div class="description">custom function is executed</div>
<div class="header">function(text, value){}</div>
<div class="description">custom function is executed with values specified in callback</div>
jlukic
10 years ago