From c4d269d66f4189d5f8a327973a1416122200b449 Mon Sep 17 00:00:00 2001
From: carson In the above demos you will see that the button greys out during
the request, which is due to Bootstrap's handling of this CSS class.
+ The Sometimes you may want to switch a class between siblings in a DOM without replacing the HTML. A
+ common situation where this comes up is in tabbed UIs, where the target is within the tabbed UI, but the
+ tabs themselves are not replaced. Intercooler has an attribute, Below is an example of a tabbed UI using this technique. Note that the tabs are not replaced, but the
+ Example
<ul class="nav nav-tabs" ic-target="#content" ic-switch-class="active">
- <li class="active"><a ic-get-from="/tabs">Tab1</a></li>
- <li><a ic-get-from="/tabs">Tab2</a></li>
- <li><a ic-get-from="/tabs">Tab3</a></li>
+ <li class="active"><a ic-get-from="/tab1">Tab1</a></li>
+ <li><a ic-get-from="/tab2">Tab2</a></li>
+ <li><a ic-get-from="/tab3">Tab3</a></li>
</ul>
<div id="content">
- Pick a tab
+ Tab 1
</div>
@@ -47,23 +47,19 @@ Example
Table Of Contents
Disabling Elements
The
+
+ ic-global-indicator
Attributeic-global-indicator
attribute is similar to the ic-indicator
attribute, but
+ will be shown in addition to any local indicators. This can be used to implement a site-wide progress indicator.
+ Client-Side Actions
+ Switch Class
+
+ ic-switch-class
that
+ enabled this pattern. It is placed on the parent element and the value is the name of the class that will be
+ switched to the element causing the intercooler request.active
class is switched between them as they are clicked.
+ <ul class="nav nav-tabs" ic-target="#content" ic-switch-class="active">
+ <li class="active"><a ic-get-from="/tab1">Tab1</a></li>
+ <li><a ic-get-from="/tab2">Tab2</a></li>
+ <li><a ic-get-from="/tab3">Tab3</a></li>
+ </ul>
+ <div id="content">
+ Pick a tab
+ </div>
+
+
+
+ <a ic-action="slideToggle" ic-target="#chesterton-quote">Toggle Chesterton!</a>
+
+
+ Conditionally Updating The Location/History
use
the history support.
Intercooler provides a mechanism for
+ progressive enhancement. The
+ ic-enhance
attribute can be set to true
+ on an element, all child anchor tags and form tags will be converted to their equivalent intercooler
+ implementations.
Anchor tags (links) will be converted to ic-get-from
with ic-push-url
set to true.
Forms will be converted to the intercooler equivalent action (e.g. a POST form will convert to ic-post-to
)
Commonly you will have an ic-target
set up at the top level of your DOM, paired with a
+ ic-enhance
attribute. You can differentiate on the server side between normal and AJAX requests
+ by looking for the intercooler headers.
Here is an example:
+ ++ <div ic-enhance="true"> + <a href="/enhancement_example">Click Me!</a> + </div> ++ +