Skip to content

Commit 0736e39

Browse files
JavaTMPJavaTMP
committed
update readme file
1 parent a837bda commit 0736e39

File tree

1 file changed

+123
-0
lines changed

1 file changed

+123
-0
lines changed

‎readme.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,129 @@ cd bootstrap-actionable
1414
npm install
1515
gulp
1616
```
17+
## Tutorial
18+
[Bootstrap Actionable plugin](https://github.com/JavaTMP/bootstrap-actionable) is a small Javascript code that help us implement
19+
click actions for `<a>` and `<button>` tags by declarative way and provide functionalities to load AJAX content in Bootstrap Modal
20+
Wrapper instance. The following are the main action types provided by the plugin:
1721

22+
### `"action-ref-href"` Action Type
23+
24+
This is the simplest function of the plugin which fires other link's `click` event that contains the value of `href`'s attribute equal to provided one. We use this type on sidebar small shortcut `buttons` and on all `home.html`'s `buttons`. See the following button tags html code:
25+
```
26+
<button class="btn btn-primary"
27+
actionType="action-ref-href"
28+
action-ref-by-href="pages/home.html">
29+
<i class="fa fa-home fa-fw"></i>
30+
</button>
31+
```
32+
Pressing the above button will make actionable code search for link with value `"pages/home.html"` in its `href` attribute and then fire a `click` event on it.
33+
34+
Another button code example from `home.html` page:
35+
```
36+
<button type="button" class="javatmp-btn btn btn-primary btn-block my-2"
37+
actionType="action-ref-href"
38+
actionScope=".sidebar"
39+
action-ref-by-href="pages/custom-pages/login-pages/default-login-page.html" >
40+
<i class="fa fa-file-o"></i>
41+
Default Login Page
42+
</button>
43+
```
44+
Pressing the above button will make actionable code search for link value `"pages/custom-pages/login-pages/default-login-page.html"` in its `href` attribute in `.sidebar` div only as we explicitly set the `actionScope` attribute and because the link on sidebar contains target attribute the actionable plugin code will use `window.open` to open it. See the following code for target link in the sidebar:
45+
```
46+
<a target="\_blank" href="pages/custom-pages/login-pages/default-login-page.html">
47+
<i class="fa fa-lg fa-fw fa-file-o"></i>
48+
Default Login Page
49+
</a>
50+
```
51+
52+
### `"action-ref"` Action Type
53+
It is similar to `"action-ref-href"` but instead of using URL to search for value of `href` attribute, it uses an alias name to search for. See the following code for `"Compose Message"` and `"View Message"` sidebar link in `index.html` page:
54+
```
55+
<li>
56+
<a action-name="compose-page" href="pages/custom-pages/inbox/compose-message.html">
57+
<i class="fa fa-lg fa-fw fa-file-o"></i>
58+
Compose Message
59+
</a>
60+
</li>
61+
<li>
62+
<a action-name="view-message" href="pages/custom-pages/inbox/view-message.html">
63+
<i class="fa fa-lg fa-fw fa-file-o"></i>
64+
View Message
65+
</a>
66+
</li>
67+
```
68+
And see the following tags from `./web/pages/custom-pages/inbox/inbox-messages.html` file:
69+
```
70+
<button
71+
type="button"
72+
actionType="action-ref"
73+
action-ref-by-name="compose-page"
74+
class="btn btn-danger btn-block actionable">
75+
Compose
76+
</button>
77+
<a
78+
actionType="action-ref"
79+
action-ref-by-name="view-message"
80+
alt=""
81+
href="">
82+
Customer Support
83+
</a>
84+
```
85+
86+
### `"ajax-request-in-model"` action type
87+
This action type is very powerful and it fires an AJAX request using href URL and load its contents in [Bootstrap Modal Wrapper](/pages/javatmp-bootstrap-modal-wrapper "JavaTMP Bootstrap Modal Wrapper Plugin") instance and give the control to the modal. Example links are the message links in dropdown menu items in main navbar in `index.html` page:
88+
```
89+
<a actionType="ajax-request-in-model"
90+
href="pages/custom-pages/inbox/ajax/ajax-view-message.html"
91+
class="list-group-item list-group-item-action">
92+
<div>
93+
<strong>John Smith</strong>
94+
<span class="float-right text-muted">
95+
<em>Yesterday</em>
96+
</span>
97+
</div>
98+
<div>Lorem ipsum dolor sit amet adipis dolor sit elit ipsum dolor sit elit ...</div>
99+
</a>
100+
```
101+
Pressing the above link will make actionable invokes the following method:
102+
```
103+
BootstrapModalWrapperFactory.createAjaxModal({
104+
message: $this.options.loadingHtml,
105+
dataType: $this.options.dataType,
106+
httpMethod: $this.options.ajaxHttpMethod,
107+
ajaxContainerReadyEventName: $this.options.ajaxContainerReady,
108+
url: href
109+
});
110+
```
111+
The following HTML code is the response of above AJAX request:
112+
```
113+
<div class="dynamic-ajax-content">
114+
...
115+
<script type="text/javascript">
116+
jQuery(function ($) {
117+
118+
// here we can reference the container bootstrap modal by its id
119+
// passed as parameter to request by name "ajaxModalId"
120+
// or for demo purposese ONLY we can get a reference top modal
121+
// in current open managed instances in BootstrapModalWrapperFactory
122+
var currentParentModal = BootstrapModalWrapperFactory.globalModals\[BootstrapModalWrapperFactory.globalModals.length - 1\];
123+
124+
$("#" + currentParentModal.options.id).on(javatmp.settings.javaTmpAjaxContainerReady, function (event, modal) {
125+
modal.updateSize("modal-lg");
126+
modal.updateTitle("View Message");
127+
modal.updateClosable(true);
128+
modal.addButton({
129+
label: "Close",
130+
cssClass: "btn btn-primary",
131+
action: function (modalWrapper, button, buttonData, originalEvent) {
132+
return modalWrapper.hide();
133+
}
134+
});
135+
});
136+
});
137+
</script>
138+
</div>
139+
```
140+
S
18141
## Copyright and License
19142
bootstrap-actionable is copyrighted by [JavaTMP](http://www.javatmp.com) and licensed under [MIT license](https://github.com/JavaTMP/bootstrap-actionable/blob/master/LICENSE).

0 commit comments

Comments
 (0)