diff options
Diffstat (limited to 'doc/views/demo-callbacks.htm')
| -rw-r--r-- | doc/views/demo-callbacks.htm | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/doc/views/demo-callbacks.htm b/doc/views/demo-callbacks.htm new file mode 100644 index 0000000..ade9ac1 --- /dev/null +++ b/doc/views/demo-callbacks.htm @@ -0,0 +1,163 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Callbacks</h3> + + <p> + The directive provides 8 (eight) callbacks. Open your browser's console to see the output. + </p> + + <br /> + + <div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + on-open="fOpen()" + on-close="fClose()" + on-item-click="fClick( data )" + on-select-all="fSelectAll()" + on-select-none="fSelectNone()" + on-reset="fReset()" + on-clear="fClear()" + on-search-change="fSearchChange( data )" + ></div> + + + <p> </p> + + <div role="tabpanel"> + + <!-- Nav tabs --> + <ul class="nav nav-tabs" role="tablist"> + <li role="presentation" class="active"><a data-target="#view" aria-controls="home" role="tab" data-toggle="tab">View</a></li> + <li role="presentation"><a data-target="#controller" aria-controls="profile" role="tab" data-toggle="tab">Controller</a></li> + </ul> + + <!-- Tab panes --> + <div class="tab-content"> + <div role="tabpanel" class="tab-pane active" id="view"> + <p>Define your directive:</p> + <pre><code><div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + ... + on-open="fOpen()" + on-close="fClose()" + on-item-click="fClick( data )" + on-select-all="fSelectAll()" + on-select-none="fSelectNone()" + on-reset="fReset()" + on-clear="fClear()" + on-search-change="fSearchChange( data )" +> +</div></code></pre> + </div> + <div role="tabpanel" class="tab-pane" id="controller"> + <p>Define your input-model:</p> + <div class="fauxCode hljs xml"> + $scope.modernBrowsers = [ + <table> + <tr class="hljs-tag" ng-repeat="row in modernBrowsers" > + <td> </td> + <td>{</td> + <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td> + <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td> + <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td> + <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td> + <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td> + </tr> + </table> + ]; + </div> + + <p>Define your callback functions:</p> + <pre><code>$scope.fOpen = function() { + console.log( 'On-open' ); +} + +$scope.fClose = function() { + console.log( 'On-close' ); +} + +$scope.fClick = function( data ) { + console.log( 'On-item-click' ); + console.log( 'On-item-click - data:' ); + console.log( data ); +} + +$scope.fSelectAll = function() { + console.log( 'On-select-all' ); +} + +$scope.fSelectNone = function() { + console.log( 'On-select-none' ); +} + +$scope.fReset = function() { + console.log( 'On-reset' ); +} + +$scope.fClear = function() { + console.log( 'On-clear' ); +} + +$scope.fSearchChange = function( data ) { + console.log( 'On-search-change' ); + console.log( 'On-search-change - keyword: ' + data.keyword ); + console.log( 'On-search-change - result: ' ); + console.log( data.result ); +}</code></pre> + </div> + </div> + + </div> + </div> +</div> + +<div class="row"> + <div class="col-sm-12"> + <h5>Output model</h5> + <p> + Look at the <code>output-model</code> below to see the values getting updated + as you select / deselect an item in the directive. Icons in the objects are actually full HTML <code>img</code> tag, shortened for simplicity. + </p> + <div class="fauxCode hljs xml"> + $scope.outputBrowsers = [ + <table> + <tr class="hljs-tag" ng-repeat="row in outputBrowsers" > + <td> </td> + <td>{</td> + <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td> + <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td> + <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td> + <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td> + <td>}<span ng-if="$index < outputBrowsers.length - 1">,</span></td> + </tr> + </table> + ]; + </div> + + <h5>Learn more</h5> + </p> + Open the <code>/docs/js/controllers/demo-callbacks.js</code>, as well as this view + <code>docs/views/demo-callbacks.htm</code>to learn the code directly. + </p> + + </div> +</div> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> |