Calling <code>$('form').form('reset')</code>, or clicking any reset element will return all form values to their <em>default value</em>. This is the value the form fields were set to when the page loaded.
</p>
<p>Calling <code>$('form').form('clear')</code> will remove all values from form fields and reset dropdowns to placeholder text</p>
<div class="ui ignored warning message">
Form <code>reset</code> works by caching default values on page load. For this to work correctly any form that uses reset will need to initialize on page load.
</div>
<div class="ui ignored info message">
Reset and clear will modify all form fields, not just those which have validation rules
<td>You can specify custom settings to extend <a href="/modules/dimmer.html">UI dimmer</a></td>
</tr>
<tr>
<td>useCSS</td>
<td>
true
</td>
<td>Whether to use CSS animations instead of fallback javascript animations</td>
</tr>
<tr>
<td>transition</td>
<td>
scale
</td>
<td>Named transition to use when animating menu in and out. <code>Fade</code> is available without including <a href="/modules/transition.html">ui transitions</a></td>
<td>Named transition to use when animating menu in and out, full list can be found in <a href="/modules/transition.html">ui transitions</a> docs.</td>
<p>Using <code>auto: true</code> will load the tab's path from your server with additional headers to specify an in-page request. Additional requests will automatically be loaded from cache without a server request.</p>
<div class="ui ignored info message">
Tab contents defaults to automatically caching in <code>sessionStorage</code> using API's <code>cache: 'local'</code> setting. You can disable this behavior by setting <code>cache: false</code> in <code>apiSettings</code>.
</div>
<div class="ui ignored warning message">
API requests for the following example have been faked using <a href="/behaviors/api.html#using-custom-backends">mockResponseAsync</a> API setting to avoid network overhead.
</div>
<div class="code">
$('.dynamic.example .menu .item')
.tab({
context : 'parent',
auto : true,
path : '/'
})
;
</div>
<div class="ui pointing secondary menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui active tab segment" data-tab="first">
<h4 class="ui header">Multiple Tabs on Same Page</h4>
<h4 class="ui header">Multiple Tab Groups</h4>
<p>There are a several of ways to include independent tab groups on the same page, even with history. One of the easiest ways is provide a specific parent context for each tab group.</p>
<div class="ui ignored info message">
If you are using tab contexts inside of tabs, you can also specify <code>childrenOnly: true</code> which will only look for tabs as the immediate children of the given context, or <code>context: 'parent'</code> a special keyword which avoids having to create unique selectors for each group.
@ -192,34 +156,13 @@ themes : ['Default']
<a class="item" data-tab="sixth">Sixth</a>
</div>
<div class="ui tab segment" data-tab="fourth">
<div class="ui top attached tabular menu">
<a class="active item" data-tab="fourth/a">4A</a>
<a class="item" data-tab="fourth/b">4B</a>
<a class="item" data-tab="fourth/c">4C</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="fourth/a">4A</div>
<p>Using <code>auto: true</code> will load the tab's path from your server with additional headers to specify an in-page request. When <a href="#settings"><code>cache: true</code></a> is set, re-opening a tab will be loaded from cache without a server request.</p>
<div class="ui ignored warning message">
API requests for the following example have been faked using <a href="/behaviors/api.html#using-custom-backends">mockResponse</a> API setting to avoid network overhead.
</div>
<div class="code">
$('.dynamic.example .menu .item')
.tab({
cache: false,
// faking api request
apiSettings: {
loadingDuration : 300,
mockResponse : function(settings) {
var response = {
first : 'AJAX Tab One',
second : 'AJAX Tab Two',
third : 'AJAX Tab Three'
};
return response[settings.urlData.tab];
}
},
context : 'parent',
auto : true,
path : '/'
})
;
</div>
<div class="ui pointing secondary menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui active tab segment" data-tab="first">
<h4 class="header">Evaluating Scripts in HTML</h4>
<p>By default, <code>script</code> tags included in HTML will only be evaluated on first load. To change this behavior you can adjust the <code>evaluateScripts</code> setting.</p>
<div class="code">
$('.eval.example .menu .item')
.tab({
evaluateScripts : 'once',
context : 'parent',
auto : true,
path : '/'
})
;
</div>
<div class="ui pointing secondary menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui active tab segment" data-tab="first">
<p>For static sites, or sites that only require simple history, in-page links can be used to trigger different local tab states</p>
@ -336,6 +360,41 @@ themes : ['Default']
</div>
</div>
<div class="state example">
<h4>Using HTML5 State</h4>
<p>For sites that are able to replicate change on the server, tab can automatically map changes in tab navigation to <a href="http://diveintohtml5.info/history.html" target="_blank">html5 state.</a>
</p>
<div class="ui ignored info message">
Since these docs are statically hosted on GitHub Pages, html state is not supported. The following example will cause a "not found" error on page refresh.
jlukic
9 years ago