Create rich two way interactions with Bootstrap and Knockout bindings 49 |
72 | Knockout-bootstrap is a set of custom knockout binding handlers that provide access 73 | to Bootstrap javascript widgets. 74 |
75 |76 |
data-bind attributeTight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. 95 |
96 |
98 | <a href="#" data-bind="tooltip: {title: 'Default tooltip'}">you probably</a>
99 | <a href="#" data-bind="tooltip: {title: 'Another tooltip', placement: 'right'}">have a</a>
100 |
101 | | Name | 106 |type | 107 |default | 108 |description | 109 |
|---|---|---|---|
| placement | 114 |string | function | 115 |'top' | 116 |how to position the tooltip - top | bottom | left | right | 117 |
| title | 120 |string | function | 121 |'' | 122 |default title value if `title` tag isn't present | 123 |
| trigger | 126 |string | 127 |'hover focus' | 128 |how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types. | 129 |
140 | Takes text content from a template and puts it in a popover 141 |
142 |
150 | <button class="btn" data-bind="popover: {template: 'popoverTemplate', options: {title: 'Oh Yea'}}">
151 | Launch Simple Popover
152 | </button>
153 |
154 | <script type="text/html" id="popoverTemplate">
155 | <button class="close pull-right" type="button" data-dismiss="popover">×</button>
156 | Hey I am some content in A popover
157 | </script>
158 |
159 | 161 | Manipulate data from within a popover 162 |
163 |
168 | <h1 data-bind="text: popoverBindingHeader"></h1>
169 | <button class="btn" data-bind="popover: {template: 'popoverBindingTemplate', options: {title: 'Oh Yea Binding'}}">
170 | Launch Binding Popover
171 | </button>
172 |
173 | <script type="text/html" id="popoverBindingTemplate">
174 | <button class="close pull-right" type="button" data-dismiss="popover">×</button>
175 | <form>
176 | <label>Popover Binding Header</label>
177 | <input type="text" data-bind="value: popoverBindingHeader, valueUpdate:'afterkeydown'" />
178 | <strong>Foreach binding:</strong>
179 | <table class="table table-striped">
180 | <tbody data-bind="foreach: colors">
181 | <tr><td><span data-bind="text: $data"></span></td></tr>
182 | </tbody>
183 | </table>
184 | </form>
185 | </script>
186 |
187 | | Name | 192 |type | 193 |default | 194 |description | 195 |
|---|---|---|---|
| options | 200 |object | 201 |{title: 'Popover'} | 202 |refer to official documentation for options. | 203 |
| template | 206 |string | 207 |'' | 208 |the id to the template for the content | 209 |
| data | 212 |string | function | 213 |'' | 214 |the data for the template | 215 |
230 | <!-- View Code -->
231 | <div data-bind="foreach: alerts">
232 | <div data-bind="alert: $data"></div>
233 | </div>
234 |
235 | <!-- View Model -->
236 | var ViewModel = function() {
237 | //....
238 | //...
239 | self.alerts = ko.observableArray([
240 | {'message': 'Here is an Error', 'priority': 'error'},
241 | {'message': 'Here is a Warning', 'priority': 'warning'},
242 | {'message': 'Here is a Success', 'priority': 'success'},
243 | {'message': 'Here is some Info', 'priority': 'info'}
244 | ]);
245 | //....
246 | //...
247 | };
248 |
249 |
250 | | Name | 255 |type | 256 |default | 257 |description | 258 |
|---|---|---|---|
| message | 263 |string | 264 |'' | 265 |The message to be displayed in the alert | 266 |
| priority | 269 |string | 270 |'' | 271 |The priority of the alert - error | warning | success | info | 272 |
289 | <!-- View Code -->
290 | <form>
291 | <label>Update Progress Value Observable</label>
292 | <input type="text" data-bind="value: progressVal, valueUpdate:'afterkeydown'" />
293 | </form>
294 | <div data-bind="progress: 'progressWidth'"></div>
295 |
296 | <!-- View Model -->
297 | var ViewModel = function() {
298 | //....
299 | //...
300 | self.progressVal = ko.observable(10);
301 | self.progressWidth = ko.computed(function(){
302 | return self.progressVal() + '%';
303 | }, self);
304 | //....
305 | //...
306 | };
307 |
308 | | Name | 313 |type | 314 |default | 315 |description | 316 |
|---|---|---|---|
| width computed | 321 |string | 322 |'' | 323 |the name of the computed observable that returns the width percentage | 324 |
334 | Typeahead input with a data source as an observable array. Pass a reference
335 | to the data-bind="typeahead:" binding and the items from that observable
336 | array will be shown as suggestions in the input box. To show the binding nature of this
337 | feature the example allows you to add and remove items from the array.
338 |
364 | <!-- View Code -->
365 | <div class="row">
366 | <div class="col-md-4">
367 | <form>
368 | <label>Javascript Frameworks</label>
369 | <input type="text" data-bind="typeahead: jsFrameworks" />
370 | </form>
371 | <form data-bind="submit: addFramework">
372 | <label>Add a framework</label>
373 | <input type="text" data-bind="value: frameworkToAdd, valueUpdate:'afterkeydown'" />
374 | <div class="form-actions">
375 | <button class="btn btn-default" type="submit" data-bind="enable: frameworkToAdd().length > 0">Add</button>
376 | </div>
377 | </form>
378 | </div>
379 | <div class="well col-md-4">
380 | <ul class="nav nav-list" data-bind="foreach: jsFrameworks">
381 | <li>
382 | <span data-bind="text: $data"></span>
383 | <span class="glyphicon glyphicon-remove" data-bind="click: $root.removeFramework"></span>
384 | </li>
385 | </ul>
386 | </div>
387 | </div>
388 |
389 | <!-- View Model -->
390 | var ViewModel = function() {
391 | //....
392 | //...
393 | self.jsFrameworks = ko.observableArray([
394 | 'Angular',
395 | 'Canjs',
396 | 'Batman',
397 | //...
398 | ]);
399 |
400 | self.frameworkToAdd = ko.observable("");
401 | self.addFramework = function() {
402 | self.jsFrameworks.push(self.frameworkToAdd());
403 | };
404 |
405 | self.removeFramework = function(framework) {
406 | self.jsFrameworks.remove(framework);
407 | };
408 | //....
409 | //...
410 | };
411 |
412 | Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
417 |420 | 421 |
422 |
443 | <!-- View Code -->
444 | <p data-bind="text: modalBindingBody"></p>
445 | <div class="row">
446 | <div class="col-md-4">
447 | <button class="btn btn-lg btn-primary" data-bind="modal: {template: 'modalBindingTemplateLive'}">Change Text Live</button>
448 | </div>
449 | <div class="col-md-4">
450 | <button class="btn btn-lg btn-primary" data-bind="modal: {template: 'modalBindingTemplateSave', openModal: openModal}">Change Text on Save</button>
451 | </div>
452 | </div>
453 | <br />
454 | <div class="row">
455 | <div class="col-md-4">
456 | <button class="btn btn-lg btn-primary" data-bind="modal: {template: 'modalSmallBindingTemplate', data: {modalBindingHeader: modalBindingHeader, body: 'Small Modal'} }">Small Modal</button>
457 | </div>
458 | <div class="col-md-4">
459 | <button class="btn btn-lg btn-primary" data-bind="modal: {template: 'modalLargeBindingTemplate', data: {modalBindingHeader: modalBindingHeader, body: 'Large Modal'} }">Large Modal</button>
460 | </div>
461 | </div>
462 |
463 | <!-- Model Code -->
464 | var ViewModel = function() {
465 | //....
466 | //...
467 | self.modalBindingHeader = ko.observable('Binding in A Modal');
468 | self.modalBindingBody = ko.observable('Gotta love data binding!!.');
469 | self.modalBindingTemp = ko.observable();
470 | self.openModal = function() {
471 | self.modalBindingTemp(self.modalBindingBody());
472 | };
473 | self.saveChange = function() {
474 | self.modalBindingBody(self.modalBindingTemp());
475 | };
476 | //....
477 | //...
478 | }
479 |
480 | | Name | 485 |type | 486 |default | 487 |description | 488 |
|---|---|---|---|
| options | 493 |object | 494 |{show: false} | 495 |refer to official documentation for options. | 496 |
| template | 499 |string | 500 |'' | 501 |the id to the template for the content | 502 |
| data | 505 |string | function | 506 |'' | 507 |the data for the template | 508 |
| openModal | 511 |function | 512 |'' | 513 |function to execute when modal is opened. | 514 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
602 |
603 |
607 |
608 |
621 |
622 |
638 |
639 |
656 |
657 |
672 |
673 |
688 |
689 |
--------------------------------------------------------------------------------
/examples/js/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v3.3.1 (http://getbootstrap.com)
3 | * Copyright 2011-2014 Twitter, Inc.
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 | */
6 | if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.1",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function c(){g.detach().trigger("closed.bs.alert").remove()}var e=a(this),f=e.attr("data-target");f||(f=e.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,""));var g=a(f);b&&b.preventDefault(),g.length||(g=e.closest(".alert")),g.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(g.removeClass("in"),a.support.transition&&g.hasClass("fade")?g.one("bsTransitionEnd",c).emulateTransitionEnd(d.TRANSITION_DURATION):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.3.1",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),setTimeout(a.proxy(function(){d[e](null==f[b]?this.options[b]:f[b]),"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active"));a&&this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target);d.hasClass("btn")||(d=d.closest(".btn")),b.call(d,"toggle"),c.preventDefault()}).on("focus.bs.button.data-api blur.bs.button.data-api",'[data-toggle^="button"]',function(b){a(b.target).closest(".btn").toggleClass("focus",/^focus(in)?$/.test(b.type))})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,this.options.keyboard&&this.$element.on("keydown.bs.carousel",a.proxy(this.keydown,this)),"hover"==this.options.pause&&!("ontouchstart"in document.documentElement)&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.3.1",c.TRANSITION_DURATION=600,c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0,keyboard:!0},c.prototype.keydown=function(a){if(!/input|textarea/i.test(a.target.tagName)){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()}},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.getItemForDirection=function(a,b){var c="prev"==a?-1:1,d=this.getItemIndex(b),e=(d+c)%this.$items.length;return this.$items.eq(e)},c.prototype.to=function(a){var b=this,c=this.getItemIndex(this.$active=this.$element.find(".item.active"));return a>this.$items.length-1||0>a?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){b.to(a)}):c==a?this.pause().cycle():this.slide(a>c?"next":"prev",this.$items.eq(a))},c.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},c.prototype.next=function(){return this.sliding?void 0:this.slide("next")},c.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},c.prototype.slide=function(b,d){var e=this.$element.find(".item.active"),f=d||this.getItemForDirection(b,e),g=this.interval,h="next"==b?"left":"right",i="next"==b?"first":"last",j=this;if(!f.length){if(!this.options.wrap)return;f=this.$element.find(".item")[i]()}if(f.hasClass("active"))return this.sliding=!1;var k=f[0],l=a.Event("slide.bs.carousel",{relatedTarget:k,direction:h});if(this.$element.trigger(l),!l.isDefaultPrevented()){if(this.sliding=!0,g&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var m=a(this.$indicators.children()[this.getItemIndex(f)]);m&&m.addClass("active")}var n=a.Event("slid.bs.carousel",{relatedTarget:k,direction:h});return a.support.transition&&this.$element.hasClass("slide")?(f.addClass(b),f[0].offsetWidth,e.addClass(h),f.addClass(h),e.one("bsTransitionEnd",function(){f.removeClass([b,h].join(" ")).addClass("active"),e.removeClass(["active",h].join(" ")),j.sliding=!1,setTimeout(function(){j.$element.trigger(n)},0)}).emulateTransitionEnd(c.TRANSITION_DURATION)):(e.removeClass("active"),f.addClass("active"),this.sliding=!1,this.$element.trigger(n)),g&&this.cycle(),this}};var d=a.fn.carousel;a.fn.carousel=b,a.fn.carousel.Constructor=c,a.fn.carousel.noConflict=function(){return a.fn.carousel=d,this};var e=function(c){var d,e=a(this),f=a(e.attr("data-target")||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""));if(f.hasClass("carousel")){var g=a.extend({},f.data(),e.data()),h=e.attr("data-slide-to");h&&(g.interval=!1),b.call(f,g),h&&f.data("bs.carousel").to(h),c.preventDefault()}};a(document).on("click.bs.carousel.data-api","[data-slide]",e).on("click.bs.carousel.data-api","[data-slide-to]",e),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var c=a(this);b.call(c,c.data())})})}(jQuery),+function(a){"use strict";function b(b){var c,d=b.attr("data-target")||(c=b.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"");return a(d)}function c(b){return this.each(function(){var c=a(this),e=c.data("bs.collapse"),f=a.extend({},d.DEFAULTS,c.data(),"object"==typeof b&&b);!e&&f.toggle&&"show"==b&&(f.toggle=!1),e||c.data("bs.collapse",e=new d(this,f)),"string"==typeof b&&e[b]()})}var d=function(b,c){this.$element=a(b),this.options=a.extend({},d.DEFAULTS,c),this.$trigger=a(this.options.trigger).filter('[href="#'+b.id+'"], [data-target="#'+b.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};d.VERSION="3.3.1",d.TRANSITION_DURATION=350,d.DEFAULTS={toggle:!0,trigger:'[data-toggle="collapse"]'},d.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},d.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b,e=this.$parent&&this.$parent.find("> .panel").children(".in, .collapsing");if(!(e&&e.length&&(b=e.data("bs.collapse"),b&&b.transitioning))){var f=a.Event("show.bs.collapse");if(this.$element.trigger(f),!f.isDefaultPrevented()){e&&e.length&&(c.call(e,"hide"),b||e.data("bs.collapse",null));var g=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[g](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var h=function(){this.$element.removeClass("collapsing").addClass("collapse in")[g](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return h.call(this);var i=a.camelCase(["scroll",g].join("-"));this.$element.one("bsTransitionEnd",a.proxy(h,this)).emulateTransitionEnd(d.TRANSITION_DURATION)[g](this.$element[0][i])}}}},d.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var e=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return a.support.transition?void this.$element[c](0).one("bsTransitionEnd",a.proxy(e,this)).emulateTransitionEnd(d.TRANSITION_DURATION):e.call(this)}}},d.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},d.prototype.getParent=function(){return a(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each(a.proxy(function(c,d){var e=a(d);this.addAriaAndCollapsedClass(b(e),e)},this)).end()},d.prototype.addAriaAndCollapsedClass=function(a,b){var c=a.hasClass("in");a.attr("aria-expanded",c),b.toggleClass("collapsed",!c).attr("aria-expanded",c)};var e=a.fn.collapse;a.fn.collapse=c,a.fn.collapse.Constructor=d,a.fn.collapse.noConflict=function(){return a.fn.collapse=e,this},a(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(d){var e=a(this);e.attr("data-target")||d.preventDefault();var f=b(e),g=f.data("bs.collapse"),h=g?"toggle":a.extend({},e.data(),{trigger:this});c.call(f,h)})}(jQuery),+function(a){"use strict";function b(b){b&&3===b.which||(a(e).remove(),a(f).each(function(){var d=a(this),e=c(d),f={relatedTarget:this};e.hasClass("open")&&(e.trigger(b=a.Event("hide.bs.dropdown",f)),b.isDefaultPrevented()||(d.attr("aria-expanded","false"),e.removeClass("open").trigger("hidden.bs.dropdown",f)))}))}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}function d(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new g(this)),"string"==typeof b&&d[b].call(c)})}var e=".dropdown-backdrop",f='[data-toggle="dropdown"]',g=function(b){a(b).on("click.bs.dropdown",this.toggle)};g.VERSION="3.3.1",g.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('').insertAfter(a(this)).on("click",b);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;e.trigger("focus").attr("aria-expanded","true"),f.toggleClass("open").trigger("shown.bs.dropdown",h)}return!1}},g.prototype.keydown=function(b){if(/(38|40|27|32)/.test(b.which)&&!/input|textarea/i.test(b.target.tagName)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var e=c(d),g=e.hasClass("open");if(!g&&27!=b.which||g&&27==b.which)return 27==b.which&&e.find(f).trigger("focus"),d.trigger("click");var h=" li:not(.divider):visible a",i=e.find('[role="menu"]'+h+', [role="listbox"]'+h);if(i.length){var j=i.index(b.target);38==b.which&&j>0&&j--,40==b.which&&j