├── example ├── js │ ├── libs │ │ └── jquery │ │ │ ├── jquery-loader.js │ │ │ └── plugins │ │ │ └── jquery.tmpl.min.js │ └── plugins │ │ ├── popover-extra-placements.css │ │ └── popover-extra-placements.js ├── bootstrap │ ├── img │ │ ├── glyphicons-halflings.png │ │ └── glyphicons-halflings-white.png │ ├── js │ │ ├── plugins │ │ │ └── popover-extra-placements │ │ │ │ ├── popover-extra-placements.min.css │ │ │ │ ├── popover-extra-placements.min.js │ │ │ │ ├── popover-extra-placements.css │ │ │ │ └── popover-extra-placements.js │ │ ├── bootstrap-popover-extra-placements.js │ │ ├── bootstrap.min.js │ │ └── bootstrap.js │ └── css │ │ ├── bootstrap-responsive.min.css │ │ └── bootstrap-responsive.css └── index.html ├── bower.json ├── README.md └── source ├── minified ├── popover-extra-placements.min.css └── popover-extra-placements.min.js ├── popover-extra-placements.css ├── popover-extra-placements.js └── popover-extra-placements.less /example/js/libs/jquery/jquery-loader.js: -------------------------------------------------------------------------------- 1 | 2 | define(['/static/js/libs/jquery/jquery-1.8.1.min.js'], function(){ 3 | return jQuery.noConflict(); 4 | }); 5 | -------------------------------------------------------------------------------- /example/bootstrap/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dkleehammer/bootstrap-popover-extra-placements/HEAD/example/bootstrap/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /example/bootstrap/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dkleehammer/bootstrap-popover-extra-placements/HEAD/example/bootstrap/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-popover-extra-placements", 3 | "version": "0.1.1", 4 | "homepage": "https://github.com/tarlepp/bootstrap-popover-extra-placements", 5 | "authors": [ 6 | "Daniel Kleehammer", 7 | "Tarmo Leppänen" 8 | ], 9 | "description": "Extends the bootstrap popover and to add extra placements. Original repository: https://github.com/dkleehammer/bootstrap-popover-extra-placements", 10 | "main": [ 11 | "source/popover-extra-placements.js", 12 | "source/popover-extra-placements.css" 13 | ], 14 | "keywords": [ 15 | "bootstrap", 16 | "popover" 17 | ], 18 | "license": "MIT", 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "test", 24 | "tests" 25 | ], 26 | "dependencies": { 27 | "bootstrap" : ">=3.0.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Example 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 27 | 28 | -------------------------------------------------------------------------------- /example/bootstrap/js/plugins/popover-extra-placements/popover-extra-placements.min.css: -------------------------------------------------------------------------------- 1 | .popover.topLeft{margin-top:-10px}.popover.topLeft .arrow{bottom:-10px;left:25%;margin-left:-10px;border-width:10px 10px 0;border-top-color:#fff}.popover.topLeft .arrow:after{border-width:11px 11px 0;border-top-color:rgba(0,0,0,0.25);bottom:-1px;left:-11px}.popover.topRight{margin-top:-10px}.popover.topRight .arrow{bottom:-10px;left:75%;margin-left:-10px;border-width:10px 10px 0;border-top-color:#fff}.popover.topRight .arrow:after{border-width:11px 11px 0;border-top-color:rgba(0,0,0,0.25);bottom:-1px;left:-11px}.popover.rightTop{margin-left:10px}.popover.rightTop .arrow{top:25%;left:-10px;margin-top:-10px;border-width:10px 10px 10px 0;border-right-color:#fff}.popover.rightTop .arrow:after{border-width:11px 11px 11px 0;border-right-color:rgba(0,0,0,0.25);bottom:-11px;left:-1px}.popover.rightBottom{margin-left:10px}.popover.rightBottom .arrow{top:75%;left:-10px;margin-top:-10px;border-width:10px 10px 10px 0;border-right-color:#fff}.popover.rightBottom .arrow:after{border-width:11px 11px 11px 0;border-right-color:rgba(0,0,0,0.25);bottom:-11px;left:-1px}.popover.bottomLeft{margin-top:10px}.popover.bottomLeft .arrow{top:-10px;left:25%;margin-left:-10px;border-width:0 10px 10px;border-bottom-color:#fff}.popover.bottomLeft .arrow:after{border-width:0 11px 11px;border-bottom-color:rgba(0,0,0,0.25);top:-1px;left:-11px}.popover.bottomRight{margin-top:10px}.popover.bottomRight .arrow{top:-10px;left:75%;margin-left:-10px;border-width:0 10px 10px;border-bottom-color:#fff}.popover.bottomRight .arrow:after{border-width:0 11px 11px;border-bottom-color:rgba(0,0,0,0.25);top:-1px;left:-11px}.popover.leftTop{margin-left:-10px}.popover.leftTop .arrow{top:25%;right:-10px;margin-top:-10px;border-width:10px 0 10px 10px;border-left-color:#fff}.popover.leftTop .arrow:after{border-width:11px 0 11px 11px;border-left-color:rgba(0,0,0,0.25);bottom:-11px;right:-1px}.popover.leftBottom{margin-left:-10px}.popover.leftBottom .arrow{top:75%;right:-10px;margin-top:-10px;border-width:10px 0 10px 10px;border-left-color:#fff}.popover.leftBottom .arrow:after{border-width:11px 0 11px 11px;border-left-color:rgba(0,0,0,0.25);bottom:-11px;right:-1px} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | NOTE: this repo is no longer supported, I would be happy to hand it off to anyone that would like to support it, let me know. 2 | 3 | bootstrap-popover-extra-placements 4 | ================================== 5 | 6 | Extends the bootstrap popover and to add extra placements. 7 | 8 | 9 | Preface 10 | ---------------------------------- 11 | 12 | Twitter's Bootstrap built-in popover plug-in is great, however, there are times when your 13 | popover is rending outside of the viewport. 'extra-placements' extends the built-in plug-in 14 | and provides 4 additional placement options giving you a total of 8 placement options. 15 | 16 | ### Usage 17 | Using the plug-in is simple. Download either the un-minified or the minified of both the js 18 | and css files (or download the whole project) and simply add the following line of code AFTER 19 | you include bootstrap. The css stylesheet is added automatically by the plug-in, so you do not 20 | need to link it. 21 | 22 | Once you have added the 'extra-placements' plug-in, instantiate a popover just as normal, but 23 | now use on of the additional placement options. 24 | 25 | ```html 26 | 27 | 28 | Example 29 | 30 | 31 | 32 | 33 | 34 | 35 | 40 | 41 | 42 | 43 | 44 |
45 | 46 | 47 | 52 | 53 | 54 | ``` 55 | 56 | -------------------------------------------------------------------------------- /example/bootstrap/js/plugins/popover-extra-placements/popover-extra-placements.min.js: -------------------------------------------------------------------------------- 1 | (function(c){var b=c.fn.popover;var a=function(e,d){b.Constructor.apply(this,arguments)};a.prototype=c.extend({},b.Constructor.prototype,{constructor:a,_super:function(){var d=c.makeArray(arguments);b.Constructor.prototype[d.shift()].apply(this,d)},show:function(){var h,d,j,f,i,e,g;if(this.hasContent&&this.enabled){h=this.tip();this.setContent();if(this.options.animation){h.addClass("fade")}e=typeof this.options.placement=="function"?this.options.placement.call(this,h[0],this.$element[0]):this.options.placement;d=/in/.test(e);h.remove().css({top:0,left:0,display:"block"}).appendTo(d?this.$element:document.body);j=this.getPosition(d);f=h[0].offsetWidth;i=h[0].offsetHeight;switch(d?e.split(" ")[1]:e){case"bottom":g={top:j.top+j.height,left:j.left+j.width/2-f/2};break;case"top":g={top:j.top-i,left:j.left+j.width/2-f/2};break;case"left":g={top:j.top+j.height/2-i/2,left:j.left-f};break;case"right":g={top:j.top+j.height/2-i/2,left:j.left+j.width};break;case"topLeft":g={top:j.top-i,left:j.left+j.width/2-(f*0.25)};break;case"topRight":g={top:j.top-i,left:j.left+j.width/2-(f*0.75)};break;case"rightTop":g={top:j.top+j.height/2-(i*0.25),left:j.left+j.width};break;case"rightBottom":g={top:j.top+j.height/2-(i*0.75),left:j.left+j.width};break;case"bottomLeft":g={top:j.top+j.height,left:j.left+j.width/2-(f*0.25)};break;case"bottomRight":g={top:j.top+j.height,left:j.left+j.width/2-(f*0.75)};break;case"leftTop":g={top:j.top+j.height/2-(i*0.25),left:j.left-f};break;case"leftBottom":g={top:j.top+j.height/2-(i*0.75),left:j.left-f};break}h.css(g).addClass(e).addClass("in")}}});c.fn.popover=c.extend(function(d){return this.each(function(){var g=c(this),f=g.data("popover"),e=typeof d=="object"&&d;if(!f){g.data("popover",(f=new a(this,e)))}if(typeof d=="string"){f[d]()}})},b);c(document).find("script").each(function(e,d){if(d.src.indexOf("popover-extra-placements.js")!=-1){c("head").append('')}else{if(d.src.indexOf("popover-extra-placements.min.js")!=-1){c("head").append('')}}})})(jQuery); -------------------------------------------------------------------------------- /source/minified/popover-extra-placements.min.css: -------------------------------------------------------------------------------- 1 | /* =================================================== 2 | * popover-extra-placements.css v0.1 3 | * http://twitter.github.com/bootstrap-popover-extra-placements 4 | * =================================================== 5 | * Copyright 2012 Daniel Kleehammer 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================== */ 19 | 20 | .popover.topLeft{margin-top:-10px}.popover.topLeft .arrow{bottom:-10px;left:25%;margin-left:-10px;border-width:10px 10px 0;border-top-color:#fff}.popover.topLeft .arrow:after{border-width:11px 11px 0;border-top-color:rgba(0,0,0,0.25);bottom:-1px;left:-11px}.popover.topRight{margin-top:-10px}.popover.topRight .arrow{bottom:-10px;left:75%;margin-left:-10px;border-width:10px 10px 0;border-top-color:#fff}.popover.topRight .arrow:after{border-width:11px 11px 0;border-top-color:rgba(0,0,0,0.25);bottom:-1px;left:-11px}.popover.rightTop{margin-left:10px}.popover.rightTop .arrow{top:25%;left:-10px;margin-top:-10px;border-width:10px 10px 10px 0;border-right-color:#fff}.popover.rightTop .arrow:after{border-width:11px 11px 11px 0;border-right-color:rgba(0,0,0,0.25);bottom:-11px;left:-1px}.popover.rightBottom{margin-left:10px}.popover.rightBottom .arrow{top:75%;left:-10px;margin-top:-10px;border-width:10px 10px 10px 0;border-right-color:#fff}.popover.rightBottom .arrow:after{border-width:11px 11px 11px 0;border-right-color:rgba(0,0,0,0.25);bottom:-11px;left:-1px}.popover.bottomLeft{margin-top:10px}.popover.bottomLeft .arrow{top:-10px;left:25%;margin-left:-10px;border-width:0 10px 10px;border-bottom-color:#fff}.popover.bottomLeft .arrow:after{border-width:0 11px 11px;border-bottom-color:rgba(0,0,0,0.25);top:-1px;left:-11px}.popover.bottomRight{margin-top:10px}.popover.bottomRight .arrow{top:-10px;left:75%;margin-left:-10px;border-width:0 10px 10px;border-bottom-color:#fff}.popover.bottomRight .arrow:after{border-width:0 11px 11px;border-bottom-color:rgba(0,0,0,0.25);top:-1px;left:-11px}.popover.leftTop{margin-left:-10px}.popover.leftTop .arrow{top:25%;right:-10px;margin-top:-10px;border-width:10px 0 10px 10px;border-left-color:#fff}.popover.leftTop .arrow:after{border-width:11px 0 11px 11px;border-left-color:rgba(0,0,0,0.25);bottom:-11px;right:-1px}.popover.leftBottom{margin-left:-10px}.popover.leftBottom .arrow{top:75%;right:-10px;margin-top:-10px;border-width:10px 0 10px 10px;border-left-color:#fff}.popover.leftBottom .arrow:after{border-width:11px 0 11px 11px;border-left-color:rgba(0,0,0,0.25);bottom:-11px;right:-1px} -------------------------------------------------------------------------------- /source/minified/popover-extra-placements.min.js: -------------------------------------------------------------------------------- 1 | /* =================================================== 2 | * popover-extra-placements.js v0.1 3 | * http://twitter.github.com/bootstrap-popover-extra-placements 4 | * =================================================== 5 | * Copyright 2012 Daniel Kleehammer 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================== */ 19 | 20 | (function(c){var b=c.fn.popover;var a=function(e,d){b.Constructor.apply(this,arguments)};a.prototype=c.extend({},b.Constructor.prototype,{constructor:a,_super:function(){var d=c.makeArray(arguments);b.Constructor.prototype[d.shift()].apply(this,d)},show:function(){var h,d,j,f,i,e,g;if(this.hasContent&&this.enabled){h=this.tip();this.setContent();if(this.options.animation){h.addClass("fade")}e=typeof this.options.placement=="function"?this.options.placement.call(this,h[0],this.$element[0]):this.options.placement;d=/in/.test(e);h.remove().css({top:0,left:0,display:"block"}).appendTo(d?this.$element:document.body);j=this.getPosition(d);f=h[0].offsetWidth;i=h[0].offsetHeight;switch(d?e.split(" ")[1]:e){case"bottom":g={top:j.top+j.height,left:j.left+j.width/2-f/2};break;case"top":g={top:j.top-i,left:j.left+j.width/2-f/2};break;case"left":g={top:j.top+j.height/2-i/2,left:j.left-f};break;case"right":g={top:j.top+j.height/2-i/2,left:j.left+j.width};break;case"topLeft":g={top:j.top-i,left:j.left+j.width/2-(f*0.25)};break;case"topRight":g={top:j.top-i,left:j.left+j.width/2-(f*0.75)};break;case"rightTop":g={top:j.top+j.height/2-(i*0.25),left:j.left+j.width};break;case"rightBottom":g={top:j.top+j.height/2-(i*0.75),left:j.left+j.width};break;case"bottomLeft":g={top:j.top+j.height,left:j.left+j.width/2-(f*0.25)};break;case"bottomRight":g={top:j.top+j.height,left:j.left+j.width/2-(f*0.75)};break;case"leftTop":g={top:j.top+j.height/2-(i*0.25),left:j.left-f};break;case"leftBottom":g={top:j.top+j.height/2-(i*0.75),left:j.left-f};break}h.css(g).addClass(e).addClass("in")}}});c.fn.popover=c.extend(function(d){return this.each(function(){var g=c(this),f=g.data("popover"),e=typeof d=="object"&&d;if(!f){g.data("popover",(f=new a(this,e)))}if(typeof d=="string"){f[d]()}})},b);c(document).find("script").each(function(e,d){if(d.src.indexOf("popover-extra-placements.js")!=-1){c("head").append('')}else{if(d.src.indexOf("popover-extra-placements.min.js")!=-1){c("head").append('')}}})})(jQuery); -------------------------------------------------------------------------------- /example/js/plugins/popover-extra-placements.css: -------------------------------------------------------------------------------- 1 | 2 | /************************* 3 | * Top Positions 4 | *************************/ 5 | 6 | /** Top Left **/ 7 | .popover.topLeft { 8 | margin-top: -10px; 9 | } 10 | 11 | .popover.topLeft .arrow { 12 | bottom: -10px; 13 | left: 25%; 14 | margin-left: -10px; 15 | border-width: 10px 10px 0; 16 | border-top-color: #ffffff; 17 | } 18 | 19 | .popover.topLeft .arrow:after { 20 | border-width: 11px 11px 0; 21 | border-top-color: rgba(0, 0, 0, 0.25); 22 | bottom: -1px; 23 | left: -11px; 24 | } 25 | 26 | /** Top Right **/ 27 | .popover.topRight { 28 | margin-top: -10px; 29 | } 30 | 31 | .popover.topRight .arrow { 32 | bottom: -10px; 33 | left: 75%; 34 | margin-left: -10px; 35 | border-width: 10px 10px 0; 36 | border-top-color: #ffffff; 37 | } 38 | 39 | .popover.topRight .arrow:after { 40 | border-width: 11px 11px 0; 41 | border-top-color: rgba(0, 0, 0, 0.25); 42 | bottom: -1px; 43 | left: -11px; 44 | } 45 | 46 | 47 | /************************* 48 | * Right Positions 49 | *************************/ 50 | 51 | /** Right Top **/ 52 | .popover.rightTop { 53 | margin-left: 10px; 54 | } 55 | 56 | .popover.rightTop .arrow { 57 | top: 25%; 58 | left: -10px; 59 | margin-top: -10px; 60 | border-width: 10px 10px 10px 0; 61 | border-right-color: #ffffff; 62 | } 63 | 64 | .popover.rightTop .arrow:after { 65 | border-width: 11px 11px 11px 0; 66 | border-right-color: rgba(0, 0, 0, 0.25); 67 | bottom: -11px; 68 | left: -1px; 69 | } 70 | 71 | /** Right Bottom **/ 72 | .popover.rightBottom { 73 | margin-left: 10px; 74 | } 75 | 76 | .popover.rightBottom .arrow { 77 | top: 75%; 78 | left: -10px; 79 | margin-top: -10px; 80 | border-width: 10px 10px 10px 0; 81 | border-right-color: #ffffff; 82 | } 83 | 84 | .popover.rightBottom .arrow:after { 85 | border-width: 11px 11px 11px 0; 86 | border-right-color: rgba(0, 0, 0, 0.25); 87 | bottom: -11px; 88 | left: -1px; 89 | } 90 | 91 | /************************* 92 | * Bottom Positions 93 | *************************/ 94 | 95 | /** Bottom Left **/ 96 | .popover.bottomLeft { 97 | margin-top: 10px; 98 | } 99 | 100 | .popover.bottomLeft .arrow { 101 | top: -10px; 102 | left: 25%; 103 | margin-left: -10px; 104 | border-width: 0 10px 10px; 105 | border-bottom-color: #ffffff; 106 | } 107 | 108 | .popover.bottomLeft .arrow:after { 109 | border-width: 0 11px 11px; 110 | border-bottom-color: rgba(0, 0, 0, 0.25); 111 | top: -1px; 112 | left: -11px; 113 | } 114 | 115 | 116 | /** Bottom Right **/ 117 | .popover.bottomRight { 118 | margin-top: 10px; 119 | } 120 | 121 | .popover.bottomRight .arrow { 122 | top: -10px; 123 | left: 75%; 124 | margin-left: -10px; 125 | border-width: 0 10px 10px; 126 | border-bottom-color: #ffffff; 127 | } 128 | 129 | .popover.bottomRight .arrow:after { 130 | border-width: 0 11px 11px; 131 | border-bottom-color: rgba(0, 0, 0, 0.25); 132 | top: -1px; 133 | left: -11px; 134 | } 135 | 136 | /************************* 137 | * Left Positions 138 | *************************/ 139 | 140 | /** Left Top **/ 141 | .popover.leftTop { 142 | margin-left: -10px; 143 | } 144 | 145 | .popover.leftTop .arrow { 146 | top: 25%; 147 | right: -10px; 148 | margin-top: -10px; 149 | border-width: 10px 0 10px 10px; 150 | border-left-color: #ffffff; 151 | } 152 | 153 | .popover.leftTop .arrow:after { 154 | border-width: 11px 0 11px 11px; 155 | border-left-color: rgba(0, 0, 0, 0.25); 156 | bottom: -11px; 157 | right: -1px; 158 | } 159 | 160 | 161 | /** Left Bottom **/ 162 | .popover.leftBottom { 163 | margin-left: -10px; 164 | } 165 | 166 | .popover.leftBottom .arrow { 167 | top: 75%; 168 | right: -10px; 169 | margin-top: -10px; 170 | border-width: 10px 0 10px 10px; 171 | border-left-color: #ffffff; 172 | } 173 | 174 | .popover.leftBottom .arrow:after { 175 | border-width: 11px 0 11px 11px; 176 | border-left-color: rgba(0, 0, 0, 0.25); 177 | bottom: -11px; 178 | right: -1px; 179 | } 180 | -------------------------------------------------------------------------------- /example/bootstrap/js/plugins/popover-extra-placements/popover-extra-placements.css: -------------------------------------------------------------------------------- 1 | 2 | /************************* 3 | * Top Positions 4 | *************************/ 5 | 6 | /** Top Left **/ 7 | .popover.topLeft { 8 | margin-top: -10px; 9 | } 10 | 11 | .popover.topLeft .arrow { 12 | bottom: -10px; 13 | left: 25%; 14 | margin-left: -10px; 15 | border-width: 10px 10px 0; 16 | border-top-color: #ffffff; 17 | } 18 | 19 | .popover.topLeft .arrow:after { 20 | border-width: 11px 11px 0; 21 | border-top-color: rgba(0, 0, 0, 0.25); 22 | bottom: -1px; 23 | left: -11px; 24 | } 25 | 26 | /** Top Right **/ 27 | .popover.topRight { 28 | margin-top: -10px; 29 | } 30 | 31 | .popover.topRight .arrow { 32 | bottom: -10px; 33 | left: 75%; 34 | margin-left: -10px; 35 | border-width: 10px 10px 0; 36 | border-top-color: #ffffff; 37 | } 38 | 39 | .popover.topRight .arrow:after { 40 | border-width: 11px 11px 0; 41 | border-top-color: rgba(0, 0, 0, 0.25); 42 | bottom: -1px; 43 | left: -11px; 44 | } 45 | 46 | 47 | /************************* 48 | * Right Positions 49 | *************************/ 50 | 51 | /** Right Top **/ 52 | .popover.rightTop { 53 | margin-left: 10px; 54 | } 55 | 56 | .popover.rightTop .arrow { 57 | top: 25%; 58 | left: -10px; 59 | margin-top: -10px; 60 | border-width: 10px 10px 10px 0; 61 | border-right-color: #ffffff; 62 | } 63 | 64 | .popover.rightTop .arrow:after { 65 | border-width: 11px 11px 11px 0; 66 | border-right-color: rgba(0, 0, 0, 0.25); 67 | bottom: -11px; 68 | left: -1px; 69 | } 70 | 71 | /** Right Bottom **/ 72 | .popover.rightBottom { 73 | margin-left: 10px; 74 | } 75 | 76 | .popover.rightBottom .arrow { 77 | top: 75%; 78 | left: -10px; 79 | margin-top: -10px; 80 | border-width: 10px 10px 10px 0; 81 | border-right-color: #ffffff; 82 | } 83 | 84 | .popover.rightBottom .arrow:after { 85 | border-width: 11px 11px 11px 0; 86 | border-right-color: rgba(0, 0, 0, 0.25); 87 | bottom: -11px; 88 | left: -1px; 89 | } 90 | 91 | /************************* 92 | * Bottom Positions 93 | *************************/ 94 | 95 | /** Bottom Left **/ 96 | .popover.bottomLeft { 97 | margin-top: 10px; 98 | } 99 | 100 | .popover.bottomLeft .arrow { 101 | top: -10px; 102 | left: 25%; 103 | margin-left: -10px; 104 | border-width: 0 10px 10px; 105 | border-bottom-color: #ffffff; 106 | } 107 | 108 | .popover.bottomLeft .arrow:after { 109 | border-width: 0 11px 11px; 110 | border-bottom-color: rgba(0, 0, 0, 0.25); 111 | top: -1px; 112 | left: -11px; 113 | } 114 | 115 | 116 | /** Bottom Right **/ 117 | .popover.bottomRight { 118 | margin-top: 10px; 119 | } 120 | 121 | .popover.bottomRight .arrow { 122 | top: -10px; 123 | left: 75%; 124 | margin-left: -10px; 125 | border-width: 0 10px 10px; 126 | border-bottom-color: #ffffff; 127 | } 128 | 129 | .popover.bottomRight .arrow:after { 130 | border-width: 0 11px 11px; 131 | border-bottom-color: rgba(0, 0, 0, 0.25); 132 | top: -1px; 133 | left: -11px; 134 | } 135 | 136 | /************************* 137 | * Left Positions 138 | *************************/ 139 | 140 | /** Left Top **/ 141 | .popover.leftTop { 142 | margin-left: -10px; 143 | } 144 | 145 | .popover.leftTop .arrow { 146 | top: 25%; 147 | right: -10px; 148 | margin-top: -10px; 149 | border-width: 10px 0 10px 10px; 150 | border-left-color: #ffffff; 151 | } 152 | 153 | .popover.leftTop .arrow:after { 154 | border-width: 11px 0 11px 11px; 155 | border-left-color: rgba(0, 0, 0, 0.25); 156 | bottom: -11px; 157 | right: -1px; 158 | } 159 | 160 | 161 | /** Left Bottom **/ 162 | .popover.leftBottom { 163 | margin-left: -10px; 164 | } 165 | 166 | .popover.leftBottom .arrow { 167 | top: 75%; 168 | right: -10px; 169 | margin-top: -10px; 170 | border-width: 10px 0 10px 10px; 171 | border-left-color: #ffffff; 172 | } 173 | 174 | .popover.leftBottom .arrow:after { 175 | border-width: 11px 0 11px 11px; 176 | border-left-color: rgba(0, 0, 0, 0.25); 177 | bottom: -11px; 178 | right: -1px; 179 | } 180 | -------------------------------------------------------------------------------- /example/bootstrap/js/bootstrap-popover-extra-placements.js: -------------------------------------------------------------------------------- 1 | var timeOutObj; 2 | $(function(){ 3 | $('#user-menu a[rel="popover"]').popover({ 4 | trigger: "manual", 5 | html : true, 6 | placement: function(tip, element) { 7 | var $element, above, actualHeight, actualWidth, below, boundBottom, boundLeft, boundRight, boundTop, elementAbove, elementBelow, elementLeft, elementRight, isWithinBounds, left, pos, right; 8 | isWithinBounds = function(elementPosition) { 9 | return boundTop < elementPosition.top && boundLeft < elementPosition.left && boundRight > (elementPosition.left + actualWidth) && boundBottom > (elementPosition.top + actualHeight); 10 | }; 11 | $element = $(element); 12 | pos = $.extend({}, $element.offset(), { 13 | width: element.offsetWidth, 14 | height: element.offsetHeight 15 | }); 16 | actualWidth = 410; 17 | actualHeight = 200; 18 | boundTop = $(document).scrollTop(); 19 | boundLeft = $(document).scrollLeft(); 20 | boundRight = boundLeft + $(document).width(); 21 | boundBottom = boundTop + $(document).height(); 22 | elementAbove = { 23 | top: pos.top - actualHeight, 24 | left: pos.left + pos.width / 2 - actualWidth / 2 25 | }; 26 | elementBelow = { 27 | top: pos.top + pos.height, 28 | left: pos.left + pos.width / 2 - actualWidth / 2 29 | }; 30 | elementLeft = { 31 | top: pos.top + pos.height / 2 - actualHeight / 2, 32 | left: pos.left - actualWidth 33 | }; 34 | elementRight = { 35 | top: pos.top + pos.height / 2 - actualHeight / 2, 36 | left: pos.left + pos.width 37 | }; 38 | elementBottomRight = { 39 | top: pos.top + pos.height, 40 | left: pos.left + pos.width / 2 - (actualWidth * 0.8) 41 | }; 42 | elementBottomLeft = { 43 | top: pos.top + pos.height, 44 | left: pos.left + pos.width / 2 - (actualWidth * 0.2) 45 | }; 46 | elementTopRight = { 47 | top: pos.top - actualHeight, 48 | left: pos.left + pos.width / 2 - (actualWidth * 0.8) 49 | }; 50 | elementTopLeft = { 51 | top: pos.top - actualHeight, 52 | left: pos.left + pos.width / 2 - (actualWidth * 0.2) 53 | }; 54 | above = isWithinBounds(elementAbove); 55 | below = isWithinBounds(elementBelow); 56 | left = isWithinBounds(elementLeft); 57 | right = isWithinBounds(elementRight); 58 | bottomRight = isWithinBounds(elementBottomRight); 59 | bottomLeft = isWithinBounds(elementBottomLeft); 60 | topRight = isWithinBounds(elementTopRight); 61 | topLeft = isWithinBounds(elementTopLeft); 62 | 63 | if (above) { 64 | return "top"; 65 | } else if (topRight) { 66 | return "top-right"; 67 | } else if (topLeft) { 68 | return "top-left"; 69 | } 70 | 71 | else if (below) { 72 | return "bottom"; 73 | } else if (bottomRight) { 74 | return "bottom-right"; 75 | } else if (bottomLeft) { 76 | return "bottom-left"; 77 | } 78 | 79 | else if(left) { 80 | return "left"; 81 | } else if(right) { 82 | return "right"; 83 | } else { 84 | // default 85 | return "bottom"; 86 | } 87 | } 88 | }).mouseenter(function(){ 89 | clearTimeout(timeOutObj); 90 | $('#user-menu a[rel="popover"]').not($(this)).popover("hide"); 91 | $(this).popover("show"); 92 | }).mouseleave(function() { 93 | var ref = $(this); 94 | timeOutObj = window.setTimeout(function(){ 95 | ref.popover("hide"); 96 | }, 1000); 97 | 98 | }); 99 | 100 | $(".popover").live("mouseenter",function () { 101 | clearTimeout(timeOutObj); 102 | }).live("mouseleave", function(){ 103 | $('#user-menu a[rel="popover"]').popover("hide"); 104 | }); 105 | 106 | }); -------------------------------------------------------------------------------- /example/js/plugins/popover-extra-placements.js: -------------------------------------------------------------------------------- 1 | 2 | (function($) { 3 | "use strict"; // jshint;_; 4 | 5 | // save the original plugin function object 6 | var _super = $.fn.popover; 7 | 8 | // create a new constructor 9 | var Popover = function(element, options) { 10 | _super.Constructor.apply(this, arguments); 11 | }; 12 | 13 | // extend prototypes and create a super function 14 | Popover.prototype = $.extend({}, _super.Constructor.prototype, { 15 | constructor: Popover, 16 | _super: function() { 17 | var args = $.makeArray(arguments); 18 | _super.Constructor.prototype[args.shift()].apply(this, args); 19 | }, 20 | show: function() { 21 | var $tip, inside, pos, actualWidth, actualHeight, placement, tp; 22 | 23 | if (this.hasContent && this.enabled) { 24 | $tip = this.tip(); 25 | this.setContent(); 26 | 27 | if (this.options.animation) { 28 | $tip.addClass('fade'); 29 | } 30 | 31 | placement = typeof this.options.placement == 'function' ? 32 | this.options.placement.call(this, $tip[0], this.$element[0]) : 33 | this.options.placement; 34 | 35 | inside = /in/.test(placement); 36 | 37 | $tip 38 | .remove() 39 | .css({ top: 0, left: 0, display: 'block' }) 40 | .appendTo(inside ? this.$element : document.body); 41 | 42 | pos = this.getPosition(inside); 43 | 44 | actualWidth = $tip[0].offsetWidth; 45 | actualHeight = $tip[0].offsetHeight; 46 | 47 | switch (inside ? placement.split(' ')[1] : placement) { 48 | case 'bottom': 49 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}; 50 | break; 51 | case 'top': 52 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}; 53 | break; 54 | case 'left': 55 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}; 56 | break; 57 | case 'right': 58 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}; 59 | break; 60 | 61 | // extend placements (top) 62 | case 'topLeft': 63 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .25)}; 64 | break; 65 | case 'topRight': 66 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .75)}; 67 | break; 68 | 69 | // extend placements (right) 70 | case 'rightTop': 71 | tp = {top: pos.top + pos.height / 2 - (actualHeight *.25), left: pos.left + pos.width}; 72 | break; 73 | case 'rightBottom': 74 | tp = {top: pos.top + pos.height / 2 - (actualHeight * .75), left: pos.left + pos.width}; 75 | break; 76 | 77 | // extend placements (bottom) 78 | case 'bottomLeft': 79 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .25)}; 80 | break; 81 | case 'bottomRight': 82 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .75)}; 83 | break; 84 | 85 | // extend placements (left) 86 | case 'leftTop': 87 | tp = {top: pos.top + pos.height / 2 - (actualHeight *.25), left: pos.left - actualWidth}; 88 | break; 89 | case 'leftBottom': 90 | tp = {top: pos.top + pos.height / 2 - (actualHeight * .75), left: pos.left - actualWidth}; 91 | break; 92 | 93 | } 94 | 95 | $tip 96 | .css(tp) 97 | .addClass(placement) 98 | .addClass('in'); 99 | } 100 | } 101 | }); 102 | 103 | $.fn.popover = $.extend(function (option) { 104 | return this.each(function () { 105 | var $this = $(this) 106 | , data = $this.data('popover') 107 | , options = typeof option == 'object' && option; 108 | if (!data) $this.data('popover', (data = new Popover(this, options))); 109 | if (typeof option == 'string') data[option](); 110 | }); 111 | }, _super); 112 | 113 | // this plugin uses styles stored in a separate file. 114 | $(document).find('script').each(function(index, script){ 115 | if (script.src.indexOf('popover-extra-placements.js') != -1) { 116 | $('head').append(''); 117 | } else if (script.src.indexOf('popover-extra-placements.min.js') != -1) { 118 | $('head').append(''); 119 | } 120 | }); 121 | })(jQuery); -------------------------------------------------------------------------------- /example/bootstrap/js/plugins/popover-extra-placements/popover-extra-placements.js: -------------------------------------------------------------------------------- 1 | 2 | (function($) { 3 | "use strict"; // jshint;_; 4 | 5 | // save the original plugin function object 6 | var _super = $.fn.popover; 7 | 8 | // create a new constructor 9 | var Popover = function(element, options) { 10 | _super.Constructor.apply(this, arguments); 11 | }; 12 | 13 | // extend prototypes and create a super function 14 | Popover.prototype = $.extend({}, _super.Constructor.prototype, { 15 | constructor: Popover, 16 | _super: function() { 17 | var args = $.makeArray(arguments); 18 | _super.Constructor.prototype[args.shift()].apply(this, args); 19 | }, 20 | show: function() { 21 | var $tip, inside, pos, actualWidth, actualHeight, placement, tp; 22 | 23 | if (this.hasContent && this.enabled) { 24 | $tip = this.tip(); 25 | this.setContent(); 26 | 27 | if (this.options.animation) { 28 | $tip.addClass('fade'); 29 | } 30 | 31 | placement = typeof this.options.placement == 'function' ? 32 | this.options.placement.call(this, $tip[0], this.$element[0]) : 33 | this.options.placement; 34 | 35 | inside = /in/.test(placement); 36 | 37 | $tip 38 | .remove() 39 | .css({ top: 0, left: 0, display: 'block' }) 40 | .appendTo(inside ? this.$element : document.body); 41 | 42 | pos = this.getPosition(inside); 43 | 44 | actualWidth = $tip[0].offsetWidth; 45 | actualHeight = $tip[0].offsetHeight; 46 | 47 | switch (inside ? placement.split(' ')[1] : placement) { 48 | case 'bottom': 49 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}; 50 | break; 51 | case 'top': 52 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}; 53 | break; 54 | case 'left': 55 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}; 56 | break; 57 | case 'right': 58 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}; 59 | break; 60 | 61 | // extend placements (top) 62 | case 'topLeft': 63 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .25)}; 64 | break; 65 | case 'topRight': 66 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .75)}; 67 | break; 68 | 69 | // extend placements (right) 70 | case 'rightTop': 71 | tp = {top: pos.top + pos.height / 2 - (actualHeight *.25), left: pos.left + pos.width}; 72 | break; 73 | case 'rightBottom': 74 | tp = {top: pos.top + pos.height / 2 - (actualHeight * .75), left: pos.left + pos.width}; 75 | break; 76 | 77 | // extend placements (bottom) 78 | case 'bottomLeft': 79 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .25)}; 80 | break; 81 | case 'bottomRight': 82 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .75)}; 83 | break; 84 | 85 | // extend placements (left) 86 | case 'leftTop': 87 | tp = {top: pos.top + pos.height / 2 - (actualHeight *.25), left: pos.left - actualWidth}; 88 | break; 89 | case 'leftBottom': 90 | tp = {top: pos.top + pos.height / 2 - (actualHeight * .75), left: pos.left - actualWidth}; 91 | break; 92 | 93 | } 94 | 95 | $tip 96 | .css(tp) 97 | .addClass(placement) 98 | .addClass('in'); 99 | } 100 | } 101 | }); 102 | 103 | $.fn.popover = $.extend(function (option) { 104 | return this.each(function () { 105 | var $this = $(this) 106 | , data = $this.data('popover') 107 | , options = typeof option == 'object' && option; 108 | if (!data) $this.data('popover', (data = new Popover(this, options))); 109 | if (typeof option == 'string') data[option](); 110 | }); 111 | }, _super); 112 | 113 | // this plugin uses styles stored in a separate file. 114 | $(document).find('script').each(function(index, script){ 115 | if (script.src.indexOf('popover-extra-placements.js') != -1) { 116 | $('head').append(''); 117 | } else if (script.src.indexOf('popover-extra-placements.min.js') != -1) { 118 | $('head').append(''); 119 | } 120 | }); 121 | })(jQuery); -------------------------------------------------------------------------------- /source/popover-extra-placements.css: -------------------------------------------------------------------------------- 1 | /* =================================================== 2 | * popover-extra-placements.css v0.1 3 | * http://twitter.github.com/bootstrap-popover-extra-placements 4 | * =================================================== 5 | * Copyright 2012 Daniel Kleehammer 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================== */ 19 | 20 | 21 | /************************* 22 | * Top Positions 23 | *************************/ 24 | 25 | /** Top Left **/ 26 | .popover.topLeft { 27 | margin-top: -10px; 28 | } 29 | 30 | .popover.topLeft .arrow { 31 | bottom: -11px; 32 | left: 20%; 33 | margin-left: -11px; 34 | border-top-color: #999999; 35 | border-top-color: rgba(0, 0, 0, 0.25); 36 | border-bottom-width: 0; 37 | } 38 | 39 | .popover.topLeft .arrow:after { 40 | bottom: 1px; 41 | margin-left: -10px; 42 | border-top-color: #ffffff; 43 | border-bottom-width: 0; 44 | content: " "; 45 | } 46 | 47 | /** Top Right **/ 48 | .popover.topRight { 49 | margin-top: -10px; 50 | } 51 | 52 | .popover.topRight .arrow { 53 | bottom: -11px; 54 | left: 80%; 55 | margin-left: -11px; 56 | border-top-color: #999999; 57 | border-top-color: rgba(0, 0, 0, 0.25); 58 | border-bottom-width: 0; 59 | } 60 | 61 | .popover.topRight .arrow:after { 62 | bottom: 1px; 63 | margin-left: -10px; 64 | border-top-color: #ffffff; 65 | border-bottom-width: 0; 66 | content: " "; 67 | } 68 | 69 | /************************* 70 | * Right Positions 71 | *************************/ 72 | 73 | /** Right Top **/ 74 | .popover.rightTop { 75 | margin-left: 10px; 76 | } 77 | 78 | .popover.rightTop .arrow { 79 | top: 20%; 80 | left: -11px; 81 | margin-top: -11px; 82 | border-right-color: #999999; 83 | border-right-color: rgba(0, 0, 0, 0.25); 84 | border-left-width: 0; 85 | } 86 | 87 | .popover.rightTop .arrow:after { 88 | bottom: -10px; 89 | left: 1px; 90 | border-right-color: #ffffff; 91 | border-left-width: 0; 92 | content: " "; 93 | } 94 | 95 | /** Right Bottom **/ 96 | .popover.rightBottom { 97 | margin-left: 10px; 98 | } 99 | 100 | .popover.rightBottom .arrow { 101 | top: 80%; 102 | left: -11px; 103 | margin-top: -11px; 104 | border-right-color: #999999; 105 | border-right-color: rgba(0, 0, 0, 0.25); 106 | border-left-width: 0; 107 | } 108 | 109 | .popover.rightBottom .arrow:after { 110 | bottom: -10px; 111 | left: 1px; 112 | border-right-color: #ffffff; 113 | border-left-width: 0; 114 | content: " "; 115 | } 116 | 117 | /************************* 118 | * Bottom Positions 119 | *************************/ 120 | 121 | /** Bottom Left **/ 122 | .popover.bottomLeft { 123 | margin-top: 10px; 124 | } 125 | 126 | .popover.bottomLeft .arrow { 127 | top: -11px; 128 | left: 20%; 129 | margin-left: -11px; 130 | border-bottom-color: #999999; 131 | border-bottom-color: rgba(0, 0, 0, 0.25); 132 | border-top-width: 0; 133 | } 134 | 135 | .popover.bottomLeft .arrow:after { 136 | top: 1px; 137 | margin-left: -10px; 138 | border-bottom-color: #ffffff; 139 | border-top-width: 0; 140 | content: " "; 141 | } 142 | 143 | /** Bottom Right **/ 144 | .popover.bottomRight { 145 | margin-top: 10px; 146 | } 147 | 148 | .popover.bottomRight .arrow { 149 | top: -11px; 150 | left: 80%; 151 | margin-left: -11px; 152 | border-bottom-color: #999999; 153 | border-bottom-color: rgba(0, 0, 0, 0.25); 154 | border-top-width: 0; 155 | } 156 | 157 | .popover.bottomRight .arrow:after { 158 | top: 1px; 159 | margin-left: -10px; 160 | border-bottom-color: #ffffff; 161 | border-top-width: 0; 162 | content: " "; 163 | } 164 | 165 | /************************* 166 | * Left Positions 167 | *************************/ 168 | 169 | /** Left Top **/ 170 | .popover.leftTop { 171 | margin-left: -10px; 172 | } 173 | 174 | .popover.leftTop .arrow { 175 | top: 20%; 176 | right: -11px; 177 | margin-top: -11px; 178 | border-left-color: #999999; 179 | border-left-color: rgba(0, 0, 0, 0.25); 180 | border-right-width: 0; 181 | } 182 | 183 | .popover.leftTop .arrow:after { 184 | right: 1px; 185 | bottom: -10px; 186 | border-left-color: #ffffff; 187 | border-right-width: 0; 188 | content: " "; 189 | } 190 | 191 | 192 | /** Left Bottom **/ 193 | .popover.leftBottom { 194 | margin-left: -10px; 195 | } 196 | 197 | .popover.leftBottom .arrow { 198 | top: 80%; 199 | right: -11px; 200 | margin-top: -11px; 201 | border-left-color: #999999; 202 | border-left-color: rgba(0, 0, 0, 0.25); 203 | border-right-width: 0; 204 | } 205 | 206 | .popover.leftBottom .arrow:after { 207 | right: 1px; 208 | bottom: -10px; 209 | border-left-color: #ffffff; 210 | border-right-width: 0; 211 | content: " "; 212 | } -------------------------------------------------------------------------------- /example/js/libs/jquery/plugins/jquery.tmpl.min.js: -------------------------------------------------------------------------------- 1 | (function(a){var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,b={},f={},e,p={key:0,data:{}},h=0,c=0,l=[];function g(e,d,g,i){var c={data:i||(d?d.data:{}),_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t};e&&a.extend(c,e,{nodes:[],parent:d});if(g){c.tmpl=g;c._ctnt=c._ctnt||c.tmpl(a,c);c.key=++h;(l.length?f:b)[h]=c}return c}a.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(f,d){a.fn[f]=function(n){var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;e=b||{};if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){i[d](this[0]);g=this}else{for(h=0,m=i.length;h0?this.clone(true):this).get();a.fn[d].apply(a(i[h]),k);g=g.concat(k)}c=0;g=this.pushStack(g,f,i.selector)}l=e;e=null;a.tmpl.complete(l);return g}});a.fn.extend({tmpl:function(d,c,b){return a.tmpl(this[0],d,c,b)},tmplItem:function(){return a.tmplItem(this[0])},template:function(b){return a.template(b,this[0])},domManip:function(d,l,j){if(d[0]&&d[0].nodeType){var f=a.makeArray(arguments),g=d.length,i=0,h;while(i1)f[0]=[a.makeArray(d)];if(h&&c)f[2]=function(b){a.tmpl.afterManip(this,b,j)};r.apply(this,f)}else r.apply(this,arguments);c=0;!e&&a.tmpl.complete(b);return this}});a.extend({tmpl:function(d,h,e,c){var j,k=!c;if(k){c=p;d=a.template[d]||a.template(null,d);f={}}else if(!d){d=c.tmpl;b[c.key]=c;c.nodes=[];c.wrapped&&n(c,c.wrapped);return a(i(c,null,c.tmpl(a,c)))}if(!d)return[];if(typeof h==="function")h=h.call(c||{});e&&e.wrapped&&n(e,e.wrapped);j=a.isArray(h)?a.map(h,function(a){return a?g(e,c,d,a):null}):[g(e,c,d,h)];return k?a(i(c,null,j)):j},tmplItem:function(b){var c;if(b instanceof a)b=b[0];while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));return c||p},template:function(c,b){if(b){if(typeof b==="string")b=o(b);else if(b instanceof a)b=b[0]||{};if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));return typeof c==="string"?(a.template[c]=b):b}return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null},encode:function(a){return(""+a).split("<").join("<").split(">").join(">").split('"').join(""").split("'").join("'")}});a.extend(a.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){_=_.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(_,$1,$2);_=[];",close:"call=$item.calls();_=call._.concat($item.wrap(call,_));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){_.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){_.push($.encode($1a));}"},"!":{open:""}},complete:function(){b={}},afterManip:function(f,b,d){var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];d.call(f,b);m(e);c++}});function i(e,g,f){var b,c=f?a.map(f,function(a){return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:i(a,e,a._ctnt)}):e;if(g)return c;c=c.join("");c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){b=a(e).get();m(b);if(c)b=j(c).concat(b);if(d)b=b.concat(j(d))});return b?b:j(c)}function j(c){var b=document.createElement("div");b.innerHTML=c;return a.makeArray(b.childNodes)}function o(b){return new Function("jQuery","$item","var $=jQuery,call,_=[],$data=$item.data;with($data){_.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(m,l,j,d,b,c,e){var i=a.tmpl.tag[j],h,f,g;if(!i)throw"Template command not found: "+j;h=i._default||[];if(c&&!/\w$/.test(b)){b+=c;c=""}if(b){b=k(b);e=e?","+k(e)+")":c?")":"";f=c?b.indexOf(".")>-1?b+c:"("+b+").call($item"+e:b;g=c?f:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}else g=f=h.$1||"null";d=k(d);return"');"+i[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(g).split("$1").join(f).split("$2").join(d?d.replace(/\s*([^\(]+)\s*(\((.*?)\))?/g,function(d,c,b,a){a=a?","+a+")":b?")":"";return a?"("+c+").call($item"+a:d}):h.$2||"")+"_.push('"})+"');}return _;")}function n(c,b){c._wrap=i(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}function k(a){return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function s(b){var a=document.createElement("div");a.appendChild(b.cloneNode(true));return a.innerHTML}function m(o){var n="_"+c,k,j,l={},e,p,i;for(e=0,p=o.length;e=0;i--)m(j[i]);m(k)}function m(j){var p,i=j,k,e,m;if(m=j.getAttribute(d)){while(i.parentNode&&(i=i.parentNode).nodeType===1&&!(p=i.getAttribute(d)));if(p!==m){i=i.parentNode?i.nodeType===11?0:i.getAttribute(d)||0:0;if(!(e=b[m])){e=f[m];e=g(e,b[i]||f[i],null,true);e.key=++h;b[h]=e}c&&o(m)}j.removeAttribute(d)}else if(c&&(e=a.data(j,"tmplItem"))){o(e.key);b[e.key]=e;i=a.data(j.parentNode,"tmplItem");i=i?i.key:0}if(e){k=e;while(k&&k.key!=i){k.nodes.push(j);k=k.parent}delete e._ctnt;delete e._wrap;a.data(j,"tmplItem",e)}function o(a){a=a+n;e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent,null,true)}}}function u(a,d,c,b){if(!a)return l.pop();l.push({_:a,tmpl:d,item:this,data:c,options:b})}function w(d,c,b){return a.tmpl(a.template(d),c,b,this)}function x(b,d){var c=b.options||{};c.wrapped=d;return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}function v(d,c){var b=this._wrap;return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){return c?a.innerText||a.textContent:a.outerHTML||s(a)})}function t(){var b=this.nodes;a.tmpl(null,null,null,this).insertBefore(b[0]);a(b).remove()}})(jQuery) -------------------------------------------------------------------------------- /source/popover-extra-placements.js: -------------------------------------------------------------------------------- 1 | /* =================================================== 2 | * popover-extra-placements.js v0.1 3 | * http://twitter.github.com/bootstrap-popover-extra-placements 4 | * =================================================== 5 | * Copyright 2012 Daniel Kleehammer 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================== */ 19 | 20 | 21 | (function($) { 22 | "use strict"; // jshint;_; 23 | 24 | // save the original plugin function object 25 | var _super = $.fn.popover; 26 | 27 | // create a new constructor 28 | var Popover = function(element, options) { 29 | _super.Constructor.apply(this, arguments); 30 | }; 31 | 32 | // extend prototypes and create a super function 33 | Popover.prototype = $.extend({}, _super.Constructor.prototype, { 34 | constructor: Popover, 35 | _super: function() { 36 | var args = $.makeArray(arguments); 37 | _super.Constructor.prototype[args.shift()].apply(this, args); 38 | }, 39 | show: function() { 40 | var $tip, inside, pos, actualWidth, actualHeight, placement, tp, e = $.Event('show'); 41 | 42 | if (this.hasContent && this.enabled) { 43 | this.$element.trigger(e); 44 | $tip = this.tip(); 45 | this.setContent(); 46 | 47 | if (this.options.animation) { 48 | $tip.addClass('fade'); 49 | } 50 | 51 | placement = typeof this.options.placement == 'function' ? 52 | this.options.placement.call(this, $tip[0], this.$element[0]) : 53 | this.options.placement; 54 | 55 | inside = /in/.test(placement); 56 | 57 | $tip 58 | .remove() 59 | .css({ top: 0, left: 0, display: 'block' }) 60 | .appendTo(inside ? this.$element : document.body); 61 | 62 | pos = this.getPosition(inside); 63 | 64 | actualWidth = $tip[0].offsetWidth; 65 | actualHeight = $tip[0].offsetHeight; 66 | 67 | switch (inside ? placement.split(' ')[1] : placement) { 68 | case 'bottom': 69 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}; 70 | break; 71 | case 'top': 72 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}; 73 | break; 74 | case 'left': 75 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}; 76 | break; 77 | case 'right': 78 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}; 79 | break; 80 | 81 | // extend placements (top) 82 | case 'topLeft': 83 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .20)}; 84 | break; 85 | case 'topRight': 86 | tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - (actualWidth * .80)}; 87 | break; 88 | 89 | // extend placements (right) 90 | case 'rightTop': 91 | tp = {top: pos.top + pos.height / 2 - (actualHeight *.20), left: pos.left + pos.width}; 92 | break; 93 | case 'rightBottom': 94 | tp = {top: pos.top + pos.height / 2 - (actualHeight * .80), left: pos.left + pos.width}; 95 | break; 96 | 97 | // extend placements (bottom) 98 | case 'bottomLeft': 99 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .20)}; 100 | break; 101 | case 'bottomRight': 102 | tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - (actualWidth * .80)}; 103 | break; 104 | 105 | // extend placements (left) 106 | case 'leftTop': 107 | tp = {top: pos.top + pos.height / 2 - (actualHeight *.20), left: pos.left - actualWidth}; 108 | break; 109 | case 'leftBottom': 110 | tp = {top: pos.top + pos.height / 2 - (actualHeight * .80), left: pos.left - actualWidth}; 111 | break; 112 | 113 | } 114 | 115 | $tip 116 | .css(tp) 117 | .addClass(placement) 118 | .addClass('in'); 119 | 120 | this.$element.trigger('shown'); 121 | } 122 | } 123 | }); 124 | 125 | $.fn.popover = $.extend(function (option) { 126 | return this.each(function () { 127 | var $this = $(this) 128 | , data = $this.data('bs.popover') 129 | , options = typeof option == 'object' && option; 130 | if (!data) $this.data('bs.popover', (data = new Popover(this, options))); 131 | if (typeof option == 'string') data[option](); 132 | }); 133 | }, _super); 134 | 135 | // this plugin uses styles stored in a separate file. 136 | $(document).find('script').each(function(index, script){ 137 | if (script.src.indexOf('popover-extra-placements.js') != -1) { 138 | $('head').append(''); 139 | } else if (script.src.indexOf('popover-extra-placements.min.js') != -1) { 140 | $('head').append(''); 141 | } 142 | }); 143 | })(jQuery); 144 | -------------------------------------------------------------------------------- /source/popover-extra-placements.less: -------------------------------------------------------------------------------- 1 | /* =================================================== 2 | * popover-extra-placements.css v0.1 3 | * http://twitter.github.com/bootstrap-popover-extra-placements 4 | * =================================================== 5 | * Copyright 2012 Daniel Kleehammer 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================== */ 19 | 20 | 21 | /** Global variables **/ 22 | @popover_margin: 10px; 23 | @arrow_border: 10px; 24 | @arrow_color: #fff; 25 | @arrow_after_border: 11px; 26 | @arrow_after_color: rgba(0, 0, 0, 0.25); 27 | 28 | 29 | 30 | 31 | /************************* 32 | * Top Positions 33 | *************************/ 34 | 35 | /** Top Left **/ 36 | .popover.topLeft { 37 | margin-top: -@popover_margin; 38 | } 39 | .popover.topLeft { 40 | .arrow { 41 | bottom: -@popover_margin; 42 | left: 25%; 43 | margin-left: -10px; 44 | border-width: @arrow_border @arrow_border 0; 45 | border-top-color: @arrow_color; 46 | } 47 | .arrow:after { 48 | border-width: @arrow_after_border @arrow_after_border 0; 49 | border-top-color: @arrow_after_color; 50 | bottom: -1px; 51 | left: -@arrow_after_border; 52 | } 53 | } 54 | 55 | /** Top Right **/ 56 | .popover.topRight { 57 | margin-top: -@popover_margin; 58 | .arrow { 59 | bottom: -@popover_margin; 60 | left: 75%; 61 | margin-left: -10px; 62 | border-width: @arrow_border @arrow_border 0; 63 | border-top-color: @arrow_color; 64 | } 65 | .arrow:after { 66 | border-width: @arrow_after_border @arrow_after_border 0; 67 | border-top-color: @arrow_after_color; 68 | bottom: -1px; 69 | left: -@arrow_after_border; 70 | } 71 | } 72 | 73 | /************************* 74 | * Right Positions 75 | *************************/ 76 | 77 | /** Right Top **/ 78 | .popover.rightTop { 79 | margin-left: @popover_margin; 80 | .arrow { 81 | top: 25%; 82 | left: -@popover_margin; 83 | margin-top: -@popover_margin; 84 | border-width: @arrow_border @arrow_border @arrow_border 0; 85 | border-right-color: @arrow_color; 86 | } 87 | .arrow:after { 88 | border-width: @arrow_after_border @arrow_after_border @arrow_after_border 0; 89 | border-right-color: @arrow_after_color; 90 | bottom: -@arrow_after_border; 91 | left: -1px; 92 | } 93 | } 94 | .popover.rightBottom { 95 | margin-left: @popover_margin; 96 | .arrow { 97 | top: 75%; 98 | left: -@popover_margin; 99 | margin-top: -@popover_margin; 100 | border-width: @arrow_border @arrow_border @arrow_border 0; 101 | border-right-color: @arrow_color; 102 | } 103 | .arrow:after { 104 | border-width: @arrow_after_border @arrow_after_border @arrow_after_border 0; 105 | border-right-color: @arrow_after_color; 106 | bottom: -@arrow_after_border; 107 | left: -1px; 108 | } 109 | } 110 | 111 | /************************* 112 | * Bottom Positions 113 | *************************/ 114 | 115 | /** Bottom Left **/ 116 | .popover.bottomLeft { 117 | margin-top: @popover_margin; 118 | .arrow { 119 | top: -@popover_margin; 120 | left: 25%; 121 | margin-left: -@popover_margin; 122 | border-width: 0 @arrow_border @arrow_border; 123 | border-bottom-color: @arrow_color; 124 | } 125 | .arrow:after { 126 | border-width: 0 @arrow_after_border @arrow_after_border; 127 | border-bottom-color: @arrow_after_color; 128 | top: -1px; 129 | left: -@arrow_after_border; 130 | } 131 | } 132 | 133 | /** Bottom Right **/ 134 | .popover.bottomRight { 135 | margin-top: @popover_margin; 136 | .arrow { 137 | top: -@popover_margin; 138 | left: 75%; 139 | margin-left: -@popover_margin; 140 | border-width: 0 @arrow_border @arrow_border; 141 | border-bottom-color: @arrow_color; 142 | } 143 | .arrow:after { 144 | border-width: 0 @arrow_after_border @arrow_after_border; 145 | border-bottom-color: @arrow_after_color; 146 | top: -1px; 147 | left: -@arrow_after_border; 148 | } 149 | } 150 | 151 | /************************* 152 | * Left Positions 153 | *************************/ 154 | 155 | /** Left Top **/ 156 | .popover.leftTop { 157 | margin-left: -@popover_margin; 158 | .arrow { 159 | top: 25%; 160 | right: -@popover_margin; 161 | margin-top: -@popover_margin; 162 | border-width: @arrow_border 0 @arrow_border @arrow_border; 163 | border-left-color: @arrow_color; 164 | } 165 | .arrow:after { 166 | border-width: @arrow_after_border 0 @arrow_after_border @arrow_after_border; 167 | border-left-color: @arrow_after_color; 168 | bottom: -@arrow_after_border; 169 | right: -1px; 170 | } 171 | } 172 | 173 | /** Left Bottom **/ 174 | .popover.leftBottom { 175 | margin-left: -@popover_margin; 176 | .arrow { 177 | top: 75%; 178 | right: -@popover_margin; 179 | margin-top: -@popover_margin; 180 | border-width: @arrow_border 0 @arrow_border @arrow_border; 181 | border-left-color: @arrow_color; 182 | } 183 | .arrow:after { 184 | border-width: @arrow_after_border 0 @arrow_after_border @arrow_after_border; 185 | border-left-color: @arrow_after_color; 186 | bottom: -@arrow_after_border; 187 | right: -1px; 188 | } 189 | } 190 | 191 | -------------------------------------------------------------------------------- /example/bootstrap/css/bootstrap-responsive.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Responsive v2.1.1 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.hidden{display:none;visibility:hidden}.visible-phone{display:none!important}.visible-tablet{display:none!important}.hidden-desktop{display:none!important}.visible-desktop{display:inherit!important}@media(min-width:768px) and (max-width:979px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-tablet{display:inherit!important}.hidden-tablet{display:none!important}}@media(max-width:767px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-phone{display:inherit!important}.hidden-phone{display:none!important}}@media(min-width:1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:30px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span12{width:1170px}.span11{width:1070px}.span10{width:970px}.span9{width:870px}.span8{width:770px}.span7{width:670px}.span6{width:570px}.span5{width:470px}.span4{width:370px}.span3{width:270px}.span2{width:170px}.span1{width:70px}.offset12{margin-left:1230px}.offset11{margin-left:1130px}.offset10{margin-left:1030px}.offset9{margin-left:930px}.offset8{margin-left:830px}.offset7{margin-left:730px}.offset6{margin-left:630px}.offset5{margin-left:530px}.offset4{margin-left:430px}.offset3{margin-left:330px}.offset2{margin-left:230px}.offset1{margin-left:130px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%}.row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%}.row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%}.row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%}.row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%}.row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%}.row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%}.row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%}.row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%}.row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%}.row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%}.row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%}.row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%}.row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%}.row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%}.row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%}.row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%}.row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%}.row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%}.row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%}.row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%}.row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%}.row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%}.row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%}.row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%}.row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%}.row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%}.row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%}.row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%}.row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%}.row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%}.row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%}.row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%}.row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%}.row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:30px}input.span12,textarea.span12,.uneditable-input.span12{width:1156px}input.span11,textarea.span11,.uneditable-input.span11{width:1056px}input.span10,textarea.span10,.uneditable-input.span10{width:956px}input.span9,textarea.span9,.uneditable-input.span9{width:856px}input.span8,textarea.span8,.uneditable-input.span8{width:756px}input.span7,textarea.span7,.uneditable-input.span7{width:656px}input.span6,textarea.span6,.uneditable-input.span6{width:556px}input.span5,textarea.span5,.uneditable-input.span5{width:456px}input.span4,textarea.span4,.uneditable-input.span4{width:356px}input.span3,textarea.span3,.uneditable-input.span3{width:256px}input.span2,textarea.span2,.uneditable-input.span2{width:156px}input.span1,textarea.span1,.uneditable-input.span1{width:56px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media(min-width:768px) and (max-width:979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span12{width:724px}.span11{width:662px}.span10{width:600px}.span9{width:538px}.span8{width:476px}.span7{width:414px}.span6{width:352px}.span5{width:290px}.span4{width:228px}.span3{width:166px}.span2{width:104px}.span1{width:42px}.offset12{margin-left:764px}.offset11{margin-left:702px}.offset10{margin-left:640px}.offset9{margin-left:578px}.offset8{margin-left:516px}.offset7{margin-left:454px}.offset6{margin-left:392px}.offset5{margin-left:330px}.offset4{margin-left:268px}.offset3{margin-left:206px}.offset2{margin-left:144px}.offset1{margin-left:82px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.7624309392265194%;*margin-left:2.709239449864817%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.43646408839778%;*width:91.38327259903608%}.row-fluid .span10{width:82.87292817679558%;*width:82.81973668743387%}.row-fluid .span9{width:74.30939226519337%;*width:74.25620077583166%}.row-fluid .span8{width:65.74585635359117%;*width:65.69266486422946%}.row-fluid .span7{width:57.18232044198895%;*width:57.12912895262725%}.row-fluid .span6{width:48.61878453038674%;*width:48.56559304102504%}.row-fluid .span5{width:40.05524861878453%;*width:40.00205712942283%}.row-fluid .span4{width:31.491712707182323%;*width:31.43852121782062%}.row-fluid .span3{width:22.92817679558011%;*width:22.87498530621841%}.row-fluid .span2{width:14.3646408839779%;*width:14.311449394616199%}.row-fluid .span1{width:5.801104972375691%;*width:5.747913483013988%}.row-fluid .offset12{margin-left:105.52486187845304%;*margin-left:105.41847889972962%}.row-fluid .offset12:first-child{margin-left:102.76243093922652%;*margin-left:102.6560479605031%}.row-fluid .offset11{margin-left:96.96132596685082%;*margin-left:96.8549429881274%}.row-fluid .offset11:first-child{margin-left:94.1988950276243%;*margin-left:94.09251204890089%}.row-fluid .offset10{margin-left:88.39779005524862%;*margin-left:88.2914070765252%}.row-fluid .offset10:first-child{margin-left:85.6353591160221%;*margin-left:85.52897613729868%}.row-fluid .offset9{margin-left:79.8342541436464%;*margin-left:79.72787116492299%}.row-fluid .offset9:first-child{margin-left:77.07182320441989%;*margin-left:76.96544022569647%}.row-fluid .offset8{margin-left:71.2707182320442%;*margin-left:71.16433525332079%}.row-fluid .offset8:first-child{margin-left:68.50828729281768%;*margin-left:68.40190431409427%}.row-fluid .offset7{margin-left:62.70718232044199%;*margin-left:62.600799341718584%}.row-fluid .offset7:first-child{margin-left:59.94475138121547%;*margin-left:59.838368402492065%}.row-fluid .offset6{margin-left:54.14364640883978%;*margin-left:54.037263430116376%}.row-fluid .offset6:first-child{margin-left:51.38121546961326%;*margin-left:51.27483249088986%}.row-fluid .offset5{margin-left:45.58011049723757%;*margin-left:45.47372751851417%}.row-fluid .offset5:first-child{margin-left:42.81767955801105%;*margin-left:42.71129657928765%}.row-fluid .offset4{margin-left:37.01657458563536%;*margin-left:36.91019160691196%}.row-fluid .offset4:first-child{margin-left:34.25414364640884%;*margin-left:34.14776066768544%}.row-fluid .offset3{margin-left:28.45303867403315%;*margin-left:28.346655695309746%}.row-fluid .offset3:first-child{margin-left:25.69060773480663%;*margin-left:25.584224756083227%}.row-fluid .offset2{margin-left:19.88950276243094%;*margin-left:19.783119783707537%}.row-fluid .offset2:first-child{margin-left:17.12707182320442%;*margin-left:17.02068884448102%}.row-fluid .offset1{margin-left:11.32596685082873%;*margin-left:11.219583872105325%}.row-fluid .offset1:first-child{margin-left:8.56353591160221%;*margin-left:8.457152932878806%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:710px}input.span11,textarea.span11,.uneditable-input.span11{width:648px}input.span10,textarea.span10,.uneditable-input.span10{width:586px}input.span9,textarea.span9,.uneditable-input.span9{width:524px}input.span8,textarea.span8,.uneditable-input.span8{width:462px}input.span7,textarea.span7,.uneditable-input.span7{width:400px}input.span6,textarea.span6,.uneditable-input.span6{width:338px}input.span5,textarea.span5,.uneditable-input.span5{width:276px}input.span4,textarea.span4,.uneditable-input.span4{width:214px}input.span3,textarea.span3,.uneditable-input.span3{width:152px}input.span2,textarea.span2,.uneditable-input.span2{width:90px}input.span1,textarea.span1,.uneditable-input.span1{width:28px}}@media(max-width:767px){body{padding-right:20px;padding-left:20px}.navbar-fixed-top,.navbar-fixed-bottom,.navbar-static-top{margin-right:-20px;margin-left:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;width:auto;clear:none;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}.thumbnails>li{float:none;margin-left:0}[class*="span"],.row-fluid [class*="span"]{display:block;float:none;width:100%;margin-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.span12,.row-fluid .span12{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}.controls-row [class*="span"]+[class*="span"]{margin-left:0}.modal{position:fixed;top:20px;right:20px;left:20px;width:auto;margin:0}.modal.fade.in{top:auto}}@media(max-width:480px){.nav-collapse{-webkit-transform:translate3d(0,0,0)}.page-header h1 small{display:block;line-height:20px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.modal{top:10px;right:10px;left:10px}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media(max-width:979px){body{padding-top:0}.navbar-fixed-top,.navbar-fixed-bottom{position:static}.navbar-fixed-top{margin-bottom:20px}.navbar-fixed-bottom{margin-top:20px}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-right:10px;padding-left:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 10px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#777;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:9px 15px;font-weight:bold;color:#777;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .dropdown-menu a:hover{background-color:#f2f2f2}.navbar-inverse .nav-collapse .nav>li>a:hover,.navbar-inverse .nav-collapse .dropdown-menu a:hover{background-color:#111}.nav-collapse.in .btn-group{padding:0;margin-top:5px}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;display:block;float:none;max-width:none;padding:0;margin:0 15px;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .nav>li>.dropdown-menu:before,.nav-collapse .nav>li>.dropdown-menu:after{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:10px 15px;margin:10px 0;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)}.navbar-inverse .nav-collapse .navbar-form,.navbar-inverse .nav-collapse .navbar-search{border-top-color:#111;border-bottom-color:#111}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-right:10px;padding-left:10px}}@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}} 10 | -------------------------------------------------------------------------------- /example/bootstrap/js/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Bootstrap.js by @fat & @mdo 3 | * plugins: bootstrap-transition.js, bootstrap-modal.js, bootstrap-dropdown.js, bootstrap-scrollspy.js, bootstrap-tab.js, bootstrap-tooltip.js, bootstrap-popover.js, bootstrap-affix.js, bootstrap-alert.js, bootstrap-button.js, bootstrap-collapse.js, bootstrap-carousel.js, bootstrap-typeahead.js 4 | * Copyright 2012 Twitter, Inc. 5 | * http://www.apache.org/licenses/LICENSE-2.0.txt 6 | */ 7 | !function(a){a(function(){a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){var b=function(b,c){this.options=c,this.$element=a(b).delegate('[data-dismiss="modal"]',"click.dismiss.modal",a.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};b.prototype={constructor:b,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var b=this,c=a.Event("show");this.$element.trigger(c);if(this.isShown||c.isDefaultPrevented())return;a("body").addClass("modal-open"),this.isShown=!0,this.escape(),this.backdrop(function(){var c=a.support.transition&&b.$element.hasClass("fade");b.$element.parent().length||b.$element.appendTo(document.body),b.$element.show(),c&&b.$element[0].offsetWidth,b.$element.addClass("in").attr("aria-hidden",!1).focus(),b.enforceFocus(),c?b.$element.one(a.support.transition.end,function(){b.$element.trigger("shown")}):b.$element.trigger("shown")})},hide:function(b){b&&b.preventDefault();var c=this;b=a.Event("hide"),this.$element.trigger(b);if(!this.isShown||b.isDefaultPrevented())return;this.isShown=!1,a("body").removeClass("modal-open"),this.escape(),a(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),a.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var b=this;a(document).on("focusin.modal",function(a){b.$element[0]!==a.target&&!b.$element.has(a.target).length&&b.$element.focus()})},escape:function(){var a=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(b){b.which==27&&a.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var b=this,c=setTimeout(function(){b.$element.off(a.support.transition.end),b.hideModal()},500);this.$element.one(a.support.transition.end,function(){clearTimeout(c),b.hideModal()})},hideModal:function(a){this.$element.hide().trigger("hidden"),this.backdrop()},removeBackdrop:function(){this.$backdrop.remove(),this.$backdrop=null},backdrop:function(b){var c=this,d=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var e=a.support.transition&&d;this.$backdrop=a('