├── .gitignore ├── .jshintrc ├── .npmignore ├── CONTRIBUTING.md ├── Gruntfile.js ├── HISTORY.md ├── LICENSE.txt ├── README.md ├── ROADMAP.md ├── bower.json ├── demo ├── async-content-another.html ├── async-content.html ├── bootstrap.css ├── bootstrap.js ├── demo.css ├── index-dev.html ├── index-old.html ├── index.html ├── jquery.js ├── mobile.html ├── table-data.json ├── test-auto-bottom.html ├── test-body-height.html ├── test-cache.html ├── test-canvas.html ├── test-container-scroll-fix.html ├── test-container-scroll.html ├── test-container.html ├── test-global-api.html ├── test-issue193.html ├── test-issue195.html ├── test-issue197.html ├── test-issue214.html ├── test-manual-show-bug.html ├── test-svg.html ├── test-wenzhixin-bstable.html ├── test.html └── text.txt ├── dist ├── jquery.webui-popover.css ├── jquery.webui-popover.js ├── jquery.webui-popover.min.css └── jquery.webui-popover.min.js ├── fonts ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff ├── img └── loading.gif ├── node_modules ├── grunt-contrib-cssmin │ └── node_modules │ │ └── .bin │ │ └── cleancss └── grunt │ └── node_modules │ └── .bin │ ├── cake │ ├── coffee │ ├── js-yaml │ ├── nopt │ ├── rimraf │ └── which ├── package.json ├── src ├── jquery.webui-popover.css ├── jquery.webui-popover.js ├── jquery.webui-popover.less └── webui-layout.sublime-workspace └── webui-popover.jquery.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | *.sublime-project 4 | *.sublime-workspace -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "boss": true, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "eqnull": true, 6 | "expr": true, 7 | "immed": true, 8 | "noarg": true, 9 | "onevar": false, 10 | "quotmark": "single", 11 | "smarttabs": true, 12 | "trailing": true, 13 | "unused": true, 14 | "node": true 15 | } 16 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | *.sublime-project 4 | *.sublime-workspace 5 | .npmignore 6 | .jshintrc 7 | bower.json 8 | CONTRIBUTING.md 9 | Gruntfile.js 10 | HISTORY.md 11 | ROADMAP.md 12 | webui-popover.jquery.json 13 | demo 14 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Before sending a pull request remember to follow [jQuery Core Style Guide](http://contribute.jquery.org/style-guide/js/). 4 | 5 | 1. Fork it! 6 | 2. Create your feature branch: `git checkout -b my-new-feature` 7 | 3. Make your changes on the `src` folder, never on the `dist` folder. 8 | 4. Commit your changes: `git commit -m 'Add some feature'` 9 | 5. Push to the branch: `git push origin my-new-feature` 10 | 6. Submit a pull request :D 11 | 12 | #### Have you created a plugin from our boilerplate? 13 | 14 | [Let us know!](https://github.com/jquery-boilerplate/boilerplate/wiki/Sites) It’s interesting to see what features others have come up with. 15 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.initConfig({ 4 | 5 | // Import package manifest 6 | pkg: grunt.file.readJSON("webui-popover.jquery.json"), 7 | 8 | // Banner definitions 9 | meta: { 10 | banner: "/*\n" + 11 | " * <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" + 12 | " * <%= pkg.description %>\n" + 13 | " * <%= pkg.homepage %>\n" + 14 | " *\n" + 15 | " * Made by <%= pkg.author.name %>\n" + 16 | " * Under <%= pkg.licenses[0].type %> License\n" + 17 | " */\n" 18 | }, 19 | 20 | // Concat definitions 21 | concat: { 22 | js: { 23 | src: ["src/jquery.webui-popover.js"], 24 | dest: "dist/jquery.webui-popover.js" 25 | }, 26 | css:{ 27 | src:["src/jquery.webui-popover.css"], 28 | dest:"dist/jquery.webui-popover.css" 29 | }, 30 | options: { 31 | banner: "<%= meta.banner %>" 32 | } 33 | }, 34 | jsbeautifier : { 35 | files : ["src/**/*.js"] 36 | }, 37 | 38 | // Lint definitions 39 | jshint: { 40 | files: ["src/jquery.webui-popover.js"], 41 | options: { 42 | jshintrc: ".jshintrc" 43 | } 44 | }, 45 | 46 | // Minify definitions 47 | uglify: { 48 | my_target: { 49 | src: ["dist/jquery.webui-popover.js"], 50 | dest: "dist/jquery.webui-popover.min.js" 51 | }, 52 | options: { 53 | banner: "<%= meta.banner %>" 54 | } 55 | }, 56 | less: { 57 | development: { 58 | options: { 59 | paths: ["src"] 60 | }, 61 | files: { 62 | "src/jquery.webui-popover.css": "src/jquery.webui-popover.less" 63 | } 64 | }, 65 | production: { 66 | options: { 67 | paths: ["dist"], 68 | cleancss: true 69 | }, 70 | files: { 71 | "dist/jquery.webui-popover.min.css": "src/jquery.webui-popover.less" 72 | } 73 | } 74 | }, 75 | cssmin: { 76 | options: { 77 | keepSpecialComments: 0 78 | }, 79 | compress: { 80 | files: { 81 | 'dist/jquery.webui-popover.min.css': ["dist/jquery.webui-popover.css"] 82 | } 83 | } 84 | }, 85 | 86 | // CoffeeScript compilation 87 | coffee: { 88 | compile: { 89 | files: { 90 | "dist/jquery.webui-popover.js": "src/jquery.webui-popover.coffee" 91 | } 92 | } 93 | } 94 | 95 | }); 96 | 97 | grunt.loadNpmTasks("grunt-jsbeautifier"); 98 | grunt.loadNpmTasks("grunt-contrib-concat"); 99 | grunt.loadNpmTasks("grunt-contrib-jshint"); 100 | grunt.loadNpmTasks("grunt-contrib-uglify"); 101 | grunt.loadNpmTasks('grunt-contrib-less'); 102 | grunt.loadNpmTasks("grunt-contrib-cssmin"); 103 | // grunt.loadNpmTasks("grunt-contrib-coffee"); 104 | 105 | grunt.registerTask("default", ["jsbeautifier","jshint","less","concat", "uglify"]); 106 | grunt.registerTask("travis", ["jshint"]); 107 | 108 | }; 109 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # History 5 | ### 1.2.17 6 | * fixed some bugs 7 | * add new global method 'updateContentAsync' for async mode. 8 | * add new global method 'setDefaultOptions' 9 | 10 | 11 | ### 1.2.16 12 | * fixed some bugs. 13 | 14 | 15 | ### 1.2.14 16 | * add global method 'updateContent' 17 | * add new option: 'selector' for delegate, now the plugin can deal with dynamic created content. 18 | 19 | ### 1.2.13 20 | * fix the arrow hidden bug in firefox 21 | * fix the position bug when container's position is 'relative' 22 | * add options to 'WebuiPopovers.show' method 23 | * add 'WebuiPopovers.create','WebuiPopovers.isCreated' methods 24 | 25 | ### 1.2.11 26 | * fix the position bug with svg. 27 | 28 | 29 | ### 1.2.10 30 | * fix the hidden bug in show method when trigger is set to 'manual'. 31 | 32 | 33 | ### 1.2.9 34 | * fix the position in container bug 35 | 36 | ### 1.2.8 37 | * fix and optimize the scroll placement bug 38 | * add rtl direction support 39 | * fix arrow hide bug when placement is set to auto or auto-buttom 40 | * fix the LESS variable collision 41 | 42 | 43 | ### 1.2.7 44 | * fix the scroll placement bug 45 | 46 | ### 1.2.6 47 | * fix the hidden bug on mobile device when trigger is set to 'hover' 48 | * add the loging.gif to the CDN 49 | 50 | ### 1.2.4 51 | * add async request method option:async.type,default value is 'GET'. 52 | * optimize the close button, make it more customizable. 53 | 54 | 55 | ### 1.2.3 56 | * fix the bug which cause the popover hide by click when multi popovers in same page. 57 | * optimize event handling for performance 58 | 59 | ### 1.2.2 60 | * 61 | * optimize code and clean debug info 62 | 63 | ### 1.2.1 64 | * now option url can be set with jQuery selector (eg: '#myContent') when type equals 'html'. 65 | * fix the bug which cause the popover content lost event handler. 66 | 67 | 68 | ### 1.2.0 69 | * make the animation avaiable for hidding. 70 | * add new trigger:'sticky'. 71 | * remove the option:constrains, move the value 'horizontal/vertical' to placement. 72 | * fix the bug which caused the popover can't be closed on mobile device. 73 | * new way to init popover content, set the content by next element html which has class 'webui-popover'. 74 | * optimese the calulate position algorithm. 75 | * update the demo page adapt for mobile device. 76 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) [2014] [Sandy Duan] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | WebUI-Popover 2 | ============= 3 | 4 | A lightWeight popover plugin with jquery, enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap, but bootstrap is not necessary! 5 | 6 | 7 | Browser compatibility: ie8+,Chrome,Safari,Firefox,Opera 8 | 9 | ## Requirement 10 | 11 | jquery1.7+ 12 | 13 | ##Features 14 | * fast,lightweight 15 | * support more placements 16 | * auto caculate placement 17 | * close button in popover 18 | * multipule popovers in same page 19 | * different styles 20 | * support url and iframe 21 | * support async mode 22 | * different animations 23 | * support backdrop 24 | 25 | 26 | ##NPM 27 | ```bash 28 | npm install webui-popover 29 | ``` 30 | 31 | ##Bower 32 | ```bash 33 | bower install webui-popover 34 | ``` 35 | 36 | ##CDN 37 | WebUI Popover Support CDN from version 1.2.1, avaliable on [JSDELIVR](http://www.jsdelivr.com/?query=webui-popover) 38 | 39 | ##Demo 40 | [WebUI Popover Demo](http://sandywalker.github.io/webui-popover/demo/) 41 | 42 | ##Getting Started 43 | 44 | ####Including it on your page 45 | Localfile 46 | ```html 47 | 48 | ... 49 | 50 | 51 | ``` 52 | Or CDN 53 | 54 | ```html 55 | 56 | ... 57 | 58 | 59 | ``` 60 | 61 | ####Use the plugin as follows: 62 | 63 | ```javascript 64 | $('a').webuiPopover(options); 65 | ``` 66 | 67 | ####Some Examples: 68 | 69 | Simplest Popover 70 | ```javascript 71 | $('a').webuiPopover({title:'Title',content:'Content'}); 72 | ``` 73 | 74 | Create Popover by dom element data-* attribute 75 | ```html 76 | show pop 77 | ``` 78 | ```javascript 79 | $('a').webuiPopover(); 80 | ``` 81 | 82 | Popover content can be easily setted by next element with class 'webui-popover-content' 83 | ```html 84 | shop pop 85 |
86 |

popover content

87 |
88 | ``` 89 | ```javascript 90 | $('a').webuiPopover(); 91 | ``` 92 | 93 | Or, just use jQuery selector (id selector recommended) to set the Popover content. 94 | 95 | ```html 96 | shop pop 97 |
98 |

popover content

99 |
100 | ``` 101 | ```javascript 102 | $('a').webuiPopover({url:'#myContent'}); 103 | ``` 104 | 105 | Popover with specified placement. 106 | ```javascript 107 | $('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'}); 108 | ``` 109 | 110 | Popover trigged by mouse hover. 111 | ```javascript 112 | $('a').webuiPopover({content:'Content',trigger:'hover'}); 113 | ``` 114 | 115 | Create Sticky Popover. 116 | ```javascript 117 | $('a').webuiPopover({content:'Content',trigger:'sticky'}); 118 | ``` 119 | 120 | Create Popover Dynamically (by new option:'selector'). 121 | 122 | ```html 123 | add Pop 124 |
125 | 126 |
127 | ``` 128 | 129 | ```javascript 130 | $('#addPop').on('click',function(e){ 131 | $(' Dynamic created Pop ').appendTo('.pops'); 132 | }); 133 | ``` 134 | 135 | Popover with inversed style. 136 | ```javascript 137 | $('a').webuiPopover({content:'Content',style:'inverse'}); 138 | ``` 139 | Popover with fixed width and height 140 | ```javascript 141 | $('a').webuiPopover({content:'Content',width:300,height:200}); 142 | ``` 143 | 144 | Popover with close button 145 | ```javascript 146 | $('a').webuiPopover({title:'Title',content:'Content',closeable:true}); 147 | ``` 148 | 149 | Animate the Popover 150 | ```javascript 151 | $('a').webuiPopover({title:'Title',content:'Content',animation:'pop'}); 152 | ``` 153 | 154 | Popover with iframe 155 | ```javascript 156 | $('a').webuiPopover({type:'iframe',url:'http://getbootstrap.com'}); 157 | ``` 158 | 159 | 160 | Async Mode 161 | ```javascript 162 | $('a').webuiPopover({ 163 | type:'async', 164 | url:'https://api.github.com/', 165 | content:function(data){ 166 | var html = ''; 169 | return html; 170 | } 171 | }); 172 | ``` 173 | 174 | Async simply by url 175 | ```javascript 176 | $('a').webuiPopover({ 177 | type:'async', 178 | url:'http://some.website/htmldata' 179 | }); 180 | ``` 181 | 182 | Trigger the Popover by manual 183 | ```javascript 184 | //Initailize 185 | $('a').webuiPopover({trigger:'manual'}); 186 | ... 187 | 188 | //Show it 189 | $('a').webuiPopover('show'); 190 | 191 | //Hide it 192 | $('a').webuiPopover('hide'); 193 | 194 | ``` 195 | 196 | Destroy the Popover 197 | ```javascript 198 | $('a').webuiPopover('destroy'); 199 | ``` 200 | 201 | 202 | 203 | ### Default options 204 | ```javascript 205 | { 206 | placement:'auto',//values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical 207 | container: document.body,// The container in which the popover will be added (i.e. The parent scrolling area). May be a jquery object, a selector string or a HTML element. See https://jsfiddle.net/1x21rj9e/1/ 208 | width:'auto',//can be set with number 209 | height:'auto',//can be set with number 210 | trigger:'click',//values: click,hover,manual(handle events by your self),sticky(always show after popover is created); 211 | selector:false,// jQuery selector, if a selector is provided, popover objects will be delegated to the specified. 212 | style:'',// Not to be confused with inline `style=""`, adds a classname to the container for styling, prefixed by `webui-popover-`. Default '' (light theme), 'inverse' for dark theme 213 | animation:null, //pop with animation,values: pop,fade (only take effect in the browser which support css3 transition) 214 | delay: {//show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object 215 | show: null, 216 | hide: 300 217 | }, 218 | async: { 219 | type:'GET', // ajax request method type, default is GET 220 | before: function(that, xhr, settings) {},//executed before ajax request 221 | success: function(that, data) {}//executed after successful ajax request 222 | error: function(that, xhr, data) {} //executed after error ajax request 223 | }, 224 | cache:true,//if cache is set to false,popover will destroy and recreate 225 | multi:false,//allow other popovers in page at same time 226 | arrow:true,//show arrow or not 227 | title:'',//the popover title, if title is set to empty string,title bar will auto hide 228 | content:'',//content of the popover,content can be function 229 | closeable:false,//display close button or not 230 | direction:'', // direction of the popover content default is ltr ,values:'rtl'; 231 | padding:true,//content padding 232 | type:'html',//content type, values:'html','iframe','async' 233 | url:'',//if type equals 'html', value should be jQuery selecor. if type equels 'async' the plugin will load content by url. 234 | backdrop:false,//if backdrop is set to true, popover will use backdrop on open 235 | dismissible:true, // if popover can be dismissed by outside click or escape key 236 | autoHide:false, // automatic hide the popover by a specified timeout, the value must be false,or a number(1000 = 1s). 237 | offsetTop:0, // offset the top of the popover 238 | offsetLeft:0, // offset the left of the popover 239 | onShow: function($element) {}, // callback after show 240 | onHide: function($element) {}, // callback after hide 241 | } 242 | ``` 243 | 244 | ###Global Methods 245 | 246 | 247 | In some situation, you may want to manipulate the plugin like 'show/hide' popovers by global methods. The new object **WebuiPopovers** is introduced and exposed to the global window object, so you can access these methods like 'WebuiPopovers.someMethod()...'. 248 | 249 | Here are examples of calling code. 250 | 251 | ```javascript 252 | 253 | //Show Popover by click other element. 254 | $('a').on('click',function(e){ 255 | e.stopPropagation(); // Stop event propagation is needed, otherwise may trigger the document body click event handled by plugin. 256 | WebuiPopovers.show('#el'); 257 | }); 258 | 259 | // Show Popover with options 260 | WebuiPopovers.show('#el',{title:' hello popover',width:300}); 261 | 262 | 263 | //Hide Popover by jQuery selector 264 | WebuiPopovers.hide('#el'); 265 | 266 | //Hide All Popovers 267 | WebuiPopovers.hideAll(); 268 | 269 | //Update the Popover content 270 | WebuiPopovers.updateContent('.btn-showpop','some html or text'); 271 | 272 | 273 | //Update the Popover content async 274 | WebuiPopovers.updateContentAsync('.btn-showpop','http://someUrl'); 275 | 276 | //Set global default options 277 | WebuiPopovers.setDefaultOptions(options); 278 | ``` 279 | 280 | Full Methods 281 | 282 | ```js 283 | WebuiPopovers.show(selector,options); // Show popover by jQuery selector,the options parameter is optional 284 | WebuiPopovers.hide(selector); // Hide popover by jQuery selector 285 | WebuiPopovers.hideAll(); // Hide all popovers 286 | WebuiPopovers.create(selector,options);// Create and init the popover by jQuery selector. 287 | WebuiPopovers.isCreated(selector); // Check if the popover is already create and bind to the selector. 288 | WebuiPopovers.updateContent(selector,newContent) //Update the Popover content after the popover is created. 289 | WebuiPopovers.updateContentAsync(selector,url) //Update the Popover content asynchronously after the popover is created. 290 | WebuiPopovers.setDefaultOptions(options) //Change the global default options. 291 | ``` 292 | 293 | 294 | 295 | Welcome to visit my github page: [http://sandywalker.github.io/] 296 | -------------------------------------------------------------------------------- /ROADMAP.md: -------------------------------------------------------------------------------- 1 | 2 | 2015-12 3 | 4 | * Optimize the display on mobile device 5 | * Add fit width/height to some container 6 | * Nested popover support 7 | * unique option for performer optimize when huge number of the popovers in same page. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webui-popover", 3 | "version": "1.2.18", 4 | "authors": [ 5 | "sandywalker " 6 | ], 7 | "description": "webui popover", 8 | "keywords": [ 9 | "jquery", 10 | "plugins" 11 | ], 12 | "license": "MIT", 13 | "private": false, 14 | "ignore": [ 15 | "**/.*", 16 | "node_modules", 17 | "bower_components", 18 | "test", 19 | "tests" 20 | ], 21 | "main": [ 22 | "dist/jquery.webui-popover.css", 23 | "dist/jquery.webui-popover.js" 24 | ], 25 | "dependencies": { 26 | "jquery": ">=1.7.0" 27 | }, 28 | "homepage":"https://github.com/sandywalker/webui-popover" 29 | } 30 | -------------------------------------------------------------------------------- /demo/async-content-another.html: -------------------------------------------------------------------------------- 1 |

Another Async Content

2 |

3 | A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. 4 |

-------------------------------------------------------------------------------- /demo/async-content.html: -------------------------------------------------------------------------------- 1 |

Async Content

2 |

3 | A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary! 4 |

-------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #eee; 3 | font:14px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 4 | } 5 | 6 | 7 | header{ 8 | color:#fff; 9 | background-color: #3366aa; 10 | padding-top:30px; 11 | padding-bottom:30px; 12 | font-size: 24px; 13 | margin-bottom:20px; 14 | } 15 | header h1{ 16 | margin-right: 380px; 17 | font-size:36px; 18 | line-height: 1; 19 | 20 | } 21 | h1 i{ 22 | font-size: 45px; 23 | } 24 | header p{ 25 | font-size: 18px; 26 | color:#aaccff; 27 | } 28 | 29 | .panel-demo{ 30 | height:540px; 31 | min-height: 540px; 32 | } 33 | 34 | .panel-heading { 35 | padding: 20px 10px; 36 | border-bottom: 1px solid transparent; 37 | border-top-left-radius: 3px; 38 | border-top-right-radius: 3px; 39 | } 40 | 41 | .tab-pane{ 42 | background: #fff; 43 | height:500px; 44 | min-height: 500px; 45 | padding: 1px; 46 | border:1px solid #ddd; 47 | border-top:none; 48 | border-radius: 5px; 49 | border-top-left-radius:0; 50 | border-top-right-radius:0; 51 | } 52 | 53 | .icon-setup,.icon-setup:visited{ 54 | color:#333; 55 | } 56 | 57 | .list-group-item-text{ 58 | color:#aaa; 59 | } 60 | 61 | #optionsWrapper{ 62 | display: none; 63 | } 64 | 65 | .options{ 66 | padding:0; 67 | margin:0; 68 | } 69 | 70 | .options h3{ 71 | margin:0; 72 | 73 | padding:0 0 0 15px; 74 | line-height: 50px; 75 | border-bottom: 1px solid #ccc; 76 | } 77 | 78 | .option-section{ 79 | border-bottom: 1px solid #eee; 80 | margin:25px 15px 25px 15px; 81 | height:45px; 82 | line-height: 45px; 83 | } 84 | 85 | .option-box{ 86 | display: block; 87 | height:25px; 88 | width:80px; 89 | float:right; 90 | border:1px solid #ccc; 91 | margin:8px 15px 0 0 ; 92 | line-height: 25px; 93 | text-align: center; 94 | border-radius: 20px; 95 | cursor: pointer; 96 | 97 | } 98 | 99 | .option-box .flag{ 100 | float:left; 101 | width:23px; 102 | height:23px; 103 | color:#fff; 104 | background: green; 105 | border-radius: 25px; 106 | display: none; 107 | } 108 | 109 | .option-section .title{ 110 | display: inline-block; 111 | width:60px; 112 | text-align: right; 113 | color:#999; 114 | } 115 | 116 | .option-box.active .flag{ 117 | display: block; 118 | } 119 | 120 | .style-inverse{ 121 | background: #333; 122 | color:#fff; 123 | } 124 | 125 | .option-checker{ 126 | width:170px; 127 | float:right; 128 | margin:10px 15px 0 0; 129 | height:25px; 130 | line-height: 25px; 131 | text-align: center; 132 | border-radius: 15px; 133 | border:1px solid #ddd; 134 | cursor: pointer; 135 | position: relative; 136 | transition: background .2s linear; 137 | -moz-transition: background .2s linear; /* Firefox 4 */ 138 | -webkit-transition: background .2s linear; /* Safari 和 Chrome */ 139 | -o-transition: background .2s linears; /* Opera */ 140 | } 141 | 142 | .option-checker.active{ 143 | background: green; 144 | color:#fff; 145 | } 146 | 147 | 148 | .option-checker .ball{ 149 | display: block; 150 | position: absolute; 151 | left:0; 152 | width:22px; 153 | height:22px; 154 | background: #eee; 155 | border-radius: 10px; 156 | transition: left .2s linear; 157 | -moz-transition: left .2s linear; /* Firefox 4 */ 158 | -webkit-transition: left .2s linear; /* Safari 和 Chrome */ 159 | -o-transition: left .2s linears; /* Opera */ 160 | } 161 | 162 | .option-checker.active .ball{ 163 | left:146px; 164 | } 165 | 166 | .content{ 167 | height:540px; 168 | position: relative; 169 | background: #fff; 170 | border:1px solid #ddd; 171 | border-radius: 5px; 172 | display: none; 173 | } 174 | 175 | .content.active{ 176 | display: block; 177 | } 178 | .btn-default{ 179 | color:#999; 180 | padding:12px 15px; 181 | } 182 | 183 | .glyphicon-cog:hover{ 184 | color:#666; 185 | } 186 | 187 | #specify{ 188 | 189 | } 190 | 191 | #specify .btn { 192 | position: absolute; 193 | border-radius: 50px; 194 | color:#ddd; 195 | } 196 | 197 | #specify .bottom-right{ 198 | top:10px; 199 | left:10px; 200 | } 201 | 202 | #specify .right-bottom{ 203 | top:10px; 204 | left:25%; 205 | } 206 | 207 | #specify .bottom{ 208 | top:10px; 209 | left:50%; 210 | margin-left:-17px; 211 | } 212 | 213 | #specify .left-bottom{ 214 | top:10px; 215 | right:25%; 216 | } 217 | 218 | #specify .bottom-left{ 219 | top:10px; 220 | right:10px; 221 | } 222 | 223 | #specify .right{ 224 | left:10px; 225 | top:50%; 226 | margin-top:-17px; 227 | } 228 | 229 | #specify .left{ 230 | right:10px; 231 | top:50%; 232 | margin-top:-17px; 233 | } 234 | 235 | #specify .top-right{ 236 | bottom:10px; 237 | left:10px; 238 | } 239 | 240 | #specify .right-top{ 241 | bottom:10px; 242 | left:25%; 243 | } 244 | 245 | #specify .btn.top{ 246 | bottom:10px; 247 | left:50%; 248 | margin-left:-17px; 249 | } 250 | 251 | #specify .left-top{ 252 | bottom: 10px; 253 | right:25%; 254 | } 255 | 256 | #specify .top-left{ 257 | bottom:10px; 258 | right:10px; 259 | } 260 | 261 | #auto .btn{ 262 | padding:1px; 263 | border:1px solid #eee; 264 | min-width: 60px; 265 | font-size:9px; 266 | } 267 | 268 | #auto .btn-default{ 269 | background: #fff; 270 | } 271 | 272 | #auto .btn-auto{ 273 | width:35px; 274 | height:35px; 275 | line-height: 35px; 276 | min-width: 35px; 277 | padding:0; 278 | margin:0; 279 | border-radius: 25px; 280 | } 281 | 282 | #animation,#delayed,#advanced{ 283 | padding:0 20px; 284 | } 285 | 286 | #animation .btn,#delayed .btn{ 287 | width: 120px; 288 | height:120px; 289 | line-height: 120px; 290 | padding:0; 291 | margin-top:150px; 292 | 293 | border-radius: 100px; 294 | } 295 | 296 | #advanced .btn{ 297 | position: absolute; 298 | } 299 | 300 | #advanced .show-pop-table { 301 | top:20px; 302 | left:20px; 303 | } 304 | 305 | #advanced .show-pop-list { 306 | top:20px; 307 | left:200px; 308 | } 309 | 310 | #advanced .show-pop-large { 311 | top:20px; 312 | left:370px; 313 | } 314 | 315 | #advanced .show-pop-iframe { 316 | top:20px; 317 | right:20px; 318 | } 319 | 320 | #advanced .show-pop-async { 321 | top:20px; 322 | right:180px; 323 | } 324 | 325 | #advanced .show-pop-backdrop{ 326 | bottom:20px; 327 | left:20px; 328 | } 329 | 330 | #advanced .show-pop-dropdown{ 331 | bottom:20px; 332 | left:180px; 333 | } 334 | 335 | #advanced form{ 336 | margin:120px auto 0 auto; 337 | width:500px; 338 | border:1px solid #eee; 339 | padding:20px; 340 | height:300px; 341 | } 342 | 343 | #events { 344 | padding:20px; 345 | } 346 | 347 | #events .btn-info.pull-left{ 348 | width:100px; 349 | margin-right:20px; 350 | } 351 | 352 | #events .btn-info.pull-right{ 353 | width:100px; 354 | margin-left: 20px; 355 | } 356 | 357 | #events .btns{ 358 | margin-bottom:180px; 359 | } 360 | 361 | #eventLogs{ 362 | height:200px; 363 | margin:0 0 20px 0; 364 | } 365 | 366 | .demo-code{ 367 | margin:20px; 368 | } 369 | 370 | .demo-container{ 371 | background: #fff; 372 | padding-top: 20px; 373 | padding-bottom: 20px; 374 | margin-bottom: 40px; 375 | } 376 | 377 | .row-middle{ 378 | margin-top:200px; 379 | margin-bottom: 200px; 380 | } 381 | 382 | #specify #btn-sticky{ 383 | position: absolute; 384 | top:60%; 385 | left:50%; 386 | width:150px; 387 | border-radius: 0; 388 | margin-left:-75px; 389 | } 390 | .webui-popover-demo.top{ 391 | position: absolute; 392 | top:50%; 393 | left:50%; 394 | width:350px; 395 | height:150px; 396 | margin-left:-175px; 397 | margin-top:-75px; 398 | } 399 | 400 | .webui-popover-demo h3{ 401 | font-weight:bold; 402 | color:#c9302c; 403 | } 404 | 405 | .text-center{ 406 | text-align: center; 407 | } 408 | 409 | .text-right{ 410 | text-align: right; 411 | } 412 | 413 | .table-contrains > tbody > tr > td{ 414 | border:none; 415 | text-align: center; 416 | } 417 | 418 | @media (max-width: 768px){ 419 | 420 | #specify .btn { 421 | width:40px; 422 | height:40px; 423 | padding:0; 424 | line-height: 40px; 425 | border-radius: 40px; 426 | color:#ddd; 427 | } 428 | 429 | 430 | #animation .btn{ 431 | width: 50px; 432 | height:50px; 433 | line-height: 50px; 434 | padding:0; 435 | margin-top:50px; 436 | 437 | border-radius: 50px; 438 | } 439 | 440 | #auto .table td{ 441 | padding-left:0; 442 | padding-right:0; 443 | } 444 | 445 | #auto .table .btn{ 446 | padding:0; 447 | min-width: 19px; 448 | width:19px; 449 | overflow: hidden; 450 | content:""; 451 | } 452 | #auto .btn-auto{ 453 | height:19px; 454 | line-height: 19px; 455 | } 456 | 457 | .prefix, 458 | .suffix{ 459 | display: none; 460 | } 461 | 462 | 463 | #advanced .btn{ 464 | padding:2px 3px; 465 | font-size: 12px; 466 | } 467 | 468 | #advanced .show-pop-table { 469 | top:20px; 470 | left:20px; 471 | } 472 | 473 | #advanced .show-pop-list { 474 | top:20px; 475 | left:25%; 476 | } 477 | 478 | #advanced .show-pop-large { 479 | top:20px; 480 | left:40%; 481 | } 482 | 483 | #advanced .show-pop-iframe { 484 | top:20px; 485 | right:20px; 486 | } 487 | 488 | #advanced .show-pop-async { 489 | top:20px; 490 | right:25%; 491 | } 492 | 493 | #advanced .show-pop-backdrop{ 494 | bottom:20px; 495 | left:20px; 496 | } 497 | 498 | #advanced form{ 499 | margin:120px auto 0 auto; 500 | width:90%; 501 | border:1px solid #eee; 502 | padding:20px; 503 | height:300px; 504 | } 505 | 506 | #events .btn-info.pull-left, 507 | #events .btn-info.pull-right{ 508 | display: block; 509 | float:none; 510 | width:100%; 511 | margin-bottom:10px; 512 | } 513 | 514 | 515 | #events .btns{ 516 | margin-bottom:30px; 517 | } 518 | 519 | } 520 | 521 | 522 | 523 | 524 | -------------------------------------------------------------------------------- /demo/index-dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebUI Popover Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

WebUI Popover Dev

16 |

A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!

17 |
18 |
19 | 20 |
21 |
22 |

Options

23 |

24 | inverse 25 | default 26 | style: 27 |

28 |

29 | hover 30 | click 31 | trigger: 32 |

33 |

34 | 35 | 36 | no 37 | 38 | closeable: 39 |

40 |

41 | 42 | 43 | yes 44 | 45 | multi: 46 |

47 |

48 | 49 | 50 | yes 51 | 52 | arrow: 53 |

54 |
55 |
56 | 57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | WebUI-Popover Demos 66 |
67 |
68 | 69 |

Specified placement

70 |

Use the specified placement

71 | 72 | 73 |

Auto detect placement

74 |

Auto detect the placement, always poped in page, can be contrained by horizontal or vertical

75 | 76 | 77 |

Pop with animation

78 |

Set animation by data-attribute or code

79 | 80 | 81 |

Delayed show/hide

82 |

Control delay show/hide by data-attribute or code

83 | 84 | 85 | 86 |

Advanced examples

87 |

table in popover, larget content, async mode, iframe mode

88 | 89 | 90 | 91 |

Events

92 |

show,shown,hide,hidden

93 | 94 |
95 |
96 |
97 |
98 | 99 |
100 | 102 | 104 | 106 | 108 | 110 | 111 | 113 | 115 | 116 | 118 | 120 | 122 | 124 | 126 | 127 | 128 | sticky popover 130 |
131 | 132 | 133 | 134 |
135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 |
horizontal vertical auto-top vertical vertical vertical auto-bottom vertical horizontal
horizontal    horizontal    horizontal
horizontal    horizontal    horizontal
auto-right  auto  auto-right  auto  auto-right
horizontal    horizontal    horizontal
horizontal    horizontal    horizontal
horizontal vertical auto-top vertical auto vertical auto-bottom vertical horizontal
horizontal    horizontal    horizontal
horizontal    horizontal    horizontal
auto-left  auto  auto-left  auto  auto-left
horizontal    horizontal    horizontal
horizontal    horizontal    horizontal
horizontal vertical auto-top vertical vertical vertical auto-bottom vertical horizontal
300 |
301 | 302 |
303 | default: none 304 | 305 | animation:fade 308 | 309 | animation:pop 312 |
313 |
314 | by data-attribute 315 | 316 | by code 317 |
318 |
319 | pop with table 320 | pop with list 321 | 322 | pop iframe 323 | pop async 324 | 325 | 326 | 327 | pop large content 328 | 329 | 347 | pop with 348 | backdrop 349 | pop with bs-dropdown 350 |
351 | 358 |
359 |
360 |
361 |
362 | show 363 | shown 364 | hidden 365 | hide 366 | 367 |
368 |
369 |

Event Logs

370 | 371 | reset logs 372 | 373 |
374 | 375 | 376 | 377 | 378 |
379 |
380 |
381 | 382 | 383 | 384 | 385 | 386 | 419 | 420 | 429 | 430 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 667 | 668 | 669 | -------------------------------------------------------------------------------- /demo/index-old.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebUI Popover Demo 5 | 6 | 7 | 76 | 77 | 78 | 79 |
80 |
81 |

WebUI Popover Demo

82 |

A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!

83 |
84 | 85 |
86 | 87 |
88 |
89 |

Settings styles and some options

90 |
91 |
92 |
93 |
94 |
95 |
96 | 136 | 137 |
138 |
139 |
140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 |
148 |
149 |

Specified placement use the specified placement.

150 |
151 |
152 |
153 |
154 |
pop bottom-right
155 |
pop right-bottom
156 |
pop bottom
157 |
pop left-bottom
158 |
pop bottom-left
159 |
160 |
161 |
pop right
162 |
163 |

Welcome to WebUI Popover

This is webui popover demo.

just enjoy it and have fun !

email : sanddywalker@gmail.com

164 | 165 |
166 |
pop left
167 |
168 |
169 |
pop top-right
170 |
pop right-top
171 |
pop top
172 |
pop left-top
173 |
pop top-left
174 |
175 |
176 | 177 | 178 |
179 |
180 |

Pop with animation set animation by data-attribute or code

181 |
182 |
183 |
184 |
185 |
186 | default (no animation) 187 |
188 |
animation: pop
189 |
animation: fade
190 |
191 | 192 | 193 |
194 |
195 |

Auto detect placement auto detect the placement, always poped in page

196 |
197 |
198 |
199 |
200 |
auto detect
201 |
auto detect
202 |
auto detect
203 |
204 | 205 |
206 | 207 | 208 | 209 | 210 | 211 | 212 |
213 |
214 |

Auto detect with constrains auto detect the placement, but in contrains

215 |
216 |
217 |
218 |
219 |
220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 |
horizontal vertical vertical vertical vertical vertical vertical vertical horizontal
horizontal    horizontal    horizontal
horizontal    horizontal    horizontal
horizontal  no contrains  horizontal  no contrains  horizontal
horizontal    horizontal    horizontal
horizontal    no contrains    horizontal
horizontal no contrains vertical vertical no contrains vertical vertical no contrains horizontal
horizontal    no contrains    horizontal
horizontal    horizontal    horizontal
horizontal  no contrains  horizontal  no contrains  horizontal
horizontal    horizontal    horizontal
horizontal    horizontal    horizontal
horizontal vertical vertical vertical vertical vertical vertical vertical horizontal
386 | 387 |
388 |
389 |
390 | 391 | 392 |
393 |
394 |

Delayed show/hide control delay show/hide by data-attribute or code

395 |
396 |
397 |
398 |
399 |
400 | 401 | delayed show/hide by data-attribute 402 | 403 | 404 |
405 |
 
406 |
 
407 |
delayed show/hide by code
408 |
409 |
410 | 411 | 412 |
413 |
414 |

Advanced examples

415 |
416 |
417 |
418 |
419 |
pop with table
420 |
pop with list
421 |
pop large content
422 |
423 |
pop async
424 | 425 |
pop iframe
426 |
427 | 428 |
429 | 430 |
431 |
432 |

Events

433 |
434 |
435 |
436 |
437 |
show
438 |
shown
439 |
hide
440 |
hidden
441 |
442 |
443 |
444 |
445 | 446 | reset logs 447 |
448 |
449 | 450 |
451 | 452 | 485 | 486 | 495 | 496 | 503 | 504 | 505 | 506 | 507 | 640 | 641 | 642 | -------------------------------------------------------------------------------- /demo/mobile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | mobile test 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /demo/table-data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "date": "11/3/15", 4 | "time": "12:00 pm", 5 | "opponent": "Test 1", 6 | "location": "Test 1<\/center>\" data-trigger=\"click\" data-placement=\"auto-bottom\">home<\/a>", 7 | "results": "" 8 | }, 9 | { 10 | "date": "11/4/15", 11 | "time": "2:00pm", 12 | "opponent": "Test 2", 13 | "location": "Away", 14 | "results": "" 15 | }, 16 | { 17 | "date": "11/5/15", 18 | "time": "1:00 pm", 19 | "opponent": "Test 3", 20 | "location": "Home", 21 | "results": "" 22 | } 23 | ] -------------------------------------------------------------------------------- /demo/test-auto-bottom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | webui popover 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 28 |
29 | 30 | 31 | 32 | 33 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /demo/test-body-height.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 29 | 42 | 43 | 44 |
dsfsfsd
45 |

 

46 |

 

47 |

 

48 |

 

49 | 50 |

 

51 |

 

52 |

 

53 |

 

54 | 55 | -------------------------------------------------------------------------------- /demo/test-cache.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | webui popover 6 | 7 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 29 | 32 |
33 | 34 | 35 | 36 | 37 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /demo/test-canvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | canvas 4 | 5 | 6 | 7 | 10 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /demo/test-container-scroll-fix.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Scroll in container (#144) 4 | 5 | 6 | 7 | 36 | 47 | 48 | 49 |
50 |
51 |
dsfsfsd
52 |
53 |
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /demo/test-container-scroll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Scroll in container (#144) 4 | 5 | 6 | 7 | 35 | 55 | 56 | 57 |

 

58 |

 

59 |

 

60 |
dsfsfsd
61 |
62 |
63 |
dsfsfsd
64 |
65 |
66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /demo/test-container.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | container (#167) 4 | 5 | 6 | 7 | 18 | 32 | 33 | 34 |
35 | 38 | 43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /demo/test-global-api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | container (#167) 4 | 5 | 6 | 7 | 13 | 37 | 38 | 39 |

 

40 | show pop
aaaaa
41 |

 

42 | add link 43 | 44 | test 45 | 46 | 47 | -------------------------------------------------------------------------------- /demo/test-issue193.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | issue (#193) 4 | 5 | 6 | 7 | 8 | 15 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
Header 1Header 2Header 3
Cell 1123Cell 3
Cell 1234Cell 3
Cell 1345Cell 3
65 | 66 | 67 | -------------------------------------------------------------------------------- /demo/test-issue195.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | issue (#195) update content 4 | 5 | 6 | 7 | 8 | 15 | 41 | 42 | 43 |

 

44 |     show Pop 45 |
46 |

popover content

47 |
48 | 55 | 56 |

 

57 |

 update Pop content

58 | 59 |

 

60 |

 

61 | 62 |

 show Pop Async

63 |

 update Pop content Async

64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /demo/test-issue197.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | issue (#197) 4 | 5 | 6 | 7 | 8 | 15 | 27 | 28 | 29 | add Pop 30 | 31 |
32 | 33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /demo/test-issue214.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | issue (#214) dropdown not working in popover 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 18 | 19 | 20 | show pop 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
col 1col 2
aabb
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /demo/test-manual-show-bug.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | close bug (#169) 4 | 5 | 6 | 7 | 8 | 11 | 57 | 58 | 59 | 苹果产品拆解集合（2016年4月更新） 60 | 61 | 62 | -------------------------------------------------------------------------------- /demo/test-svg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | svg 4 | 5 | 6 | 7 | 10 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /demo/test-wenzhixin-bstable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | test with wenzhixin bootstrap table 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
DateTimeOpponentLocationResults
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /demo/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 61 | 62 | 63 | 64 | 65 |
66 | trigger 1 67 | trigger 2 68 | trigger 3 69 | trigger 4 70 |
71 |
72 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

73 |
74 | 75 | 76 | Pop with layout right to left 77 |
78 |

Hi there

79 |

This is next element!clickMe

80 |
81 | 82 | 83 |
84 | a
a
85 | aa 86 | a 87 |
88 | 89 | 90 |
91 |
92 | 93 | 94 |
95 | a 96 | a 97 | a 98 |
99 | 100 | 101 |
102 | 103 | Pop inline 104 | Pop next element 105 |
106 |

Hi there

107 |

This is next element clickMe

108 |
109 | hide 110 | Pop by url1 111 | Pop by url1 112 | 113 |
114 | This is content of url1. 115 |
116 |
117 | This is content of url2. 118 |
119 | 120 |
121 | 122 |

 

123 | 124 |
125 | 126 |
127 | 128 | d | 129 | 130 | dismissible true 131 | 132 | 133 | show input popover 134 | 135 |

popById

136 | sdfjdslfjsdlfjsldfjdslfjdslfjdsjflsdjfldsjsdklfjsdljfldsjfldsjfldsjfldsjfjdsljf 137 | arrowPosFix 138 |
139 |

Arrow Position

140 |

This is element clickMe sfjsdfjlsdjfdlsfjdlsf

141 |
142 |

Some content ...

143 |

Some content ...

144 |
145 | 146 |
147 |

148 | inline-content 149 |

150 |

 

151 | 152 | 153 | 154 | 155 |

 

156 |

 

157 |

 

158 |

 

159 | 160 |

 

161 |

 

162 |

 

163 |

 

164 | 165 | 166 | 167 |
168 | a 169 | a 170 | a
a
a 171 |
172 | 173 | 174 | 175 |
176 |

Url Selector

177 |

set url with jquery selector! clickMe

178 |
179 | 180 |
181 |

ddddd

182 |
183 | 184 | 185 | 186 | 187 | 188 | 189 | 397 | 398 | 399 | 400 | -------------------------------------------------------------------------------- /demo/text.txt: -------------------------------------------------------------------------------- 1 | A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary! 2 | A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary! -------------------------------------------------------------------------------- /dist/jquery.webui-popover.css: -------------------------------------------------------------------------------- 1 | /* 2 | * webui popover plugin - v1.2.17 3 | * A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary! 4 | * https://github.com/sandywalker/webui-popover 5 | * 6 | * Made by Sandy Duan 7 | * Under MIT License 8 | */ 9 | .webui-popover-content { 10 | display: none; 11 | } 12 | .webui-popover-rtl { 13 | direction: rtl; 14 | text-align: right; 15 | } 16 | /* webui popover */ 17 | .webui-popover { 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | z-index: 9999; 22 | display: none; 23 | min-width: 50px; 24 | min-height: 32px; 25 | padding: 1px; 26 | text-align: left; 27 | white-space: normal; 28 | background-color: #ffffff; 29 | background-clip: padding-box; 30 | border: 1px solid #cccccc; 31 | border: 1px solid rgba(0, 0, 0, 0.2); 32 | border-radius: 6px; 33 | -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 34 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 35 | } 36 | .webui-popover.top, 37 | .webui-popover.top-left, 38 | .webui-popover.top-right { 39 | margin-top: -10px; 40 | } 41 | .webui-popover.right, 42 | .webui-popover.right-top, 43 | .webui-popover.right-bottom { 44 | margin-left: 10px; 45 | } 46 | .webui-popover.bottom, 47 | .webui-popover.bottom-left, 48 | .webui-popover.bottom-right { 49 | margin-top: 10px; 50 | } 51 | .webui-popover.left, 52 | .webui-popover.left-top, 53 | .webui-popover.left-bottom { 54 | margin-left: -10px; 55 | } 56 | .webui-popover.pop { 57 | -webkit-transform: scale(0.8); 58 | -o-transform: scale(0.8); 59 | transform: scale(0.8); 60 | -webkit-transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 61 | -o-transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 62 | transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 63 | opacity: 0; 64 | filter: alpha(opacity=0); 65 | } 66 | .webui-popover.pop-out { 67 | -webkit-transition-property: "opacity,transform"; 68 | -o-transition-property: "opacity,transform"; 69 | transition-property: "opacity,transform"; 70 | -webkit-transition: 0.15s linear; 71 | -o-transition: 0.15s linear; 72 | transition: 0.15s linear; 73 | opacity: 0; 74 | filter: alpha(opacity=0); 75 | } 76 | .webui-popover.fade, 77 | .webui-popover.fade-out { 78 | -webkit-transition: opacity 0.15s linear; 79 | -o-transition: opacity 0.15s linear; 80 | transition: opacity 0.15s linear; 81 | opacity: 0; 82 | filter: alpha(opacity=0); 83 | } 84 | .webui-popover.out { 85 | opacity: 0; 86 | filter: alpha(opacity=0); 87 | } 88 | .webui-popover.in { 89 | -webkit-transform: none; 90 | -o-transform: none; 91 | transform: none; 92 | opacity: 1; 93 | filter: alpha(opacity=100); 94 | } 95 | .webui-popover .webui-popover-content { 96 | padding: 9px 14px; 97 | overflow: auto; 98 | display: block; 99 | } 100 | .webui-popover .webui-popover-content > div:first-child { 101 | width: 99%; 102 | } 103 | .webui-popover-inner .close { 104 | font-family: arial; 105 | margin: 8px 10px 0 0; 106 | float: right; 107 | font-size: 16px; 108 | font-weight: bold; 109 | line-height: 16px; 110 | color: #000000; 111 | text-shadow: 0 1px 0 #fff; 112 | opacity: 0.2; 113 | filter: alpha(opacity=20); 114 | text-decoration: none; 115 | } 116 | .webui-popover-inner .close:hover, 117 | .webui-popover-inner .close:focus { 118 | opacity: 0.5; 119 | filter: alpha(opacity=50); 120 | } 121 | .webui-popover-inner .close:after { 122 | content: "\00D7"; 123 | width: 0.8em; 124 | height: 0.8em; 125 | padding: 4px; 126 | position: relative; 127 | } 128 | .webui-popover-title { 129 | padding: 8px 14px; 130 | margin: 0; 131 | font-size: 14px; 132 | font-weight: bold; 133 | line-height: 18px; 134 | background-color: #ffffff; 135 | border-bottom: 1px solid #f2f2f2; 136 | border-radius: 5px 5px 0 0; 137 | } 138 | .webui-popover-content { 139 | padding: 9px 14px; 140 | overflow: auto; 141 | display: none; 142 | } 143 | .webui-popover-inverse { 144 | background-color: #333333; 145 | color: #eeeeee; 146 | } 147 | .webui-popover-inverse .webui-popover-title { 148 | background: #333333; 149 | border-bottom: 1px solid #3b3b3b; 150 | color: #eeeeee; 151 | } 152 | .webui-no-padding .webui-popover-content { 153 | padding: 0; 154 | } 155 | .webui-no-padding .list-group-item { 156 | border-right: none; 157 | border-left: none; 158 | } 159 | .webui-no-padding .list-group-item:first-child { 160 | border-top: 0; 161 | } 162 | .webui-no-padding .list-group-item:last-child { 163 | border-bottom: 0; 164 | } 165 | .webui-popover > .webui-arrow, 166 | .webui-popover > .webui-arrow:after { 167 | position: absolute; 168 | display: block; 169 | width: 0; 170 | height: 0; 171 | border-color: transparent; 172 | border-style: solid; 173 | } 174 | .webui-popover > .webui-arrow { 175 | border-width: 11px; 176 | } 177 | .webui-popover > .webui-arrow:after { 178 | border-width: 10px; 179 | content: ""; 180 | } 181 | .webui-popover.top > .webui-arrow, 182 | .webui-popover.top-right > .webui-arrow, 183 | .webui-popover.top-left > .webui-arrow { 184 | bottom: -11px; 185 | left: 50%; 186 | margin-left: -11px; 187 | border-top-color: #999999; 188 | border-top-color: rgba(0, 0, 0, 0.25); 189 | border-bottom-width: 0; 190 | } 191 | .webui-popover.top > .webui-arrow:after, 192 | .webui-popover.top-right > .webui-arrow:after, 193 | .webui-popover.top-left > .webui-arrow:after { 194 | content: " "; 195 | bottom: 1px; 196 | margin-left: -10px; 197 | border-top-color: #ffffff; 198 | border-bottom-width: 0; 199 | } 200 | .webui-popover.right > .webui-arrow, 201 | .webui-popover.right-top > .webui-arrow, 202 | .webui-popover.right-bottom > .webui-arrow { 203 | top: 50%; 204 | left: -11px; 205 | margin-top: -11px; 206 | border-left-width: 0; 207 | border-right-color: #999999; 208 | border-right-color: rgba(0, 0, 0, 0.25); 209 | } 210 | .webui-popover.right > .webui-arrow:after, 211 | .webui-popover.right-top > .webui-arrow:after, 212 | .webui-popover.right-bottom > .webui-arrow:after { 213 | content: " "; 214 | left: 1px; 215 | bottom: -10px; 216 | border-left-width: 0; 217 | border-right-color: #ffffff; 218 | } 219 | .webui-popover.bottom > .webui-arrow, 220 | .webui-popover.bottom-right > .webui-arrow, 221 | .webui-popover.bottom-left > .webui-arrow { 222 | top: -11px; 223 | left: 50%; 224 | margin-left: -11px; 225 | border-bottom-color: #999999; 226 | border-bottom-color: rgba(0, 0, 0, 0.25); 227 | border-top-width: 0; 228 | } 229 | .webui-popover.bottom > .webui-arrow:after, 230 | .webui-popover.bottom-right > .webui-arrow:after, 231 | .webui-popover.bottom-left > .webui-arrow:after { 232 | content: " "; 233 | top: 1px; 234 | margin-left: -10px; 235 | border-bottom-color: #ffffff; 236 | border-top-width: 0; 237 | } 238 | .webui-popover.left > .webui-arrow, 239 | .webui-popover.left-top > .webui-arrow, 240 | .webui-popover.left-bottom > .webui-arrow { 241 | top: 50%; 242 | right: -11px; 243 | margin-top: -11px; 244 | border-right-width: 0; 245 | border-left-color: #999999; 246 | border-left-color: rgba(0, 0, 0, 0.25); 247 | } 248 | .webui-popover.left > .webui-arrow:after, 249 | .webui-popover.left-top > .webui-arrow:after, 250 | .webui-popover.left-bottom > .webui-arrow:after { 251 | content: " "; 252 | right: 1px; 253 | border-right-width: 0; 254 | border-left-color: #ffffff; 255 | bottom: -10px; 256 | } 257 | .webui-popover-inverse.top > .webui-arrow, 258 | .webui-popover-inverse.top-left > .webui-arrow, 259 | .webui-popover-inverse.top-right > .webui-arrow, 260 | .webui-popover-inverse.top > .webui-arrow:after, 261 | .webui-popover-inverse.top-left > .webui-arrow:after, 262 | .webui-popover-inverse.top-right > .webui-arrow:after { 263 | border-top-color: #333333; 264 | } 265 | .webui-popover-inverse.right > .webui-arrow, 266 | .webui-popover-inverse.right-top > .webui-arrow, 267 | .webui-popover-inverse.right-bottom > .webui-arrow, 268 | .webui-popover-inverse.right > .webui-arrow:after, 269 | .webui-popover-inverse.right-top > .webui-arrow:after, 270 | .webui-popover-inverse.right-bottom > .webui-arrow:after { 271 | border-right-color: #333333; 272 | } 273 | .webui-popover-inverse.bottom > .webui-arrow, 274 | .webui-popover-inverse.bottom-left > .webui-arrow, 275 | .webui-popover-inverse.bottom-right > .webui-arrow, 276 | .webui-popover-inverse.bottom > .webui-arrow:after, 277 | .webui-popover-inverse.bottom-left > .webui-arrow:after, 278 | .webui-popover-inverse.bottom-right > .webui-arrow:after { 279 | border-bottom-color: #333333; 280 | } 281 | .webui-popover-inverse.left > .webui-arrow, 282 | .webui-popover-inverse.left-top > .webui-arrow, 283 | .webui-popover-inverse.left-bottom > .webui-arrow, 284 | .webui-popover-inverse.left > .webui-arrow:after, 285 | .webui-popover-inverse.left-top > .webui-arrow:after, 286 | .webui-popover-inverse.left-bottom > .webui-arrow:after { 287 | border-left-color: #333333; 288 | } 289 | .webui-popover i.icon-refresh:before { 290 | content: ""; 291 | } 292 | .webui-popover i.icon-refresh { 293 | display: block; 294 | width: 30px; 295 | height: 30px; 296 | font-size: 20px; 297 | top: 50%; 298 | left: 50%; 299 | position: absolute; 300 | margin-left: -15px; 301 | margin-right: -15px; 302 | background: url(../img/loading.gif) no-repeat; 303 | } 304 | @-webkit-keyframes rotate { 305 | 100% { 306 | -webkit-transform: rotate(360deg); 307 | } 308 | } 309 | @keyframes rotate { 310 | 100% { 311 | transform: rotate(360deg); 312 | } 313 | } 314 | .webui-popover-backdrop { 315 | background-color: rgba(0, 0, 0, 0.65); 316 | width: 100%; 317 | height: 100%; 318 | position: fixed; 319 | top: 0; 320 | left: 0; 321 | z-index: 9998; 322 | } 323 | .webui-popover .dropdown-menu { 324 | display: block; 325 | position: relative; 326 | top: 0; 327 | border: none; 328 | box-shadow: none; 329 | float: none; 330 | } 331 | -------------------------------------------------------------------------------- /dist/jquery.webui-popover.min.css: -------------------------------------------------------------------------------- 1 | .webui-popover-content{display:none}.webui-popover-rtl{direction:rtl;text-align:right}.webui-popover{position:absolute;top:0;left:0;z-index:9999;display:none;min-width:50px;min-height:32px;padding:1px;text-align:left;white-space:normal;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.webui-popover.top,.webui-popover.top-left,.webui-popover.top-right{margin-top:-10px}.webui-popover.right,.webui-popover.right-top,.webui-popover.right-bottom{margin-left:10px}.webui-popover.bottom,.webui-popover.bottom-left,.webui-popover.bottom-right{margin-top:10px}.webui-popover.left,.webui-popover.left-top,.webui-popover.left-bottom{margin-left:-10px}.webui-popover.pop{-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);-webkit-transition:transform .15s cubic-bezier(0.3,0,0,1.5);-o-transition:transform .15s cubic-bezier(0.3,0,0,1.5);transition:transform .15s cubic-bezier(0.3,0,0,1.5);opacity:0;filter:alpha(opacity=0)}.webui-popover.pop-out{-webkit-transition-property:"opacity,transform";-o-transition-property:"opacity,transform";transition-property:"opacity,transform";-webkit-transition:.15s linear;-o-transition:.15s linear;transition:.15s linear;opacity:0;filter:alpha(opacity=0)}.webui-popover.fade,.webui-popover.fade-out{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0;filter:alpha(opacity=0)}.webui-popover.out{opacity:0;filter:alpha(opacity=0)}.webui-popover.in{-webkit-transform:none;-o-transform:none;transform:none;opacity:1;filter:alpha(opacity=100)}.webui-popover .webui-popover-content{padding:9px 14px;overflow:auto;display:block}.webui-popover .webui-popover-content>div:first-child{width:99%}.webui-popover-inner .close{font-family:arial;margin:8px 10px 0 0;float:right;font-size:16px;font-weight:700;line-height:16px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);text-decoration:none}.webui-popover-inner .close:hover,.webui-popover-inner .close:focus{opacity:.5;filter:alpha(opacity=50)}.webui-popover-inner .close:after{content:"\00D7";width:.8em;height:.8em;padding:4px;position:relative}.webui-popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:700;line-height:18px;background-color:#fff;border-bottom:1px solid #f2f2f2;border-radius:5px 5px 0 0}.webui-popover-content{padding:9px 14px;overflow:auto;display:none}.webui-popover-inverse{background-color:#333;color:#eee}.webui-popover-inverse .webui-popover-title{background:#333;border-bottom:1px solid #3b3b3b;color:#eee}.webui-no-padding .webui-popover-content{padding:0}.webui-no-padding .list-group-item{border-right:none;border-left:none}.webui-no-padding .list-group-item:first-child{border-top:0}.webui-no-padding .list-group-item:last-child{border-bottom:0}.webui-popover>.webui-arrow,.webui-popover>.webui-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.webui-popover>.webui-arrow{border-width:11px}.webui-popover>.webui-arrow:after{border-width:10px;content:""}.webui-popover.top>.webui-arrow,.webui-popover.top-right>.webui-arrow,.webui-popover.top-left>.webui-arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.webui-popover.top>.webui-arrow:after,.webui-popover.top-right>.webui-arrow:after,.webui-popover.top-left>.webui-arrow:after{content:" ";bottom:1px;margin-left:-10px;border-top-color:#fff;border-bottom-width:0}.webui-popover.right>.webui-arrow,.webui-popover.right-top>.webui-arrow,.webui-popover.right-bottom>.webui-arrow{top:50%;left:-11px;margin-top:-11px;border-left-width:0;border-right-color:#999;border-right-color:rgba(0,0,0,.25)}.webui-popover.right>.webui-arrow:after,.webui-popover.right-top>.webui-arrow:after,.webui-popover.right-bottom>.webui-arrow:after{content:" ";left:1px;bottom:-10px;border-left-width:0;border-right-color:#fff}.webui-popover.bottom>.webui-arrow,.webui-popover.bottom-right>.webui-arrow,.webui-popover.bottom-left>.webui-arrow{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25);border-top-width:0}.webui-popover.bottom>.webui-arrow:after,.webui-popover.bottom-right>.webui-arrow:after,.webui-popover.bottom-left>.webui-arrow:after{content:" ";top:1px;margin-left:-10px;border-bottom-color:#fff;border-top-width:0}.webui-popover.left>.webui-arrow,.webui-popover.left-top>.webui-arrow,.webui-popover.left-bottom>.webui-arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.webui-popover.left>.webui-arrow:after,.webui-popover.left-top>.webui-arrow:after,.webui-popover.left-bottom>.webui-arrow:after{content:" ";right:1px;border-right-width:0;border-left-color:#fff;bottom:-10px}.webui-popover-inverse.top>.webui-arrow,.webui-popover-inverse.top-left>.webui-arrow,.webui-popover-inverse.top-right>.webui-arrow,.webui-popover-inverse.top>.webui-arrow:after,.webui-popover-inverse.top-left>.webui-arrow:after,.webui-popover-inverse.top-right>.webui-arrow:after{border-top-color:#333}.webui-popover-inverse.right>.webui-arrow,.webui-popover-inverse.right-top>.webui-arrow,.webui-popover-inverse.right-bottom>.webui-arrow,.webui-popover-inverse.right>.webui-arrow:after,.webui-popover-inverse.right-top>.webui-arrow:after,.webui-popover-inverse.right-bottom>.webui-arrow:after{border-right-color:#333}.webui-popover-inverse.bottom>.webui-arrow,.webui-popover-inverse.bottom-left>.webui-arrow,.webui-popover-inverse.bottom-right>.webui-arrow,.webui-popover-inverse.bottom>.webui-arrow:after,.webui-popover-inverse.bottom-left>.webui-arrow:after,.webui-popover-inverse.bottom-right>.webui-arrow:after{border-bottom-color:#333}.webui-popover-inverse.left>.webui-arrow,.webui-popover-inverse.left-top>.webui-arrow,.webui-popover-inverse.left-bottom>.webui-arrow,.webui-popover-inverse.left>.webui-arrow:after,.webui-popover-inverse.left-top>.webui-arrow:after,.webui-popover-inverse.left-bottom>.webui-arrow:after{border-left-color:#333}.webui-popover i.icon-refresh:before{content:""}.webui-popover i.icon-refresh{display:block;width:30px;height:30px;font-size:20px;top:50%;left:50%;position:absolute;margin-left:-15px;margin-right:-15px;background:url(../img/loading.gif) no-repeat}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes rotate{100%{transform:rotate(360deg)}}.webui-popover-backdrop{background-color:rgba(0,0,0,.65);width:100%;height:100%;position:fixed;top:0;left:0;z-index:9998}.webui-popover .dropdown-menu{display:block;position:relative;top:0;border:none;box-shadow:none;float:none} -------------------------------------------------------------------------------- /dist/jquery.webui-popover.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * webui popover plugin - v1.2.17 3 | * A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary! 4 | * https://github.com/sandywalker/webui-popover 5 | * 6 | * Made by Sandy Duan 7 | * Under MIT License 8 | */ 9 | !function(a,b,c){"use strict";!function(b){"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):b(a.jQuery)}(function(d){function e(a,b){return this.$element=d(a),b&&("string"===d.type(b.delay)||"number"===d.type(b.delay))&&(b.delay={show:b.delay,hide:b.delay}),this.options=d.extend({},i,b),this._defaults=i,this._name=f,this._targetclick=!1,this.init(),k.push(this.$element),this}var f="webuiPopover",g="webui-popover",h="webui.popover",i={placement:"auto",container:null,width:"auto",height:"auto",trigger:"click",style:"",selector:!1,delay:{show:null,hide:300},async:{type:"GET",before:null,success:null,error:null},cache:!0,multi:!1,arrow:!0,title:"",content:"",closeable:!1,padding:!0,url:"",type:"html",direction:"",animation:null,template:'

 

',backdrop:!1,dismissible:!0,onShow:null,onHide:null,abortXHR:!0,autoHide:!1,offsetTop:0,offsetLeft:0,iframeOptions:{frameborder:"0",allowtransparency:"true",id:"",name:"",scrolling:"",onload:"",height:"",width:""},hideEmpty:!1},j=g+"-rtl",k=[],l=d('
'),m=0,n=!1,o=-2e3,p=d(b),q=function(a,b){return isNaN(a)?b||0:Number(a)},r=function(a){return a.data("plugin_"+f)},s=function(){for(var a=null,b=0;b").attr("src",this.getUrl()),b=this;return d.each(this._defaults.iframeOptions,function(c){"undefined"!=typeof b.options.iframeOptions[c]&&a.attr(c,b.options.iframeOptions[c])}),a},getContent:function(){if(this.getUrl())switch(this.options.type){case"iframe":this.content=this.getIframe();break;case"html":try{this.content=d(this.getUrl()),this.content.is(":visible")||this.content.show()}catch(a){throw new Error("Unable to get popover content. Invalid selector specified.")}}else if(!this.content){var b="";if(b=d.isFunction(this.options.content)?this.options.content.apply(this.$element[0],[this]):this.options.content,this.content=this.$element.attr("data-content")||b,!this.content){var c=this.$element.next();c&&c.hasClass(g+"-content")&&(this.content=c)}}return this.content},setContent:function(a){var b=this.getTarget(),c=this.getContentElement();"string"==typeof a?c.html(a):a instanceof d&&(c.html(""),this.options.cache?a.removeClass(g+"-content").appendTo(c):a.clone(!0,!0).removeClass(g+"-content").appendTo(c)),this.$target=b},isAsync:function(){return"async"===this.options.type},setContentASync:function(a){var b=this;this.xhr||(this.xhr=d.ajax({url:this.getUrl(),type:this.options.async.type,cache:this.getCache(),beforeSend:function(a,c){b.options.async.before&&b.options.async.before(b,a,c)},success:function(c){b.bindBodyEvents(),a&&d.isFunction(a)?b.content=a.apply(b.$element[0],[c]):b.content=c,b.setContent(b.content);var e=b.getContentElement();e.removeAttr("style"),b.displayContent(),b.options.async.success&&b.options.async.success(b,c)},complete:function(){b.xhr=null},error:function(a,c){b.options.async.error&&b.options.async.error(b,a,c)}}))},bindBodyEvents:function(){n||(this.options.dismissible&&"click"===this.getTrigger()?u?p.off("touchstart.webui-popover").on("touchstart.webui-popover",d.proxy(this.bodyTouchStartHandler,this)):(p.off("keyup.webui-popover").on("keyup.webui-popover",d.proxy(this.escapeHandler,this)),p.off("click.webui-popover").on("click.webui-popover",d.proxy(this.bodyClickHandler,this))):"hover"===this.getTrigger()&&p.off("touchend.webui-popover").on("touchend.webui-popover",d.proxy(this.bodyClickHandler,this)))},mouseenterHandler:function(a){var b=this;a&&this.options.selector&&(b=this.delegate(a.currentTarget)),b._timeout&&clearTimeout(b._timeout),b._enterTimeout=setTimeout(function(){b.getTarget().is(":visible")||b.show()},this.getDelayShow())},mouseleaveHandler:function(){var a=this;clearTimeout(a._enterTimeout),a._timeout=setTimeout(function(){a.hide()},this.getHideDelay())},escapeHandler:function(a){27===a.keyCode&&this.hideAll()},bodyTouchStartHandler:function(a){var b=this,c=d(a.currentTarget);c.on("touchend",function(a){b.bodyClickHandler(a),c.off("touchend")}),c.on("touchmove",function(){c.off("touchend")})},bodyClickHandler:function(a){n=!0;for(var b=!0,c=0;c=f&&j.x<=h&&j.y>=g&&j.y<=i;if(l){b=!1;break}}}b&&s()},initTargetEvents:function(){"hover"===this.getTrigger()&&this.$target.off("mouseenter mouseleave").on("mouseenter",d.proxy(this.mouseenterHandler,this)).on("mouseleave",d.proxy(this.mouseleaveHandler,this)),this.$target.find(".close").off("click").on("click",d.proxy(this.hide,this,!0))},getPlacement:function(a){var b,c=this.options.container,d=c.innerWidth(),e=c.innerHeight(),f=c.scrollTop(),g=c.scrollLeft(),h=Math.max(0,a.left-g),i=Math.max(0,a.top-f);b="function"==typeof this.options.placement?this.options.placement.call(this,this.getTarget()[0],this.$element[0]):this.$element.data("placement")||this.options.placement;var j="horizontal"===b,k="vertical"===b,l="auto"===b||j||k;return l?b=d/3>h?e/3>i?j?"right-bottom":"bottom-right":2*e/3>i?k?e/2>=i?"bottom-right":"top-right":"right":j?"right-top":"top-right":2*d/3>h?e/3>i?j?d/2>=h?"right-bottom":"left-bottom":"bottom":2*e/3>i?j?d/2>=h?"right":"left":e/2>=i?"bottom":"top":j?d/2>=h?"right-top":"left-top":"top":e/3>i?j?"left-bottom":"bottom-left":2*e/3>i?k?e/2>=i?"bottom-left":"top-left":"left":j?"left-top":"top-left":"auto-top"===b?b=d/3>h?"top-right":2*d/3>h?"top":"top-left":"auto-bottom"===b?b=d/3>h?"bottom-right":2*d/3>h?"bottom":"bottom-left":"auto-left"===b?b=e/3>i?"left-top":2*e/3>i?"left":"left-bottom":"auto-right"===b&&(b=e/3>i?"right-bottom":2*e/3>i?"right":"right-top"),b},getElementPosition:function(){var a=this.$element[0].getBoundingClientRect(),c=this.options.container,e=c.css("position");if(c.is(b.body)||"static"===e)return d.extend({},this.$element.offset(),{width:this.$element[0].offsetWidth||a.width,height:this.$element[0].offsetHeight||a.height});if("fixed"===e){var f=c[0].getBoundingClientRect();return{top:a.top-f.top+c.scrollTop(),left:a.left-f.left+c.scrollLeft(),width:a.width,height:a.height}}return"relative"===e?{top:this.$element.offset().top-c.offset().top,left:this.$element.offset().left-c.offset().left,width:this.$element[0].offsetWidth||a.width,height:this.$element[0].offsetHeight||a.height}:void 0},getTargetPositin:function(a,c,d,e){var f=a,g=this.options.container,h=this.$element.outerWidth(),i=this.$element.outerHeight(),j=b.documentElement.scrollTop+g.scrollTop(),k=b.documentElement.scrollLeft+g.scrollLeft(),l={},m=null,n=this.options.arrow?20:0,p=10,q=n+p>h?n:0,r=n+p>i?n:0,s=0,t=b.documentElement.clientHeight+j,u=b.documentElement.clientWidth+k,v=f.left+f.width/2-q>0,w=f.left+f.width/2+q0,y=f.top+f.height/2+r", 6 | "homepage": "https://github.com/sandywalker/webui-popover", 7 | "version": "1.2.18", 8 | "license": "MIT", 9 | "devDependencies": { 10 | "grunt": "~0.4.1", 11 | "grunt-cli": "~0.1.7", 12 | "grunt-contrib-coffee": "~0.7.0", 13 | "grunt-contrib-concat": "~0.3.0", 14 | "grunt-contrib-copy": "^0.8.2", 15 | "grunt-contrib-cssmin": "~0.5.0", 16 | "grunt-contrib-jshint": "~0.4.3", 17 | "grunt-contrib-less": "^0.11.4", 18 | "grunt-contrib-uglify": "~0.2.0", 19 | "grunt-jsbeautifier": "^0.2.10" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/sandywalker/webui-popover" 24 | }, 25 | "keywords": [ 26 | "popover", 27 | "jquery-plugin", 28 | "ecosystem:jquery" 29 | ], 30 | "main": "dist/jquery.webui-popover.js", 31 | "scripts": { 32 | "test": "grunt travis --verbose" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/jquery.webui-popover.css: -------------------------------------------------------------------------------- 1 | .webui-popover-content { 2 | display: none; 3 | } 4 | .webui-popover-rtl { 5 | direction: rtl; 6 | text-align: right; 7 | } 8 | /* webui popover */ 9 | .webui-popover { 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | z-index: 9999; 14 | display: none; 15 | min-width: 50px; 16 | min-height: 32px; 17 | padding: 1px; 18 | text-align: left; 19 | white-space: normal; 20 | background-color: #ffffff; 21 | background-clip: padding-box; 22 | border: 1px solid #cccccc; 23 | border: 1px solid rgba(0, 0, 0, 0.2); 24 | border-radius: 6px; 25 | -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 26 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 27 | } 28 | .webui-popover.top, 29 | .webui-popover.top-left, 30 | .webui-popover.top-right { 31 | margin-top: -10px; 32 | } 33 | .webui-popover.right, 34 | .webui-popover.right-top, 35 | .webui-popover.right-bottom { 36 | margin-left: 10px; 37 | } 38 | .webui-popover.bottom, 39 | .webui-popover.bottom-left, 40 | .webui-popover.bottom-right { 41 | margin-top: 10px; 42 | } 43 | .webui-popover.left, 44 | .webui-popover.left-top, 45 | .webui-popover.left-bottom { 46 | margin-left: -10px; 47 | } 48 | .webui-popover.pop { 49 | -webkit-transform: scale(0.8); 50 | -o-transform: scale(0.8); 51 | transform: scale(0.8); 52 | -webkit-transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 53 | -o-transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 54 | transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5); 55 | opacity: 0; 56 | filter: alpha(opacity=0); 57 | } 58 | .webui-popover.pop-out { 59 | -webkit-transition-property: "opacity,transform"; 60 | -o-transition-property: "opacity,transform"; 61 | transition-property: "opacity,transform"; 62 | -webkit-transition: 0.15s linear; 63 | -o-transition: 0.15s linear; 64 | transition: 0.15s linear; 65 | opacity: 0; 66 | filter: alpha(opacity=0); 67 | } 68 | .webui-popover.fade, 69 | .webui-popover.fade-out { 70 | -webkit-transition: opacity 0.15s linear; 71 | -o-transition: opacity 0.15s linear; 72 | transition: opacity 0.15s linear; 73 | opacity: 0; 74 | filter: alpha(opacity=0); 75 | } 76 | .webui-popover.out { 77 | opacity: 0; 78 | filter: alpha(opacity=0); 79 | } 80 | .webui-popover.in { 81 | -webkit-transform: none; 82 | -o-transform: none; 83 | transform: none; 84 | opacity: 1; 85 | filter: alpha(opacity=100); 86 | } 87 | .webui-popover .webui-popover-content { 88 | padding: 9px 14px; 89 | overflow: auto; 90 | display: block; 91 | } 92 | .webui-popover .webui-popover-content > div:first-child { 93 | width: 99%; 94 | } 95 | .webui-popover-inner .close { 96 | font-family: arial; 97 | margin: 8px 10px 0 0; 98 | float: right; 99 | font-size: 16px; 100 | font-weight: bold; 101 | line-height: 16px; 102 | color: #000000; 103 | text-shadow: 0 1px 0 #fff; 104 | opacity: 0.2; 105 | filter: alpha(opacity=20); 106 | text-decoration: none; 107 | } 108 | .webui-popover-inner .close:hover, 109 | .webui-popover-inner .close:focus { 110 | opacity: 0.5; 111 | filter: alpha(opacity=50); 112 | } 113 | .webui-popover-inner .close:after { 114 | content: "\00D7"; 115 | width: 0.8em; 116 | height: 0.8em; 117 | padding: 4px; 118 | position: relative; 119 | } 120 | .webui-popover-title { 121 | padding: 8px 14px; 122 | margin: 0; 123 | font-size: 14px; 124 | font-weight: bold; 125 | line-height: 18px; 126 | background-color: #ffffff; 127 | border-bottom: 1px solid #f2f2f2; 128 | border-radius: 5px 5px 0 0; 129 | } 130 | .webui-popover-content { 131 | padding: 9px 14px; 132 | overflow: auto; 133 | display: none; 134 | } 135 | .webui-popover-inverse { 136 | background-color: #333333; 137 | color: #eeeeee; 138 | } 139 | .webui-popover-inverse .webui-popover-title { 140 | background: #333333; 141 | border-bottom: 1px solid #3b3b3b; 142 | color: #eeeeee; 143 | } 144 | .webui-no-padding .webui-popover-content { 145 | padding: 0; 146 | } 147 | .webui-no-padding .list-group-item { 148 | border-right: none; 149 | border-left: none; 150 | } 151 | .webui-no-padding .list-group-item:first-child { 152 | border-top: 0; 153 | } 154 | .webui-no-padding .list-group-item:last-child { 155 | border-bottom: 0; 156 | } 157 | .webui-popover > .webui-arrow, 158 | .webui-popover > .webui-arrow:after { 159 | position: absolute; 160 | display: block; 161 | width: 0; 162 | height: 0; 163 | border-color: transparent; 164 | border-style: solid; 165 | } 166 | .webui-popover > .webui-arrow { 167 | border-width: 11px; 168 | } 169 | .webui-popover > .webui-arrow:after { 170 | border-width: 10px; 171 | content: ""; 172 | } 173 | .webui-popover.top > .webui-arrow, 174 | .webui-popover.top-right > .webui-arrow, 175 | .webui-popover.top-left > .webui-arrow { 176 | bottom: -11px; 177 | left: 50%; 178 | margin-left: -11px; 179 | border-top-color: #999999; 180 | border-top-color: rgba(0, 0, 0, 0.25); 181 | border-bottom-width: 0; 182 | } 183 | .webui-popover.top > .webui-arrow:after, 184 | .webui-popover.top-right > .webui-arrow:after, 185 | .webui-popover.top-left > .webui-arrow:after { 186 | content: " "; 187 | bottom: 1px; 188 | margin-left: -10px; 189 | border-top-color: #ffffff; 190 | border-bottom-width: 0; 191 | } 192 | .webui-popover.right > .webui-arrow, 193 | .webui-popover.right-top > .webui-arrow, 194 | .webui-popover.right-bottom > .webui-arrow { 195 | top: 50%; 196 | left: -11px; 197 | margin-top: -11px; 198 | border-left-width: 0; 199 | border-right-color: #999999; 200 | border-right-color: rgba(0, 0, 0, 0.25); 201 | } 202 | .webui-popover.right > .webui-arrow:after, 203 | .webui-popover.right-top > .webui-arrow:after, 204 | .webui-popover.right-bottom > .webui-arrow:after { 205 | content: " "; 206 | left: 1px; 207 | bottom: -10px; 208 | border-left-width: 0; 209 | border-right-color: #ffffff; 210 | } 211 | .webui-popover.bottom > .webui-arrow, 212 | .webui-popover.bottom-right > .webui-arrow, 213 | .webui-popover.bottom-left > .webui-arrow { 214 | top: -11px; 215 | left: 50%; 216 | margin-left: -11px; 217 | border-bottom-color: #999999; 218 | border-bottom-color: rgba(0, 0, 0, 0.25); 219 | border-top-width: 0; 220 | } 221 | .webui-popover.bottom > .webui-arrow:after, 222 | .webui-popover.bottom-right > .webui-arrow:after, 223 | .webui-popover.bottom-left > .webui-arrow:after { 224 | content: " "; 225 | top: 1px; 226 | margin-left: -10px; 227 | border-bottom-color: #ffffff; 228 | border-top-width: 0; 229 | } 230 | .webui-popover.left > .webui-arrow, 231 | .webui-popover.left-top > .webui-arrow, 232 | .webui-popover.left-bottom > .webui-arrow { 233 | top: 50%; 234 | right: -11px; 235 | margin-top: -11px; 236 | border-right-width: 0; 237 | border-left-color: #999999; 238 | border-left-color: rgba(0, 0, 0, 0.25); 239 | } 240 | .webui-popover.left > .webui-arrow:after, 241 | .webui-popover.left-top > .webui-arrow:after, 242 | .webui-popover.left-bottom > .webui-arrow:after { 243 | content: " "; 244 | right: 1px; 245 | border-right-width: 0; 246 | border-left-color: #ffffff; 247 | bottom: -10px; 248 | } 249 | .webui-popover-inverse.top > .webui-arrow, 250 | .webui-popover-inverse.top-left > .webui-arrow, 251 | .webui-popover-inverse.top-right > .webui-arrow, 252 | .webui-popover-inverse.top > .webui-arrow:after, 253 | .webui-popover-inverse.top-left > .webui-arrow:after, 254 | .webui-popover-inverse.top-right > .webui-arrow:after { 255 | border-top-color: #333333; 256 | } 257 | .webui-popover-inverse.right > .webui-arrow, 258 | .webui-popover-inverse.right-top > .webui-arrow, 259 | .webui-popover-inverse.right-bottom > .webui-arrow, 260 | .webui-popover-inverse.right > .webui-arrow:after, 261 | .webui-popover-inverse.right-top > .webui-arrow:after, 262 | .webui-popover-inverse.right-bottom > .webui-arrow:after { 263 | border-right-color: #333333; 264 | } 265 | .webui-popover-inverse.bottom > .webui-arrow, 266 | .webui-popover-inverse.bottom-left > .webui-arrow, 267 | .webui-popover-inverse.bottom-right > .webui-arrow, 268 | .webui-popover-inverse.bottom > .webui-arrow:after, 269 | .webui-popover-inverse.bottom-left > .webui-arrow:after, 270 | .webui-popover-inverse.bottom-right > .webui-arrow:after { 271 | border-bottom-color: #333333; 272 | } 273 | .webui-popover-inverse.left > .webui-arrow, 274 | .webui-popover-inverse.left-top > .webui-arrow, 275 | .webui-popover-inverse.left-bottom > .webui-arrow, 276 | .webui-popover-inverse.left > .webui-arrow:after, 277 | .webui-popover-inverse.left-top > .webui-arrow:after, 278 | .webui-popover-inverse.left-bottom > .webui-arrow:after { 279 | border-left-color: #333333; 280 | } 281 | .webui-popover i.icon-refresh:before { 282 | content: ""; 283 | } 284 | .webui-popover i.icon-refresh { 285 | display: block; 286 | width: 30px; 287 | height: 30px; 288 | font-size: 20px; 289 | top: 50%; 290 | left: 50%; 291 | position: absolute; 292 | margin-left: -15px; 293 | margin-right: -15px; 294 | background: url(../img/loading.gif) no-repeat; 295 | } 296 | @-webkit-keyframes rotate { 297 | 100% { 298 | -webkit-transform: rotate(360deg); 299 | } 300 | } 301 | @keyframes rotate { 302 | 100% { 303 | transform: rotate(360deg); 304 | } 305 | } 306 | .webui-popover-backdrop { 307 | background-color: rgba(0, 0, 0, 0.65); 308 | width: 100%; 309 | height: 100%; 310 | position: fixed; 311 | top: 0; 312 | left: 0; 313 | z-index: 9998; 314 | } 315 | .webui-popover .dropdown-menu { 316 | display: block; 317 | position: relative; 318 | top: 0; 319 | border: none; 320 | box-shadow: none; 321 | float: none; 322 | } 323 | -------------------------------------------------------------------------------- /src/jquery.webui-popover.less: -------------------------------------------------------------------------------- 1 | //** Popover body background color 2 | @popover-bg: #fff; 3 | 4 | @popover-inverse-bg: #333; 5 | 6 | @popover-inverse-color: #eee; 7 | //** Popover min width 8 | @popover-min-width: 50px; 9 | 10 | @popover-min-height: 32px; 11 | 12 | //** Popover border color 13 | @popover-border-color: rgba(0,0,0,.2); 14 | 15 | //** Popover fallback border color 16 | @popover-fallback-border-color: #ccc; 17 | 18 | //** Popover title background color 19 | @popover-title-bg: @popover-bg; 20 | @popover-inverse-title-bg: @popover-inverse-bg; 21 | 22 | //** Popover arrow width 23 | @popover-arrow-width: 10px; 24 | //** Popover arrow color 25 | @popover-arrow-color: #fff; 26 | 27 | //** Popover outer arrow width 28 | @popover-arrow-outer-width: (@popover-arrow-width + 1); 29 | //** Popover outer arrow color 30 | @popover-arrow-outer-color: fadein(@popover-border-color, 5%); 31 | //** Popover outer arrow fallback color 32 | @popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); 33 | 34 | @popover-border-radius-base: 4px; 35 | @popover-border-radius-large: 6px; 36 | @popover-border-radius-small: 3px; 37 | 38 | @popover-font-size-base: 14px; 39 | @popover-font-size-large: ceil((@popover-font-size-base * 1.25)); // ~18px 40 | @popover-font-size-small: ceil((@popover-font-size-base * 0.85)); // ~12px 41 | 42 | 43 | @popover-close-size: 16px; 44 | @popover-close-color: #000; 45 | 46 | @popover-z-index: 9999; 47 | @popover-backdrop-z-index: (@popover-z-index - 1); 48 | 49 | .box-shadow(@shadow) { 50 | -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 51 | box-shadow: @shadow; 52 | } 53 | 54 | .opacity(@opacity) { 55 | opacity: @opacity; 56 | // IE8 filter 57 | @opacity-ie: (@opacity * 100); 58 | filter: ~"alpha(opacity=@{opacity-ie})"; 59 | } 60 | 61 | .animation(@animation) { 62 | -webkit-animation: @animation; 63 | -o-animation: @animation; 64 | animation: @animation; 65 | } 66 | 67 | .transform(@transform){ 68 | -webkit-transform: @transform; 69 | -o-transform: @transform; 70 | transform: @transform; 71 | } 72 | 73 | .transition(@transition){ 74 | -webkit-transition: @transition; 75 | -o-transition: @transition; 76 | transition: @transition; 77 | } 78 | 79 | .transition-property(@property){ 80 | -webkit-transition-property: @property; 81 | -o-transition-property: @property; 82 | transition-property: @property; 83 | } 84 | 85 | .webui-popover-content { 86 | display: none; 87 | } 88 | 89 | .webui-popover-rtl{ 90 | direction: rtl; 91 | text-align: right; 92 | } 93 | 94 | /* webui popover */ 95 | .webui-popover { 96 | position: absolute; 97 | top: 0; 98 | left: 0; 99 | z-index: @popover-z-index; 100 | display: none; 101 | min-width: @popover-min-width; 102 | min-height:@popover-min-height; 103 | padding: 1px; 104 | text-align: left; 105 | white-space: normal; 106 | background-color: @popover-bg; 107 | background-clip: padding-box; 108 | border: 1px solid @popover-fallback-border-color; 109 | border: 1px solid @popover-border-color; 110 | border-radius: @popover-border-radius-large; 111 | .box-shadow(0 5px 10px rgba(0,0,0,.2)); 112 | 113 | &.top,&.top-left,&.top-right { margin-top: -@popover-arrow-width; } 114 | &.right,&.right-top,&.right-bottom { margin-left: @popover-arrow-width; } 115 | &.bottom,&.bottom-left,&.bottom-right { margin-top: @popover-arrow-width; } 116 | &.left,&.left-top,&.left-bottom { margin-left: -@popover-arrow-width; } 117 | 118 | 119 | &.pop { 120 | .transform(scale(.8)); 121 | .transition(transform .15s cubic-bezier(.3, 0, 0, 1.5)); 122 | .opacity(0); 123 | } 124 | &.pop-out { 125 | .transition-property("opacity,transform"); 126 | .transition(0.15s linear); 127 | .opacity(0); 128 | } 129 | 130 | &.fade,&.fade-out{ 131 | .transition(opacity .15s linear); 132 | .opacity(0); 133 | } 134 | &.out{ 135 | .opacity(0); 136 | } 137 | 138 | &.in {.transform(none);.opacity(1)}; 139 | 140 | .webui-popover-content { 141 | padding: 9px 14px; 142 | overflow: auto; 143 | display: block; 144 | > div:first-child { 145 | width: 99%; 146 | } 147 | } 148 | } 149 | 150 | 151 | 152 | .webui-popover-inner .close{ 153 | font-family: arial; 154 | margin:8px 10px 0 0; 155 | float: right; 156 | font-size: @popover-close-size; 157 | font-weight: bold; 158 | line-height: @popover-close-size; 159 | color: @popover-close-color; 160 | text-shadow: 0 1px 0 #fff; 161 | .opacity(.2); 162 | text-decoration: none; 163 | &:hover,&:focus{ 164 | .opacity(.5); 165 | } 166 | &:after{ 167 | content: "\00D7"; 168 | width:0.8em; 169 | height:0.8em; 170 | padding: 4px; 171 | //font-family: 'Times New Roman'; 172 | position: relative; 173 | } 174 | } 175 | 176 | .webui-popover-title { 177 | padding: 8px 14px; 178 | margin: 0; 179 | font-size: @popover-font-size-base; 180 | font-weight: bold; 181 | line-height: 18px; 182 | background-color: @popover-title-bg; 183 | border-bottom: 1px solid darken(@popover-title-bg, 5%); 184 | border-radius: (@popover-border-radius-large - 1) (@popover-border-radius-large - 1) 0 0; 185 | } 186 | 187 | .webui-popover-content { 188 | padding: 9px 14px; 189 | overflow: auto; 190 | display: none; 191 | 192 | } 193 | 194 | .webui-popover-inverse{ 195 | background-color:@popover-inverse-bg; 196 | color:@popover-inverse-color; 197 | 198 | .webui-popover-title{ 199 | background: @popover-inverse-title-bg; 200 | border-bottom: 1px solid lighten(@popover-inverse-title-bg, 3%); 201 | color:@popover-inverse-color; 202 | } 203 | } 204 | 205 | .webui-no-padding { 206 | .webui-popover-content { 207 | padding: 0; 208 | } 209 | .list-group-item{ 210 | border-right: none; 211 | border-left:none; 212 | &:first-child{ 213 | border-top:0; 214 | } 215 | &:last-child{ 216 | border-bottom:0; 217 | } 218 | } 219 | } 220 | 221 | 222 | .webui-popover > .webui-arrow{ 223 | &,&:after{ 224 | position: absolute; 225 | display: block; 226 | width: 0; 227 | height: 0; 228 | border-color: transparent; 229 | border-style: solid; 230 | } 231 | } 232 | 233 | .webui-popover > .webui-arrow { 234 | border-width: @popover-arrow-outer-width; 235 | } 236 | .webui-popover > .webui-arrow:after { 237 | border-width: @popover-arrow-width; 238 | content: ""; 239 | } 240 | 241 | .webui-popover{ 242 | &.top >.webui-arrow, 243 | &.top-right >.webui-arrow, 244 | &.top-left >.webui-arrow 245 | { 246 | bottom: -@popover-arrow-outer-width; 247 | left: 50%; 248 | margin-left: -@popover-arrow-outer-width; 249 | border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback 250 | border-top-color: @popover-arrow-outer-color; 251 | border-bottom-width: 0; 252 | &:after{ 253 | content: " "; 254 | bottom: 1px; 255 | margin-left: -@popover-arrow-width; 256 | border-top-color: @popover-arrow-color; 257 | border-bottom-width: 0; 258 | } 259 | } 260 | &.right > .webui-arrow, 261 | &.right-top > .webui-arrow, 262 | &.right-bottom > .webui-arrow { 263 | top: 50%; 264 | left: -@popover-arrow-outer-width; 265 | margin-top: -@popover-arrow-outer-width; 266 | border-left-width: 0; 267 | border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback 268 | border-right-color: @popover-arrow-outer-color; 269 | &:after { 270 | content: " "; 271 | left: 1px; 272 | bottom: -@popover-arrow-width; 273 | border-left-width: 0; 274 | border-right-color: @popover-arrow-color; 275 | } 276 | } 277 | &.bottom >.webui-arrow, 278 | &.bottom-right >.webui-arrow, 279 | &.bottom-left >.webui-arrow 280 | { 281 | top: -@popover-arrow-outer-width; 282 | left: 50%; 283 | margin-left: -@popover-arrow-outer-width; 284 | border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback 285 | border-bottom-color: @popover-arrow-outer-color; 286 | border-top-width: 0; 287 | &:after{ 288 | content: " "; 289 | top: 1px; 290 | margin-left: -@popover-arrow-width; 291 | border-bottom-color: @popover-arrow-color; 292 | border-top-width: 0; 293 | } 294 | } 295 | &.left > .webui-arrow, 296 | &.left-top > .webui-arrow, 297 | &.left-bottom > .webui-arrow { 298 | top: 50%; 299 | right: -@popover-arrow-outer-width; 300 | margin-top: -@popover-arrow-outer-width; 301 | border-right-width: 0; 302 | border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback 303 | border-left-color: @popover-arrow-outer-color; 304 | &:after { 305 | content: " "; 306 | right: 1px; 307 | border-right-width: 0; 308 | border-left-color: @popover-arrow-color; 309 | bottom: -@popover-arrow-width; 310 | } 311 | } 312 | } 313 | 314 | .webui-popover-inverse{ 315 | &.top > .webui-arrow, 316 | &.top-left > .webui-arrow, 317 | &.top-right > .webui-arrow{ 318 | &,&:after{ 319 | border-top-color: @popover-inverse-bg; 320 | } 321 | } 322 | &.right > .webui-arrow, 323 | &.right-top > .webui-arrow, 324 | &.right-bottom > .webui-arrow{ 325 | &,&:after{ 326 | border-right-color: @popover-inverse-bg; 327 | } 328 | } 329 | &.bottom > .webui-arrow, 330 | &.bottom-left > .webui-arrow, 331 | &.bottom-right > .webui-arrow{ 332 | &,&:after{ 333 | border-bottom-color: @popover-inverse-bg; 334 | } 335 | } 336 | &.left > .webui-arrow, 337 | &.left-top > .webui-arrow, 338 | &.left-bottom > .webui-arrow{ 339 | &,&:after{ 340 | border-left-color: @popover-inverse-bg; 341 | } 342 | } 343 | } 344 | 345 | .webui-popover i.icon-refresh:before{ 346 | content: ""; 347 | } 348 | 349 | .webui-popover i.icon-refresh{ 350 | display: block; 351 | width:30px; 352 | height:30px; 353 | font-size: 20px; 354 | top:50%; 355 | left:50%; 356 | position: absolute; 357 | margin-left:-15px; 358 | margin-right:-15px; 359 | background:url(../img/loading.gif) no-repeat; 360 | // .animation(rotate 1s linear 0 infinite); 361 | } 362 | 363 | @-webkit-keyframes rotate { 364 | 100% {-webkit-transform: rotate(360deg);} 365 | } 366 | 367 | @keyframes rotate { 368 | 100% {transform: rotate(360deg);} 369 | } 370 | 371 | .webui-popover-backdrop { 372 | background-color: rgba(0, 0, 0, 0.65); 373 | width:100%; 374 | height:100%; 375 | position: fixed; 376 | top:0; 377 | left:0; 378 | z-index: @popover-backdrop-z-index; 379 | } 380 | 381 | .webui-popover { 382 | //Compatible with bootstrap dropdown-menu 383 | .dropdown-menu{ 384 | display: block; 385 | position:relative; 386 | top:0; 387 | border:none; 388 | box-shadow:none; 389 | float:none; 390 | } 391 | } 392 | 393 | 394 | 395 | -------------------------------------------------------------------------------- /src/webui-layout.sublime-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "auto_complete": 3 | { 4 | "selected_items": 5 | [ 6 | [ 7 | "pos", 8 | "position" 9 | ], 10 | [ 11 | "getCo", 12 | "getContrains" 13 | ], 14 | [ 15 | "text", 16 | "text-align" 17 | ], 18 | [ 19 | "clie", 20 | "clientHeight" 21 | ], 22 | [ 23 | "cont", 24 | "constrainsV" 25 | ], 26 | [ 27 | "client", 28 | "clientWidth" 29 | ], 30 | [ 31 | "pa", 32 | "pageY" 33 | ], 34 | [ 35 | "contr", 36 | "constrainsH" 37 | ], 38 | [ 39 | "webui", 40 | "webuiPopover" 41 | ], 42 | [ 43 | "cli", 44 | "clientX" 45 | ], 46 | [ 47 | "e", 48 | "elementH" 49 | ], 50 | [ 51 | "pop", 52 | "pop-click" 53 | ], 54 | [ 55 | "web", 56 | "webui-popover" 57 | ], 58 | [ 59 | "fi", 60 | "fixedW" 61 | ], 62 | [ 63 | "hide", 64 | "hideAll" 65 | ], 66 | [ 67 | "key", 68 | "keyCode" 69 | ], 70 | [ 71 | "webui-po", 72 | "webui-popover" 73 | ], 74 | [ 75 | "fix", 76 | "fixedW" 77 | ], 78 | [ 79 | "arr", 80 | "arrowSize" 81 | ], 82 | [ 83 | "arro", 84 | "arrowSize" 85 | ], 86 | [ 87 | "elem", 88 | "elementW" 89 | ], 90 | [ 91 | "remove", 92 | "removeAttr" 93 | ], 94 | [ 95 | "dis", 96 | "displayContent" 97 | ], 98 | [ 99 | "gett", 100 | "getTarget" 101 | ], 102 | [ 103 | "target", 104 | "targetWidth" 105 | ], 106 | [ 107 | "el", 108 | "elementW" 109 | ], 110 | [ 111 | "out", 112 | "outerHeight" 113 | ], 114 | [ 115 | "posi", 116 | "postionInfo" 117 | ], 118 | [ 119 | "cl", 120 | "clientHeight" 121 | ], 122 | [ 123 | "scr", 124 | "scrollTop" 125 | ], 126 | [ 127 | "page", 128 | "pageY" 129 | ], 130 | [ 131 | "on", 132 | "on" 133 | ], 134 | [ 135 | "ani", 136 | "animdir-n animation-direction: normal;" 137 | ], 138 | [ 139 | "pla", 140 | "placement" 141 | ], 142 | [ 143 | "list-g", 144 | "list-group-item" 145 | ], 146 | [ 147 | "we", 148 | "-webkit-transform" 149 | ], 150 | [ 151 | "animi", 152 | "animic animation-iteration-count: ${1:1};" 153 | ], 154 | [ 155 | "animde", 156 | "animation-delay" 157 | ], 158 | [ 159 | "an", 160 | "anim- animation: ${1:name} ${2:duration} ${3:timing-function} ${4:delay} ${5:iteration-count} ${6:direction} ${7:fill-mode};" 161 | ], 162 | [ 163 | "is", 164 | "isAsync" 165 | ], 166 | [ 167 | "plugin", 168 | "pluginClass" 169 | ], 170 | [ 171 | "pug", 172 | "pluginType" 173 | ], 174 | [ 175 | "type", 176 | "typeof" 177 | ], 178 | [ 179 | "font-s", 180 | "font-size" 181 | ], 182 | [ 183 | "getC", 184 | "getContentElement" 185 | ], 186 | [ 187 | "s", 188 | "src Attr" 189 | ], 190 | [ 191 | "w", 192 | "width" 193 | ], 194 | [ 195 | "table", 196 | "tableContent" 197 | ], 198 | [ 199 | "fun", 200 | "function" 201 | ], 202 | [ 203 | "set", 204 | "settings" 205 | ], 206 | [ 207 | "cons", 208 | "console" 209 | ], 210 | [ 211 | "btn-", 212 | "btn-style" 213 | ], 214 | [ 215 | "pad", 216 | "padding" 217 | ], 218 | [ 219 | "plug", 220 | "pluginClass" 221 | ], 222 | [ 223 | "plu", 224 | "pluginClass" 225 | ], 226 | [ 227 | "clos", 228 | "closeButton" 229 | ], 230 | [ 231 | "plugi", 232 | "pluginName" 233 | ], 234 | [ 235 | "title", 236 | "titleEl" 237 | ], 238 | [ 239 | "arrow", 240 | "arrowOffset" 241 | ], 242 | [ 243 | "gettarg", 244 | "getTargetPositin" 245 | ], 246 | [ 247 | "getcont", 248 | "getContentElement" 249 | ], 250 | [ 251 | "getTi", 252 | "getTitleElement" 253 | ], 254 | [ 255 | "mous", 256 | "mouseleaveHandler" 257 | ], 258 | [ 259 | "no", 260 | "no-repeat" 261 | ], 262 | [ 263 | "padd", 264 | "padding-left" 265 | ], 266 | [ 267 | "tex", 268 | "text-decoration" 269 | ], 270 | [ 271 | "l", 272 | "left" 273 | ], 274 | [ 275 | "text-", 276 | "text-align" 277 | ], 278 | [ 279 | "for", 280 | "foreach foreach …" 281 | ], 282 | [ 283 | "ma", 284 | "max-height" 285 | ], 286 | [ 287 | "rep", 288 | "replaceByCommentFlag" 289 | ], 290 | [ 291 | "String", 292 | "StringUtils" 293 | ], 294 | [ 295 | "remo", 296 | "removeByCommentFlag" 297 | ], 298 | [ 299 | "author", 300 | "author-end" 301 | ], 302 | [ 303 | "data", 304 | "data-field" 305 | ], 306 | [ 307 | "÷", 308 | ":nowrap" 309 | ], 310 | [ 311 | "min", 312 | "min-width" 313 | ], 314 | [ 315 | "over", 316 | "overflow-x" 317 | ], 318 | [ 319 | "si", 320 | "sidemenuHeight" 321 | ], 322 | [ 323 | "repeat", 324 | "repeat-x" 325 | ], 326 | [ 327 | "sc", 328 | "Scroll" 329 | ], 330 | [ 331 | "di", 332 | ":visible" 333 | ], 334 | [ 335 | "m", 336 | "margin" 337 | ], 338 | [ 339 | "pro", 340 | "proxy" 341 | ], 342 | [ 343 | "scrol", 344 | "scrollLeft" 345 | ], 346 | [ 347 | "act", 348 | "actualHeight" 349 | ], 350 | [ 351 | "cle", 352 | "clientHeight" 353 | ], 354 | [ 355 | "clien", 356 | "clientWidth" 357 | ], 358 | [ 359 | "scro", 360 | "scrollLeft" 361 | ], 362 | [ 363 | "doc", 364 | "documentElement" 365 | ], 366 | [ 367 | "do", 368 | "documentElement" 369 | ], 370 | [ 371 | "ac", 372 | "actualHeight" 373 | ], 374 | [ 375 | "aut", 376 | "actualWidth" 377 | ], 378 | [ 379 | "top", 380 | "top-right" 381 | ], 382 | [ 383 | "au", 384 | "actualHeight" 385 | ], 386 | [ 387 | "get", 388 | "getTarget" 389 | ], 390 | [ 391 | "con", 392 | "console" 393 | ], 394 | [ 395 | "rala", 396 | ":relative" 397 | ], 398 | [ 399 | "checkbox", 400 | "checkboxes" 401 | ], 402 | [ 403 | "check", 404 | "checked" 405 | ], 406 | [ 407 | "display", 408 | "display display: table-types" 409 | ], 410 | [ 411 | "under", 412 | ":underline" 413 | ], 414 | [ 415 | "hidd", 416 | ":hidden" 417 | ], 418 | [ 419 | "chartdata", 420 | "chartDataMJ" 421 | ], 422 | [ 423 | "chart", 424 | "chartType" 425 | ], 426 | [ 427 | "chartd", 428 | "chartData" 429 | ], 430 | [ 431 | "chartdat", 432 | "chartDataFL" 433 | ], 434 | [ 435 | "mes", 436 | "message-content" 437 | ], 438 | [ 439 | "rel", 440 | "relative" 441 | ], 442 | [ 443 | "cur", 444 | "current" 445 | ], 446 | [ 447 | "board", 448 | "board-item" 449 | ], 450 | [ 451 | "curr", 452 | "currentMenu" 453 | ], 454 | [ 455 | "dir", 456 | "direction" 457 | ], 458 | [ 459 | "z", 460 | "z-index" 461 | ], 462 | [ 463 | "vis", 464 | "visibility visibility: type" 465 | ], 466 | [ 467 | "icon-status", 468 | "icon-status-warning-plus" 469 | ], 470 | [ 471 | "dataTab", 472 | "dataTable1" 473 | ], 474 | [ 475 | "po", 476 | "position position: type" 477 | ], 478 | [ 479 | "qu", 480 | "quickCancel" 481 | ], 482 | [ 483 | "Flex", 484 | "FlexPaperViewer" 485 | ], 486 | [ 487 | "view", 488 | "viewWrapper" 489 | ], 490 | [ 491 | "line", 492 | "line-height" 493 | ], 494 | [ 495 | "border-r", 496 | "border-radius-right" 497 | ], 498 | [ 499 | "moz-bor", 500 | "-moz-border-radius" 501 | ], 502 | [ 503 | "inline", 504 | ":inline-block" 505 | ], 506 | [ 507 | "mouse", 508 | "mouseout" 509 | ], 510 | [ 511 | "dash", 512 | ":dotted" 513 | ], 514 | [ 515 | "end", 516 | "endColorstr" 517 | ] 518 | ] 519 | }, 520 | "buffers": 521 | [ 522 | ], 523 | "build_system": "Packages/lessc/lessc.sublime-build", 524 | "command_palette": 525 | { 526 | "height": 207.0, 527 | "selected_items": 528 | [ 529 | [ 530 | "htm", 531 | "Snippet: html" 532 | ], 533 | [ 534 | "html", 535 | "Snippet: html" 536 | ], 537 | [ 538 | "install", 539 | "Package Control: Install Package" 540 | ], 541 | [ 542 | "remov", 543 | "Package Control: Remove Package" 544 | ], 545 | [ 546 | "instal", 547 | "Package Control: Install Package" 548 | ], 549 | [ 550 | "git pus", 551 | "Git: Push" 552 | ], 553 | [ 554 | "git", 555 | "Git: Commit" 556 | ], 557 | [ 558 | "git st", 559 | "Git: Show Tags" 560 | ], 561 | [ 562 | "git stu", 563 | "Git: Status" 564 | ], 565 | [ 566 | "git bran", 567 | "Git: Change Branch" 568 | ], 569 | [ 570 | "git status", 571 | "Git: Status" 572 | ], 573 | [ 574 | "git br", 575 | "Git: Change Branch" 576 | ], 577 | [ 578 | "git checkout", 579 | "Git: Checkout Current File" 580 | ], 581 | [ 582 | "git chec", 583 | "Git: Checkout Tag" 584 | ], 585 | [ 586 | "inst", 587 | "Package Control: Install Package" 588 | ], 589 | [ 590 | "package", 591 | "Preferences: Browse Packages" 592 | ], 593 | [ 594 | "sy", 595 | "Set Syntax: CSS" 596 | ], 597 | [ 598 | "ins", 599 | "Package Control: Install Package" 600 | ], 601 | [ 602 | "sy css", 603 | "Set Syntax: CSS" 604 | ], 605 | [ 606 | "enab", 607 | "Package Control: Enable Package" 608 | ], 609 | [ 610 | "dis", 611 | "Package Control: Disable Package" 612 | ], 613 | [ 614 | "ena", 615 | "Package Control: Enable Package" 616 | ], 617 | [ 618 | "css", 619 | "Set Syntax: CSS" 620 | ], 621 | [ 622 | "remove", 623 | "Package Control: Remove Package" 624 | ], 625 | [ 626 | "REMOVE", 627 | "Package Control: Remove Package" 628 | ], 629 | [ 630 | "CSS", 631 | "Set Syntax: CSS3" 632 | ], 633 | [ 634 | "CSS3", 635 | "CSS3: Insert Reset" 636 | ], 637 | [ 638 | "JS", 639 | "Set Syntax: JavaScript" 640 | ], 641 | [ 642 | "css3", 643 | "CSS3: Insert Reset" 644 | ], 645 | [ 646 | "less", 647 | "Set Syntax: LESS" 648 | ], 649 | [ 650 | "en", 651 | "Package Control: Enable Package" 652 | ], 653 | [ 654 | "sycs", 655 | "Set Syntax: CSS" 656 | ], 657 | [ 658 | "disa", 659 | "Package Control: Disable Package" 660 | ], 661 | [ 662 | "les", 663 | "Set Syntax: LESS" 664 | ], 665 | [ 666 | "sy le", 667 | "Set Syntax: LESS" 668 | ], 669 | [ 670 | "enabl", 671 | "Package Control: Enable Package" 672 | ], 673 | [ 674 | "syle", 675 | "Set Syntax: LESS" 676 | ], 677 | [ 678 | "remo", 679 | "Package Control: Remove Package" 680 | ], 681 | [ 682 | "sy les", 683 | "Set Syntax: LESS" 684 | ], 685 | [ 686 | "instl", 687 | "Package Control: Install Package" 688 | ], 689 | [ 690 | "package ", 691 | "Package Control: Install Package" 692 | ], 693 | [ 694 | "sy htm", 695 | "Set Syntax: HTML" 696 | ], 697 | [ 698 | "sni", 699 | "Snippet: html" 700 | ], 701 | [ 702 | "snip", 703 | "Snippet: html" 704 | ], 705 | [ 706 | "snippet", 707 | "Snippet: html" 708 | ], 709 | [ 710 | "", 711 | "Indentation: Convert to Tabs" 712 | ], 713 | [ 714 | "ht", 715 | "Set Syntax: HTML" 716 | ], 717 | [ 718 | "s", 719 | "Set Syntax: JSON" 720 | ], 721 | [ 722 | "Snippet: ", 723 | "Snippet: html" 724 | ], 725 | [ 726 | "h", 727 | "Set Syntax: HTML" 728 | ], 729 | [ 730 | "Snippet: ht", 731 | "Snippet: html" 732 | ], 733 | [ 734 | "Snippet: htm", 735 | "Snippet: html" 736 | ] 737 | ], 738 | "width": 575.0 739 | }, 740 | "console": 741 | { 742 | "height": 77.0, 743 | "history": 744 | [ 745 | "import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)" 746 | ] 747 | }, 748 | "distraction_free": 749 | { 750 | "menu_visible": true, 751 | "show_minimap": false, 752 | "show_open_files": false, 753 | "show_tabs": false, 754 | "side_bar_visible": false, 755 | "status_bar_visible": false 756 | }, 757 | "expanded_folders": 758 | [ 759 | "/Users/sindtom/github/webui/webui-layout" 760 | ], 761 | "file_history": 762 | [ 763 | "/Users/sindtom/github/webui/webui-layout/iframe-page1.html", 764 | "/Users/sindtom/github/webui/webui-layout/test.html", 765 | "/Volumes/Macintosh HD/Users/msind/windows/download/Goodfellas (1990)/Goodfellas.1990.720p.BrRip.264.YIFY.srt", 766 | "/Users/sindtom/github/webui/webui-popover/src/jquery.webui-popover.css", 767 | "/Users/sindtom/github/webui/webui-popover/src/jquery.webui-popover.less", 768 | "/Users/sindtom/github/webui/webui-popover/README.md", 769 | "/Users/sindtom/github/webui/webui-popover/package.json", 770 | "/Users/sindtom/github/webui/webui-popover/bower.json", 771 | "/Users/sindtom/github/webui/webui-popover/webui-popover.jquery.json", 772 | "/Users/sindtom/github/webui/webui-popover/src/jquery.webui-popover.js", 773 | "/Users/sindtom/github/webui/webui-popover/demo/index.html", 774 | "/Users/sindtom/github/webui/webui-popover/demo/index-dev.html", 775 | "/Users/sindtom/github/webui/webui-popover/dist/jquery.webui-popover.js", 776 | "/private/etc/hosts", 777 | "/Users/sindtom/github/webui/webui-popover/.gitignore", 778 | "/Users/sindtom/Library/Application Support/Sublime Text 3/Packages/Default/Default (OSX).sublime-keymap", 779 | "/Volumes/Macintosh HD/Users/msind/windows/java-project/kc_archive/src/database.properties", 780 | "/Users/sindtom/github/webui/webui-popover/node_modules/grunt-contrib-less/node_modules/less/test/less/import/import-test-a.less", 781 | "/Users/sindtom/github/webui/webui-popover/node_modules/grunt-cli/lib/info.js", 782 | "/Users/sindtom/github/webui/webui-popover/Gruntfile.js", 783 | "/Users/sindtom/github/webui/webui-popover/src/jquery.webui-popover-t.css", 784 | "/Users/sindtom/github/webui/webui-popover/dist/jquery.webui-popover.css", 785 | "/Users/sindtom/github/webui/webui-popover/dist/jquery.webui-popover.min.css", 786 | "/Users/sindtom/web/bootstrap/3.2/bootstrap-3.2.0/less/popovers.less", 787 | "/Users/sindtom/web/bootstrap/3.2/bootstrap-3.2.0/less/mixins/vendor-prefixes.less", 788 | "/Users/sindtom/web/bootstrap/3.2/bootstrap-3.2.0/less/mixins/opacity.less", 789 | "/Users/sindtom/web/bootstrap/3.2/bootstrap-3.2.0/less/variables.less", 790 | "/Users/sindtom/web/bootstrap/3.2/bootstrap-3.2.0/less/close.less", 791 | "/Users/sindtom/github/webui/webui-popover/dist/jquery.webui-popover-t.css", 792 | "/Users/sindtom/web/bootstrap/3.2/bootstrap-3.2.0/less/mixins/forms.less", 793 | "/Users/sindtom/web/bootstrap/3.2/bootstrap-3.2.0/less/mixins/size.less", 794 | "/Users/sindtom/web/bootstrap/3.2/bootstrap-3.2.0/less/mixins/border-radius.less", 795 | "/Users/sindtom/github/webui/webui-popover/node_modules/grunt-contrib-jshint/node_modules/jshint/tests/stable/regression/libs/lodash.js", 796 | "/Users/sindtom/github/webui/webui-popover/node_modules/grunt/node_modules/underscore.string/test/strings_standalone.js", 797 | "/Users/sindtom/github/webui/webui-popover/node_modules/grunt-contrib-less/node_modules/less/test/less/errors/import-no-semi.txt", 798 | "/Users/sindtom/github/webui/webui-popover/node_modules/grunt-contrib-less/node_modules/less/test/less/errors/import-no-semi.less", 799 | "/Users/sindtom/github/webui/webui-popover/src/jquery.webui-popover-t.less", 800 | "/Users/sindtom/github/webui/webui-popover/src/test.css", 801 | "/Users/sindtom/github/webui/webui-popover/demo/bootstrap.css", 802 | "/Users/sindtom/Desktop/webui", 803 | "/Users/sindtom/Library/Application Support/Sublime Text 3/Packages/Default/Preferences.sublime-settings", 804 | "/Users/sindtom/github/webui/webui-popover/.jshintrc", 805 | "/Users/sindtom/github/webui/webui-popover/HISTORY.md", 806 | "/Users/sindtom/github/webui/webui-popover/dist/jquery.boilerplate.js", 807 | "/Users/sindtom/github/webui/webui-popover/src/jquery.boilerplate.js", 808 | "/Users/sindtom/github/webui/webui-popover/boilerplate.jquery.json", 809 | "/Volumes/Macintosh HD/Users/msind/dbback/smart/smartData_2014-05-14.sql", 810 | "/Users/sindtom/Desktop/page-transitions/index.html", 811 | "/Users/sindtom/Sites/public_html/template/6kzz/header.htm", 812 | "/Users/sindtom/Sites/public_html/main.php", 813 | "/Users/sindtom/Sites/public_html/header.php", 814 | "/Users/sindtom/Sites/public_html/index.php", 815 | "/Users/sindtom/Sites/public_html/hr_header.php", 816 | "/Users/sindtom/Sites/public_html/hr_info.php", 817 | "/Users/sindtom/Sites/public_html/hr_test.html", 818 | "/Users/sindtom/.m2/settings.xml", 819 | "/Users/sindtom/Sites/public_html/inc/init.php", 820 | "/Users/sindtom/Sites/public_html/template/6kzz/footer.htm", 821 | "/Users/sindtom/Sites/public_html/header_bak.php", 822 | "/Users/sindtom/Sites/public_html/template/6kzz/header2.htm", 823 | "/Users/sindtom/Sites/public_html/template/6kzz/member.htm", 824 | "/Users/sindtom/java/soft/tomcat/apache-tomcat-6.0.28/conf/server.xml", 825 | "/Users/sindtom/Library/Application Support/Sublime Text 3/Packages/User/SideBarEnhancements/Open With/Side Bar.sublime-menu", 826 | "/Users/sindtom/Sites/public_html/install/data.sql", 827 | "/Users/sindtom/Sites/public_html/install/install.lock", 828 | "/Users/sindtom/Sites/public_html/search.php", 829 | "/Users/sindtom/Sites/public_html/js/signup.js", 830 | "/Users/sindtom/Sites/public_html/sitemap/index.php", 831 | "/Users/sindtom/Sites/public_html/inc/fun.php", 832 | "/Users/sindtom/web/hrcare/hrcare.sublime-project", 833 | "/private/etc/apache2/httpd.conf.pre-update", 834 | "/private/etc/apache2/httpd.conf~previous", 835 | "/Library/WebServer/Documents/info.php", 836 | "/Users/ftp/VirtualUsers/user/receive/12010/12010.xml", 837 | "/Users/ftp/VirtualUsers/user/receive/fawen/12010/12010.xml", 838 | "/Volumes/Macintosh HD/Users/msind/j2ee-project/SmartArchive/war/smart-common-3.01.01.011/WEB-INF/classes/messages.smart.properties", 839 | "/Volumes/Macintosh HD/Users/msind/j2ee-project/SmartArchive/war/smart-common-3.01.01.011/WEB-INF/classes/application.properties", 840 | "/Users/sindtom/web/angularjs/test/hello.html", 841 | "/Users/sindtom/web/node/test/lesson03.js", 842 | "/Volumes/Macintosh HD/Users/msind/windows/feiq-data/smart-books/src/main/java/book/service/BookCategoryService.java", 843 | "/Volumes/Macintosh HD/Users/msind/windows/feiq-data/smart-books/src/main/java/book/web/controller/BookController.java", 844 | "/Volumes/Macintosh HD/Users/msind/windows/feiq-data/smart-books/src/main/java/book/web/controller/bookFormController.java", 845 | "/Volumes/Macintosh HD/Users/msind/windows/feiq-data/smart-books/src/main/java/book/web/controller/BookCategoryController.java", 846 | "/Volumes/Macintosh HD/Users/msind/course/javascript/Object-Oriented JavaScript/code/Lesson 06/toolbar.js", 847 | "/Users/sindtom/j2ee-project-maven/smartFramework/pom.xml", 848 | "/Volumes/Macintosh HD/Users/msind/j2ee-project/SmartArchive/backup/box.list.jsp", 849 | "/Volumes/Macintosh HD/Users/msind/book/tutsplus/course/javascript/Object-Oriented JavaScript/code/Lesson 05/toolbar.js", 850 | "/Users/sindtom/web/test-pages/html-include/html-include.sublime-project", 851 | "/Users/sindtom/java/soft/tomcat/apache-tomcat-7.0.4/conf/server.xml", 852 | "/Users/sindtom/web/webui-framework/src/2.0/tables.html", 853 | "/Users/sindtom/Downloads/pom.xml", 854 | "/Users/sindtom/java/soft/pdf swf/swftools-chinese support/xpdf/chinese-simplified/add-to-xpdfrc", 855 | "/Users/sindtom/.m2/repository/org/smartFramework/smart-common/1.0.1-RELEASE-sdk/smart-common-1.0.1-RELEASE-sdk/template/page/ListTableBody.vm", 856 | "/private/etc/hostconfig", 857 | "/Users/sindtom/j2ee-project-maven/smartFramework/smart-common/src/main/webapp/WEB-INF/views/template/fawen/form-normal-body.jsp", 858 | "/Users/sindtom/web/webui-framework/src/2.0/js/webui.checktoggle.js", 859 | "/Users/sindtom/web/webui-framework/src/2.0/css/webui.css", 860 | "/Users/sindtom/web/webui-framework/src/2.0/js/jquery.js", 861 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive/admin-file-view.html", 862 | "/Users/sindtom/java/open-source/springside/springside4/examples/showcase/src/main/java/org/springside/examples/showcase/security/ShiroDbRealm.java", 863 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive/sa-admin-index.html", 864 | "/Users/sindtom/web/webui-framework/src/2.0/backgrounds.html", 865 | "/Users/sindtom/java/open-source/apache/solr-4.2.1/example/solr-webapp/webapp/admin.html", 866 | "/Volumes/Macintosh HD/Users/msind/java-web/EPhoto/WebContent/WEB-INF/web.xml", 867 | "/Users/sindtom/java/open-source/springside/springside4/modules/core/src/main/java/org/springside/modules/utils/Encodes.java", 868 | "/Users/sindtom/Downloads/archive/src/com/app/archive/web/ElectronLendApproveController.java", 869 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive/admin-setup-report.html", 870 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive/sa-stat-all.html", 871 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive/sa-stat-index.html", 872 | "/Users/sindtom/Desktop/Samples_asp.AJAX/ASP/AjaxSample/FactoryData.asp", 873 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive/admin-arc-list.html", 874 | "/Users/sindtom/web/javascript/bootstrap/bootstrap-notify-master/component.json", 875 | "/Users/sindtom/web/webui-framework/src/2.0/example.html", 876 | "/Users/sindtom/web/webui-framework/src/2.0/flash/FlexPaperViewer.swf", 877 | "/Users/sindtom/web/javascript/scroll/rochal-jQuery-slimScroll-8593e8f/slimScroll.js", 878 | "/Users/sindtom/java/open-source/springside/springside-springside4-4fb1044/modules/core/src/main/java/org/springside/modules/utils/DateProvider.java", 879 | "/Volumes/Macintosh HD/Users/msind/java-web/EPhoto/src/com/common/utils/CommonStringUtils.java", 880 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive/admin-file-list-3.html", 881 | "/Volumes/Macintosh HD/Users/msind/java-web/EPhoto/WebContent/WEB-INF/spring/app-config.xml", 882 | "/Volumes/Macintosh HD/Users/msind/java-web/EPhoto/src/com/category/dao/CategoryDao.java", 883 | "/Users/sindtom/hlsq/courses/jquery3/02/tooltip.js", 884 | "/Users/sindtom/hlsq/homeworks/jquery2/王志强/slide.html", 885 | "/Users/sindtom/web/webui-framework/src/2.0/containers.html", 886 | "/Users/sindtom/web/webui-framework/src/2.0/test2.html", 887 | "/Users/sindtom/web/webui-framework/src/2.0/js/bootstrap.js", 888 | "/Users/sindtom/web/webui-framework/src/2.0/js/bootstrap-tab.js", 889 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive/admin-file-view-pdf.html", 890 | "/Users/sindtom/web/webui-framework/src/2.0/lists.html" 891 | ], 892 | "find": 893 | { 894 | "height": 25.0 895 | }, 896 | "find_in_files": 897 | { 898 | "height": 93.0, 899 | "where_history": 900 | [ 901 | "/Users/sindtom/Sites/public_html", 902 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive", 903 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive,/Users/sindtom/web/webui-framework/src/2.0", 904 | "/Users/sindtom/web/webui-framework/src/2.0/smart-archive", 905 | "" 906 | ] 907 | }, 908 | "find_state": 909 | { 910 | "case_sensitive": true, 911 | "find_history": 912 | [ 913 | "onShow", 914 | "const", 915 | "cont", 916 | "getPlacement", 917 | "console", 918 | "\n horizontal\n  \n  \n  \n  \n horizontal\n  \n  \n  \n horizontal\n ", 919 | "console.log", 920 | "btn ", 921 | "btn-success\"> horizontal", 922 | "vertical", 923 | "btn-default\"> vertical", 924 | "btn-default\"> horizontal", 925 | "href=\"\"", 926 | "btn ", 927 | "    ", 928 | "auto", 929 | "horizontal", 930 | "vertical", 931 | "btn-default", 932 | "horizontal", 933 | "button", 934 | "show", 935 | "auto", 936 | "<", 1027 | "demo-middle", 1028 | "bottom-right", 1029 | "popover", 1030 | ".left", 1031 | "left", 1032 | "warning", 1033 | "bottom", 1034 | "danger", 1035 | "bottom", 1036 | " \n", 1037 | "title", 1038 | "fixedSize", 1039 | "popClass", 1040 | "webuiPopover" 1041 | ], 1042 | "highlight": false, 1043 | "in_selection": false, 1044 | "preserve_case": false, 1045 | "regex": false, 1046 | "replace_history": 1047 | [ 1048 | "
  • 我的空间
    • ", 1049 | "../img/demo/ico/sa/caiwu.png", 1050 | "../img/demo/ico/sa/renshi.png", 1051 | "../img/demo/ico/sa/wenshu.png", 1052 | "../img/demo/ico/sa/jijian.png", 1053 | "", 1054 | "class=\"thumb bg-white\"", 1055 | "", 1056 | "../img/", 1057 | "../img", 1058 | "plus", 1059 | "", 1060 | "serial", 1061 | "thumb-info ", 1062 | "thumb-info margin5-t", 1063 | "thumb-info", 1064 | "glassbar", 1065 | "../img/plupload/", 1066 | "", 1067 | "col", 1068 | "", 1069 | "信息网络部 程国丽 2012-11-12", 1070 | "../img/", 1071 | "
    郑州巡防队阻止志愿者下水救人 称要打捞许可证
    \n
    \n
    \n 程国丽 2012-11-12\n
    \n
    \n 查看  |  \n 快速编辑  |  \n 编辑  |  \n 删除\n
    \n
    ", 1072 | " 待审核", 1073 | "'" 1074 | ], 1075 | "reverse": false, 1076 | "show_context": true, 1077 | "use_buffer2": true, 1078 | "whole_word": false, 1079 | "wrap": false 1080 | }, 1081 | "groups": 1082 | [ 1083 | { 1084 | "sheets": 1085 | [ 1086 | ] 1087 | } 1088 | ], 1089 | "incremental_find": 1090 | { 1091 | "height": 25.0 1092 | }, 1093 | "input": 1094 | { 1095 | "height": 35.0 1096 | }, 1097 | "layout": 1098 | { 1099 | "cells": 1100 | [ 1101 | [ 1102 | 0, 1103 | 0, 1104 | 1, 1105 | 1 1106 | ] 1107 | ], 1108 | "cols": 1109 | [ 1110 | 0.0, 1111 | 1.0 1112 | ], 1113 | "rows": 1114 | [ 1115 | 0.0, 1116 | 1.0 1117 | ] 1118 | }, 1119 | "menu_visible": true, 1120 | "output.exec": 1121 | { 1122 | "height": 112.0 1123 | }, 1124 | "output.find_results": 1125 | { 1126 | "height": 0.0 1127 | }, 1128 | "output.git": 1129 | { 1130 | "height": 75.0 1131 | }, 1132 | "project": "webui-layout.sublime-project", 1133 | "replace": 1134 | { 1135 | "height": 46.0 1136 | }, 1137 | "save_all_on_build": true, 1138 | "select_file": 1139 | { 1140 | "height": 0.0, 1141 | "selected_items": 1142 | [ 1143 | [ 1144 | "re", 1145 | "README.md" 1146 | ], 1147 | [ 1148 | "tab", 1149 | "tables.html" 1150 | ], 1151 | [ 1152 | "webui.js", 1153 | "js/webui.checktoggle.js" 1154 | ], 1155 | [ 1156 | ".css", 1157 | "css/webui.css" 1158 | ], 1159 | [ 1160 | "jq", 1161 | "js/jquery.js" 1162 | ], 1163 | [ 1164 | "bac", 1165 | "backgrounds.html" 1166 | ], 1167 | [ 1168 | "back", 1169 | "backgrounds.html" 1170 | ], 1171 | [ 1172 | "file", 1173 | "smart-archive/admin-file-view.html" 1174 | ], 1175 | [ 1176 | "adm", 1177 | "admin-file-list.html" 1178 | ] 1179 | ], 1180 | "width": 0.0 1181 | }, 1182 | "select_project": 1183 | { 1184 | "height": 500.0, 1185 | "selected_items": 1186 | [ 1187 | [ 1188 | "", 1189 | "/Users/sindtom/web/webui-framework/src/webui2.0.sublime-project" 1190 | ] 1191 | ], 1192 | "width": 380.0 1193 | }, 1194 | "select_symbol": 1195 | { 1196 | "height": 0.0, 1197 | "selected_items": 1198 | [ 1199 | ], 1200 | "width": 0.0 1201 | }, 1202 | "selected_group": 0, 1203 | "settings": 1204 | { 1205 | }, 1206 | "show_minimap": false, 1207 | "show_open_files": true, 1208 | "show_tabs": true, 1209 | "side_bar_visible": true, 1210 | "side_bar_width": 244.0, 1211 | "status_bar_visible": true, 1212 | "template_settings": 1213 | { 1214 | } 1215 | } 1216 | -------------------------------------------------------------------------------- /webui-popover.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webui-popover", 3 | "title": "webui popover plugin ", 4 | "description": "A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!", 5 | "keywords": [ 6 | "popover", 7 | "tooltip", 8 | "webui", 9 | "pop" 10 | ], 11 | "version":"1.2.18", 12 | "author": { 13 | "name": "Sandy Duan", 14 | "email": "sanddywalker@gmail.com", 15 | "url": "http://sandywalker.github.io" 16 | }, 17 | "licenses": [ 18 | { 19 | "type": "MIT", 20 | "url": "http://www.opensource.org/licenses/MIT" 21 | } 22 | ], 23 | "bugs": "https://github.com/sandywalker/webui-popover/issues", 24 | "homepage": "https://github.com/sandywalker/webui-popover", 25 | "docs": "https://github.com/sandywalker/webui-popover", 26 | "demo":"http://sandywalker.github.io/webui-popover/demo", 27 | "download": "https://github.com/sandywalker/webui-popover/releases", 28 | "dependencies": { 29 | "jquery": ">=1.6.0" 30 | } 31 | } 32 | --------------------------------------------------------------------------------