1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <title>Bootstrap Popover Picker for Twitter Bootstrap 3</title> 6 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 7 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 8 <link href="dist/css/bootstrap-picker.min.css" rel="stylesheet"> 9 <style> 10 footer{ 11 font-style: italic; 12 background:#f7f7f7; 13 padding:60px; 14 text-align: center; 15 margin-top: 60px; 16 } 17 pre{ 18 text-align: left; 19 } 20 .form-control, .form-group{ 21 position: relative; 22 } 23 p.lead{ 24 max-width: 600px; 25 margin:0 auto 20px auto; 26 } 27 div.lead{ 28 margin:30px 0; 29 } 30 a.action-placement{ 31 margin:0 4px 4px 4px; 32 display:inline-block; 33 /*border-bottom: 1px dotted #428BCA;*/ 34 text-decoration: none; 35 } 36 a.action-placement.active{ 37 color:#5CB85C; 38 } 39 .form-group{ 40 text-align: left; 41 margin-bottom: 30px; 42 } 43 .form-group label{ 44 display:block; 45 margin-bottom: 15px; 46 } 47 .lead iframe{ 48 vertical-align: middle; 49 } 50 </style> 51</head> 52<body> 53 <div class="container" style="text-align: center"> 54 <h1 class="page-header">Bootstrap Popover Picker</h1> 55 <p class="lead">Generic jQuery plugin template for building pickers using Bootstrap popovers, fully customizable with a powerful base API.</p> 56 <div class="lead"> 57 <iframe class="inl-bl" src="https://ghbtns.com/github-btn.html?user=mjolnic&repo=bootstrap-popover-picker&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="125" height="30"></iframe> <iframe class="inl-bl" src="https://ghbtns.com/github-btn.html?user=mjolnic&repo=bootstrap-popover-picker&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="125" height="30"></iframe> <a class="btn btn-primary" href="https://github.com/mjolnic/bootstrap-popover-picker/archive/1.0.0.zip"><i class="fa-download fa"></i> Download</a> 58 </div> 59 <p class="lead">Looking for a <a href="http://mjolnic.github.io/fontawesome-iconpicker/">Font Awesome Icon Picker?</a></p> 60 <div class="panel panel-default"> 61 <div class="panel-heading"> 62 <h2 class="panel-title">Demos</h2> 63 </div> 64 <div class="panel-body"> 65 <div class="row"> 66 <div class="col-md-5"> 67 <div class="form-group"> 68 <label>Default</label> <input data-hide-on-select="true" class="form-control pck pck-auto" value="A" type="text"> 69 </div> 70 <div class="form-group"> 71 <label>As a component</label> 72 <div class="input-group"> 73 <input data-hide-on-select="true" class="form-control pck pck-auto" value="B" type="text"> <span class="input-group-addon"></span> 74 </div> 75 </div> 76 <div class="form-group"> 77 <label data-title="Inline picker" data-placement="inline" class="pck pck-auto" data-selected="C">Inline mode, without input:</label> 78 </div> 79 </div> 80 <div class="col-md-7"> 81 <div class="form-group"> 82 <label>With custom options</label> <input class="form-control pck pck-opts" value="" type="text"> 83 </div> 84 <pre class="well"> 85$('.pck-opts').picker({ 86 title: 'With custom options', 87 items: [ 88 'â¥', 'â ', 'â£', 'â¦', 89 'â ', 'âº', 'â¼', 'â«', 90 ], 91 selectedCustomClass: 'label label-success', 92 mustAccept:true, 93 placement:'bottomRight', 94 showFooter:true, 95 templates{ 96 search:false, 97 //... (see the source code of this page) 98 } 99});</pre> 100 <div class="form-group"> 101 <label>Inside dropdowns</label> 102 <div class="btn-group"> 103 <button type="button" class="pck pck-dd btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button> 104 <div class="dropdown-menu"></div> 105 </div> 106 <div class="btn-group"> 107 <button type="button" class="btn btn-primary">Action</button> <button type="button" class="pck pck-dd btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button> 108 <div class="dropdown-menu"></div> 109 </div> 110 <p class="help-block"><br> 111 Note: In dropdowns the placement is controlled by the Bootstrap dropdown plugin</p> 112 </div> 113 </div> 114 </div> 115 </div> 116 <div class="panel-footer"> 117 <button class="btn btn-danger action-destroy">Destroy instances</button> <button class="btn btn-default action-create">Create instances</button> 118 </div> 119 </div> 120 </div> 121 <footer> 122 <h3>Partners</h3> 123 <p>
123<a href="https://geektata.pl/">GeekTata</a> | <a href="https://www.openstackday.pl/">OpenStack Day</a> | <a href="https://polandithub.pl/">Poland IT Hub</a></p> 124 <p><Maybe you?></p> 125 <hr> 126created by Javier Aguilar <a href="/" target="_blank">@mjolnic</a> 127 created by Javier Aguilar <a href="/" target="_blank">@mjolnic</a> 128 </footer> 129
129<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
129 130
130<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
130 131
131<script src="dist/js/bootstrap-picker.js"></script>
131 132
132<script> 133 134 135 $(function() { 136 $('.action-destroy').on('click', function() { 137 $.picker.batch('.pck.picker-element', 'destroy'); 138 }); 139 // Live binding of buttons 140 $(document).on('click', '.action-placement', function(e) { 141 $('.action-placement').removeClass('active'); 142 $(this).addClass('active'); 143 $('.pck-opts').data('picker').updatePlacement($(this).text()); 144 e.preventDefault(); 145 return false; 146 }); 147 $('.action-create').on('click', function() { 148 $('.pck-auto').picker(); 149 $('.pck-dd').each(function() { 150 var $this = $(this); 151 $this.picker({ 152 title: 'Dropdown with picker', 153 container: $(' ~ .dropdown-menu:first', $this) 154 }); 155 }); 156 $('.pck-opts').picker({ 157 title: 'With custom options', 158 items: [ 159 'â¥', 'â ', 'â£', 'â¦', 160 'â ', 'âº', 'â¼', 'â«', 161 ], 162 selectedCustomClass: 'label label-success', 163 mustAccept: true, 164 placement: 'bottomRight', 165 showFooter: true, 166 // note that this is ignored cause we have an accept button: 167 hideOnSelect: true, 168 templates: { 169 search: false, 170 footer: '<div class="popover-footer">' + 171 '<div style="text-align:left; font-size:12px;">Placements: \n\ 172 <a href="#" class=" action-placement">inline</a>\n\ 173 <a href="#" class=" action-placement">topLeftCorner</a>\n\ 174 <a href="#" class=" action-placement">topLeft</a>\n\ 175 <a href="#" class=" action-placement">top</a>\n\ 176 <a href="#" class=" action-placement">topRight</a>\n\ 177 <a href="#" class=" action-placement">topRightCorner</a>\n\ 178 <a href="#" class=" action-placement">rightTop</a>\n\ 179 <a href="#" class=" action-placement">right</a>\n\ 180 <a href="#" class=" action-placement">rightBottom</a>\n\ 181 <a href="#" class=" action-placement">bottomRightCorner</a>\n\ 182 <a href="#" class=" active action-placement">bottomRight</a>\n\ 183 <a href="#" class=" action-placement">bottom</a>\n\ 184 <a href="#" class=" action-placement">bottomLeft</a>\n\ 185 <a href="#" class=" action-placement">bottomLeftCorner</a>\n\ 186 <a href="#" class=" action-placement">leftBottom</a>\n\ 187 <a href="#" class=" action-placement">left</a>\n\ 188 <a href="#" class=" action-placement">leftTop</a>\n\ 189 </div><hr></div>'} 190 }).data('picker').show(); 191 }).trigger('click'); 192 }); 193 </script>
vendor: 1 bytes, line 193
193
194<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"451e5f6e9b7f40e29fcc1df9df403027","r":1,"spa":2}' crossorigin="anonymous"></script>
194 195</body> 196</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.