├── .gitattributes
├── LICENSE
├── README.md
├── cascade
    ├── cascade.css
    ├── cascade.html
    └── jquery.cascade.js
├── dialog
    ├── index.html
    ├── jquery.m.dialog.js
    └── m.dialog.css
├── draggable
    ├── draggable.css
    ├── index.html
    └── jquery.draggable.js
├── favicon.ico
├── image
    ├── 1.jpg
    ├── 1.png
    ├── demo
    │   └── demo.gif
    └── extend
    │   ├── step1.png
    │   ├── step2.png
    │   ├── step3.png
    │   ├── step4.png
    │   ├── step5.png
    │   └── step6.png
├── lib
    └── jquery.min.js
├── pagination
    ├── common
    │   ├── common.css
    │   ├── highlight.min.css
    │   ├── highlight.min.js
    │   ├── jquery.min.js
    │   └── reset.css
    ├── index.html
    ├── jquery.pagination.js
    └── pagination.css
├── resizable
    ├── index.html
    ├── jquery.resizable.js
    └── resizable.css
└── tooltips
    ├── common
        ├── common.css
        ├── jquery.min.js
        └── reset.css
    ├── index.html
    ├── jquery.tooltips.js
    └── tips.css


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.html linguist-language=javascript
2 | *.css linguist-language=javascript


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Mss。
 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 | # jQuery插件
2 | 
3 | `jquery.pagination.js`  分页 [DEMO](http://maxiaoxiang.com/jQuery-plugins/pagination/index.html)
4 | </br>
5 | `jquery.dialog.js`      对话框 [DEMO](http://maxiaoxiang.com/jQuery-plugins/dialog/index.html)
6 | </br>
7 | `jquery.tips.js`        提示框 [DEMO](http://maxiaoxiang.com/jQuery-plugins/tips/index.html)


--------------------------------------------------------------------------------
/cascade/cascade.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | /*清除浮动*/
 3 | .clearfix:before, .clearfix:after {content:"";display:table;}
 4 | .clearfix:after{clear:both;}
 5 | .clearfix{ *zoom:1;}/*ie6,7*/
 6 | html,body{
 7 |     height:100%;
 8 | }
 9 | .mod-box{
10 |     position: relative;
11 |     width:100%;
12 |     height:100%;
13 | }
14 | .item{
15 |     width:100px;
16 |     height: 100px;
17 |     background-color:#ccc;
18 |     transition: all 2s;
19 |     -moz-transition: all 2s;
20 |     -webkit-transition: all 2s;
21 |     -o-transition: all 2s;
22 | }
23 | .mod-box:before, .mod-box:after{
24 |     content: "";
25 |     display: table;
26 | }
27 | .mod-box:after{
28 |     clear: both;
29 |     overflow: hidden;
30 | }
31 | .item1,.item3,.item5,.item7,.item9{
32 |     height:200px;
33 |     background-color:#f1f1f1;
34 | }
35 | .item2,.item4,.item6,.item8,.item10{
36 |     height:300px;
37 |     background-color:#ddd;
38 | }
39 | .item11,.item13,.item15,.item17,.item19{
40 |     height:250px;
41 |     background-color:#666;
42 | }
43 | .item12,.item14,.item16,.item18,.item20{
44 |     height:350px;
45 |     background-color:#999;
46 | }
47 | pre{
48 |     padding:10px;
49 |     font-family:Monaco, Consolas, "Courier New";
50 | }
51 | .method{
52 |     font-family:Monaco, Consolas, "Courier New";
53 | }
54 | .eg{
55 |     position: relative;
56 |     margin:20px 0;
57 |     height:100%;
58 |     border:1px dashed #bdbdbd;
59 |     background:#f9f9f9;
60 | }
61 | 
62 | 
63 | 


--------------------------------------------------------------------------------
/cascade/cascade.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="cn-ZH">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <title>pagination.js - Mss</title>
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |         <link href="../favicon.ico" rel="icon" type="image/x-icon" />
 8 |         <link rel="stylesheet" type="text/css" href="http://maxiaoxiang.com/stylesheets/normalize.css" media="screen">
 9 |         <link rel="stylesheet" type="text/css" href="http://maxiaoxiang.com/stylesheets/public.css" media="screen">
10 |         <link rel="stylesheet" type="text/css" href="./cascade.css" media="screen">
11 |         <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
12 |     </head>
13 |     <body>
14 |         <div class="wrapper">
15 |             <div class="container">
16 |                 <div class="sidebar">
17 |                     <div class="hd">
18 |                         <div class="site-meta">
19 |                             <a href="http://maxiaoxiang.com" class="brand">
20 |                                 <span class="site-title">Mss。</span>
21 |                             </a>
22 |                         </div>
23 |                     </div>
24 |                     <div class="bd">
25 |                         <div class="site-nav">
26 |                             <ul class="menu">
27 |                                 <li class="menu-item menu-item-active">
28 |                                     <a href="http://maxiaoxiang.com/" class="repertory">插件库</a>
29 |                                 </li>
30 |                                 <li class="menu-item">
31 |                                     <a href="http://maxiaoxiang.com/blog/" target="_blank" class="blog">博客</a>
32 |                                 </li>
33 |                                 <li class="menu-item">
34 |                                     <a href="http://maxiaoxiang.com/message.html" class="message">留言板</a>
35 |                                 </li>
36 |                             </ul>
37 |                         </div>
38 |                     </div>
39 |                     <div class="ft">
40 |                         <div class="site-info">
41 |                             <img src="https://avatars0.githubusercontent.com/u/11399676?v=3&s=460" alt="Mss。" class="avatar">
42 |                             <p class="name">Mss。</p>
43 |                             <p class="description">be happy</p>
44 |                             <div class="links">
45 |                                 <span class="links-item">
46 |                                     <a href="https://github.com/Maxiaoxiang" target="_blank" title="GitHub">GitHub</a>
47 |                                 </span>
48 |                             </div>
49 |                         </div>
50 |                     </div>
51 |                 </div>
52 |                 <div class="content">
53 |                     <h1>瀑布流布局-cascade（未完善）</h1>
54 |                     <p>需先引入jQuery，再引入pagination组件</p>
55 |                     <pre class="bad">&lt;script&nbsp;src="jquery.js"&gt;&lt;/script&gt;</pre>
56 |                     <pre class="bad">&lt;script&nbsp;src="jquery.cascade.js"&gt;&lt;/script&gt;</pre>
57 |                     <p>组件样式与功能分离，自定义样式。</p>
58 |                     <div class="eg">
59 |                         <p>HTML</p>
60 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"mod-box"</span><span style="color:#170">&gt;</span><br>    <span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"item item1"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span><br>    ... ...<br>    <span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"item item20"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span><br><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
61 |                         <p>Javascript</p>
62 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444">$('.mod-box').cascade();</pre>
63 |                     </div>
64 |                 </div>
65 |             </div>
66 |             <div class="footer">
67 |                 <p>&copy; <a href="http://github.com/Maxiaoxiang" target="_blank">Mss。</a><span class="spe">/</span>Powered by <a href="http://maxiaoxiang.com" target="_blank">Maxiaoxiang</a></p>
68 |             </div>
69 |         </div>
70 |         <script src="../lib/jquery.min.js"></script>
71 |         <script src="./jquery.cascade.js"></script>
72 |     </body>
73 | </html>


--------------------------------------------------------------------------------
/cascade/jquery.cascade.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * cascade瀑布流插件
  3 |  * @version 1.1.1
  4 |  * @author mss
  5 |  * @url http://maxiaoxiang.com/plugin/cascade.html
  6 |  *
  7 |  * @调用方法
  8 |  * $(selector).cascade(option, callback);
  9 |  */
 10 | ;(function($,window,document,undefined){
 11 | 
 12 | 	//配置参数
 13 | 	var defaults = {
 14 | 		liCls: 'item',			//排列元素样式名
 15 | 		horizontal: '10',		//水平间距
 16 | 		vertical: '10',			//垂直间距
 17 | 		ajaxMore: function(){},	//加载更多
 18 | 		callback: function(){}	//回调
 19 | 	};
 20 | 
 21 | 	var Cascade = function(element,options){
 22 | 		//全局变量
 23 | 		var opts = options,//配置
 24 | 			$d = $(document),
 25 | 			$w = $(window),
 26 | 			$obj = $(element);//容器
 27 | 
 28 | 		//排列
 29 | 		this.arrangement = function(){
 30 | 			var box_w = $obj.width(),
 31 | 				$li = $('.'+opts.liCls),
 32 | 				li_w = $li.eq(0).width() + Number(opts.horizontal),
 33 | 				column = Math.floor(box_w / li_w),
 34 | 				len = $li.length,
 35 | 				first_arr = [],
 36 | 				li_arr = [];
 37 | 			$li.each(function(i){
 38 | 				li_arr.push($(this).height());
 39 | 				if(i < column){
 40 | 					$li.eq(i).css({
 41 | 						'position': 'absolute',
 42 | 						'top': '0',
 43 | 						'left': li_w * i + 'px'
 44 | 					});
 45 | 					first_arr.push($li.eq(i).height());
 46 | 				}
 47 | 			});
 48 | 			for(var i = column; i < len; i++){
 49 | 				var index = this.getMinIndex(first_arr);
 50 | 				$li.eq(i).css({
 51 | 					'position': 'absolute',
 52 | 					'top': first_arr[index] + Number(opts.vertical) + 'px',
 53 | 					'left': li_w * index + 'px'
 54 | 				});
 55 | 				first_arr[index] = li_arr[i] + first_arr[index] + Number(opts.vertical);
 56 | 			}
 57 | 		};
 58 | 		//获取最小高度下标
 59 | 		this.getMinIndex = function(arr){
 60 | 			var a = arr[0];
 61 | 			var index = 0;
 62 | 			for (var i in arr) {
 63 | 				if (arr[i] < a) {
 64 | 					a = arr[i];
 65 | 					index = i;
 66 | 				}
 67 | 			}
 68 | 			return index;
 69 | 		};
 70 | 		//节流
 71 | 		this.resize = function(){
 72 | 			clearTimeout(time);
 73 | 			var self = this,
 74 | 				time = setTimeout(function(){
 75 | 					$w.resize(function(){
 76 | 						self.arrangement();
 77 | 					});
 78 | 				},500);
 79 | 		};
 80 | 		//滚动加载
 81 | 		this.scroll = function(options){
 82 | 			$w.scroll(function(){
 83 | 				if($d.scrollTop() + $w.height() >= $d.height()){//滚动到底部
 84 | 					console.log(options);
 85 | 				}
 86 | 			});
 87 | 		};
 88 | 		//初始化
 89 | 		this.init = function(){
 90 | 			this.arrangement();
 91 | 			this.resize();
 92 | 			this.scroll(options);
 93 | 		};
 94 | 		this.init();
 95 | 	};
 96 | 
 97 | 	$.fn.cascade = function(parameter,callback){
 98 | 		if(typeof parameter == 'function'){//重载
 99 | 			callback = parameter;
100 | 			parameter = {};
101 | 		}else{
102 | 			parameter = parameter || {};
103 | 			callback = callback || function(){};
104 | 		}
105 | 		var options = $.extend({},defaults,parameter);
106 | 		return this.each(function(){
107 | 			var cascade = new Cascade(this,options);
108 | 			callback(cascade);
109 | 		});
110 | 	};
111 | 
112 | })(jQuery,window,document);


--------------------------------------------------------------------------------
/dialog/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>m.dialog.js - Mss</title>
  6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |         <link href="../favicon.ico" rel="icon" type="image/x-icon" />
  8 |         <link rel="stylesheet" type="text/css" href="http://maxiaoxiang.com/stylesheets/normalize.css" media="screen">
  9 |         <link rel="stylesheet" type="text/css" href="http://maxiaoxiang.com/stylesheets/public.css" media="screen">
 10 |         <link rel="stylesheet" type="text/css" href="./style/m.dialog.css" media="screen">
 11 |         <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 12 |     </head>
 13 |     <body>
 14 |         <div class="wrapper">
 15 |             <div class="container">
 16 |                 <div class="sidebar">
 17 |                     <div class="hd">
 18 |                         <div class="site-meta">
 19 |                             <a href="http://maxiaoxiang.com" class="brand">
 20 |                                 <span class="site-title">Mss。</span>
 21 |                             </a>
 22 |                         </div>
 23 |                     </div>
 24 |                     <div class="bd">
 25 |                         <div class="site-nav">
 26 |                             <ul class="menu">
 27 |                                 <li class="menu-item menu-item-active">
 28 |                                     <a href="http://maxiaoxiang.com/" class="repertory">插件库</a>
 29 |                                 </li>
 30 |                                 <li class="menu-item">
 31 |                                     <a href="http://maxiaoxiang.com/blog/" target="_blank" class="blog">博客</a>
 32 |                                 </li>
 33 |                                 <li class="menu-item">
 34 |                                     <a href="http://maxiaoxiang.com/message.html" class="message">留言板</a>
 35 |                                 </li>
 36 |                             </ul>
 37 |                         </div>
 38 |                     </div>
 39 |                     <div class="ft">
 40 |                         <div class="site-info">
 41 |                             <img src="https://avatars0.githubusercontent.com/u/11399676?v=3&s=460" alt="Mss。" class="avatar">
 42 |                             <p class="name">Mss。</p>
 43 |                             <p class="description">be happy</p>
 44 |                             <div class="links">
 45 |                                 <span class="links-item">
 46 |                                     <a href="https://github.com/Maxiaoxiang" target="_blank" title="GitHub">GitHub</a>
 47 |                                 </span>
 48 |                             </div>
 49 |                         </div>
 50 |                     </div>
 51 |                 </div>
 52 |                 <div class="content">
 53 |                     <h1>移动端对话框-dialog</h1>
 54 |                     <p>需先引入jQuery，再引入dialog组件</p>
 55 |                     <pre class="bad">&lt;script&nbsp;src="jquery.js"&gt;&lt;/script&gt;</pre>
 56 |                     <pre class="bad">&lt;script&nbsp;src="jquery.m.dialog.js"&gt;&lt;/script&gt;</pre>
 57 |                     <p>组件样式与功能分离，自定义样式</p>
 58 |                     <div class="eg">
 59 |                         <iframe width="100%" height="300" src="//jsrun.net/Z9KKp/embedded/result/light/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 60 |                         <p>HTML</p>
 61 |         <pre style="margin:15px 0;font:100 12px/18px;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'button'</span>).<span style="color:#000">click</span>(<span style="color:#708">function</span>(){<br>    <span style="color:#000">dialog</span>.<span style="color:#000">open</span>({<br>        <span style="color:#000">title</span>: <span style="color:#a11">'标题'</span>,<br>        <span style="color:#000">content</span>: <span style="color:#a11">'内容'</span>,<br>        <span style="color:#000">clickShadeHide</span>: <span style="color:#219">false</span>,<br>        <span style="color:#000">button</span>: {<br>            <span style="color:#a11">'取消|cancel'</span>: <span style="color:#708">function</span>(){<br>                <span style="color:#000">dialog</span>.<span style="color:#000">close</span>(); <span style="color:#a50">//关闭对话框</span><br>             },<br>            <span style="color:#a11">'确定|yes'</span>: <span style="color:#708">function</span>(){<br>                <span style="color:#000">dialog</span>.<span style="color:#000">close</span>(); <span style="color:#a50">//关闭对话框</span><br>                <span style="color:#a50">/*自定义的回调完后显示返回状态，与插件无关*/</span><br>                <span style="color:#708">var</span> <span style="color:#00f">$body</span> = <span style="color:#000">$</span>(<span style="color:#a11">'body'</span>);<br>                <span style="color:#708">var</span> <span style="color:#00f">html</span> = <span style="color:#a11">'&lt;div id="tip" class="mod-tip"&gt;\</span><br>                                      <span style="color:#a11">&lt;div class="tip-inner"&gt;\</span><br>                                          <span style="color:#a11">&lt;div class="tip-main"&gt;\</span><br>                                              <span style="color:#a11">&lt;div class="tip_loading"&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_0"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_1"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_2"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_3"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_4"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_5"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_6"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_7"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_8"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_9"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_10"&gt;&lt;/div&gt;\</span><br>                                                  <span style="color:#a11">&lt;div class="tip_loading_leaf tip_loading_leaf_11"&gt;&lt;/div&gt;\</span><br>                                              <span style="color:#a11">&lt;/div&gt;\</span><br>                                              <span style="color:#a11">&lt;p class="msg"&gt;处理中...&lt;/p&gt;\</span><br>                                          <span style="color:#a11">&lt;/div&gt;\</span><br>                                      <span style="color:#a11">&lt;/div&gt;\</span><br>                                  <span style="color:#a11">&lt;/div&gt;'</span>;<br>                <span style="color:#000-2">$body</span>.<span style="color:#000">append</span>(<span style="color:#000-2">html</span>);<br>                <span style="color:#000">setTimeout</span>(<span style="color:#708">function</span>(){<br>                    <span style="color:#708">if</span>(<span style="color:#000">$</span>(<span style="color:#a11">'#tip'</span>).<span style="color:#000">length</span> &lt; <span style="color:#164">1</span>) <span style="color:#708">return</span>;<br>                    <span style="color:#000">$</span>(<span style="color:#a11">'#tip'</span>).<span style="color:#000">remove</span>();<br>                }, <span style="color:#164">2000</span>);<br>            }<br>        }<br>   });<br>});</pre>
 62 |                     </div>
 63 |                     <div class="options">
 64 |                         <p>options(参数配置)</p>
 65 |                         <table>
 66 |                             <thead>
 67 |                                 <tr>
 68 |                                     <td>参数</td>
 69 |                                     <td>默认值</td>
 70 |                                     <td class="explain">说明</td>
 71 |                                 </tr>
 72 |                             </thead>
 73 |                             <tbody>
 74 |                                 <tr>
 75 |                                     <td>dialogCls</td>
 76 |                                     <td>'mod-dialog'</td>
 77 |                                     <td class="explain">弹框class</td>
 78 |                                 </tr>
 79 |                                 <tr>
 80 |                                     <td>shadeCls</td>
 81 |                                     <td>mod-shade</td>
 82 |                                     <td class="explain">遮罩class</td>
 83 |                                 </tr>
 84 |                                 <tr>
 85 |                                     <td>title</td>
 86 |                                     <td>''</td>
 87 |                                     <td class="explain">标题</td>
 88 |                                 </tr>
 89 |                                 <tr>
 90 |                                     <td>content</td>
 91 |                                     <td>''</td>
 92 |                                     <td class="explain">内容</td>
 93 |                                 </tr>
 94 |                                 <tr>
 95 |                                     <td>button</td>
 96 |                                     <td>{'取消|cancel': function(){alert('点击了取消')},'确定|yes': function(){alert('点击了确定')}}</td>
 97 |                                     <td class="explain">取消(按钮文字)|cancel(按钮class)，按钮触发的回调</td>
 98 |                                 </tr>
 99 |                                 <tr>
100 |                                     <td>hasShade</td>
101 |                                     <td>true</td>
102 |                                     <td class="explain">是否有遮罩</td>
103 |                                 </tr>
104 |                                 <tr>
105 |                                     <td>clickShadeHide</td>
106 |                                     <td>false</td>
107 |                                     <td class="explain">是否能点击遮罩关闭对话框</td>
108 |                                 </tr>
109 |                             </tbody>
110 |                         </table>
111 |                     </div>
112 |                 </div>
113 |             </div>
114 |         </div>
115 |     </body>
116 | </html>
117 | 


--------------------------------------------------------------------------------
/dialog/jquery.m.dialog.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * dialog.js - 移动端弹窗插件
 3 |  * @version 1.0.0
 4 |  * @author Mss
 5 |  */
 6 | ;(function($,window,document,undefined){
 7 | 
 8 | 	//默认配置
 9 | 	var options = {
10 | 		dialogCls: 'mod-dialog', //弹框class
11 | 		maskCls: 'mod-shade', //遮罩class
12 | 		title: '', //标题
13 | 		content: '', //内容
14 | 		button: {
15 | 			'取消|cancel': function(){alert('点击了取消')},
16 | 			'确定|yes': function(){alert('点击了确定')}
17 | 		}, //按钮
18 | 		hasMask: true, //是否有遮罩
19 | 		clickShadeHide: false //是否可以点击遮罩关闭
20 | 	};
21 | 
22 | 	window.dialog = {
23 | 		//打开
24 | 		open: function(options){
25 | 			new Dialog(options);
26 | 		},
27 | 		//关闭
28 | 		close: function(){
29 | 			var $box = $('#dialog');
30 | 			var $shade = $('#shade');
31 | 			if($box.length < 1) return;
32 | 			$box.remove();
33 | 			$shade.remove();
34 | 		}
35 | 	};
36 | 
37 | 	var Dialog = function(parameter){
38 | 		dialog.close();
39 | 		var opts = $.extend({}, options, parameter);
40 | 		var $body = $('body');
41 | 		var $box = $('<div id="dialog" class="'+opts.dialogCls+'"></div>');
42 | 		var $shade = opts.hasMask ? $('<div id="shade" class="'+opts.maskCls+'"></div>') : '';
43 | 		var title = opts.title !== '' ? '<div class="dialog-title">'+opts.title+'</div>' : '';
44 | 		var html = '<div id="inner" class="dialog-inner">\
45 | 						<div class="dialog-main">\
46 | 							'+title+'\
47 | 							<div class="dialog-content">'+opts.content+'</div>\
48 | 							<div class="dialog-btns"></div>\
49 | 						</div>\
50 | 					</div>';
51 | 		$box.html(html);
52 | 		for(name in opts.button){//遍历按钮插入弹窗
53 | 			(function (name){
54 | 				var mss = name.split('|');
55 | 				var cls = mss[1] ? mss[1] : 'btn';
56 | 				$('<a href="javascript:;" class="'+cls+'">'+mss[0]+'</a>').appendTo($box.find('.dialog-btns')).click(function(){
57 | 					opts.button[name](this);
58 | 				});
59 | 			})(name);
60 | 		}
61 | 		$body.append($box).append($shade);
62 | 		if(opts.hasMask && opts.clickShadeHide && $('#shade').length){
63 | 			$('#dialog').on('click', function(e){
64 | 				e.target.id === 'inner' && dialog.close();
65 | 			});
66 | 		}
67 | 	};
68 | 
69 | })(jQuery,window,document);


--------------------------------------------------------------------------------
/dialog/m.dialog.css:
--------------------------------------------------------------------------------
  1 | .mod-dialog {
  2 |     display: table;
  3 |     position: fixed;
  4 |     left: 0;
  5 |     top: 0;
  6 |     width: 100%;
  7 |     height: 100%;
  8 |     z-index: 100000
  9 | }
 10 | .mod-dialog .dialog-btns {
 11 |     zoom:1
 12 | }
 13 | 
 14 | .mod-dialog .dialog-btns:before {
 15 |     content: "";
 16 |     display: table
 17 | }
 18 | 
 19 | .mod-dialog .dialog-btns:after {
 20 |     content: "";
 21 |     display: table;
 22 |     clear: both;
 23 |     overflow: hidden
 24 | }
 25 | .mod-dialog .dialog-inner {
 26 |     display: table-cell;
 27 |     vertical-align: middle;
 28 |     text-align: center
 29 | }
 30 | 
 31 | .mod-dialog .dialog-main {
 32 |     display: inline-block;
 33 |     position: relative;
 34 |     padding-top: 20px;
 35 |     width: 60%;
 36 |     background-color: #fff;
 37 |     -moz-border-radius: 3px;
 38 |     -webkit-border-radius: 3px;
 39 |     border-radius: 3px;
 40 |     -webkit-animation-name: bounceIn;
 41 |     animation-name: bounceIn;
 42 |     -webkit-animation-fill-mode: both;
 43 |     animation-fill-mode: both;
 44 |     -webkit-animation-duration: .18s
 45 | }
 46 | 
 47 | .mod-dialog .dialog-content {
 48 |     padding: 20px 40px;
 49 |     word-wrap: break-word;
 50 |     word-break: break-all;
 51 |     font-size: 16px;
 52 |     line-height: 16px;
 53 |     color: #888
 54 | }
 55 | 
 56 | .mod-dialog .title {
 57 |     -moz-box-sizing: border-box;
 58 |     -webkit-box-sizing: border-box;
 59 |     box-sizing: border-box;
 60 |     padding: 0 10px;
 61 |     overflow: hidden;
 62 |     text-overflow: ellipsis;
 63 |     white-space: nowrap;
 64 |     font-size: 32px;
 65 |     height: 40px;
 66 |     line-height: 40px;
 67 |     color: #000;
 68 |     -webkit-touch-callout: none;
 69 |     -moz-user-select: -moz-none;
 70 |     -ms-user-select: none;
 71 |     -webkit-user-select: none;
 72 |     user-select: none
 73 | }
 74 | 
 75 | .mod-dialog .dialog-btns {
 76 |     position: relative;
 77 |     text-align: center;
 78 |     height: 40px;
 79 |     line-height: 40px;
 80 |     border-top: 1px solid #dfdfdf
 81 | }
 82 | 
 83 | .mod-dialog .dialog-btns a {
 84 |     display: block;
 85 |     position: relative;
 86 |     width: 100%;
 87 |     height: 100%;
 88 |     text-align: center;
 89 |     font-size: 14px;
 90 |     cursor: pointer;
 91 |     text-decoration: none;
 92 |     -moz-border-radius: 3px;
 93 |     -webkit-border-radius: 3px;
 94 |     border-radius: 3px
 95 | }
 96 | 
 97 | .mod-dialog .dialog-btns a.yes {
 98 |     float: left;
 99 |     width: 50%;
100 |     color: #00c000
101 | }
102 | 
103 | .mod-dialog .dialog-btns a.yes:first-child {
104 |     width: 100%
105 | }
106 | 
107 | .mod-dialog .dialog-btns a.cancel {
108 |     float: left;
109 |     width: 50%;
110 |     color: #000
111 | }
112 | 
113 | .mod-dialog .dialog-btns a.cancel:before {
114 |     content: '\20';
115 |     position: absolute;
116 |     width: 1px;
117 |     height: 40px;
118 |     right: 0;
119 |     top: 0;
120 |     background-color: #dfdfdf
121 | }
122 | 
123 | .mod-shade {
124 |     position: fixed;
125 |     pointer-events: auto;
126 |     top: 0;
127 |     left: 0;
128 |     width: 100%;
129 |     height: 100%;
130 |     z-index: 99999;
131 |     background: #000;
132 |     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
133 |     opacity: 0.5
134 | }
135 | 
136 | @-webkit-keyframes bounceIn {
137 |     0% {
138 |         opacity: 0;
139 |         -webkit-transform: scale(0.5);
140 |         transform: scale(0.5)
141 |     }
142 | 
143 |     100% {
144 |         opacity: 1;
145 |         -webkit-transform: scale(1);
146 |         transform: scale(1)
147 |     }
148 | }
149 | 
150 | 
151 | 
152 | /*------------------------tip------------------------*/
153 | 
154 | .mod-tip {
155 |     display: table;
156 |     position: fixed;
157 |     left: 0;
158 |     top: 0;
159 |     width: 100%;
160 |     height: 100%;
161 |     z-index: 100000
162 | }
163 | 
164 | .mod-tip .tip-inner {
165 |     display: table-cell;
166 |     vertical-align: middle;
167 |     text-align: center
168 | }
169 | 
170 | .mod-tip .tip-main {
171 |     position: relative;
172 |     margin: 0 auto;
173 |     padding-top: 80px;
174 |     width: 120px;
175 |     min-height: 120px;
176 |     background: rgba(40,40,40,0.75);
177 |     text-align: center;
178 |     -webkit-border-radius: 5px;
179 |     -moz-border-radius: 5px;
180 |     border-radius: 5px;
181 |     color: #fff;
182 |     -webkit-box-sizing: border-box;
183 |     -moz-box-sizing: border-box;
184 |     box-sizing: border-box
185 | }
186 | 
187 | .mod-tip .msg {
188 |     margin: 0;
189 |     font-size: 14px;
190 |     color: #fff
191 | }
192 | 
193 | .mod-tip .msg.normal {
194 |     background: url('/image/m/public/tips.png') no-repeat;
195 |     background-size: 0.77rem auto;
196 |     background-position: center -1.6rem
197 | }
198 | 
199 | .mod-tip .msg.error {
200 |     background: url('/image/m/public/tips.png') no-repeat;
201 |     background-size: 0.77rem auto;
202 |     background-position: center 0.6rem
203 | }
204 | 
205 | .tip_loading {
206 |     position: absolute;
207 |     width: 0px;
208 |     left: 50%;
209 |     top: 38%
210 | }
211 | 
212 | .tip_loading_leaf {
213 |     position: absolute;
214 |     top: -1px;
215 |     opacity: 0.25
216 | }
217 | 
218 | .tip_loading_leaf:before {
219 |     content: " ";
220 |     position: absolute;
221 |     width: 8.14px;
222 |     height: 3.08px;
223 |     background: #d1d1d5;
224 |     box-shadow: rgba(0,0,0,0.09804) 0px 0px 1px;
225 |     border-radius: 1px;
226 |     -webkit-transform-origin: left 50% 0px
227 | }
228 | 
229 | .tip_loading_leaf_0 {
230 |     -webkit-animation: opacity-60-25-0-12 1.25s linear infinite
231 | }
232 | 
233 | .tip_loading_leaf_0:before {
234 |     -webkit-transform: rotate(0deg) translate(7.92px, 0px)
235 | }
236 | 
237 | .tip_loading_leaf_1 {
238 |     -webkit-animation: opacity-60-25-1-12 1.25s linear infinite
239 | }
240 | 
241 | .tip_loading_leaf_1:before {
242 |     -webkit-transform: rotate(30deg) translate(7.92px, 0px)
243 | }
244 | 
245 | .tip_loading_leaf_2 {
246 |     -webkit-animation: opacity-60-25-2-12 1.25s linear infinite
247 | }
248 | 
249 | .tip_loading_leaf_2:before {
250 |     -webkit-transform: rotate(60deg) translate(7.92px, 0px)
251 | }
252 | 
253 | .tip_loading_leaf_3 {
254 |     -webkit-animation: opacity-60-25-3-12 1.25s linear infinite
255 | }
256 | 
257 | .tip_loading_leaf_3:before {
258 |     -webkit-transform: rotate(90deg) translate(7.92px, 0px)
259 | }
260 | 
261 | .tip_loading_leaf_4 {
262 |     -webkit-animation: opacity-60-25-4-12 1.25s linear infinite
263 | }
264 | 
265 | .tip_loading_leaf_4:before {
266 |     -webkit-transform: rotate(120deg) translate(7.92px, 0px)
267 | }
268 | 
269 | .tip_loading_leaf_5 {
270 |     -webkit-animation: opacity-60-25-5-12 1.25s linear infinite
271 | }
272 | 
273 | .tip_loading_leaf_5:before {
274 |     -webkit-transform: rotate(150deg) translate(7.92px, 0px)
275 | }
276 | 
277 | .tip_loading_leaf_6 {
278 |     -webkit-animation: opacity-60-25-6-12 1.25s linear infinite
279 | }
280 | 
281 | .tip_loading_leaf_6:before {
282 |     -webkit-transform: rotate(180deg) translate(7.92px, 0px)
283 | }
284 | 
285 | .tip_loading_leaf_7 {
286 |     -webkit-animation: opacity-60-25-7-12 1.25s linear infinite
287 | }
288 | 
289 | .tip_loading_leaf_7:before {
290 |     -webkit-transform: rotate(210deg) translate(7.92px, 0px)
291 | }
292 | 
293 | .tip_loading_leaf_8 {
294 |     -webkit-animation: opacity-60-25-8-12 1.25s linear infinite
295 | }
296 | 
297 | .tip_loading_leaf_8:before {
298 |     -webkit-transform: rotate(240deg) translate(7.92px, 0px)
299 | }
300 | 
301 | .tip_loading_leaf_9 {
302 |     -webkit-animation: opacity-60-25-9-12 1.25s linear infinite
303 | }
304 | 
305 | .tip_loading_leaf_9:before {
306 |     -webkit-transform: rotate(270deg) translate(7.92px, 0px)
307 | }
308 | 
309 | .tip_loading_leaf_10 {
310 |     -webkit-animation: opacity-60-25-10-12 1.25s linear infinite
311 | }
312 | 
313 | .tip_loading_leaf_10:before {
314 |     -webkit-transform: rotate(300deg) translate(7.92px, 0px)
315 | }
316 | 
317 | .tip_loading_leaf_11 {
318 |     -webkit-animation: opacity-60-25-11-12 1.25s linear infinite
319 | }
320 | 
321 | .tip_loading_leaf_11:before {
322 |     -webkit-transform: rotate(330deg) translate(7.92px, 0px)
323 | }
324 | 
325 | @-webkit-keyframes opacity-60-25-0-12 {
326 |     0% {
327 |         opacity: 0.25
328 |     }
329 | 
330 |     0.01% {
331 |         opacity: 0.25
332 |     }
333 | 
334 |     0.02% {
335 |         opacity: 1
336 |     }
337 | 
338 |     60.01% {
339 |         opacity: 0.25
340 |     }
341 | 
342 |     100% {
343 |         opacity: 0.25
344 |     }
345 | }
346 | 
347 | @-webkit-keyframes opacity-60-25-1-12 {
348 |     0% {
349 |         opacity: 0.25
350 |     }
351 | 
352 |     8.34333% {
353 |         opacity: 0.25
354 |     }
355 | 
356 |     8.35333% {
357 |         opacity: 1
358 |     }
359 | 
360 |     68.3433% {
361 |         opacity: 0.25
362 |     }
363 | 
364 |     100% {
365 |         opacity: 0.25
366 |     }
367 | }
368 | 
369 | @-webkit-keyframes opacity-60-25-2-12 {
370 |     0% {
371 |         opacity: 0.25
372 |     }
373 | 
374 |     16.6767% {
375 |         opacity: 0.25
376 |     }
377 | 
378 |     16.6867% {
379 |         opacity: 1
380 |     }
381 | 
382 |     76.6767% {
383 |         opacity: 0.25
384 |     }
385 | 
386 |     100% {
387 |         opacity: 0.25
388 |     }
389 | }
390 | 
391 | @-webkit-keyframes opacity-60-25-3-12 {
392 |     0% {
393 |         opacity: 0.25
394 |     }
395 | 
396 |     25.01% {
397 |         opacity: 0.25
398 |     }
399 | 
400 |     25.02% {
401 |         opacity: 1
402 |     }
403 | 
404 |     85.01% {
405 |         opacity: 0.25
406 |     }
407 | 
408 |     100% {
409 |         opacity: 0.25
410 |     }
411 | }
412 | 
413 | @-webkit-keyframes opacity-60-25-4-12 {
414 |     0% {
415 |         opacity: 0.25
416 |     }
417 | 
418 |     33.3433% {
419 |         opacity: 0.25
420 |     }
421 | 
422 |     33.3533% {
423 |         opacity: 1
424 |     }
425 | 
426 |     93.3433% {
427 |         opacity: 0.25
428 |     }
429 | 
430 |     100% {
431 |         opacity: 0.25
432 |     }
433 | }
434 | 
435 | @-webkit-keyframes opacity-60-25-5-12 {
436 |     0% {
437 |         opacity: 0.270958333333333
438 |     }
439 | 
440 |     41.6767% {
441 |         opacity: 0.25
442 |     }
443 | 
444 |     41.6867% {
445 |         opacity: 1
446 |     }
447 | 
448 |     1.67667% {
449 |         opacity: 0.25
450 |     }
451 | 
452 |     100% {
453 |         opacity: 0.270958333333333
454 |     }
455 | }
456 | 
457 | @-webkit-keyframes opacity-60-25-6-12 {
458 |     0% {
459 |         opacity: 0.375125
460 |     }
461 | 
462 |     50.01% {
463 |         opacity: 0.25
464 |     }
465 | 
466 |     50.02% {
467 |         opacity: 1
468 |     }
469 | 
470 |     10.01% {
471 |         opacity: 0.25
472 |     }
473 | 
474 |     100% {
475 |         opacity: 0.375125
476 |     }
477 | }
478 | 
479 | @-webkit-keyframes opacity-60-25-7-12 {
480 |     0% {
481 |         opacity: 0.479291666666667
482 |     }
483 | 
484 |     58.3433% {
485 |         opacity: 0.25
486 |     }
487 | 
488 |     58.3533% {
489 |         opacity: 1
490 |     }
491 | 
492 |     18.3433% {
493 |         opacity: 0.25
494 |     }
495 | 
496 |     100% {
497 |         opacity: 0.479291666666667
498 |     }
499 | }
500 | 
501 | @-webkit-keyframes opacity-60-25-8-12 {
502 |     0% {
503 |         opacity: 0.583458333333333
504 |     }
505 | 
506 |     66.6767% {
507 |         opacity: 0.25
508 |     }
509 | 
510 |     66.6867% {
511 |         opacity: 1
512 |     }
513 | 
514 |     26.6767% {
515 |         opacity: 0.25
516 |     }
517 | 
518 |     100% {
519 |         opacity: 0.583458333333333
520 |     }
521 | }
522 | 
523 | @-webkit-keyframes opacity-60-25-9-12 {
524 |     0% {
525 |         opacity: 0.687625
526 |     }
527 | 
528 |     75.01% {
529 |         opacity: 0.25
530 |     }
531 | 
532 |     75.02% {
533 |         opacity: 1
534 |     }
535 | 
536 |     35.01% {
537 |         opacity: 0.25
538 |     }
539 | 
540 |     100% {
541 |         opacity: 0.687625
542 |     }
543 | }
544 | 
545 | @-webkit-keyframes opacity-60-25-10-12 {
546 |     0% {
547 |         opacity: 0.791791666666667
548 |     }
549 | 
550 |     83.3433% {
551 |         opacity: 0.25
552 |     }
553 | 
554 |     83.3533% {
555 |         opacity: 1
556 |     }
557 | 
558 |     43.3433% {
559 |         opacity: 0.25
560 |     }
561 | 
562 |     100% {
563 |         opacity: 0.791791666666667
564 |     }
565 | }
566 | 
567 | @-webkit-keyframes opacity-60-25-11-12 {
568 |     0% {
569 |         opacity: 0.895958333333333
570 |     }
571 | 
572 |     91.6767% {
573 |         opacity: 0.25
574 |     }
575 | 
576 |     91.6867% {
577 |         opacity: 1
578 |     }
579 | 
580 |     51.6767% {
581 |         opacity: 0.25
582 |     }
583 | 
584 |     100% {
585 |         opacity: 0.895958333333333
586 |     }
587 | }
588 | 


--------------------------------------------------------------------------------
/draggable/draggable.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | .test,.test3{
 3 | 	position: absolute;
 4 | 	height:100px;
 5 | 	width:100px;
 6 | 	background:#ccc;
 7 | 	z-index: 10;
 8 | }
 9 | .test1{
10 | 	position: relative;
11 | 	height:100px;
12 | 	width:100px;
13 | 	background:#ccc;
14 | }
15 | .handle{
16 | 	margin:0;
17 | }
18 | .tip1{
19 |     position: absolute;
20 |     left: 500px;
21 |     top: 100px;
22 |     color: #757575;
23 | }
24 | strong{
25 | 	color:#DD1E1E;
26 | }
27 | .x{
28 | 	padding-right: 20px;
29 | }
30 | .range{
31 | 	position: relative;
32 | 	width:300px;
33 | 	height:300px;
34 | 	background:#fff;
35 | 	border:1px solid #ccc;
36 | }
37 | .testmg{
38 | 	padding-top:100px;
39 | }
40 | .tip,.tip2{
41 | 	padding-left: 150px;
42 |     color: #757575;
43 | }
44 | .drag{
45 | 	position: relative;
46 | }
47 | .clone{
48 | 	border:2px dashed #000;
49 | 	cursor: move;
50 | }


--------------------------------------------------------------------------------
/draggable/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>draggable.js - Mss</title>
  6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |         <link href="../favicon.ico" rel="icon" type="image/x-icon" />
  8 |         <link rel="stylesheet" type="text/css" href="http://maxiaoxiang.com/stylesheets/normalize.css" media="screen">
  9 |         <link rel="stylesheet" type="text/css" href="http://maxiaoxiang.com/stylesheets/public.css" media="screen">
 10 |         <link rel="stylesheet" type="text/css" href="./draggable.css" media="screen">
 11 |         <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 12 |     </head>
 13 |     <body>
 14 |         <div class="wrapper">
 15 |             <div class="container">
 16 |                 <div class="sidebar">
 17 |                     <div class="hd">
 18 |                         <div class="site-meta">
 19 |                             <a href="http://maxiaoxiang.com" class="brand">
 20 |                                 <span class="site-title">Mss。</span>
 21 |                             </a>
 22 |                         </div>
 23 |                     </div>
 24 |                     <div class="bd">
 25 |                         <div class="site-nav">
 26 |                             <ul class="menu">
 27 |                                 <li class="menu-item menu-item-active">
 28 |                                     <a href="http://maxiaoxiang.com/" class="repertory">插件库</a>
 29 |                                 </li>
 30 |                                 <li class="menu-item">
 31 |                                     <a href="http://maxiaoxiang.com/blog/" target="_blank" class="blog">博客</a>
 32 |                                 </li>
 33 |                                 <li class="menu-item">
 34 |                                     <a href="http://maxiaoxiang.com/message.html" class="message">留言板</a>
 35 |                                 </li>
 36 |                             </ul>
 37 |                         </div>
 38 |                     </div>
 39 |                     <div class="ft">
 40 |                         <div class="site-info">
 41 |                             <img src="https://avatars0.githubusercontent.com/u/11399676?v=3&s=460" alt="Mss。" class="avatar">
 42 |                             <p class="name">Mss。</p>
 43 |                             <p class="description">be happy</p>
 44 |                             <div class="links">
 45 |                                 <span class="links-item">
 46 |                                     <a href="https://github.com/Maxiaoxiang" target="_blank" title="GitHub">GitHub</a>
 47 |                                 </span>
 48 |                             </div>
 49 |                         </div>
 50 |                     </div>
 51 |                 </div>
 52 |                 <div class="content">
 53 |                     <h1>拖动-draggable</h1>
 54 |                     <p>需先引入jQuery，再引入draggable组件</p>
 55 |                     <pre class="bad">&lt;script&nbsp;src="jquery.js"&gt;&lt;/script&gt;</pre>
 56 |                     <pre class="bad">&lt;script&nbsp;src="jquery.draggable.js"&gt;&lt;/script&gt;</pre>
 57 |                     <p>组件样式与功能分离，自定义样式</p>
 58 |                     <div class="eg">
 59 |                         <div class="test"></div>
 60 |                         <p class="tip">←请拖动我</p>
 61 |                         <p class="testmg">HTML</p>
 62 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"test"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
 63 |                         <p>Javascript</p>
 64 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.test'</span>).<span style="color:#000">draggable</span>();</pre>
 65 |                     </div>
 66 |                     <div class="eg drag">
 67 |                         <div class="range">
 68 |                             <div class="test1" onselectstart="return false;">
 69 |                                 <p class="handle">我是拖动把手</p>
 70 |                             </div>
 71 |                         </div>
 72 |                         <div class="tip1">
 73 |                             <p>←我被限制在这个范围里</p>
 74 |                             <p>拖动前的事件：<span class="start">第<strong>0</strong>次拖动</span></p>
 75 |                             <p>拖动时的事件：<span class="drag">x坐标：<strong class="x"></strong> y坐标：<strong class="y"></strong></span></p>
 76 |                             <p>拖动结束时的事件：<span class="stop">第<strong>0</strong>次停止</span></p>
 77 |                         </div>
 78 |                         <p>HTML</p>
 79 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"range"</span><span style="color:#170">&gt;</span><br>    <span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"test1"</span><span style="color:#170">&gt;</span><br>          <span style="color:#170">&lt;p</span> <span style="color:#00c">class</span>=<span style="color:#a11">"handle"</span><span style="color:#170">&gt;</span>我是拖动把手<span style="color:#170">&lt;/p</span><span style="color:#170">&gt;</span><br>    <span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span><br><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
 80 |                         <p>Javascript</p>
 81 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#708">var</span> <span style="color:#000">i</span> = <span style="color:#164">1</span>;<br><span style="color:#708">var</span> <span style="color:#000">j</span> = <span style="color:#164">1</span>;<br><span style="color:#000">$</span>(<span style="color:#a11">'.test1'</span>).<span style="color:#000">draggable</span>({<br>    <span style="color:#000">handleCls</span>:<span style="color:#a11">'handle'</span>,<br>    <span style="color:#000">rangeCls</span>:<span style="color:#a11">'range'</span>,<br>    <span style="color:#000">startDrag</span>:<span style="color:#708">function</span>(){<br>        <span style="color:#000">$</span>(<span style="color:#a11">'.start'</span>).<span style="color:#000">find</span>(<span style="color:#a11">'strong'</span>).<span style="color:#000">html</span>(<span style="color:#000">i</span>++);<br>    },<br>    <span style="color:#000">moveDrag</span>:<span style="color:#708">function</span>(<span style="color:#00f">api</span>){<br>        <span style="color:#000">$</span>(<span style="color:#a11">'.x'</span>).<span style="color:#000">html</span>(<span style="color:#000-2">api</span>.<span style="color:#000">getMouseCoords</span>(<span style="color:#000">e</span>).<span style="color:#000">x</span>);<br>        <span style="color:#000">$</span>(<span style="color:#a11">'.y'</span>).<span style="color:#000">html</span>(<span style="color:#000-2">api</span>.<span style="color:#000">getMouseCoords</span>(<span style="color:#000">e</span>).<span style="color:#000">y</span>);<br>    },<br>    <span style="color:#000">stopDrag</span>:<span style="color:#708">function</span>(){<br>        <span style="color:#000">$</span>(<span style="color:#a11">'.stop'</span>).<span style="color:#000">find</span>(<span style="color:#a11">'strong'</span>).<span style="color:#000">html</span>(<span style="color:#000">j</span>++);<br>    }<br>});</pre>
 82 |                     </div>
 83 |                     <div class="eg">
 84 |                         <div class="test3"></div>
 85 |                         <div class="tip2">
 86 |                             <p>←我被克隆了</p>
 87 |                         </div>
 88 |                         <p class="testmg">HTML</p>
 89 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"test3"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
 90 |                         <p>Javascript</p>
 91 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.test3'</span>).<span style="color:#000">draggable</span>({<br>    <span style="color:#000">clone</span>:<span style="color:#a11">true</span><br>});</pre>
 92 |                     </div>
 93 |                     <div class="options">
 94 |                         <p>options(参数配置)</p>
 95 |                         <table>
 96 |                             <thead>
 97 |                                 <tr>
 98 |                                     <td>参数</td>
 99 |                                     <td>默认值</td>
100 |                                     <td class="explain">说明</td>
101 |                                 </tr>
102 |                             </thead>
103 |                             <tbody>
104 |                                 <tr>
105 |                                     <td>handleCls</td>
106 |                                     <td>''</td>
107 |                                     <td class="explain">拖动把手，无传参将拖动该元素</td>
108 |                                 </tr>
109 |                                 <tr>
110 |                                     <td>axis</td>
111 |                                     <td>''</td>
112 |                                     <td class="explain">拖动方向，可选( x / y )。 x：横向，y：纵向</td>
113 |                                 </tr>
114 |                                 <tr>
115 |                                     <td>rangeCls</td>
116 |                                     <td>''</td>
117 |                                     <td class="explain">拖动范围，默认为视窗</td>
118 |                                 </tr>
119 |                                 <tr>
120 |                                     <td>clone</td>
121 |                                     <td>false</td>
122 |                                     <td class="explain">克隆拖动</td>
123 |                                 </tr>
124 |                                 <tr>
125 |                                     <td>cloneCls</td>
126 |                                     <td>'clone'</td>
127 |                                     <td class="explain">克隆拖动class</td>
128 |                                 </tr>
129 |                                 <tr>
130 |                                     <td>startDrag</td>
131 |                                     <td>function(){}</td>
132 |                                     <td class="explain">开始拖动事件</td>
133 |                                 </tr>
134 |                                 <tr>
135 |                                     <td>moveDrag</td>
136 |                                     <td>function(){}</td>
137 |                                     <td class="explain">拖动时事件</td>
138 |                                 </tr>
139 |                                 <tr>
140 |                                     <td>stopDrag</td>
141 |                                     <td>function(){}</td>
142 |                                     <td class="explain">停止拖动事件</td>
143 |                                 </tr>
144 |                             </tbody>
145 |                         </table>
146 |                     </div>
147 |                     <div class="callback">
148 |                         <p>api接口</p>
149 |                         <table>
150 |                             <thead>
151 |                                 <tr>
152 |                                     <td>方法</td>
153 |                                     <td>说明</td>
154 |                                 </tr>
155 |                             </thead>
156 |                             <tbody>
157 |                                 <tr>
158 |                                     <td>start</td>
159 |                                     <td>开始拖动，isDraging标识符将为true</td>
160 |                                 </tr>
161 |                                 <tr>
162 |                                     <td>stop</td>
163 |                                     <td>停止拖动，isDraging标识符将为false</td>
164 |                                 </tr>
165 |                                 <tr>
166 |                                     <td>getDraging</td>
167 |                                     <td>获取isDraging标识符状态，值：true / false</td>
168 |                                 </tr>
169 |                                 <tr>
170 |                                     <td>getMouseCoords</td>
171 |                                     <td>获取当前鼠标相对于文档的坐标</td>
172 |                                 </tr>
173 |                             </tbody>
174 |                         </table>
175 |                     </div>
176 |                     <div class="M-box"></div>
177 |                     <div class="M-message"></div>
178 |                 </div>
179 |             </div>
180 |             <div class="footer">
181 |                 <p>&copy; <a href="http://github.com/Maxiaoxiang" target="_blank">Mss。</a><span class="spe">/</span>Powered by <a href="http://maxiaoxiang.com" target="_blank">Maxiaoxiang</a></p>
182 |             </div>
183 |         </div>
184 |          <script src="../lib/jquery.min.js"></script>
185 |         <script src="./jquery.draggable.js"></script>
186 |         <script>
187 |             $(function(){
188 |                 var i = 1;
189 |                 var j = 1;
190 |                 $('.test').draggable();
191 |                 $('.test1').draggable({
192 |                     handleCls:'handle',
193 |                     rangeCls:'range',
194 |                     startDrag:function(){
195 |                         $('.start').find('strong').html(i++);
196 |                     },
197 |                     moveDrag:function(api,e){
198 |                         $('.x').html(api.getMouseCoords(e).x);
199 |                         $('.y').html(api.getMouseCoords(e).y);
200 |                     },
201 |                     stopDrag:function(){
202 |                         $('.stop').find('strong').html(j++);
203 |                     }
204 |                 });
205 |                 $('.test3').draggable({
206 |                     clone:true
207 |                 });
208 |             });
209 |         </script>
210 |     </body>
211 | </html>
212 | 


--------------------------------------------------------------------------------
/draggable/jquery.draggable.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * draggable拖动插件
  3 |  * @version 1.0.2
  4 |  * @url http://maxiaoxiang.com
  5 |  */
  6 | ;(function($,window,document,undefined){
  7 | 
  8 | 	var defaults = {
  9 | 		handleCls:'',//拖动把手
 10 | 		axis:'',//拖动方向
 11 | 		rangeCls:'',//拖动范围
 12 | 		clone:false,//克隆拖动
 13 | 		cloneCls:'clone',//克隆元素样式名
 14 | 		animateTime:0,//动画
 15 | 		startDrag:function(){},//开始拖动事件
 16 | 		moveDrag:function(){},//拖动时事件
 17 | 		stopDrag:function(){}//停止拖动事件
 18 | 	};
 19 | 
 20 | 	var Draggable = function(element,options){
 21 | 		var _ = this;
 22 | 		var isDraging = false;//拖动开关
 23 | 		var $this = $(element);
 24 | 		var $body = $('body');
 25 | 		var $window = $(window);
 26 | 		var $document = $(document);
 27 | 		var coordinate = {iX : '',iY : '',mX : '',mY : ''};//鼠标坐标
 28 | 		var $handle = options.handleCls ? $('.' + options.handleCls) : $this;//拖动把手
 29 | 		var $range = options.rangeCls ? $('.' + options.rangeCls) : $body;//拖动范围
 30 | 		var $clone = options.clone ? $('<div class="'+ options.cloneCls +'"></div>') : '';//克隆对象
 31 | 		var $dragClone = options.clone ? $clone : $this;
 32 | 		if(typeof $clone == 'object'){
 33 | 			$clone.css({
 34 | 				'position':'absolute',
 35 | 				'top':$this.position().top,
 36 | 				'left':$this.position().left,
 37 | 				'width':$this.outerWidth(),
 38 | 				'height':$this.outerHeight(),
 39 | 				'cursor':'move',
 40 | 				'z-index':$this.css('z-index')
 41 | 			});
 42 | 		}
 43 | 		//开始
 44 | 		_.start = function(e,func){
 45 | 			if(options.startDrag(_,e) != false){
 46 | 				(func || function(){})();
 47 | 				isDraging = true;
 48 | 				coordinate.iX = _.getMouseCoords(e).x - $this.position().left;
 49 | 				coordinate.iY = _.getMouseCoords(e).y - $this.position().top;
 50 | 				$this.css({'position':'absolute'});
 51 | 				if(options.clone) $clone.appendTo($range);
 52 | 			}
 53 | 		};
 54 | 		//拖动中
 55 | 		var drap = function(e,clone){
 56 | 			if(isDraging && options.moveDrag(_,e) != false){
 57 | 				e.stopPropagation();
 58 | 				e.preventDefault();
 59 | 				var domScrollTop = document.body.scrollTop;
 60 | 				coordinate.mX = _.getMouseCoords(e).x - coordinate.iX;
 61 | 				coordinate.mY = _.getMouseCoords(e).y - coordinate.iY;
 62 | 				switch (options.axis){//拖动方向
 63 | 					case 'x':
 64 | 						clone.css({'left':coordinate.mX});
 65 | 						break;
 66 | 					case 'y':
 67 | 						clone.css({'top':coordinate.mY});
 68 | 						break;
 69 | 					default:
 70 | 						clone.css({'left':coordinate.mX,'top':coordinate.mY});	
 71 | 				}
 72 | 				if(options.rangeCls){
 73 | 					if(clone.position().left < 0){
 74 | 						clone.css({'left':'0'});
 75 | 					}
 76 | 					if(clone.position().left > $range.width() - clone.width()){
 77 | 						clone.css({'left':$range.width() - clone.width()});
 78 | 					}
 79 | 					if(clone.position().top < 0){
 80 | 						clone.css({'top':'0'});
 81 | 					}
 82 | 					if(clone.position().top > $range.height() - clone.height()){
 83 | 						clone.css({'top': $range.height() - clone.height()});
 84 | 					}
 85 | 				}else{
 86 | 					if(clone.position().left < 0){
 87 | 						clone.css({'left':'0'});
 88 | 					}
 89 | 					if(clone.position().left > $window.width() - clone.width()){
 90 | 						clone.css({'left':$window.width() - clone.width()});
 91 | 					}
 92 | 					if(clone.position().top < domScrollTop){
 93 | 						clone.css({'top':domScrollTop});
 94 | 					}
 95 | 					if(clone.position().top > $window.height() - clone.height() + domScrollTop){
 96 | 						clone.css({'top': $window.height() - clone.height() + domScrollTop});
 97 | 					}
 98 | 				}
 99 | 			}
100 | 		};
101 | 		//停止
102 | 		_.stop = function(e,clone){
103 | 			if(isDraging){
104 | 				if(options.clone){
105 | 					$this.css({
106 | 						'top':clone.position().top,
107 | 						'left':clone.position().left
108 | 					});
109 | 					clone.remove();
110 | 				}
111 | 				isDraging = false;
112 | 				options.stopDrag(_,e);	
113 | 			}
114 | 		};
115 | 		//拖动状态
116 | 		_.getDraging = function(){
117 | 			return isDraging;
118 | 		};
119 | 		//返回当前鼠标坐标
120 | 		_.getMouseCoords = function(e){
121 | 			if(e.pageX || e.pageY){
122 | 				return {x : e.pageX , y : e.pageY};
123 | 			}
124 | 			return {
125 | 				x : e.clientX + document.body.scrollLeft - document.body.clientLeft,
126 | 				y : e.clientY + document.body.scrollTop - document.body.clientTop
127 | 			};
128 | 		};
129 | 		//初始
130 | 		var init = function(){
131 | 			$handle.css({'cursor':'move'}).on('mousedown',function(e){
132 | 				_.start(e);
133 | 			});
134 | 			$document.on({
135 | 				'mousemove':function(e){
136 | 					drap(e,$dragClone);
137 | 				},
138 | 				'mouseup':function(e){
139 | 					_.stop(e,$dragClone);
140 | 				}
141 | 			});
142 | 		};
143 | 		init();
144 | 	};
145 | 	
146 | 	$.fn.draggable = function(parameter,callback){
147 | 		if(typeof parameter == 'function'){//重载
148 | 			callback = parameter;
149 | 			parameter = {};
150 | 		}else{
151 | 			parameter = parameter || {};
152 | 			callback = callback || function(){};
153 | 		}
154 | 		var options = $.extend({},defaults,parameter);
155 | 		return this.each(function(){
156 | 			var draggable = new Draggable(this,options);
157 | 			callback(draggable);
158 | 		});
159 | 	};
160 | 
161 | 	return $;
162 | 
163 | })(jQuery,window,document);


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/favicon.ico


--------------------------------------------------------------------------------
/image/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/1.jpg


--------------------------------------------------------------------------------
/image/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/1.png


--------------------------------------------------------------------------------
/image/demo/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/demo/demo.gif


--------------------------------------------------------------------------------
/image/extend/step1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/extend/step1.png


--------------------------------------------------------------------------------
/image/extend/step2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/extend/step2.png


--------------------------------------------------------------------------------
/image/extend/step3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/extend/step3.png


--------------------------------------------------------------------------------
/image/extend/step4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/extend/step4.png


--------------------------------------------------------------------------------
/image/extend/step5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/extend/step5.png


--------------------------------------------------------------------------------
/image/extend/step6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maxiaoxiang/jQuery-plugins/e09a1917878ba1d27b8d26988503c0253af85dd8/image/extend/step6.png


--------------------------------------------------------------------------------
/pagination/common/common.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | body {
  3 |     word-wrap: break-word;
  4 |     background: #fff;
  5 | }
  6 | 
  7 | h1 {
  8 |     font-size: 40px;
  9 | }
 10 | 
 11 | p,
 12 | pre {
 13 |     margin: 10px 0;
 14 | }
 15 | 
 16 | ::selection {
 17 |     background: #000;
 18 |     color: #fff;
 19 | }
 20 | 
 21 | .wrapper {
 22 |     margin: 0 auto;
 23 |     width: 960px;
 24 |     height: 100%;
 25 |     -webkit-box-sizing: border-box;
 26 |     -moz-box-sizing: border-box;
 27 |     -o-box-sizing: border-box;
 28 |     box-sizing: border-box;
 29 | }
 30 | 
 31 | 
 32 | /*底部版权*/
 33 | 
 34 | footer {
 35 |     margin: 100px 0 50px 300px;
 36 |     padding: 0 20px;
 37 |     -webkit-box-sizing: border-box;
 38 |     -moz-box-sizing: border-box;
 39 |     -o-box-sizing: border-box;
 40 |     box-sizing: border-box;
 41 | }
 42 | 
 43 | footer p {
 44 |     border-top: 1px solid #ebebeb;
 45 |     opacity: .5;
 46 |     filter: alpha(opacity=50);
 47 |     text-align: right;
 48 |     font-size: 12px;
 49 |     line-height: 3;
 50 |     font-family: "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", tahoma, arial, simsun, "\5B8B\4F53";
 51 | }
 52 | 
 53 | footer p a {
 54 |     color: #000;
 55 | }
 56 | 
 57 | footer p .spe {
 58 |     padding: 0 5px;
 59 | }
 60 | 
 61 | .right-bg {
 62 |     position: fixed;
 63 |     right: 0;
 64 |     top: 50%;
 65 |     margin-top: -215px;
 66 |     width: 215px;
 67 |     height: 430px;
 68 |     background: url('../../image/right_bg.png') no-repeat;
 69 | }
 70 | 
 71 | 
 72 | /*组件样式*/
 73 | 
 74 | table {
 75 |     width: 100%;
 76 |     border: 1px solid #CAD3DA;
 77 | }
 78 | 
 79 | table td {
 80 |     padding: 10px;
 81 |     width: 150px;
 82 |     border: 1px solid #CAD3DA;
 83 | }
 84 | 
 85 | table thead tr {
 86 |     height: 40px;
 87 |     line-height: 40px;
 88 |     text-align: center;
 89 |     border-bottom: 1px solid #CAD3DA;
 90 | }
 91 | 
 92 | table thead td {
 93 |     padding: 0;
 94 |     border-left: 1px solid #CAD3DA;
 95 |     background: #DFEBFB;
 96 | }
 97 | 
 98 | table .explain {
 99 |     width: 500px;
100 | }
101 | 
102 | table tbody tr:nth-child(even) {
103 |     background: #E7EFF9;
104 | }
105 | 
106 | .hljs, .hljs-subst {
107 |     padding: 10px;
108 |     font-family: Monaco, Consolas, "Courier New";
109 | }
110 | 
111 | .method {
112 |     font-family: Monaco, Consolas, "Courier New";
113 | }
114 | 
115 | .eg {
116 |     margin: 20px 0;
117 |     padding: 10px;
118 |     border: 1px dashed #bdbdbd;
119 |     background: #f9f9f9;
120 | }
121 | 
122 | .update-log .title {
123 |     margin: 0;
124 |     font-size: 20px;
125 | }
126 | 
127 | .update-log ul li {
128 |     margin: 5px 0;
129 | }
130 | 
131 | .bad {
132 |     padding: 0 0 0 10px;
133 |     border: 1px dashed #bdbdbd;
134 |     color: #757575;
135 |     background: #f9f9f9;
136 |     font-family: Monaco, Consolas, "Courier New";
137 | }


--------------------------------------------------------------------------------
/pagination/common/highlight.min.css:
--------------------------------------------------------------------------------
1 | .hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}


--------------------------------------------------------------------------------
/pagination/common/highlight.min.js:
--------------------------------------------------------------------------------
1 | /*! highlight.js v9.12.0 | BSD3 License | git.io/hljslicense */
2 | !function(e){var t="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):t&&(t.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return t.hljs}))}(function(e){function t(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function r(e){return e.nodeName.toLowerCase()}function a(e,t){var r=e&&e.exec(t);return r&&0===r.index}function n(e){return E.test(e)}function i(e){var t,r,a,i,s=e.className+" ";if(s+=e.parentNode?e.parentNode.className:"",r=M.exec(s))return w(r[1])?r[1]:"no-highlight";for(s=s.split(/\s+/),t=0,a=s.length;a>t;t++)if(i=s[t],n(i)||w(i))return i}function s(e){var t,r={},a=Array.prototype.slice.call(arguments,1);for(t in e)r[t]=e[t];return a.forEach(function(e){for(t in e)r[t]=e[t]}),r}function c(e){var t=[];return function a(e,n){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?n+=i.nodeValue.length:1===i.nodeType&&(t.push({event:"start",offset:n,node:i}),n=a(i,n),r(i).match(/br|hr|img|input/)||t.push({event:"stop",offset:n,node:i}));return n}(e,0),t}function o(e,a,n){function i(){return e.length&&a.length?e[0].offset!==a[0].offset?e[0].offset<a[0].offset?e:a:"start"===a[0].event?e:a:e.length?e:a}function s(e){function a(e){return" "+e.nodeName+'="'+t(e.value).replace('"',"&quot;")+'"'}u+="<"+r(e)+N.map.call(e.attributes,a).join("")+">"}function c(e){u+="</"+r(e)+">"}function o(e){("start"===e.event?s:c)(e.node)}for(var l=0,u="",d=[];e.length||a.length;){var b=i();if(u+=t(n.substring(l,b[0].offset)),l=b[0].offset,b===e){d.reverse().forEach(c);do o(b.splice(0,1)[0]),b=i();while(b===e&&b.length&&b[0].offset===l);d.reverse().forEach(s)}else"start"===b[0].event?d.push(b[0].node):d.pop(),o(b.splice(0,1)[0])}return u+t(n.substr(l))}function l(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(t){return s(e,{v:null},t)})),e.cached_variants||e.eW&&[s(e)]||[e]}function u(e){function t(e){return e&&e.source||e}function r(r,a){return new RegExp(t(r),"m"+(e.cI?"i":"")+(a?"g":""))}function a(n,i){if(!n.compiled){if(n.compiled=!0,n.k=n.k||n.bK,n.k){var s={},c=function(t,r){e.cI&&(r=r.toLowerCase()),r.split(" ").forEach(function(e){var r=e.split("|");s[r[0]]=[t,r[1]?Number(r[1]):1]})};"string"==typeof n.k?c("keyword",n.k):k(n.k).forEach(function(e){c(e,n.k[e])}),n.k=s}n.lR=r(n.l||/\w+/,!0),i&&(n.bK&&(n.b="\\b("+n.bK.split(" ").join("|")+")\\b"),n.b||(n.b=/\B|\b/),n.bR=r(n.b),n.e||n.eW||(n.e=/\B|\b/),n.e&&(n.eR=r(n.e)),n.tE=t(n.e)||"",n.eW&&i.tE&&(n.tE+=(n.e?"|":"")+i.tE)),n.i&&(n.iR=r(n.i)),null==n.r&&(n.r=1),n.c||(n.c=[]),n.c=Array.prototype.concat.apply([],n.c.map(function(e){return l("self"===e?n:e)})),n.c.forEach(function(e){a(e,n)}),n.starts&&a(n.starts,i);var o=n.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([n.tE,n.i]).map(t).filter(Boolean);n.t=o.length?r(o.join("|"),!0):{exec:function(){return null}}}}a(e)}function d(e,r,n,i){function s(e,t){var r,n;for(r=0,n=t.c.length;n>r;r++)if(a(t.c[r].bR,e))return t.c[r]}function c(e,t){if(a(e.eR,t)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?c(e.parent,t):void 0}function o(e,t){return!n&&a(t.iR,e)}function l(e,t){var r=v.cI?t[0].toLowerCase():t[0];return e.k.hasOwnProperty(r)&&e.k[r]}function p(e,t,r,a){var n=a?"":L.classPrefix,i='<span class="'+n,s=r?"":R;return i+=e+'">',i+t+s}function m(){var e,r,a,n;if(!N.k)return t(E);for(n="",r=0,N.lR.lastIndex=0,a=N.lR.exec(E);a;)n+=t(E.substring(r,a.index)),e=l(N,a),e?(M+=e[1],n+=p(e[0],t(a[0]))):n+=t(a[0]),r=N.lR.lastIndex,a=N.lR.exec(E);return n+t(E.substr(r))}function f(){var e="string"==typeof N.sL;if(e&&!x[N.sL])return t(E);var r=e?d(N.sL,E,!0,k[N.sL]):b(E,N.sL.length?N.sL:void 0);return N.r>0&&(M+=r.r),e&&(k[N.sL]=r.top),p(r.language,r.value,!1,!0)}function g(){C+=null!=N.sL?f():m(),E=""}function _(e){C+=e.cN?p(e.cN,"",!0):"",N=Object.create(e,{parent:{value:N}})}function h(e,t){if(E+=e,null==t)return g(),0;var r=s(t,N);if(r)return r.skip?E+=t:(r.eB&&(E+=t),g(),r.rB||r.eB||(E=t)),_(r,t),r.rB?0:t.length;var a=c(N,t);if(a){var n=N;n.skip?E+=t:(n.rE||n.eE||(E+=t),g(),n.eE&&(E=t));do N.cN&&(C+=R),N.skip||(M+=N.r),N=N.parent;while(N!==a.parent);return a.starts&&_(a.starts,""),n.rE?0:t.length}if(o(t,N))throw new Error('Illegal lexeme "'+t+'" for mode "'+(N.cN||"<unnamed>")+'"');return E+=t,t.length||1}var v=w(e);if(!v)throw new Error('Unknown language: "'+e+'"');u(v);var y,N=i||v,k={},C="";for(y=N;y!==v;y=y.parent)y.cN&&(C=p(y.cN,"",!0)+C);var E="",M=0;try{for(var B,S,$=0;;){if(N.t.lastIndex=$,B=N.t.exec(r),!B)break;S=h(r.substring($,B.index),B[0]),$=B.index+S}for(h(r.substr($)),y=N;y.parent;y=y.parent)y.cN&&(C+=R);return{r:M,value:C,language:e,top:N}}catch(A){if(A.message&&-1!==A.message.indexOf("Illegal"))return{r:0,value:t(r)};throw A}}function b(e,r){r=r||L.languages||k(x);var a={r:0,value:t(e)},n=a;return r.filter(w).forEach(function(t){var r=d(t,e,!1);r.language=t,r.r>n.r&&(n=r),r.r>a.r&&(n=a,a=r)}),n.language&&(a.second_best=n),a}function p(e){return L.tabReplace||L.useBR?e.replace(B,function(e,t){return L.useBR&&"\n"===e?"<br>":L.tabReplace?t.replace(/\t/g,L.tabReplace):""}):e}function m(e,t,r){var a=t?C[t]:r,n=[e.trim()];return e.match(/\bhljs\b/)||n.push("hljs"),-1===e.indexOf(a)&&n.push(a),n.join(" ").trim()}function f(e){var t,r,a,s,l,u=i(e);n(u)||(L.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):t=e,l=t.textContent,a=u?d(u,l,!0):b(l),r=c(t),r.length&&(s=document.createElementNS("http://www.w3.org/1999/xhtml","div"),s.innerHTML=a.value,a.value=o(r,c(s),l)),a.value=p(a.value),e.innerHTML=a.value,e.className=m(e.className,u,a.language),e.result={language:a.language,re:a.r},a.second_best&&(e.second_best={language:a.second_best.language,re:a.second_best.r}))}function g(e){L=s(L,e)}function _(){if(!_.called){_.called=!0;var e=document.querySelectorAll("pre code");N.forEach.call(e,f)}}function h(){addEventListener("DOMContentLoaded",_,!1),addEventListener("load",_,!1)}function v(t,r){var a=x[t]=r(e);a.aliases&&a.aliases.forEach(function(e){C[e]=t})}function y(){return k(x)}function w(e){return e=(e||"").toLowerCase(),x[e]||x[C[e]]}var N=[],k=Object.keys,x={},C={},E=/^(no-?highlight|plain|text)$/i,M=/\blang(?:uage)?-([\w-]+)\b/i,B=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,R="</span>",L={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=d,e.highlightAuto=b,e.fixMarkup=p,e.highlightBlock=f,e.configure=g,e.initHighlighting=_,e.initHighlightingOnLoad=h,e.registerLanguage=v,e.listLanguages=y,e.getLanguage=w,e.inherit=s,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(t,r,a){var n=e.inherit({cN:"comment",b:t,e:r,c:[]},a||{});return n.c.push(e.PWM),n.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),n},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e.registerLanguage("apache",function(e){var t={cN:"number",b:"[\\$%]\\d+"};return{aliases:["apacheconf"],cI:!0,c:[e.HCM,{cN:"section",b:"</?",e:">"},{cN:"attribute",b:/\w+/,r:0,k:{nomarkup:"order deny allow setenv rewriterule rewriteengine rewritecond documentroot sethandler errordocument loadmodule options header listen serverroot servername"},starts:{e:/$/,r:0,k:{literal:"on off all"},c:[{cN:"meta",b:"\\s\\[",e:"\\]$"},{cN:"variable",b:"[\\$%]\\{",e:"\\}",c:["self",t]},t,e.QSM]}}],i:/\S/}}),e.registerLanguage("bash",function(e){var t={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)}/}]},r={cN:"string",b:/"/,e:/"/,c:[e.BE,t,{cN:"variable",b:/\$\(/,e:/\)/,c:[e.BE]}]},a={cN:"string",b:/'/,e:/'/};return{aliases:["sh","zsh"],l:/\b-?[a-z\._]+\b/,k:{keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp",_:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"meta",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:!0,c:[e.inherit(e.TM,{b:/\w[\w\d_]*/})],r:0},e.HCM,r,a,t]}}),e.registerLanguage("coffeescript",function(e){var t={keyword:"in if for while finally new do return else break catch instanceof throw try this switch continue typeof delete debugger super yield import export from as default await then unless until loop of by when and or is isnt not",literal:"true false null undefined yes no on off",built_in:"npm require console print module global window document"},r="[A-Za-z$_][0-9A-Za-z$_]*",a={cN:"subst",b:/#\{/,e:/}/,k:t},n=[e.BNM,e.inherit(e.CNM,{starts:{e:"(\\s*/)?",r:0}}),{cN:"string",v:[{b:/'''/,e:/'''/,c:[e.BE]},{b:/'/,e:/'/,c:[e.BE]},{b:/"""/,e:/"""/,c:[e.BE,a]},{b:/"/,e:/"/,c:[e.BE,a]}]},{cN:"regexp",v:[{b:"///",e:"///",c:[a,e.HCM]},{b:"//[gim]*",r:0},{b:/\/(?![ *])(\\\/|.)*?\/[gim]*(?=\W|$)/}]},{b:"@"+r},{sL:"javascript",eB:!0,eE:!0,v:[{b:"```",e:"```"},{b:"`",e:"`"}]}];a.c=n;var i=e.inherit(e.TM,{b:r}),s="(\\(.*\\))?\\s*\\B[-=]>",c={cN:"params",b:"\\([^\\(]",rB:!0,c:[{b:/\(/,e:/\)/,k:t,c:["self"].concat(n)}]};return{aliases:["coffee","cson","iced"],k:t,i:/\/\*/,c:n.concat([e.C("###","###"),e.HCM,{cN:"function",b:"^\\s*"+r+"\\s*=\\s*"+s,e:"[-=]>",rB:!0,c:[i,c]},{b:/[:\(,=]\s*/,r:0,c:[{cN:"function",b:s,e:"[-=]>",rB:!0,c:[c]}]},{cN:"class",bK:"class",e:"$",i:/[:="\[\]]/,c:[{bK:"extends",eW:!0,i:/[:="\[\]]/,c:[i]},i]},{b:r+":",e:":",rB:!0,rE:!0,r:0}])}}),e.registerLanguage("cpp",function(e){var t={cN:"keyword",b:"\\b[a-z\\d_]*_t\\b"},r={cN:"string",v:[{b:'(u8?|U)?L?"',e:'"',i:"\\n",c:[e.BE]},{b:'(u8?|U)?R"',e:'"',c:[e.BE]},{b:"'\\\\?.",e:"'",i:"."}]},a={cN:"number",v:[{b:"\\b(0b[01']+)"},{b:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)(u|U|l|L|ul|UL|f|F|b|B)"},{b:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"}],r:0},n={cN:"meta",b:/#\s*[a-z]+\b/,e:/$/,k:{"meta-keyword":"if else elif endif define undef warning error line pragma ifdef ifndef include"},c:[{b:/\\\n/,r:0},e.inherit(r,{cN:"meta-string"}),{cN:"meta-string",b:/<[^\n>]*>/,e:/$/,i:"\\n"},e.CLCM,e.CBCM]},i=e.IR+"\\s*\\(",s={keyword:"int float while private char catch import module export virtual operator sizeof dynamic_cast|10 typedef const_cast|10 const for static_cast|10 union namespace unsigned long volatile static protected bool template mutable if public friend do goto auto void enum else break extern using asm case typeid short reinterpret_cast|10 default double register explicit signed typename try this switch continue inline delete alignof constexpr decltype noexcept static_assert thread_local restrict _Bool complex _Complex _Imaginary atomic_bool atomic_char atomic_schar atomic_uchar atomic_short atomic_ushort atomic_int atomic_uint atomic_long atomic_ulong atomic_llong atomic_ullong new throw return and or not",built_in:"std string cin cout cerr clog stdin stdout stderr stringstream istringstream ostringstream auto_ptr deque list queue stack vector map set bitset multiset multimap unordered_set unordered_map unordered_multiset unordered_multimap array shared_ptr abort abs acos asin atan2 atan calloc ceil cosh cos exit exp fabs floor fmod fprintf fputs free frexp fscanf isalnum isalpha iscntrl isdigit isgraph islower isprint ispunct isspace isupper isxdigit tolower toupper labs ldexp log10 log malloc realloc memchr memcmp memcpy memset modf pow printf putchar puts scanf sinh sin snprintf sprintf sqrt sscanf strcat strchr strcmp strcpy strcspn strlen strncat strncmp strncpy strpbrk strrchr strspn strstr tanh tan vfprintf vprintf vsprintf endl initializer_list unique_ptr",literal:"true false nullptr NULL"},c=[t,e.CLCM,e.CBCM,a,r];return{aliases:["c","cc","h","c++","h++","hpp"],k:s,i:"</",c:c.concat([n,{b:"\\b(deque|list|queue|stack|vector|map|set|bitset|multiset|multimap|unordered_map|unordered_set|unordered_multiset|unordered_multimap|array)\\s*<",e:">",k:s,c:["self",t]},{b:e.IR+"::",k:s},{v:[{b:/=/,e:/;/},{b:/\(/,e:/\)/},{bK:"new throw return else",e:/;/}],k:s,c:c.concat([{b:/\(/,e:/\)/,k:s,c:c.concat(["self"]),r:0}]),r:0},{cN:"function",b:"("+e.IR+"[\\*&\\s]+)+"+i,rB:!0,e:/[{;=]/,eE:!0,k:s,i:/[^\w\s\*&]/,c:[{b:i,rB:!0,c:[e.TM],r:0},{cN:"params",b:/\(/,e:/\)/,k:s,r:0,c:[e.CLCM,e.CBCM,r,a,t]},e.CLCM,e.CBCM,n]},{cN:"class",bK:"class struct",e:/[{;:]/,c:[{b:/</,e:/>/,c:["self"]},e.TM]}]),exports:{preprocessor:n,strings:r,k:s}}}),e.registerLanguage("cs",function(e){var t={keyword:"abstract as base bool break byte case catch char checked const continue decimal default delegate do double enum event explicit extern finally fixed float for foreach goto if implicit in int interface internal is lock long nameof object operator out override params private protected public readonly ref sbyte sealed short sizeof stackalloc static string struct switch this try typeof uint ulong unchecked unsafe ushort using virtual void volatile while add alias ascending async await by descending dynamic equals from get global group into join let on orderby partial remove select set value var where yield",literal:"null false true"},r={cN:"string",b:'@"',e:'"',c:[{b:'""'}]},a=e.inherit(r,{i:/\n/}),n={cN:"subst",b:"{",e:"}",k:t},i=e.inherit(n,{i:/\n/}),s={cN:"string",b:/\$"/,e:'"',i:/\n/,c:[{b:"{{"},{b:"}}"},e.BE,i]},c={cN:"string",b:/\$@"/,e:'"',c:[{b:"{{"},{b:"}}"},{b:'""'},n]},o=e.inherit(c,{i:/\n/,c:[{b:"{{"},{b:"}}"},{b:'""'},i]});n.c=[c,s,r,e.ASM,e.QSM,e.CNM,e.CBCM],i.c=[o,s,a,e.ASM,e.QSM,e.CNM,e.inherit(e.CBCM,{i:/\n/})];var l={v:[c,s,r,e.ASM,e.QSM]},u=e.IR+"(<"+e.IR+"(\\s*,\\s*"+e.IR+")*>)?(\\[\\])?";return{aliases:["csharp"],k:t,i:/::/,c:[e.C("///","$",{rB:!0,c:[{cN:"doctag",v:[{b:"///",r:0},{b:"<!--|-->"},{b:"</?",e:">"}]}]}),e.CLCM,e.CBCM,{cN:"meta",b:"#",e:"$",k:{"meta-keyword":"if else elif endif define undef warning error line region endregion pragma checksum"}},l,e.CNM,{bK:"class interface",e:/[{;=]/,i:/[^\s:]/,c:[e.TM,e.CLCM,e.CBCM]},{bK:"namespace",e:/[{;=]/,i:/[^\s:]/,c:[e.inherit(e.TM,{b:"[a-zA-Z](\\.?\\w)*"}),e.CLCM,e.CBCM]},{cN:"meta",b:"^\\s*\\[",eB:!0,e:"\\]",eE:!0,c:[{cN:"meta-string",b:/"/,e:/"/}]},{bK:"new return throw await else",r:0},{cN:"function",b:"("+u+"\\s+)+"+e.IR+"\\s*\\(",rB:!0,e:/[{;=]/,eE:!0,k:t,c:[{b:e.IR+"\\s*\\(",rB:!0,c:[e.TM],r:0},{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,r:0,c:[l,e.CNM,e.CBCM]},e.CLCM,e.CBCM]}]}}),e.registerLanguage("css",function(e){var t="[a-zA-Z-][a-zA-Z0-9_-]*",r={b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{eW:!0,eE:!0,c:[{b:/[\w-]+\(/,rB:!0,c:[{cN:"built_in",b:/[\w-]+/},{b:/\(/,e:/\)/,c:[e.ASM,e.QSM]}]},e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"number",b:"#[0-9A-Fa-f]+"},{cN:"meta",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"selector-id",b:/#[A-Za-z0-9_-]+/},{cN:"selector-class",b:/\.[A-Za-z0-9_-]+/},{cN:"selector-attr",b:/\[/,e:/\]/,i:"$"},{cN:"selector-pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{b:"@",e:"[{;]",i:/:/,c:[{cN:"keyword",b:/\w+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[e.ASM,e.QSM,e.CSSNM]}]},{cN:"selector-tag",b:t,r:0},{b:"{",e:"}",i:/\S/,c:[e.CBCM,r]}]}}),e.registerLanguage("diff",function(e){return{aliases:["patch"],c:[{cN:"meta",r:10,v:[{b:/^@@ +\-\d+,\d+ +\+\d+,\d+ +@@$/},{b:/^\*\*\* +\d+,\d+ +\*\*\*\*$/},{b:/^\-\-\- +\d+,\d+ +\-\-\-\-$/}]},{cN:"comment",v:[{b:/Index: /,e:/$/},{b:/={3,}/,e:/$/},{b:/^\-{3}/,e:/$/},{b:/^\*{3} /,e:/$/},{b:/^\+{3}/,e:/$/},{b:/\*{5}/,e:/\*{5}$/}]},{cN:"addition",b:"^\\+",e:"$"},{cN:"deletion",b:"^\\-",e:"$"},{cN:"addition",b:"^\\!",e:"$"}]}}),e.registerLanguage("http",function(e){var t="HTTP/[0-9\\.]+";return{aliases:["https"],i:"\\S",c:[{b:"^"+t,e:"$",c:[{cN:"number",b:"\\b\\d{3}\\b"}]},{b:"^[A-Z]+ (.*?) "+t+"$",rB:!0,e:"$",c:[{cN:"string",b:" ",e:" ",eB:!0,eE:!0},{b:t},{cN:"keyword",b:"[A-Z]+"}]},{cN:"attribute",b:"^\\w",e:": ",eE:!0,i:"\\n|\\s|=",starts:{e:"$",r:0}},{b:"\\n\\n",starts:{sL:[],eW:!0}}]}}),e.registerLanguage("ini",function(e){var t={cN:"string",c:[e.BE],v:[{b:"'''",e:"'''",r:10},{b:'"""',e:'"""',r:10},{b:'"',e:'"'},{b:"'",e:"'"}]};return{aliases:["toml"],cI:!0,i:/\S/,c:[e.C(";","$"),e.HCM,{cN:"section",b:/^\s*\[+/,e:/\]+/},{b:/^[a-z0-9\[\]_-]+\s*=\s*/,e:"$",rB:!0,c:[{cN:"attr",b:/[a-z0-9\[\]_-]+/},{b:/=/,eW:!0,r:0,c:[{cN:"literal",b:/\bon|off|true|false|yes|no\b/},{cN:"variable",v:[{b:/\$[\w\d"][\w\d_]*/},{b:/\$\{(.*?)}/}]},t,{cN:"number",b:/([\+\-]+)?[\d]+_[\d_]+/},e.NM]}]}]}}),e.registerLanguage("java",function(e){var t="[À-ʸa-zA-Z_$][À-ʸa-zA-Z_$0-9]*",r=t+"(<"+t+"(\\s*,\\s*"+t+")*>)?",a="false synchronized int abstract float private char boolean static null if const for true while long strictfp finally protected import native final void enum else break transient catch instanceof byte super volatile case assert short package default double public try this switch continue throws protected public private module requires exports do",n="\\b(0[bB]([01]+[01_]+[01]+|[01]+)|0[xX]([a-fA-F0-9]+[a-fA-F0-9_]+[a-fA-F0-9]+|[a-fA-F0-9]+)|(([\\d]+[\\d_]+[\\d]+|[\\d]+)(\\.([\\d]+[\\d_]+[\\d]+|[\\d]+))?|\\.([\\d]+[\\d_]+[\\d]+|[\\d]+))([eE][-+]?\\d+)?)[lLfF]?",i={cN:"number",b:n,r:0};return{aliases:["jsp"],k:a,i:/<\/|#/,c:[e.C("/\\*\\*","\\*/",{r:0,c:[{b:/\w+@/,r:0},{cN:"doctag",b:"@[A-Za-z]+"}]}),e.CLCM,e.CBCM,e.ASM,e.QSM,{cN:"class",bK:"class interface",e:/[{;=]/,eE:!0,k:"class interface",i:/[:"\[\]]/,c:[{bK:"extends implements"},e.UTM]},{bK:"new throw return else",r:0},{cN:"function",b:"("+r+"\\s+)+"+e.UIR+"\\s*\\(",rB:!0,e:/[{;=]/,eE:!0,k:a,c:[{b:e.UIR+"\\s*\\(",rB:!0,r:0,c:[e.UTM]},{cN:"params",b:/\(/,e:/\)/,k:a,r:0,c:[e.ASM,e.QSM,e.CNM,e.CBCM]},e.CLCM,e.CBCM]},i,{cN:"meta",b:"@[A-Za-z]+"}]}}),e.registerLanguage("javascript",function(e){var t="[A-Za-z$_][0-9A-Za-z$_]*",r={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:r,c:[]},i={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,i,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:r,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,i,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:t+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:t,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+t+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:t},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:r,c:s}]}]},{b:/</,e:/(\/\w+|\w+\/)>/,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:t}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}}),e.registerLanguage("json",function(e){var t={literal:"true false null"},r=[e.QSM,e.CNM],a={e:",",eW:!0,eE:!0,c:r,k:t},n={b:"{",e:"}",c:[{cN:"attr",b:/"/,e:/"/,c:[e.BE],i:"\\n"},e.inherit(a,{b:/:/})],i:"\\S"},i={b:"\\[",e:"\\]",c:[e.inherit(a)],i:"\\S"};return r.splice(r.length,0,n,i),{c:r,k:t,i:"\\S"}}),e.registerLanguage("makefile",function(e){var t={cN:"variable",v:[{b:"\\$\\("+e.UIR+"\\)",c:[e.BE]},{b:/\$[@%<?\^\+\*]/}]},r={cN:"string",b:/"/,e:/"/,c:[e.BE,t]},a={cN:"variable",b:/\$\([\w-]+\s/,e:/\)/,k:{built_in:"subst patsubst strip findstring filter filter-out sort word wordlist firstword lastword dir notdir suffix basename addsuffix addprefix join wildcard realpath abspath error warning shell origin flavor foreach if or and call eval file value"},c:[t]},n={b:"^"+e.UIR+"\\s*[:+?]?=",i:"\\n",rB:!0,c:[{b:"^"+e.UIR,e:"[:+?]?=",eE:!0}]},i={cN:"meta",b:/^\.PHONY:/,e:/$/,k:{"meta-keyword":".PHONY"},l:/[\.\w]+/},s={cN:"section",b:/^[^\s]+:/,e:/$/,c:[t]};return{aliases:["mk","mak"],k:"define endef undefine ifdef ifndef ifeq ifneq else endif include -include sinclude override export unexport private vpath",l:/[\w-]+/,c:[e.HCM,t,r,a,n,i,s]}}),e.registerLanguage("xml",function(e){var t="[A-Za-z0-9\\._:-]+",r={eW:!0,i:/</,r:0,c:[{cN:"attr",b:t,r:0},{b:/=\s*/,r:0,c:[{cN:"string",endsParent:!0,v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s"'=<>`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},e.C("<!--","-->",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0}]},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{name:"style"},c:[r],starts:{e:"</style>",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{name:"script"},c:[r],starts:{e:"</script>",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},r]}]}}),e.registerLanguage("markdown",function(e){return{aliases:["md","mkdown","mkd"],c:[{cN:"section",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"quote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"^```w*s*$",e:"^```s*$"},{b:"`.+?`"},{b:"^( {4}|	)",e:"$",r:0}]},{b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].*?[\\)\\]]",rB:!0,c:[{cN:"string",b:"\\[",e:"\\]",eB:!0,rE:!0,r:0},{cN:"link",b:"\\]\\(",e:"\\)",eB:!0,eE:!0},{cN:"symbol",b:"\\]\\[",e:"\\]",eB:!0,eE:!0}],r:10},{b:/^\[[^\n]+\]:/,rB:!0,c:[{cN:"symbol",b:/\[/,e:/\]/,eB:!0,eE:!0},{cN:"link",b:/:\s*/,e:/$/,eB:!0}]}]}}),e.registerLanguage("nginx",function(e){var t={cN:"variable",v:[{b:/\$\d+/},{b:/\$\{/,e:/}/},{b:"[\\$\\@]"+e.UIR}]},r={eW:!0,l:"[a-z/_]+",k:{literal:"on off yes no true false none blocked debug info notice warn error crit select break last permanent redirect kqueue rtsig epoll poll /dev/poll"},r:0,i:"=>",c:[e.HCM,{cN:"string",c:[e.BE,t],v:[{b:/"/,e:/"/},{b:/'/,e:/'/}]},{b:"([a-z]+):/",e:"\\s",eW:!0,eE:!0,c:[t]},{cN:"regexp",c:[e.BE,t],v:[{b:"\\s\\^",e:"\\s|{|;",rE:!0},{b:"~\\*?\\s+",e:"\\s|{|;",rE:!0},{b:"\\*(\\.[a-z\\-]+)+"},{b:"([a-z\\-]+\\.)+\\*"}]},{cN:"number",b:"\\b\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}(:\\d{1,5})?\\b"},{cN:"number",b:"\\b\\d+[kKmMgGdshdwy]*\\b",r:0},t]};return{aliases:["nginxconf"],c:[e.HCM,{b:e.UIR+"\\s+{",rB:!0,e:"{",c:[{cN:"section",b:e.UIR}],r:0},{b:e.UIR+"\\s",e:";|{",rB:!0,c:[{cN:"attribute",b:e.UIR,starts:r}],r:0}],i:"[^\\s\\}]"}}),e.registerLanguage("objectivec",function(e){var t={cN:"built_in",b:"\\b(AV|CA|CF|CG|CI|CL|CM|CN|CT|MK|MP|MTK|MTL|NS|SCN|SK|UI|WK|XC)\\w+"},r={keyword:"int float while char export sizeof typedef const struct for union unsigned long volatile static bool mutable if do return goto void enum else break extern asm case short default double register explicit signed typename this switch continue wchar_t inline readonly assign readwrite self @synchronized id typeof nonatomic super unichar IBOutlet IBAction strong weak copy in out inout bycopy byref oneway __strong __weak __block __autoreleasing @private @protected @public @try @property @end @throw @catch @finally @autoreleasepool @synthesize @dynamic @selector @optional @required @encode @package @import @defs @compatibility_alias __bridge __bridge_transfer __bridge_retained __bridge_retain __covariant __contravariant __kindof _Nonnull _Nullable _Null_unspecified __FUNCTION__ __PRETTY_FUNCTION__ __attribute__ getter setter retain unsafe_unretained nonnull nullable null_unspecified null_resettable class instancetype NS_DESIGNATED_INITIALIZER NS_UNAVAILABLE NS_REQUIRES_SUPER NS_RETURNS_INNER_POINTER NS_INLINE NS_AVAILABLE NS_DEPRECATED NS_ENUM NS_OPTIONS NS_SWIFT_UNAVAILABLE NS_ASSUME_NONNULL_BEGIN NS_ASSUME_NONNULL_END NS_REFINED_FOR_SWIFT NS_SWIFT_NAME NS_SWIFT_NOTHROW NS_DURING NS_HANDLER NS_ENDHANDLER NS_VALUERETURN NS_VOIDRETURN",literal:"false true FALSE TRUE nil YES NO NULL",built_in:"BOOL dispatch_once_t dispatch_queue_t dispatch_sync dispatch_async dispatch_once"},a=/[a-zA-Z@][a-zA-Z0-9_]*/,n="@interface @class @protocol @implementation";return{aliases:["mm","objc","obj-c"],k:r,l:a,i:"</",c:[t,e.CLCM,e.CBCM,e.CNM,e.QSM,{cN:"string",v:[{b:'@"',e:'"',i:"\\n",c:[e.BE]},{b:"'",e:"[^\\\\]'",i:"[^\\\\][^']"}]},{cN:"meta",b:"#",e:"$",c:[{cN:"meta-string",v:[{b:'"',e:'"'},{b:"<",e:">"}]}]},{cN:"class",b:"("+n.split(" ").join("|")+")\\b",e:"({|$)",eE:!0,k:n,l:a,c:[e.UTM]},{b:"\\."+e.UIR,r:0}]}}),e.registerLanguage("perl",function(e){var t="getpwent getservent quotemeta msgrcv scalar kill dbmclose undef lc ma syswrite tr send umask sysopen shmwrite vec qx utime local oct semctl localtime readpipe do return format read sprintf dbmopen pop getpgrp not getpwnam rewinddir qqfileno qw endprotoent wait sethostent bless s|0 opendir continue each sleep endgrent shutdown dump chomp connect getsockname die socketpair close flock exists index shmgetsub for endpwent redo lstat msgctl setpgrp abs exit select print ref gethostbyaddr unshift fcntl syscall goto getnetbyaddr join gmtime symlink semget splice x|0 getpeername recv log setsockopt cos last reverse gethostbyname getgrnam study formline endhostent times chop length gethostent getnetent pack getprotoent getservbyname rand mkdir pos chmod y|0 substr endnetent printf next open msgsnd readdir use unlink getsockopt getpriority rindex wantarray hex system getservbyport endservent int chr untie rmdir prototype tell listen fork shmread ucfirst setprotoent else sysseek link getgrgid shmctl waitpid unpack getnetbyname reset chdir grep split require caller lcfirst until warn while values shift telldir getpwuid my getprotobynumber delete and sort uc defined srand accept package seekdir getprotobyname semop our rename seek if q|0 chroot sysread setpwent no crypt getc chown sqrt write setnetent setpriority foreach tie sin msgget map stat getlogin unless elsif truncate exec keys glob tied closedirioctl socket readlink eval xor readline binmode setservent eof ord bind alarm pipe atan2 getgrent exp time push setgrent gt lt or ne m|0 break given say state when",r={cN:"subst",b:"[$@]\\{",e:"\\}",k:t},a={b:"->{",e:"}"},n={v:[{b:/\$\d/},{b:/[\$%@](\^\w\b|#\w+(::\w+)*|{\w+}|\w+(::\w*)*)/},{b:/[\$%@][^\s\w{]/,r:0}]},i=[e.BE,r,n],s=[n,e.HCM,e.C("^\\=\\w","\\=cut",{eW:!0}),a,{cN:"string",c:i,v:[{b:"q[qwxr]?\\s*\\(",e:"\\)",r:5},{b:"q[qwxr]?\\s*\\[",e:"\\]",r:5},{b:"q[qwxr]?\\s*\\{",e:"\\}",r:5},{b:"q[qwxr]?\\s*\\|",e:"\\|",r:5},{b:"q[qwxr]?\\s*\\<",e:"\\>",r:5},{b:"qw\\s+q",e:"q",r:5},{b:"'",e:"'",c:[e.BE]},{b:'"',e:'"'},{b:"`",e:"`",c:[e.BE]},{b:"{\\w+}",c:[],r:0},{b:"-?\\w+\\s*\\=\\>",c:[],r:0}]},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{b:"(\\/\\/|"+e.RSR+"|\\b(split|return|print|reverse|grep)\\b)\\s*",k:"split return print reverse grep",r:0,c:[e.HCM,{cN:"regexp",b:"(s|tr|y)/(\\\\.|[^/])*/(\\\\.|[^/])*/[a-z]*",r:10},{cN:"regexp",b:"(m|qr)?/",e:"/[a-z]*",c:[e.BE],r:0}]},{cN:"function",bK:"sub",e:"(\\s*\\(.*?\\))?[;{]",eE:!0,r:5,c:[e.TM]},{b:"-\\w\\b",r:0},{b:"^__DATA__$",e:"^__END__$",sL:"mojolicious",c:[{b:"^@@.*",e:"$",cN:"comment"}]}];return r.c=s,a.c=s,{aliases:["pl","pm"],l:/[\w\.]+/,k:t,c:s}}),e.registerLanguage("php",function(e){var t={b:"\\$+[a-zA-Z_-ÿ][a-zA-Z0-9_-ÿ]*"},r={cN:"meta",b:/<\?(php)?|\?>/},a={cN:"string",c:[e.BE,r],v:[{b:'b"',e:'"'},{b:"b'",e:"'"},e.inherit(e.ASM,{i:null}),e.inherit(e.QSM,{i:null})]},n={v:[e.BNM,e.CNM]};return{aliases:["php3","php4","php5","php6"],cI:!0,k:"and include_once list abstract global private echo interface as static endswitch array null if endwhile or const for endforeach self var while isset public protected exit foreach throw elseif include __FILE__ empty require_once do xor return parent clone use __CLASS__ __LINE__ else break print eval new catch __METHOD__ case exception default die require __FUNCTION__ enddeclare final try switch continue endfor endif declare unset true false trait goto instanceof insteadof __DIR__ __NAMESPACE__ yield finally",c:[e.HCM,e.C("//","$",{c:[r]}),e.C("/\\*","\\*/",{c:[{cN:"doctag",b:"@[A-Za-z]+"}]}),e.C("__halt_compiler.+?;",!1,{eW:!0,k:"__halt_compiler",l:e.UIR}),{cN:"string",b:/<<<['"]?\w+['"]?$/,e:/^\w+;?$/,c:[e.BE,{cN:"subst",v:[{b:/\$\w+/},{b:/\{\$/,e:/\}/}]}]},r,{cN:"keyword",b:/\$this\b/},t,{b:/(::|->)+[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/},{cN:"function",bK:"function",e:/[;{]/,eE:!0,i:"\\$|\\[|%",c:[e.UTM,{cN:"params",b:"\\(",e:"\\)",c:["self",t,e.CBCM,a,n]}]},{cN:"class",bK:"class interface",e:"{",eE:!0,i:/[:\(\$"]/,c:[{bK:"extends implements"},e.UTM]},{bK:"namespace",e:";",i:/[\.']/,c:[e.UTM]},{bK:"use",e:";",c:[e.UTM]},{b:"=>"},a,n]}}),e.registerLanguage("python",function(e){var t={keyword:"and elif is global as in if from raise for except finally print import pass return exec else break not with class assert yield try while continue del or def lambda async await nonlocal|10 None True False",built_in:"Ellipsis NotImplemented"},r={cN:"meta",b:/^(>>>|\.\.\.) /},a={cN:"subst",b:/\{/,e:/\}/,k:t,i:/#/},n={cN:"string",c:[e.BE],v:[{b:/(u|b)?r?'''/,e:/'''/,c:[r],r:10},{b:/(u|b)?r?"""/,e:/"""/,c:[r],r:10},{b:/(fr|rf|f)'''/,e:/'''/,c:[r,a]},{b:/(fr|rf|f)"""/,e:/"""/,c:[r,a]},{b:/(u|r|ur)'/,e:/'/,r:10},{b:/(u|r|ur)"/,e:/"/,r:10},{b:/(b|br)'/,e:/'/},{b:/(b|br)"/,e:/"/},{b:/(fr|rf|f)'/,e:/'/,c:[a]},{b:/(fr|rf|f)"/,e:/"/,c:[a]},e.ASM,e.QSM]},i={cN:"number",r:0,v:[{b:e.BNR+"[lLjJ]?"},{b:"\\b(0o[0-7]+)[lLjJ]?"},{b:e.CNR+"[lLjJ]?"}]},s={cN:"params",b:/\(/,e:/\)/,c:["self",r,i,n]};return a.c=[n,i,r],{aliases:["py","gyp"],k:t,i:/(<\/|->|\?)|=>/,c:[r,i,n,e.HCM,{v:[{cN:"function",bK:"def"},{cN:"class",bK:"class"}],e:/:/,i:/[${=;\n,]/,c:[e.UTM,s,{b:/->/,eW:!0,k:"None"}]},{cN:"meta",b:/^[\t ]*@/,e:/$/},{b:/\b(print|exec)\(/}]}}),e.registerLanguage("ruby",function(e){
3 |     var t="[a-zA-Z_]\\w*[!?=]?|[-+~]\\@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?",r={keyword:"and then defined module in return redo if BEGIN retry end for self when next until do begin unless END rescue else break undef not super class case require yield alias while ensure elsif or include attr_reader attr_writer attr_accessor",literal:"true false nil"},a={cN:"doctag",b:"@[A-Za-z]+"},n={b:"#<",e:">"},i=[e.C("#","$",{c:[a]}),e.C("^\\=begin","^\\=end",{c:[a],r:10}),e.C("^__END__","\\n$")],s={cN:"subst",b:"#\\{",e:"}",k:r},c={cN:"string",c:[e.BE,s],v:[{b:/'/,e:/'/},{b:/"/,e:/"/},{b:/`/,e:/`/},{b:"%[qQwWx]?\\(",e:"\\)"},{b:"%[qQwWx]?\\[",e:"\\]"},{b:"%[qQwWx]?{",e:"}"},{b:"%[qQwWx]?<",e:">"},{b:"%[qQwWx]?/",e:"/"},{b:"%[qQwWx]?%",e:"%"},{b:"%[qQwWx]?-",e:"-"},{b:"%[qQwWx]?\\|",e:"\\|"},{b:/\B\?(\\\d{1,3}|\\x[A-Fa-f0-9]{1,2}|\\u[A-Fa-f0-9]{4}|\\?\S)\b/},{b:/<<(-?)\w+$/,e:/^\s*\w+$/}]},o={cN:"params",b:"\\(",e:"\\)",endsParent:!0,k:r},l=[c,n,{cN:"class",bK:"class module",e:"$|;",i:/=/,c:[e.inherit(e.TM,{b:"[A-Za-z_]\\w*(::\\w+)*(\\?|\\!)?"}),{b:"<\\s*",c:[{b:"("+e.IR+"::)?"+e.IR}]}].concat(i)},{cN:"function",bK:"def",e:"$|;",c:[e.inherit(e.TM,{b:t}),o].concat(i)},{b:e.IR+"::"},{cN:"symbol",b:e.UIR+"(\\!|\\?)?:",r:0},{cN:"symbol",b:":(?!\\s)",c:[c,{b:t}],r:0},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{b:"(\\$\\W)|((\\$|\\@\\@?)(\\w+))"},{cN:"params",b:/\|/,e:/\|/,k:r},{b:"("+e.RSR+"|unless)\\s*",k:"unless",c:[n,{cN:"regexp",c:[e.BE,s],i:/\n/,v:[{b:"/",e:"/[a-z]*"},{b:"%r{",e:"}[a-z]*"},{b:"%r\\(",e:"\\)[a-z]*"},{b:"%r!",e:"![a-z]*"},{b:"%r\\[",e:"\\][a-z]*"}]}].concat(i),r:0}].concat(i);s.c=l,o.c=l;var u="[>?]>",d="[\\w#]+\\(\\w+\\):\\d+:\\d+>",b="(\\w+-)?\\d+\\.\\d+\\.\\d(p\\d+)?[^>]+>",p=[{b:/^\s*=>/,starts:{e:"$",c:l}},{cN:"meta",b:"^("+u+"|"+d+"|"+b+")",starts:{e:"$",c:l}}];return{aliases:["rb","gemspec","podspec","thor","irb"],k:r,i:/\/\*/,c:i.concat(p).concat(l)}}),e.registerLanguage("shell",function(e){return{aliases:["console"],c:[{cN:"meta",b:"^\\s{0,3}[\\w\\d\\[\\]()@-]*[>%$#]",starts:{e:"$",sL:"bash"}}]}}),e.registerLanguage("sql",function(e){var t=e.C("--","$");return{cI:!0,i:/[<>{}*#]/,c:[{bK:"begin end start commit rollback savepoint lock alter create drop rename call delete do handler insert load replace select truncate update set show pragma grant merge describe use explain help declare prepare execute deallocate release unlock purge reset change stop analyze cache flush optimize repair kill install uninstall checksum restore check backup revoke comment",e:/;/,eW:!0,l:/[\w\.]+/,k:{keyword:"abort abs absolute acc acce accep accept access accessed accessible account acos action activate add addtime admin administer advanced advise aes_decrypt aes_encrypt after agent aggregate ali alia alias allocate allow alter always analyze ancillary and any anydata anydataset anyschema anytype apply archive archived archivelog are as asc ascii asin assembly assertion associate asynchronous at atan atn2 attr attri attrib attribu attribut attribute attributes audit authenticated authentication authid authors auto autoallocate autodblink autoextend automatic availability avg backup badfile basicfile before begin beginning benchmark between bfile bfile_base big bigfile bin binary_double binary_float binlog bit_and bit_count bit_length bit_or bit_xor bitmap blob_base block blocksize body both bound buffer_cache buffer_pool build bulk by byte byteordermark bytes cache caching call calling cancel capacity cascade cascaded case cast catalog category ceil ceiling chain change changed char_base char_length character_length characters characterset charindex charset charsetform charsetid check checksum checksum_agg child choose chr chunk class cleanup clear client clob clob_base clone close cluster_id cluster_probability cluster_set clustering coalesce coercibility col collate collation collect colu colum column column_value columns columns_updated comment commit compact compatibility compiled complete composite_limit compound compress compute concat concat_ws concurrent confirm conn connec connect connect_by_iscycle connect_by_isleaf connect_by_root connect_time connection consider consistent constant constraint constraints constructor container content contents context contributors controlfile conv convert convert_tz corr corr_k corr_s corresponding corruption cos cost count count_big counted covar_pop covar_samp cpu_per_call cpu_per_session crc32 create creation critical cross cube cume_dist curdate current current_date current_time current_timestamp current_user cursor curtime customdatum cycle data database databases datafile datafiles datalength date_add date_cache date_format date_sub dateadd datediff datefromparts datename datepart datetime2fromparts day day_to_second dayname dayofmonth dayofweek dayofyear days db_role_change dbtimezone ddl deallocate declare decode decompose decrement decrypt deduplicate def defa defau defaul default defaults deferred defi defin define degrees delayed delegate delete delete_all delimited demand dense_rank depth dequeue des_decrypt des_encrypt des_key_file desc descr descri describ describe descriptor deterministic diagnostics difference dimension direct_load directory disable disable_all disallow disassociate discardfile disconnect diskgroup distinct distinctrow distribute distributed div do document domain dotnet double downgrade drop dumpfile duplicate duration each edition editionable editions element ellipsis else elsif elt empty enable enable_all enclosed encode encoding encrypt end end-exec endian enforced engine engines enqueue enterprise entityescaping eomonth error errors escaped evalname evaluate event eventdata events except exception exceptions exchange exclude excluding execu execut execute exempt exists exit exp expire explain export export_set extended extent external external_1 external_2 externally extract failed failed_login_attempts failover failure far fast feature_set feature_value fetch field fields file file_name_convert filesystem_like_logging final finish first first_value fixed flash_cache flashback floor flush following follows for forall force form forma format found found_rows freelist freelists freepools fresh from from_base64 from_days ftp full function general generated get get_format get_lock getdate getutcdate global global_name globally go goto grant grants greatest group group_concat group_id grouping grouping_id groups gtid_subtract guarantee guard handler hash hashkeys having hea head headi headin heading heap help hex hierarchy high high_priority hosts hour http id ident_current ident_incr ident_seed identified identity idle_time if ifnull ignore iif ilike ilm immediate import in include including increment index indexes indexing indextype indicator indices inet6_aton inet6_ntoa inet_aton inet_ntoa infile initial initialized initially initrans inmemory inner innodb input insert install instance instantiable instr interface interleaved intersect into invalidate invisible is is_free_lock is_ipv4 is_ipv4_compat is_not is_not_null is_used_lock isdate isnull isolation iterate java join json json_exists keep keep_duplicates key keys kill language large last last_day last_insert_id last_value lax lcase lead leading least leaves left len lenght length less level levels library like like2 like4 likec limit lines link list listagg little ln load load_file lob lobs local localtime localtimestamp locate locator lock locked log log10 log2 logfile logfiles logging logical logical_reads_per_call logoff logon logs long loop low low_priority lower lpad lrtrim ltrim main make_set makedate maketime managed management manual map mapping mask master master_pos_wait match matched materialized max maxextents maximize maxinstances maxlen maxlogfiles maxloghistory maxlogmembers maxsize maxtrans md5 measures median medium member memcompress memory merge microsecond mid migration min minextents minimum mining minus minute minvalue missing mod mode model modification modify module monitoring month months mount move movement multiset mutex name name_const names nan national native natural nav nchar nclob nested never new newline next nextval no no_write_to_binlog noarchivelog noaudit nobadfile nocheck nocompress nocopy nocycle nodelay nodiscardfile noentityescaping noguarantee nokeep nologfile nomapping nomaxvalue nominimize nominvalue nomonitoring none noneditionable nonschema noorder nopr nopro noprom nopromp noprompt norely noresetlogs noreverse normal norowdependencies noschemacheck noswitch not nothing notice notrim novalidate now nowait nth_value nullif nulls num numb numbe nvarchar nvarchar2 object ocicoll ocidate ocidatetime ociduration ociinterval ociloblocator ocinumber ociref ocirefcursor ocirowid ocistring ocitype oct octet_length of off offline offset oid oidindex old on online only opaque open operations operator optimal optimize option optionally or oracle oracle_date oradata ord ordaudio orddicom orddoc order ordimage ordinality ordvideo organization orlany orlvary out outer outfile outline output over overflow overriding package pad parallel parallel_enable parameters parent parse partial partition partitions pascal passing password password_grace_time password_lock_time password_reuse_max password_reuse_time password_verify_function patch path patindex pctincrease pctthreshold pctused pctversion percent percent_rank percentile_cont percentile_disc performance period period_add period_diff permanent physical pi pipe pipelined pivot pluggable plugin policy position post_transaction pow power pragma prebuilt precedes preceding precision prediction prediction_cost prediction_details prediction_probability prediction_set prepare present preserve prior priority private private_sga privileges procedural procedure procedure_analyze processlist profiles project prompt protection public publishingservername purge quarter query quick quiesce quota quotename radians raise rand range rank raw read reads readsize rebuild record records recover recovery recursive recycle redo reduced ref reference referenced references referencing refresh regexp_like register regr_avgx regr_avgy regr_count regr_intercept regr_r2 regr_slope regr_sxx regr_sxy reject rekey relational relative relaylog release release_lock relies_on relocate rely rem remainder rename repair repeat replace replicate replication required reset resetlogs resize resource respect restore restricted result result_cache resumable resume retention return returning returns reuse reverse revoke right rlike role roles rollback rolling rollup round row row_count rowdependencies rowid rownum rows rtrim rules safe salt sample save savepoint sb1 sb2 sb4 scan schema schemacheck scn scope scroll sdo_georaster sdo_topo_geometry search sec_to_time second section securefile security seed segment select self sequence sequential serializable server servererror session session_user sessions_per_user set sets settings sha sha1 sha2 share shared shared_pool short show shrink shutdown si_averagecolor si_colorhistogram si_featurelist si_positionalcolor si_stillimage si_texture siblings sid sign sin size size_t sizes skip slave sleep smalldatetimefromparts smallfile snapshot some soname sort soundex source space sparse spfile split sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_small_result sql_variant_property sqlcode sqldata sqlerror sqlname sqlstate sqrt square standalone standby start starting startup statement static statistics stats_binomial_test stats_crosstab stats_ks_test stats_mode stats_mw_test stats_one_way_anova stats_t_test_ stats_t_test_indep stats_t_test_one stats_t_test_paired stats_wsr_test status std stddev stddev_pop stddev_samp stdev stop storage store stored str str_to_date straight_join strcmp strict string struct stuff style subdate subpartition subpartitions substitutable substr substring subtime subtring_index subtype success sum suspend switch switchoffset switchover sync synchronous synonym sys sys_xmlagg sysasm sysaux sysdate sysdatetimeoffset sysdba sysoper system system_user sysutcdatetime table tables tablespace tan tdo template temporary terminated tertiary_weights test than then thread through tier ties time time_format time_zone timediff timefromparts timeout timestamp timestampadd timestampdiff timezone_abbr timezone_minute timezone_region to to_base64 to_date to_days to_seconds todatetimeoffset trace tracking transaction transactional translate translation treat trigger trigger_nestlevel triggers trim truncate try_cast try_convert try_parse type ub1 ub2 ub4 ucase unarchived unbounded uncompress under undo unhex unicode uniform uninstall union unique unix_timestamp unknown unlimited unlock unpivot unrecoverable unsafe unsigned until untrusted unusable unused update updated upgrade upped upper upsert url urowid usable usage use use_stored_outlines user user_data user_resources users using utc_date utc_timestamp uuid uuid_short validate validate_password_strength validation valist value values var var_samp varcharc vari varia variab variabl variable variables variance varp varraw varrawc varray verify version versions view virtual visible void wait wallet warning warnings week weekday weekofyear wellformed when whene whenev wheneve whenever where while whitespace with within without work wrapped xdb xml xmlagg xmlattributes xmlcast xmlcolattval xmlelement xmlexists xmlforest xmlindex xmlnamespaces xmlpi xmlquery xmlroot xmlschema xmlserialize xmltable xmltype xor year year_to_month years yearweek",literal:"true false null",built_in:"array bigint binary bit blob boolean char character date dec decimal float int int8 integer interval number numeric real record serial serial8 smallint text varchar varying void"},c:[{cN:"string",b:"'",e:"'",c:[e.BE,{b:"''"}]},{cN:"string",b:'"',e:'"',c:[e.BE,{b:'""'}]},{cN:"string",b:"`",e:"`",c:[e.BE]},e.CNM,e.CBCM,t]},e.CBCM,t]}}),e});


--------------------------------------------------------------------------------
/pagination/common/reset.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | /**
 3 | reset css
 4 | */
 5 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
 6 |     margin: 0;
 7 |     padding: 0;
 8 | }
 9 | ul,ol{
10 |     list-style: none;
11 | }
12 | img{
13 |     border:0;
14 |     -ms-interpolation-mode: bicubic; 
15 |     vertical-align: middle;
16 | }
17 | table {
18 |     border-collapse: collapse;
19 |     border-spacing: 0;
20 | }
21 | address,caption,cite,code,dfn,em,strong,th,var {
22 |     font-style: normal;
23 | }
24 | h1,h2,h3,h4,h5,h6 {
25 |     font-weight: normal;
26 |     font-size: 100%;
27 | }
28 | abbr,acronym {
29 |     border: 0;
30 |     font-variant: normal;
31 | }


--------------------------------------------------------------------------------
/pagination/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="cn-ZH">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>pagination.js - 分页</title>
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <link href="../favicon.ico" rel="icon" type="image/x-icon" />
  9 |     <link rel="stylesheet" type="text/css" href="./common/reset.css" media="screen">
 10 |     <link rel="stylesheet" type="text/css" href="./common/highlight.min.css" media="screen">
 11 |     <link rel="stylesheet" type="text/css" href="./common/common.css" media="screen">
 12 |     <link rel="stylesheet" type="text/css" href="./pagination.css" media="screen">
 13 |     <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 14 | </head>
 15 | 
 16 | <body>
 17 |     <div class="wrapper">
 18 |         <div class="container">
 19 |             <div class="content">
 20 |                 <h1>分页-pagination.js (v1.5.1)</h1>
 21 |                 <p>需先引入jQuery，再引入pagination组件</p>
 22 |                 <pre class="bad">&lt;script&nbsp;src="jquery.js"&gt;&lt;/script&gt;</pre>
 23 |                 <pre class="bad">&lt;script&nbsp;src="jquery.pagination.js"&gt;&lt;/script&gt;</pre>
 24 |                 <p>组件样式与功能分离，自定义样式（注：这里加样式是为了示例看的清楚，操作方便。）</p>
 25 |                 <div class="update-log eg">
 26 |                     <p class="title">更新日志</p>
 27 |                     <ul>
 28 |                         <li>2018-01-12 增加固定页码数量功能</li>
 29 |                         <li>2018-01-11 修复超过1页时不会自动显示bug</li>
 30 |                         <li>2017-09-27 优化分页逻辑</li>
 31 |                         <li>2017-03-27 更新api参数，增加是否保持上下页按钮，为0时不显示分页</li>
 32 |                         <li>2016-08-11 修复总数据为0时不显示分页，修复总数据为1时显示默认总页数bug，改成不显示分页。</li>
 33 |                     </ul>
 34 |                 </div>
 35 |                 <div class="eg">
 36 |                     <div class="m-style M-box"></div>
 37 |                     <p class="tips">当前是第
 38 |                         <span class="now"></span>页</p>
 39 |                     <p>HTML</p>
 40 |                     <pre><code class="html">&lt;div class="M-box"&gt;&lt;/div&gt;</code></pre>
 41 |                     <p>Javascript</p>
 42 |                     <pre><code>$('.M-box').pagination({
 43 |     callback: function (api) {
 44 |         $('.now').text(api.getCurrent());
 45 |     }
 46 | }, function (api) {
 47 |     $('.now').text(api.getCurrent());
 48 | }); </code></pre>
 49 |                 </div>
 50 |                 <div class="eg">
 51 |                     <div class="m-style M-box11"></div>
 52 |                     <p class="tips">固定页码数量，切换或者增加首页末页按钮数量都不变</p>
 53 |                     <p>HTML</p>
 54 |                     <pre><code class="html">&lt;div class="M-box11"&gt;&lt;/div&gt;</code></pre>
 55 |                     <p>Javascript</p>
 56 |                     <pre><code>$('.M-box11').pagination({
 57 |     mode: 'fixed'
 58 | });</code></pre>
 59 |                 </div>
 60 |                 <div class="eg">
 61 |                     <div class="m-style M-box2"></div>
 62 |                     <p class="tips">开启第一页和最后一页的按钮,并且内容可自定义。内容默认为1和总页数。（注：如coping为false，homePage和endPage无效。）</p>
 63 |                     <p>HTML</p>
 64 |                     <pre><code class="html">&lt;div class="M-box2"&gt;&lt;/div&gt;</code></pre>
 65 |                     <p>Javascript</p>
 66 |                     <pre><code>$('.M-box2').pagination({
 67 |     coping: true,
 68 |     homePage: '首页',
 69 |     endPage: '末页',
 70 |     prevContent: '上页',
 71 |     nextContent: '下页'
 72 | });</code></pre>
 73 |                 </div>
 74 |                 <div class="eg">
 75 |                     <div class="m-style M-box1"></div>
 76 |                     <p class="tips">
 77 |                         总数据
 78 |                         <span class="count">100</span>条，每页显示
 79 |                         <span class="count">5</span>条，总页数为
 80 |                         <span class="count">20</span>页
 81 |                         <br>如果配置了数据总数和当前一页显示多少条数据，总页数会自动计算，这种情况下再配置总页数无效。
 82 |                         <br>（注：数据总数totalData和每页显示的条数showData必须同时配置，否则默认使用总页数pageCount。）</p>
 83 |                     <p>HTML</p>
 84 |                     <pre><code class="html">&lt;div class="M-box1"&gt;&lt;/div&gt;</code></pre>
 85 |                     <p>Javascript</p>
 86 |                     <pre><code>$('.M-box1').pagination({
 87 |     totalData: 100,
 88 |     showData: 5,
 89 |     coping: true
 90 | });</code></pre>
 91 |                 </div>
 92 |                 <div class="eg">
 93 |                     <div class="m-style M-box3"></div>
 94 |                     <p class="tips">参数：jump，开启跳转到第几页，跳转按钮文本内容可修改。（如果超出最大页数会变成总页数的值）</p>
 95 |                     <p>HTML</p>
 96 |                     <pre><code class="html">&lt;div class="M-box3"&gt;&lt;/div&gt;</code></pre>
 97 |                     <p>Javascript</p>
 98 |                     <pre><code>$('.M-box3').pagination({
 99 |     pageCount: 50,
100 |     jump: true,
101 |     coping: true,
102 |     homePage: '首页',
103 |     endPage: '末页',
104 |     prevContent: '上页',
105 |     nextContent: '下页',
106 |     callback: function (api) {
107 |         console.log(api.getCurrent())
108 |     }
109 | });</code></pre>
110 |                 </div>
111 |                 <div class="eg">
112 |                     <div class="m-style M-box4"></div>
113 |                     <p class="tips">ajax请求，打开控制台查看Network</p>
114 |                     <p>HTML</p>
115 |                     <pre><code class="html">&lt;div class="M-box4"&gt;&lt;/div&gt;</code></pre>
116 |                     <p>Javascript</p>
117 |                     <pre><code>$('.M-box5').pagination({
118 |     pageCount: 50,
119 |     jump: true,
120 |     callback: function (api) {
121 |         var data = {
122 |             page: api.getCurrent(),
123 |             name: 'mss',
124 |             say: 'oh'
125 |         };
126 |         $.getJSON('https://www.easy-mock.com/mock/58fff7a5739ac1685205ad5d/example/pagination#!method=get', data, function (json) {
127 |             console.log(json);
128 |         });
129 |     }
130 | });</code></pre>
131 |                 </div>
132 |                 <div class="options">
133 |                     <p>options(参数配置)</p>
134 |                     <table>
135 |                         <thead>
136 |                             <tr>
137 |                                 <td>参数</td>
138 |                                 <td>默认值</td>
139 |                                 <td class="explain">说明</td>
140 |                             </tr>
141 |                         </thead>
142 |                         <tbody>
143 |                             <tr>
144 |                                 <td>pageCount</td>
145 |                                 <td>9</td>
146 |                                 <td class="explain">总页数</td>
147 |                             </tr>
148 |                             <tr>
149 |                                 <td>totalData</td>
150 |                                 <td>0</td>
151 |                                 <td class="explain">数据总条数</td>
152 |                             </tr>
153 |                             <tr>
154 |                                 <td>current</td>
155 |                                 <td>1</td>
156 |                                 <td class="explain">当前第几页</td>
157 |                             </tr>
158 |                             <tr>
159 |                                 <td>showData</td>
160 |                                 <td>0</td>
161 |                                 <td class="explain">每页显示的条数</td>
162 |                             </tr>
163 |                             <tr>
164 |                                 <td>prevCls</td>
165 |                                 <td>'prev'</td>
166 |                                 <td class="explain">上一页class</td>
167 |                             </tr>
168 |                             <tr>
169 |                                 <td>nextCls</td>
170 |                                 <td>'next'</td>
171 |                                 <td class="explain">下一页class</td>
172 |                             </tr>
173 |                             <tr>
174 |                                 <td>prevContent</td>
175 |                                 <td>'&lt;'</td>
176 |                                 <td class="explain">上一页节点内容</td>
177 |                             </tr>
178 |                             <tr>
179 |                                 <td>nextContent</td>
180 |                                 <td>'&gt;'</td>
181 |                                 <td class="explain">下一页节点内容</td>
182 |                             </tr>
183 |                             <tr>
184 |                                 <td>activeCls</td>
185 |                                 <td>'active'</td>
186 |                                 <td class="explain">当前页选中状态class名</td>
187 |                             </tr>
188 |                             <tr>
189 |                                 <td>mode</td>
190 |                                 <td>'unfixed'</td>
191 |                                 <td class="explain">模式，unfixed不固定页码按钮数量，fixed固定数量</td>
192 |                             </tr>
193 |                             <tr>
194 |                                 <td>count</td>
195 |                                 <td>4</td>
196 |                                 <td class="explain">mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数</td>
197 |                             </tr>
198 |                             <tr>
199 |                                 <td>coping</td>
200 |                                 <td>false</td>
201 |                                 <td class="explain">是否开启首页和末页，值为boolean</td>
202 |                             </tr>
203 |                             <tr>
204 |                                 <td>isHide</td>
205 |                                 <td>false</td>
206 |                                 <td class="explain">总页数为0或1时隐藏分页控件</td>
207 |                             </tr>
208 |                             <tr>
209 |                                 <td>keepShowPN</td>
210 |                                 <td>false</td>
211 |                                 <td class="explain">是否一直显示上一页下一页</td>
212 |                             </tr>
213 |                             <tr>
214 |                                 <td>homePage</td>
215 |                                 <td>''</td>
216 |                                 <td class="explain">首页节点内容，默认为空</td>
217 |                             </tr>
218 |                             <tr>
219 |                                 <td>endPage</td>
220 |                                 <td>''</td>
221 |                                 <td class="explain">尾页节点内容，默认为空</td>
222 |                             </tr>
223 |                             <tr>
224 |                                 <td>jump</td>
225 |                                 <td>false</td>
226 |                                 <td class="explain">是否开启跳转到指定页数，值为boolean类型</td>
227 |                             </tr>
228 |                             <tr>
229 |                                 <td>jumpIptCls</td>
230 |                                 <td>'jump-ipt'</td>
231 |                                 <td class="explain">文本框内容</td>
232 |                             </tr>
233 |                             <tr>
234 |                                 <td>jumpBtnCls</td>
235 |                                 <td>'jump-btn'</td>
236 |                                 <td class="explain">跳转按钮class</td>
237 |                             </tr>
238 |                             <tr>
239 |                                 <td>jumpBtn</td>
240 |                                 <td>'跳转'</td>
241 |                                 <td class="explain">跳转按钮文本内容</td>
242 |                             </tr>
243 |                             <tr>
244 |                                 <td>callback</td>
245 |                                 <td>function(){}</td>
246 |                                 <td class="explain">回调函数，参数"index"为当前页</td>
247 |                             </tr>
248 |                         </tbody>
249 |                     </table>
250 |                 </div>
251 |                 <div class="callback">
252 |                     <p>api接口</p>
253 |                     <table>
254 |                         <thead>
255 |                             <tr>
256 |                                 <td>方法</td>
257 |                                 <td>参数</td>
258 |                                 <td>说明</td>
259 |                             </tr>
260 |                         </thead>
261 |                         <tbody>
262 |                             <tr>
263 |                                 <td>getPageCount()</td>
264 |                                 <td>无</td>
265 |                                 <td>获取总页数</td>
266 |                             </tr>
267 |                             <tr>
268 |                                 <td>setPageCount(page)</td>
269 |                                 <td>page：页数</td>
270 |                                 <td>设置总页数</td>
271 |                             </tr>
272 |                             <tr>
273 |                                 <td>getCurrent()</td>
274 |                                 <td>无</td>
275 |                                 <td>获取当前页</td>
276 |                             </tr>
277 |                         </tbody>
278 |                     </table>
279 |                 </div>
280 |             </div>
281 |         </div>
282 |         <div class="footer">
283 |             <p>&copy;
284 |                 <a href="http://github.com/Maxiaoxiang" target="_blank">Mss。</a>
285 |                 <span class="spe">/</span>Powered by
286 |                 <a href="http://maxiaoxiang.com" target="_blank">Maxiaoxiang</a>
287 |             </p>
288 |         </div>
289 |     </div>
290 |     <script src="./common/highlight.min.js"></script>
291 |     <script src="./common/jquery.min.js"></script>
292 |     <script src="./jquery.pagination.js"></script>
293 |     <script>
294 |         $(function () {
295 |             $('pre code').each(function (i, block) {
296 |                 hljs.highlightBlock(block);
297 |             });
298 |             $('.M-box').pagination({
299 |                 callback: function (api) {
300 |                     $('.now').text(api.getCurrent());
301 |                 }
302 |             }, function (api) {
303 |                 $('.now').text(api.getCurrent());
304 |             });
305 | 
306 |             $('.M-box11').pagination({
307 |                 mode: 'fixed'
308 |             });
309 |             
310 |             $('.M-box2').pagination({
311 |                 coping: true,
312 |                 homePage: '首页',
313 |                 endPage: '末页',
314 |                 prevContent: '上页',
315 |                 nextContent: '下页'
316 |             });
317 | 
318 |             $('.M-box1').pagination({
319 |                 totalData: 100,
320 |                 showData: 5,
321 |                 coping: true
322 |             });
323 | 
324 |             $('.M-box3').pagination({
325 |                 pageCount: 50,
326 |                 jump: true,
327 |                 coping: true,
328 |                 homePage: '首页',
329 |                 endPage: '末页',
330 |                 prevContent: '上页',
331 |                 nextContent: '下页',
332 |                 callback: function (api) {
333 |                     console.log(api.getCurrent())
334 |                 }
335 |             });
336 | 
337 |             $('.M-box4').pagination({
338 |                 pageCount: 50,
339 |                 jump: true,
340 |                 callback: function (api) {
341 |                     var data = {
342 |                         page: api.getCurrent(),
343 |                         name: 'mss',
344 |                         say: 'oh'
345 |                     };
346 |                     $.getJSON(
347 |                         'https://www.easy-mock.com/mock/58fff7a5739ac1685205ad5d/example/pagination#!method=get',
348 |                         data,
349 |                         function (json) {
350 |                             console.log(json);
351 |                         });
352 |                 }
353 |             });
354 |         });
355 |     </script>
356 | </body>
357 | 
358 | </html>


--------------------------------------------------------------------------------
/pagination/jquery.pagination.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * pagination.js 1.5.1
  3 |  * A jQuery plugin to provide simple yet fully customisable pagination.
  4 |  * @version 1.5.1
  5 |  * @author mss
  6 |  * @url https://github.com/Maxiaoxiang/jQuery-plugins
  7 |  *
  8 |  * @调用方法
  9 |  * $(selector).pagination(option, callback);
 10 |  * -此处callback是初始化调用，option里的callback是点击页码后调用
 11 |  * 
 12 |  * -- example --
 13 |  * $(selector).pagination({
 14 |  *     ... // 配置参数
 15 |  *     callback: function(api) {
 16 |  *         console.log('点击页码调用该回调'); //切换页码时执行一次回调
 17 |  *     }
 18 |  * }, function(){
 19 |  *     console.log('初始化'); //插件初始化时调用该方法，比如请求第一次接口来初始化分页配置
 20 |  * });
 21 |  */
 22 | ;
 23 | (function (factory) {
 24 |     if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
 25 |         // AMD或CMD
 26 |         define(["jquery"], factory);
 27 |     } else if (typeof module === 'object' && module.exports) {
 28 |         // Node/CommonJS
 29 |         module.exports = function (root, jQuery) {
 30 |             if (jQuery === undefined) {
 31 |                 if (typeof window !== 'undefined') {
 32 |                     jQuery = require('jquery');
 33 |                 } else {
 34 |                     jQuery = require('jquery')(root);
 35 |                 }
 36 |             }
 37 |             factory(jQuery);
 38 |             return jQuery;
 39 |         };
 40 |     } else {
 41 |         //Browser globals
 42 |         factory(jQuery);
 43 |     }
 44 | }(function ($) {
 45 | 
 46 |     //配置参数
 47 |     var defaults = {
 48 |         totalData: 0, //数据总条数
 49 |         showData: 0, //每页显示的条数
 50 |         pageCount: 9, //总页数,默认为9
 51 |         current: 1, //当前第几页
 52 |         prevCls: 'prev', //上一页class
 53 |         nextCls: 'next', //下一页class
 54 |         prevContent: '<', //上一页内容
 55 |         nextContent: '>', //下一页内容
 56 |         activeCls: 'active', //当前页选中状态
 57 |         coping: false, //首页和尾页
 58 |         isHide: false, //当前页数为0页或者1页时不显示分页
 59 |         homePage: '', //首页节点内容
 60 |         endPage: '', //尾页节点内容
 61 |         keepShowPN: false, //是否一直显示上一页下一页
 62 |         mode: 'unfixed', //分页模式，unfixed：不固定页码数量，fixed：固定页码数量
 63 |         count: 4, //mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数
 64 |         jump: false, //跳转到指定页数
 65 |         jumpIptCls: 'jump-ipt', //文本框内容
 66 |         jumpBtnCls: 'jump-btn', //跳转按钮
 67 |         jumpBtn: '跳转', //跳转按钮文本
 68 |         callback: function () {} //回调
 69 |     };
 70 | 
 71 |     var Pagination = function (element, options) {
 72 |         //全局变量
 73 |         var opts = options, //配置
 74 |             current, //当前页
 75 |             $document = $(document),
 76 |             $obj = $(element); //容器
 77 | 
 78 |         /**
 79 |          * 设置总页数
 80 |          * @param {int} page 页码
 81 |          * @return opts.pageCount 总页数配置
 82 |          */
 83 |         this.setPageCount = function (page) {
 84 |             return opts.pageCount = page;
 85 |         };
 86 | 
 87 |         /**
 88 |          * 获取总页数
 89 |          * 如果配置了总条数和每页显示条数，将会自动计算总页数并略过总页数配置，反之
 90 |          * @return {int} 总页数
 91 |          */
 92 |         this.getPageCount = function () {
 93 |             return opts.totalData && opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
 94 |         };
 95 | 
 96 |         /**
 97 |          * 获取当前页
 98 |          * @return {int} 当前页码
 99 |          */
100 |         this.getCurrent = function () {
101 |             return current;
102 |         };
103 | 
104 |         /**
105 |          * 填充数据
106 |          * @param {int} 页码
107 |          */
108 |         this.filling = function (index) {
109 |             var html = '';
110 |             current = parseInt(index) || parseInt(opts.current); //当前页码
111 |             var pageCount = this.getPageCount(); //获取的总页数
112 |             switch (opts.mode) { //配置模式
113 |                 case 'fixed': //固定按钮模式
114 |                     html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
115 |                     if (opts.coping) {
116 |                         var home = opts.coping && opts.homePage ? opts.homePage : '1';
117 |                         html += '<a href="javascript:;" data-page="1">' + home + '</a>';
118 |                     }
119 |                     var start = current > opts.count - 1 ? current + opts.count - 1 > pageCount ? current - (opts.count - (pageCount - current)) : current - 2 : 1;
120 |                     var end = current + opts.count - 1 > pageCount ? pageCount : start + opts.count;
121 |                     for (; start <= end; start++) {
122 |                         if (start != current) {
123 |                             html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
124 |                         } else {
125 |                             html += '<span class="' + opts.activeCls + '">' + start + '</span>';
126 |                         }
127 |                     }
128 |                     if (opts.coping) {
129 |                         var _end = opts.coping && opts.endPage ? opts.endPage : pageCount;
130 |                         html += '<a href="javascript:;" data-page="' + pageCount + '">' + _end + '</a>';
131 |                     }
132 |                     html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
133 |                     break;
134 |                 case 'unfixed': //不固定按钮模式
135 |                     if (opts.keepShowPN || current > 1) { //上一页
136 |                         html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
137 |                     } else {
138 |                         if (opts.keepShowPN == false) {
139 |                             $obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();
140 |                         }
141 |                     }
142 |                     if (current >= opts.count + 2 && current != 1 && pageCount != opts.count) {
143 |                         var home = opts.coping && opts.homePage ? opts.homePage : '1';
144 |                         html += opts.coping ? '<a href="javascript:;" data-page="1">' + home + '</a><span>...</span>' : '';
145 |                     }
146 |                     var start = (current - opts.count) <= 1 ? 1 : (current - opts.count);
147 |                     var end = (current + opts.count) >= pageCount ? pageCount : (current + opts.count);
148 |                     for (; start <= end; start++) {
149 |                         if (start <= pageCount && start >= 1) {
150 |                             if (start != current) {
151 |                                 html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
152 |                             } else {
153 |                                 html += '<span class="' + opts.activeCls + '">' + start + '</span>';
154 |                             }
155 |                         }
156 |                     }
157 |                     if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
158 |                         var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
159 |                         html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="' + pageCount + '">' + end + '</a>' : '';
160 |                     }
161 |                     if (opts.keepShowPN || current < pageCount) { //下一页
162 |                         html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
163 |                     } else {
164 |                         if (opts.keepShowPN == false) {
165 |                             $obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();
166 |                         }
167 |                     }
168 |                     break;
169 |                 case 'easy': //简单模式
170 |                     break;
171 |                 default:
172 |             }
173 |             html += opts.jump ? '<input type="text" class="' + opts.jumpIptCls + '"><a href="javascript:;" class="' + opts.jumpBtnCls + '">' + opts.jumpBtn + '</a>' : '';
174 |             $obj.empty().html(html);
175 |         };
176 | 
177 |         //绑定事件
178 |         this.eventBind = function () {
179 |             var that = this;
180 |             var pageCount = that.getPageCount(); //总页数
181 |             var index = 1;
182 |             $obj.off().on('click', 'a', function () {
183 |                 if ($(this).hasClass(opts.nextCls)) {
184 |                     if ($obj.find('.' + opts.activeCls).text() >= pageCount) {
185 |                         $(this).addClass('disabled');
186 |                         return false;
187 |                     } else {
188 |                         index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;
189 |                     }
190 |                 } else if ($(this).hasClass(opts.prevCls)) {
191 |                     if ($obj.find('.' + opts.activeCls).text() <= 1) {
192 |                         $(this).addClass('disabled');
193 |                         return false;
194 |                     } else {
195 |                         index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;
196 |                     }
197 |                 } else if ($(this).hasClass(opts.jumpBtnCls)) {
198 |                     if ($obj.find('.' + opts.jumpIptCls).val() !== '') {
199 |                         index = parseInt($obj.find('.' + opts.jumpIptCls).val());
200 |                     } else {
201 |                         return;
202 |                     }
203 |                 } else {
204 |                     index = parseInt($(this).data('page'));
205 |                 }
206 |                 that.filling(index);
207 |                 typeof opts.callback === 'function' && opts.callback(that);
208 |             });
209 |             //输入跳转的页码
210 |             $obj.on('input propertychange', '.' + opts.jumpIptCls, function () {
211 |                 var $this = $(this);
212 |                 var val = $this.val();
213 |                 var reg = /[^\d]/g;
214 |                 if (reg.test(val)) $this.val(val.replace(reg, ''));
215 |                 (parseInt(val) > pageCount) && $this.val(pageCount);
216 |                 if (parseInt(val) === 0) $this.val(1); //最小值为1
217 |             });
218 |             //回车跳转指定页码
219 |             $document.keydown(function (e) {
220 |                 if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
221 |                     var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
222 |                     that.filling(index);
223 |                     typeof opts.callback === 'function' && opts.callback(that);
224 |                 }
225 |             });
226 |         };
227 | 
228 |         //初始化
229 |         this.init = function () {
230 |             this.filling(opts.current);
231 |             this.eventBind();
232 |             if (opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') {
233 |                 $obj.hide();
234 |             } else {
235 |                 $obj.show();
236 |             }
237 |         };
238 |         this.init();
239 |     };
240 | 
241 |     $.fn.pagination = function (parameter, callback) {
242 |         if (typeof parameter == 'function') { //重载
243 |             callback = parameter;
244 |             parameter = {};
245 |         } else {
246 |             parameter = parameter || {};
247 |             callback = callback || function () {};
248 |         }
249 |         var options = $.extend({}, defaults, parameter);
250 |         return this.each(function () {
251 |             var pagination = new Pagination(this, options);
252 |             callback(pagination);
253 |         });
254 |     };
255 | 
256 | }));


--------------------------------------------------------------------------------
/pagination/pagination.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | .m-style {
 3 |     position: relative;
 4 |     text-align: center;
 5 |     zoom: 1;
 6 | }
 7 | 
 8 | .m-style:before,
 9 | .m-style:after {
10 |     content: "";
11 |     display: table;
12 | }
13 | 
14 | .m-style:after {
15 |     clear: both;
16 |     overflow: hidden;
17 | }
18 | 
19 | .m-style span {
20 |     float: left;
21 |     margin: 0 5px;
22 |     width: 38px;
23 |     height: 38px;
24 |     line-height: 38px;
25 |     color: #bdbdbd;
26 |     font-size: 14px;
27 | }
28 | 
29 | .m-style .active {
30 |     float: left;
31 |     margin: 0 5px;
32 |     width: 38px;
33 |     height: 38px;
34 |     line-height: 38px;
35 |     background: #e91e63;
36 |     color: #fff;
37 |     font-size: 14px;
38 |     border: 1px solid #e91e63;
39 | }
40 | 
41 | .m-style a {
42 |     float: left;
43 |     margin: 0 5px;
44 |     width: 38px;
45 |     height: 38px;
46 |     line-height: 38px;
47 |     background: #fff;
48 |     border: 1px solid #ebebeb;
49 |     color: #bdbdbd;
50 |     font-size: 14px;
51 | }
52 | 
53 | .m-style a:hover {
54 |     color: #fff;
55 |     background: #e91e63;
56 | }
57 | 
58 | .m-style .next,
59 | .m-style .prev {
60 |     font-family: "Simsun";
61 |     font-size: 16px;
62 |     font-weight: bold;
63 | }
64 | 
65 | .now,
66 | .count {
67 |     padding: 0 5px;
68 |     color: #f00;
69 | }
70 | 
71 | .eg img {
72 |     max-width: 800px;
73 |     min-height: 500px;
74 | }
75 | 
76 | input {
77 |     float: left;
78 |     margin: 0 5px;
79 |     width: 38px;
80 |     height: 38px;
81 |     line-height: 38px;
82 |     text-align: center;
83 |     background: #fff;
84 |     border: 1px solid #ebebeb;
85 |     outline: none;
86 |     color: #bdbdbd;
87 |     font-size: 14px;
88 | }


--------------------------------------------------------------------------------
/resizable/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <title>resizable.js - Mss</title>
  6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |         <link href="../favicon.ico" rel="icon" type="image/x-icon" />
  8 |         <link rel="stylesheet" type="text/css" href="http://maxiaoxiang.com/stylesheets/normalize.css" media="screen">
  9 |         <link rel="stylesheet" type="text/css" href="http://maxiaoxiang.com/stylesheets/public.css" media="screen">
 10 |         <link rel="stylesheet" type="text/css" href="./resizable.css" media="screen">
 11 |         <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 12 |     </head>
 13 |     <body>
 14 |         <div class="wrapper">
 15 |             <div class="container">
 16 |                 <div class="sidebar">
 17 |                     <div class="hd">
 18 |                         <div class="site-meta">
 19 |                             <a href="http://maxiaoxiang.com" class="brand">
 20 |                                 <span class="site-title">Mss。</span>
 21 |                             </a>
 22 |                         </div>
 23 |                     </div>
 24 |                     <div class="bd">
 25 |                         <div class="site-nav">
 26 |                             <ul class="menu">
 27 |                                 <li class="menu-item menu-item-active">
 28 |                                     <a href="http://maxiaoxiang.com/" class="repertory">插件库</a>
 29 |                                 </li>
 30 |                                 <li class="menu-item">
 31 |                                     <a href="http://maxiaoxiang.com/blog/" target="_blank" class="blog">博客</a>
 32 |                                 </li>
 33 |                                 <li class="menu-item">
 34 |                                     <a href="http://maxiaoxiang.com/message.html" class="message">留言板</a>
 35 |                                 </li>
 36 |                             </ul>
 37 |                         </div>
 38 |                     </div>
 39 |                     <div class="ft">
 40 |                         <div class="site-info">
 41 |                             <img src="https://avatars0.githubusercontent.com/u/11399676?v=3&s=460" alt="Mss。" class="avatar">
 42 |                             <p class="name">Mss。</p>
 43 |                             <p class="description">be happy</p>
 44 |                             <div class="links">
 45 |                                 <span class="links-item">
 46 |                                     <a href="https://github.com/Maxiaoxiang" target="_blank" title="GitHub">GitHub</a>
 47 |                                 </span>
 48 |                             </div>
 49 |                         </div>
 50 |                     </div>
 51 |                 </div>
 52 |                 <div class="content">
 53 |                     <h1>缩放-resizable</h1>
 54 |                     <p>需先引入jQuery，再引入resizable组件</p>
 55 |                     <pre class="bad">&lt;script&nbsp;src="jquery.js"&gt;&lt;/script&gt;</pre>
 56 |                     <pre class="bad">&lt;script&nbsp;src="jquery.resizable.js"&gt;&lt;/script&gt;</pre>
 57 |                     <p>组件样式与功能分离，自定义样式</p>
 58 |                     <div class="eg">
 59 |                         <div class="test"></div>
 60 |                         <p>HTML</p>
 61 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"test"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
 62 |                         <p>Javascript</p>  
 63 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.test'</span>).<span style="color:#000">resizable</span>();</pre>
 64 |                     </div>      
 65 |                     <div class="eg">
 66 |                         <div class="range">
 67 |                             <div class="test1"></div>
 68 |                         </div>
 69 |                         <p>HTML</p>
 70 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"range"</span><span style="color:#170">&gt;</span><br>    <span style="color:#170">&lt;div</span> <span style="color:#00c">class</span>=<span style="color:#a11">"test1"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span><br><span style="color:#170">&lt;/div</span><span style="color:#170">&gt;</span></pre>
 71 |                         <p>Javascript</p>
 72 |         <pre style="margin:15px 0;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#a11">'.test1'</span>).<span style="color:#000">resizable</span>({<br>    <span style="color:#000">rangeCls</span>:<span style="color:#a11">'range'</span><br>});</pre>
 73 |                     </div>   
 74 |                     <div class="options">
 75 |                         <p>options(参数配置)</p>
 76 |                         <table>
 77 |                             <thead>
 78 |                                 <tr>
 79 |                                     <td>参数</td>
 80 |                                     <td>默认值</td>
 81 |                                     <td class="explain">说明</td>
 82 |                                 </tr>
 83 |                             </thead>
 84 |                             <tbody>
 85 |                                 <tr>
 86 |                                     <td>rangeCls</td>
 87 |                                     <td>''</td>
 88 |                                     <td class="explain">拖动最大范围</td>
 89 |                                 </tr>
 90 |                                 <tr>
 91 |                                     <td>startResize</td>
 92 |                                     <td>function(){}</td>
 93 |                                     <td class="explain">开始缩放事件</td>
 94 |                                 </tr>
 95 |                                 <tr>
 96 |                                     <td>resizeing</td>
 97 |                                     <td>function(){}</td>
 98 |                                     <td class="explain">缩放时事件</td>
 99 |                                 </tr>
100 |                                 <tr>
101 |                                     <td>stopResize</td>
102 |                                     <td>function(){}</td>
103 |                                     <td class="explain">停止缩放事件</td>
104 |                                 </tr>
105 |                             </tbody>
106 |                         </table>
107 |                     </div>
108 |                     <div class="callback">
109 |                         <p>api接口</p>
110 |                         <table>
111 |                             <thead>
112 |                                 <tr>
113 |                                     <td>方法</td>
114 |                                     <td>说明</td>
115 |                                 </tr>
116 |                             </thead>
117 |                             <tbody>
118 |                                 <tr>
119 |                                     <td>start</td>
120 |                                     <td>开始缩放</td>
121 |                                 </tr>
122 |                                 <tr>
123 |                                     <td>getFlag</td>
124 |                                     <td>返回缩放状态</td>
125 |                                 </tr>
126 |                                 <tr>
127 |                                     <td>stop</td>
128 |                                     <td>停止缩放，isReszeing必须为true，将设置为false</td>
129 |                                 </tr>
130 |                                 <tr>
131 |                                     <td>getMouseCoords</td>
132 |                                     <td>返回鼠标坐标</td>
133 |                                 </tr>
134 |                             </tbody>
135 |                         </table>
136 |                     </div>
137 |                 </div>
138 |             </div>
139 |             <div class="footer">
140 |                 <p>&copy; <a href="http://github.com/Maxiaoxiang" target="_blank">Mss。</a><span class="spe">/</span>Powered by <a href="http://maxiaoxiang.com" target="_blank">Maxiaoxiang</a></p>
141 |             </div>
142 |         </div>
143 |         <script src="./lib/jquery.min.js"></script>
144 |         <script src="./jquery.resizable.js"></script>
145 |         <script>
146 |             $(function(){
147 |                 $('.test').resizable();
148 |                 $('.test1').resizable({
149 |                     rangeCls:'range'
150 |                 });
151 |             });
152 |         </script>
153 |     </body>
154 | </html>
155 | 


--------------------------------------------------------------------------------
/resizable/jquery.resizable.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * resizable缩放插件
  3 |  * @version 1.0.1
  4 |  * @url http://maxiaoxiang.com
  5 |  */
  6 | ;(function($,window,document,undefined){
  7 | 
  8 | 	var defaults = {
  9 | 		rangeCls:'',//最大范围
 10 | 		startResize:function(){},//开始缩放事件
 11 | 		resizeing:function(){},//缩放时事件
 12 | 		stopResize:function(){}//停止缩放事件
 13 | 	};
 14 | 
 15 | 	var Resizable = function(element,options){
 16 | 		var _ = this;
 17 | 		var $this = $(element);
 18 | 		var isReszeing = false;//标识
 19 | 		var $body = $('body');
 20 | 		var $window = $(window);
 21 | 		var $document = $(document);
 22 | 		var $e = $('<div class="e-resize" data-type="e-resize"></div>');
 23 | 		var $s = $('<div class="s-resize" data-type="s-resize"></div>');
 24 | 		var $se = $('<div class="se-resize" data-type="se-resize"></div>');
 25 | 		var $range = options.rangeCls ? $('.' + options.rangeCls) : $window;
 26 | 		//开始
 27 | 		_.start = function(handle,e,func){
 28 | 			if(options.startResize(_) != false){
 29 | 				(func || function(){})();
 30 | 				isReszeing = true;
 31 | 				this.handle = handle;
 32 | 			}
 33 | 		};
 34 | 		//缩放
 35 | 		_.resizeing = function(handle,e){
 36 | 			if(isReszeing && options.resizeing(_) != false){
 37 | 				var type = this.handle.data('type');//缩放方向
 38 | 				var m = _.getMouseCoords(e);//鼠标坐标
 39 | 				var offset = $this.offset();
 40 | 				$body.css({
 41 | 					'cursor':type
 42 | 				});
 43 | 				switch (type){
 44 | 					case 'e-resize':
 45 | 						if(m.x - offset.left < $range.width()){
 46 | 							$this.css({'width':m.x - offset.left + 'px'});
 47 | 						}else{
 48 | 							$this.css({'width':$range.width() + 'px'});
 49 | 						}
 50 | 						$s.css({'width':$this.width()});
 51 | 						break;
 52 | 					case 's-resize':
 53 | 						if(m.y - offset.top < $range.height()){
 54 | 							$this.css({'height':m.y - offset.top + 'px'});
 55 | 						}else{
 56 | 							$this.css({'height':$range.height() + 'px'});
 57 | 						}
 58 | 						$e.css({'height':$this.height()});
 59 | 						break;
 60 | 					default:
 61 | 						if(m.y - offset.top < $range.height()){
 62 | 							$this.css({'height':m.y - offset.top + 'px'});
 63 | 						}else{
 64 | 							$this.css({'height':$range.height() + 'px'});
 65 | 						}
 66 | 						if(m.x - offset.left < $range.width()){
 67 | 							$this.css({'width':m.x - offset.left + 'px'});
 68 | 						}else{
 69 | 							$this.css({'width':$range.width() + 'px'});
 70 | 						}
 71 | 						$e.css({'height':$this.height()});
 72 | 						$s.css({'width':$this.width()});
 73 | 				}
 74 | 			}
 75 | 		};
 76 | 		//停止
 77 | 		_.stop = function(handle,e){
 78 | 			if(isReszeing){
 79 | 				isReszeing = false;
 80 | 				$body.css({
 81 | 					'overflow':'auto',
 82 | 					'cursor':'auto'
 83 | 				});
 84 | 				options.stopResize(_);
 85 | 			}
 86 | 		};
 87 | 		_.getFlag = function(){
 88 | 			return isReszeing;
 89 | 		};
 90 | 		//返回当前鼠标坐标
 91 | 		_.getMouseCoords = function(e){
 92 | 			if(e.pageX || e.pageY){
 93 | 				return {x : e.pageX , y : e.pageY};
 94 | 			}
 95 | 			return {
 96 | 				x : e.clientX + document.body.scrollLeft - document.body.clientLeft,
 97 | 				y : e.clientY + document.body.scrollTop - document.body.clientTop
 98 | 			};
 99 | 		};
100 | 		var init = function(){
101 | 			var rb = parseInt($this.css('border-right-width')) || 0;
102 | 			var bb = parseInt($this.css('border-bottom-width')) || 0;
103 | 			var zIndex = $this.css('z-index') == 'auto' ? 'auto' : $this.css('z-index');
104 | 			$e.css({
105 | 				'position': 'absolute',
106 | 				'top':0 - rb,
107 | 				'right':'-4px',
108 | 				'height': $this.outerHeight(),
109 | 				'width':'8px',
110 | 				'z-index': zIndex,
111 | 				'cursor': 'e-resize'
112 | 			}).appendTo($this);
113 | 			$s.css({
114 | 				'position': 'absolute',
115 | 				'left':0 - bb,
116 | 				'bottom':'-4px',
117 | 				'height': '8px',
118 | 				'width':$this.outerWidth(),
119 | 				'z-index': zIndex,
120 | 				'cursor': 's-resize'
121 | 			}).appendTo($this);
122 | 			$se.css({
123 | 				'position': 'absolute',
124 | 				'right':'-1px',
125 | 				'bottom':'-1px',
126 | 				'height': '16px',
127 | 				'width': '16px',
128 | 				'z-index': zIndex,
129 | 				'cursor': 'se-resize'
130 | 			}).appendTo($this);
131 | 			var arr = [$e,$s,$se];
132 | 			for(var i in arr){
133 | 				arr[i].on('mousedown',function(e){
134 | 					_.start($(this),e);
135 | 				});
136 | 			}
137 | 			$document.on({
138 | 				'mousemove':function(e){
139 | 					_.resizeing(this.handle,e);
140 | 				},
141 | 				'mouseup':function(e){
142 | 					_.stop(e);
143 | 				}
144 | 			});
145 | 		};
146 | 		init();
147 | 	};
148 | 	
149 | 	$.fn.resizable = function(parameter,callback){
150 | 		if(typeof parameter == 'function'){//重载
151 | 			callback = parameter;
152 | 			parameter = {};
153 | 		}else{
154 | 			parameter = parameter || {};
155 | 			callback = callback || function(){};
156 | 		}
157 | 		var options = $.extend({},defaults,parameter);
158 | 		return this.each(function(){
159 | 			var resizable = new Resizable(this,options);
160 | 			callback(resizable);
161 | 		});
162 | 	};
163 | 
164 | 	return $;
165 | 
166 | })(jQuery,window,document);


--------------------------------------------------------------------------------
/resizable/resizable.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | .test{
 3 | 	position: relative;
 4 | 	height: 100px;
 5 | 	width: 100px;
 6 | 	border: 1px solid #ccc;
 7 | 	min-height: 50px;
 8 | 	min-width: 50px;
 9 | 	background: #ccc;
10 | }
11 | .range{
12 | 	position: relative;
13 | 	height: 300px;
14 | 	width: 100%;
15 | 	border: 1px solid #000;
16 | }
17 | .test1{
18 | 	position: relative;
19 | 	height: 100px;
20 | 	width: 100px;
21 | 	border: 1px solid #ccc;
22 | 	min-height: 50px;
23 | 	min-width: 50px;
24 | 	background: #ccc;
25 | }


--------------------------------------------------------------------------------
/tooltips/common/common.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | body {
  3 |     word-wrap: break-word;
  4 |     background: #fff;
  5 | }
  6 | 
  7 | h1 {
  8 |     font-size: 40px;
  9 | }
 10 | 
 11 | p,
 12 | pre {
 13 |     margin: 10px 0;
 14 | }
 15 | 
 16 | ::selection {
 17 |     background: #000;
 18 |     color: #fff;
 19 | }
 20 | 
 21 | .wrapper {
 22 |     margin: 0 auto;
 23 |     width: 960px;
 24 |     height: 100%;
 25 |     -webkit-box-sizing: border-box;
 26 |     -moz-box-sizing: border-box;
 27 |     -o-box-sizing: border-box;
 28 |     box-sizing: border-box;
 29 | }
 30 | 
 31 | 
 32 | /*底部版权*/
 33 | 
 34 | footer {
 35 |     margin: 100px 0 50px 300px;
 36 |     padding: 0 20px;
 37 |     -webkit-box-sizing: border-box;
 38 |     -moz-box-sizing: border-box;
 39 |     -o-box-sizing: border-box;
 40 |     box-sizing: border-box;
 41 | }
 42 | 
 43 | footer p {
 44 |     border-top: 1px solid #ebebeb;
 45 |     opacity: .5;
 46 |     filter: alpha(opacity=50);
 47 |     text-align: right;
 48 |     font-size: 12px;
 49 |     line-height: 3;
 50 |     font-family: "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", tahoma, arial, simsun, "\5B8B\4F53";
 51 | }
 52 | 
 53 | footer p a {
 54 |     color: #000;
 55 | }
 56 | 
 57 | footer p .spe {
 58 |     padding: 0 5px;
 59 | }
 60 | 
 61 | .right-bg {
 62 |     position: fixed;
 63 |     right: 0;
 64 |     top: 50%;
 65 |     margin-top: -215px;
 66 |     width: 215px;
 67 |     height: 430px;
 68 |     background: url('../../image/right_bg.png') no-repeat;
 69 | }
 70 | 
 71 | 
 72 | /*组件样式*/
 73 | 
 74 | table {
 75 |     width: 100%;
 76 |     border: 1px solid #CAD3DA;
 77 | }
 78 | 
 79 | table td {
 80 |     padding: 10px;
 81 |     width: 150px;
 82 |     border: 1px solid #CAD3DA;
 83 | }
 84 | 
 85 | table thead tr {
 86 |     height: 40px;
 87 |     line-height: 40px;
 88 |     text-align: center;
 89 |     border-bottom: 1px solid #CAD3DA;
 90 | }
 91 | 
 92 | table thead td {
 93 |     padding: 0;
 94 |     border-left: 1px solid #CAD3DA;
 95 |     background: #DFEBFB;
 96 | }
 97 | 
 98 | table .explain {
 99 |     width: 500px;
100 | }
101 | 
102 | table tbody tr:nth-child(even) {
103 |     background: #E7EFF9;
104 | }
105 | 
106 | pre {
107 |     padding: 10px;
108 |     font-family: Monaco, Consolas, "Courier New";
109 | }
110 | 
111 | .method {
112 |     font-family: Monaco, Consolas, "Courier New";
113 | }
114 | 
115 | .eg {
116 |     margin: 20px 0;
117 |     padding: 10px;
118 |     border: 1px dashed #bdbdbd;
119 |     background: #f9f9f9;
120 | }
121 | 
122 | .bad {
123 |     padding: 0 0 0 10px;
124 |     border: 1px dashed #bdbdbd;
125 |     color: #757575;
126 |     background: #f9f9f9;
127 | }


--------------------------------------------------------------------------------
/tooltips/common/reset.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | /**
 3 | reset css
 4 | */
 5 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
 6 |     margin: 0;
 7 |     padding: 0;
 8 | }
 9 | ul,ol{
10 |     list-style: none;
11 | }
12 | img{
13 |     border:0;
14 |     -ms-interpolation-mode: bicubic; 
15 |     vertical-align: middle;
16 | }
17 | table {
18 |     border-collapse: collapse;
19 |     border-spacing: 0;
20 | }
21 | address,caption,cite,code,dfn,em,strong,th,var {
22 |     font-style: normal;
23 | }
24 | h1,h2,h3,h4,h5,h6 {
25 |     font-weight: normal;
26 |     font-size: 100%;
27 | }
28 | abbr,acronym {
29 |     border: 0;
30 |     font-variant: normal;
31 | }


--------------------------------------------------------------------------------
/tooltips/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="cn-ZH">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <title>tips.js - Mss</title>
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |         <link href="../favicon.ico" rel="icon" type="image/x-icon" />
 8 |         <link rel="stylesheet" type="text/css" href="./common/reset.css" media="screen">
 9 |         <link rel="stylesheet" type="text/css" href="./common/common.css" media="screen">
10 |         <link rel="stylesheet" type="text/css" href="./tips.css" media="screen">
11 |         <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
12 |     </head>
13 |     <body>
14 |         <div class="wrapper">
15 |             <div class="container">
16 |                 <div class="content">
17 |                     <span class="mod-tips" data-tips="这是一条提示信息这是一条提示信息" style="position:absolute;top:200px;left:350px;">悬停</span>
18 |                     <span class="mod-tips" data-tips="这是一条提示信息222这是一条提示信息222这是一条提示信息222这是一条提示信息222这是一条提示信息222" style="position:absolute;top:600px;left:150px;">悬停222</span>
19 |                 </div>
20 |             </div>
21 |         </div>
22 |         <script src="./common/jquery.min.js"></script>
23 |         <script src="./jquery.tooltips.js"></script>
24 |         <script>
25 |         $('.mod-tips').tips();
26 |         </script>
27 |     </body>
28 | </html>


--------------------------------------------------------------------------------
/tooltips/jquery.tooltips.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * tips提示插件
  3 |  * @version 1.0.0
  4 |  * @author mss
  5 |  *
  6 |  * @调用方法
  7 |  * $('.tips').tips();
  8 |  */
  9 | ;
 10 | (function (factory) {
 11 |     if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
 12 |         // AMD或CMD
 13 |         define(["jquery"], factory);
 14 |     } else if (typeof module === 'object' && module.exports) {
 15 |         // Node/CommonJS
 16 |         module.exports = function (root, jQuery) {
 17 |             if (jQuery === undefined) {
 18 |                 if (typeof window !== 'undefined') {
 19 |                     jQuery = require('jquery');
 20 |                 } else {
 21 |                     jQuery = require('jquery')(root);
 22 |                 }
 23 |             }
 24 |             factory(jQuery);
 25 |             return jQuery;
 26 |         };
 27 |     } else {
 28 |         //Browser globals
 29 |         factory(jQuery);
 30 |     }
 31 | }(function ($) {
 32 | 
 33 |     //配置参数
 34 |     var defaults = {
 35 |         tipsCls: 'tips', //框体class
 36 |         node: '', //显示的节点
 37 |         triggerMode: 'hover', //触发方式:hover,click
 38 |         delayTime: 0, //延迟触发时间
 39 |         destroyTime: 0, //存在时间
 40 |         position: ['ct', 'cb'], //方位
 41 |         offset: [0, 0], //偏移量（px）
 42 |         followMouse: false //是否跟随鼠标移动
 43 |     };
 44 | 
 45 |     var Tips = function (element, options) {
 46 |         //全局变量
 47 |         var opts = options, //配置
 48 |             _ = this,
 49 |             $d = $(document),
 50 |             $w = $(window),
 51 |             $b = $('body'),
 52 |             isShow = false,
 53 |             $obj = $(element); //容器
 54 | 
 55 |         /**
 56 |          * 创建
 57 |          */
 58 |         _.create = function () {
 59 |             if (isShow) return;
 60 |             var content = $obj.data('tips');
 61 |             _.$box = $('<span class="' + opts.tipsCls + '">' + content + '</span>');
 62 |             $obj.append(_.$box);
 63 |             _.position(_.$box);
 64 |             isShow = true;
 65 |         };
 66 | 
 67 |         /**
 68 |          * 触发方式
 69 |          */
 70 |         _.trigger = function () {
 71 |             switch (opts.triggerMode) {
 72 |                 case 'hover':
 73 |                     $obj.hover(function () {
 74 |                         _.create();
 75 |                     }, function () {
 76 |                         // _.destroy(_.$box);
 77 |                     });
 78 |                     break;
 79 |                 case 'click':
 80 |                     $obj.click(function () {
 81 |                         _.create();
 82 |                     });
 83 |                     break;
 84 |             }
 85 |         };
 86 | 
 87 |         /**
 88 |          * 定位
 89 |          */
 90 |         _.position = function (obj) {
 91 |             var points = {
 92 |                 'l': 0,
 93 |                 't': 0,
 94 |                 'c': 0.5,
 95 |                 'r': 1,
 96 |                 'b': 1
 97 |             };
 98 |         };
 99 | 
100 |         /**
101 |          * 销毁
102 |          * @param obj 销毁对象
103 |          */
104 |         _.destroy = function (obj) {
105 |             if (opts.destroyTime === 0) {
106 |                 obj.remove();
107 |                 isShow = false;
108 |             } else {
109 |                 clearTimeout(time);
110 |                 var time = setTimeout(function () {
111 |                     obj.remove();
112 |                     isShow = false;
113 |                 }, opts.destroyTime);
114 |             }
115 |         };
116 | 
117 |         /**
118 |          * 初始化
119 |          */
120 |         _.init = function () {
121 |             _.trigger();
122 |         };
123 | 
124 |         _.init();
125 |     };
126 | 
127 |     $.fn.tips = function (parameter, callback) {
128 |         if (typeof parameter == 'function') { //重载
129 |             callback = parameter;
130 |             parameter = {};
131 |         } else {
132 |             parameter = parameter || {};
133 |             callback = callback || function () {};
134 |         }
135 |         var options = $.extend({}, defaults, parameter);
136 |         return this.each(function () {
137 |             var tips = new Tips(this, options);
138 |             callback(tips);
139 |         });
140 |     };
141 | 
142 | }));


--------------------------------------------------------------------------------
/tooltips/tips.css:
--------------------------------------------------------------------------------
 1 | .tips {
 2 |     padding: 8px 18px;
 3 |     background: #000;
 4 |     color: #fff;
 5 |     font-size: 14px;
 6 |     border-radius: 5px;
 7 |     max-width: 200px;
 8 | }
 9 | 
10 | .tips:after {
11 |     content: "";
12 |     position: absolute;
13 |     left: 50%;
14 |     bottom: -4px;
15 |     margin-left: -2px;
16 |     border-top: 4px solid #000;
17 |     border-left: 4px solid transparent;
18 |     border-right: 4px solid transparent;
19 | }


--------------------------------------------------------------------------------