├── README.md ├── UI_mod ├── .gitignore ├── README.md ├── core │ ├── README.md │ ├── handlebars.js │ ├── jquery.easing.1.3.js │ └── jquery.js ├── css │ └── base.css ├── dialog.htm ├── img.htm ├── img │ ├── dialog_close.png │ ├── dialog_status.png │ └── load.gif ├── js │ ├── API.js │ ├── a.js │ ├── admin.js │ ├── adminPopup.js │ ├── article.js │ ├── bak │ │ ├── 22.js │ │ ├── a.js_bak │ │ ├── bak.js │ │ ├── hover.js │ │ └── user.js │ ├── base.js │ ├── blacklist.js │ ├── btn.js │ ├── calendar.js │ ├── comment.js │ ├── emotion.js │ ├── feed-emotion.js │ ├── fixed.js │ ├── index.js │ ├── load.js │ ├── popup.js │ ├── postlist.js │ ├── sea-config.js │ ├── tips.js │ ├── upjs │ │ ├── Uploader.swf │ │ ├── expressInstall.swf │ │ ├── upload.js │ │ └── webuploader.js │ ├── upload.js │ ├── user-admin.js │ └── user-apply.js ├── loadimg.htm ├── mod │ ├── LoadImg.js │ ├── dialog.js │ └── tab.js ├── tab.htm └── touch │ ├── explorations1.jpg │ ├── explorations2.jpg │ ├── explorations3.jpg │ ├── jquery.js │ ├── swipe.js │ └── touch-slide.htm ├── css ├── animate.css ├── base.css └── m_base.css ├── document ├── BackBone_note.md ├── CSS3_selector.md ├── CSS_doc.md ├── Fiddler.md ├── Mobile_deve_tools.md ├── chrome-search.md ├── git_base.md ├── handlebar_doc.md ├── linux.md ├── mobile_base.md ├── mobile_web_specification .md ├── ng-flow-使用文档.md ├── sass.md ├── soft.md └── vim.md ├── js ├── cons.js ├── device.js ├── iscroll.js ├── iscroll1.js ├── jquery.js ├── main.js ├── swipe.js ├── zepto.core.js ├── zepto.js └── zepto.min.js ├── mvc ├── Controller.js ├── class.htm ├── class.js ├── data.json ├── handlebars.htm ├── handlebars.js ├── jquery.js ├── json.js ├── model.js └── pubsub.js ├── rc ├── .bashrc ├── .gemrc ├── .git-completion.bash ├── .gitconfig └── SwitchyOptions.bak └── scss ├── mobile.scss └── tool.scss /README.md: -------------------------------------------------------------------------------- 1 | ## doc 2 | ==== 3 | ### 日常整理文件和文档 4 | 5 | ### 相关总结文件和配置文件 6 | 7 | ### MVC为测试文件 8 | -------------------------------------------------------------------------------- /UI_mod/.gitignore: -------------------------------------------------------------------------------- 1 | #.尝试忽略文件 2 | *.txt 3 | -------------------------------------------------------------------------------- /UI_mod/README.md: -------------------------------------------------------------------------------- 1 | 自己乱写的一些小插件 2 | ================== 3 | 4 | -------------------------------------------------------------------------------- /UI_mod/core/README.md: -------------------------------------------------------------------------------- 1 | # jQuery Preload Plugin 2 | 3 | A jQuery plugin that preloads images. 4 | 5 | 6 | 7 | ## Description 8 | 9 | There are times that we need to preload images to bring better user experience. You will not want your users to wait for 2 seconds when they hover their mouse over the navigation menu before the background image actually appears; or keep them waiting too long when they switch a slideshow. This plugin can also be useful when you want to add more images on the page through a ajax call. 10 | 11 | 12 | 13 | ## Demo 14 | - Please see demo.html 15 | - Live demo please take a look at [this](http://dreamerslab.com/demos/preload-images-with-jquery-preload-plugin) 16 | 17 | 18 | 19 | ## Documentation 20 | - There is a syntax highlight version, please see [this post](http://dreamerslab.com/blog/en/preload-images-with-jquery-preload-plugin/) 21 | - For chinese version please go [here](http://dreamerslab.com/blog/tw/preload-images-with-jquery-preload-plugin/) 22 | 23 | 24 | 25 | ## Requires 26 | - jQuery 1.2.3+ 27 | 28 | 29 | 30 | ## Browser Compatibility 31 | - [Firefox](http://mzl.la/RNaI) 2.0+ 32 | - [Internet Explorer](http://bit.ly/9fMgIQ) 6+ 33 | - [Safari](http://bit.ly/gMhzVR) 3+ 34 | - [Opera](http://bit.ly/fWJzaC) 10.6+ 35 | - [Chrome](http://bit.ly/ePHvYZ) 8+ 36 | 37 | 38 | 39 | ## Installation 40 | - First, make sure you are using valid [DOCTYPE](http://bit.ly/hQK1Rk) 41 | - Include nessesary JS files 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ## Usage 51 | Example code: 52 | 53 | $.preload( '/img/space.gif', 54 | '/img/loading.gif', 55 | '/img/header-bg.png', 56 | '/img/avatar.jpg' 57 | ); 58 | 59 | 60 | 61 | ## License 62 | 63 | The expandable plugin is licensed under the MIT License (LICENSE.txt). 64 | 65 | Copyright (c) 2011 [Ben Lin](http://dreamerslab.com) -------------------------------------------------------------------------------- /UI_mod/core/jquery.easing.1.3.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ 3 | * 4 | * Uses the built in easing capabilities added In jQuery 1.1 5 | * to offer multiple easing options 6 | * 7 | * TERMS OF USE - jQuery Easing 8 | * 9 | * Open source under the BSD License. 10 | * 11 | * Copyright © 2008 George McGinley Smith 12 | * All rights reserved. 13 | * 14 | * Redistribution and use in source and binary forms, with or without modification, 15 | * are permitted provided that the following conditions are met: 16 | * 17 | * Redistributions of source code must retain the above copyright notice, this list of 18 | * conditions and the following disclaimer. 19 | * Redistributions in binary form must reproduce the above copyright notice, this list 20 | * of conditions and the following disclaimer in the documentation and/or other materials 21 | * provided with the distribution. 22 | * 23 | * Neither the name of the author nor the names of contributors may be used to endorse 24 | * or promote products derived from this software without specific prior written permission. 25 | * 26 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 27 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 28 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 29 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 30 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 31 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 32 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 33 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 34 | * OF THE POSSIBILITY OF SUCH DAMAGE. 35 | * 36 | */ 37 | 38 | // t: current time, b: begInnIng value, c: change In value, d: duration 39 | jQuery.easing['jswing'] = jQuery.easing['swing']; 40 | 41 | jQuery.extend( jQuery.easing, 42 | { 43 | def: 'easeOutQuad', 44 | swing: function (x, t, b, c, d) { 45 | //alert(jQuery.easing.default); 46 | return jQuery.easing[jQuery.easing.def](x, t, b, c, d); 47 | }, 48 | easeInQuad: function (x, t, b, c, d) { 49 | return c*(t/=d)*t + b; 50 | }, 51 | easeOutQuad: function (x, t, b, c, d) { 52 | return -c *(t/=d)*(t-2) + b; 53 | }, 54 | easeInOutQuad: function (x, t, b, c, d) { 55 | if ((t/=d/2) < 1) return c/2*t*t + b; 56 | return -c/2 * ((--t)*(t-2) - 1) + b; 57 | }, 58 | easeInCubic: function (x, t, b, c, d) { 59 | return c*(t/=d)*t*t + b; 60 | }, 61 | easeOutCubic: function (x, t, b, c, d) { 62 | return c*((t=t/d-1)*t*t + 1) + b; 63 | }, 64 | easeInOutCubic: function (x, t, b, c, d) { 65 | if ((t/=d/2) < 1) return c/2*t*t*t + b; 66 | return c/2*((t-=2)*t*t + 2) + b; 67 | }, 68 | easeInQuart: function (x, t, b, c, d) { 69 | return c*(t/=d)*t*t*t + b; 70 | }, 71 | easeOutQuart: function (x, t, b, c, d) { 72 | return -c * ((t=t/d-1)*t*t*t - 1) + b; 73 | }, 74 | easeInOutQuart: function (x, t, b, c, d) { 75 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 76 | return -c/2 * ((t-=2)*t*t*t - 2) + b; 77 | }, 78 | easeInQuint: function (x, t, b, c, d) { 79 | return c*(t/=d)*t*t*t*t + b; 80 | }, 81 | easeOutQuint: function (x, t, b, c, d) { 82 | return c*((t=t/d-1)*t*t*t*t + 1) + b; 83 | }, 84 | easeInOutQuint: function (x, t, b, c, d) { 85 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 86 | return c/2*((t-=2)*t*t*t*t + 2) + b; 87 | }, 88 | easeInSine: function (x, t, b, c, d) { 89 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 90 | }, 91 | easeOutSine: function (x, t, b, c, d) { 92 | return c * Math.sin(t/d * (Math.PI/2)) + b; 93 | }, 94 | easeInOutSine: function (x, t, b, c, d) { 95 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 96 | }, 97 | easeInExpo: function (x, t, b, c, d) { 98 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 99 | }, 100 | easeOutExpo: function (x, t, b, c, d) { 101 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 102 | }, 103 | easeInOutExpo: function (x, t, b, c, d) { 104 | if (t==0) return b; 105 | if (t==d) return b+c; 106 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 107 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 108 | }, 109 | easeInCirc: function (x, t, b, c, d) { 110 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 111 | }, 112 | easeOutCirc: function (x, t, b, c, d) { 113 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 114 | }, 115 | easeInOutCirc: function (x, t, b, c, d) { 116 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 117 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 118 | }, 119 | easeInElastic: function (x, t, b, c, d) { 120 | var s=1.70158;var p=0;var a=c; 121 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 122 | if (a < Math.abs(c)) { a=c; var s=p/4; } 123 | else var s = p/(2*Math.PI) * Math.asin (c/a); 124 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 125 | }, 126 | easeOutElastic: function (x, t, b, c, d) { 127 | var s=1.70158;var p=0;var a=c; 128 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 129 | if (a < Math.abs(c)) { a=c; var s=p/4; } 130 | else var s = p/(2*Math.PI) * Math.asin (c/a); 131 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 132 | }, 133 | easeInOutElastic: function (x, t, b, c, d) { 134 | var s=1.70158;var p=0;var a=c; 135 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 136 | if (a < Math.abs(c)) { a=c; var s=p/4; } 137 | else var s = p/(2*Math.PI) * Math.asin (c/a); 138 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 139 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 140 | }, 141 | easeInBack: function (x, t, b, c, d, s) { 142 | if (s == undefined) s = 1.70158; 143 | return c*(t/=d)*t*((s+1)*t - s) + b; 144 | }, 145 | easeOutBack: function (x, t, b, c, d, s) { 146 | if (s == undefined) s = 1.70158; 147 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 148 | }, 149 | easeInOutBack: function (x, t, b, c, d, s) { 150 | if (s == undefined) s = 1.70158; 151 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 152 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 153 | }, 154 | easeInBounce: function (x, t, b, c, d) { 155 | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; 156 | }, 157 | easeOutBounce: function (x, t, b, c, d) { 158 | if ((t/=d) < (1/2.75)) { 159 | return c*(7.5625*t*t) + b; 160 | } else if (t < (2/2.75)) { 161 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 162 | } else if (t < (2.5/2.75)) { 163 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 164 | } else { 165 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 166 | } 167 | }, 168 | easeInOutBounce: function (x, t, b, c, d) { 169 | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; 170 | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; 171 | } 172 | }); 173 | 174 | /* 175 | * 176 | * TERMS OF USE - EASING EQUATIONS 177 | * 178 | * Open source under the BSD License. 179 | * 180 | * Copyright © 2001 Robert Penner 181 | * All rights reserved. 182 | * 183 | * Redistribution and use in source and binary forms, with or without modification, 184 | * are permitted provided that the following conditions are met: 185 | * 186 | * Redistributions of source code must retain the above copyright notice, this list of 187 | * conditions and the following disclaimer. 188 | * Redistributions in binary form must reproduce the above copyright notice, this list 189 | * of conditions and the following disclaimer in the documentation and/or other materials 190 | * provided with the distribution. 191 | * 192 | * Neither the name of the author nor the names of contributors may be used to endorse 193 | * or promote products derived from this software without specific prior written permission. 194 | * 195 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 196 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 197 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 198 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 199 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 200 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 201 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 202 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 203 | * OF THE POSSIBILITY OF SUCH DAMAGE. 204 | * 205 | */ -------------------------------------------------------------------------------- /UI_mod/css/base.css: -------------------------------------------------------------------------------- 1 | /* Retset */ 2 | @charset "utf-8"; 3 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} 4 | body{ font:12px/1.5 "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB",\5b8b\4f53; color:#333;} 5 | h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 6 | table{ border-collapse:collapse;border-spacing:0;} 7 | ol,ul{ list-style:none;} 8 | fieldset,img{ border:0 none;} 9 | :focus { outline:0;} 10 | a{ text-decoration:none; color: #333;} 11 | a:hover { text-decoration:underline; color:#ff4e00 !important;} 12 | /* 高亮选中 */ 13 | /*::-moz-selection {background:#08c;color:#fff;}*/ 14 | /*::selection {background:#08c;color:#fff;}*/ 15 | 16 | /*::-moz-placeholder {color: #aaa;}*/ 17 | /*::-webkit-input-placeholder {color: #aaa;}*/ 18 | /*::-ms-input-placeholder {color:#aaa;}*/ 19 | :focus{outline:none;} 20 | 21 | /*功能性CSS*/ 22 | .clearfix:after { content:'\0020';display:block;clear:both;height:0;} 23 | .clearfix {*zoom:1;} 24 | 25 | /*向左向右*/ 26 | .fn-right{float:right;} 27 | .fn-left{float:left;} 28 | 29 | /*显示隐藏*/ 30 | .fn-hide { display:none;} 31 | .fn-show { display:block;} 32 | 33 | .fn-invisible {visibility:hidden;} 34 | .fn-affix {position:fixed;top:0;} 35 | 36 | /*省略号*/ 37 | .fn-ell { text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} 38 | 39 | /*内联块*/ 40 | .fn-inb { display:inline-block; vertical-align:middle; *display:inline; *zoom:1;} 41 | 42 | /*强制文本换行*/ 43 | .fn-wrap { word-wrap:break-word;word-break:break-all;} 44 | 45 | /*grid*/ 46 | .grid-970 { 47 | margin: 0 5px 10px 5px; 48 | width: 970px; 49 | } 50 | .top, 51 | .game, 52 | .news, 53 | #video, 54 | #mobile-game, 55 | #ios-game, 56 | #and-game, 57 | #game-industry, 58 | .gril { 59 | margin: 0 5px 10px 5px; 60 | width: 970px; 61 | } 62 | .container { 63 | width: 980px; 64 | margin: 0 auto; 65 | } 66 | .grid-9 { 67 | width: 305px; 68 | } 69 | .grid-14 { 70 | width: 480px; 71 | } 72 | 73 | /*ui base */ 74 | #MF .no-bd { 75 | border:0 none; 76 | } 77 | /** ui **/ 78 | .ui-line { 79 | margin: 0 2px; 80 | font-weight:normal; 81 | font-family: sans-serif; 82 | } 83 | .ui-tring { 84 | border-color: #ccc #333 #333; 85 | border-style:solid dashed solid; 86 | border-width:5px; 87 | line-height:0; 88 | position: absolute; 89 | top: 8px; 90 | left: 50px; 91 | overflow: hidden; 92 | display: inline-block; 93 | } 94 | .ui-more { 95 | font-family:"SimSun"; 96 | } 97 | .tips { 98 | color: #fe6e40; 99 | } 100 | .ios-tips { 101 | color : #16aaff; 102 | } 103 | .and-tips { 104 | color: #71bc52; 105 | } 106 | 107 | -------------------------------------------------------------------------------- /UI_mod/dialog.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 100 | 101 | 102 | 103 | 104 | 105 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

106 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

107 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

108 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

109 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

110 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

111 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

112 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

113 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

114 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

115 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

116 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

117 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

118 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

119 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

120 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

121 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

122 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

123 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

124 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

125 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

126 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

127 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

128 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

129 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

130 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

131 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

132 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

133 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

134 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

135 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

136 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

137 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

138 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

139 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

140 | 141 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

142 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

143 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

144 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

145 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

146 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

147 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

148 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

149 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

150 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

151 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

152 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

153 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

154 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

155 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

156 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

157 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

158 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

159 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

160 | 161 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

162 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

163 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

164 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

165 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

166 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

167 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

168 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

169 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

170 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

171 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

172 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

173 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

174 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

175 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

176 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

177 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

178 |

ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 254 | 255 | 256 | -------------------------------------------------------------------------------- /UI_mod/img.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 28 | 29 | 30 | 31 | 32 | 33 | 42 | 43 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /UI_mod/img/dialog_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alanerzhao/doc/58f0ae130e127ba0b47cc7466cd820c9a39416f5/UI_mod/img/dialog_close.png -------------------------------------------------------------------------------- /UI_mod/img/dialog_status.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alanerzhao/doc/58f0ae130e127ba0b47cc7466cd820c9a39416f5/UI_mod/img/dialog_status.png -------------------------------------------------------------------------------- /UI_mod/img/load.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alanerzhao/doc/58f0ae130e127ba0b47cc7466cd820c9a39416f5/UI_mod/img/load.gif -------------------------------------------------------------------------------- /UI_mod/js/API.js: -------------------------------------------------------------------------------- 1 | /** 2 | * feed 统一API 3 | * 4 | **/ 5 | var API = { 6 | forbid : "/apiModerator/forbid", 7 | reliee : "/apiModerator/relieve", 8 | award : "/apiModerator/award", 9 | delThread : "/apiModerator/delThread" 10 | } 11 | -------------------------------------------------------------------------------- /UI_mod/js/adminPopup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file adminPopup.js 3 | * @brief mulit popup 4 | * @author baozi 5 | * @todo 写的垃圾以后换掉用a.js 6 | * @version 7 | * @date 2015-01-05 8 | */ 9 | 10 | define("adminPopup",["jquery","popup"],function(require, exports, module) { 11 | 12 | var $ = require("jquery"), 13 | Popup = require("popup"); 14 | 15 | function AdminPopup (o) { 16 | 17 | Popup.call(this,o); 18 | this.opts.model = "
error
" 19 | } 20 | 21 | AdminPopup.prototype = new Popup; 22 | 23 | var AdminPopupProto = AdminPopup.prototype; 24 | AdminPopupProto.constructor = AdminPopup; 25 | 26 | AdminPopupProto.init = function (o) { 27 | 28 | this.create(o) 29 | this.bindEvent() 30 | 31 | } 32 | AdminPopupProto.setAttr = function (o) { 33 | 34 | var o = o || {}, 35 | defaultStyle = { 36 | 'z-index':99, 37 | 'display':"block" 38 | }, 39 | style = $.extend(defaultStyle,o.style,{}) 40 | 41 | this.model.css(style) 42 | 43 | return this 44 | } 45 | AdminPopupProto.bind = function () {} 46 | 47 | AdminPopupProto.bindEvent = function () { 48 | 49 | this.conf.next && this.conf.next(this) 50 | } 51 | 52 | AdminPopupProto.create = function (o,parent) { 53 | 54 | this.conf = $.extend(this.opts,o); 55 | this.model = $(this.conf.model) 56 | this.model.addClass(this.conf.className) 57 | if(parent) { 58 | this.model.appendTo($(parent)) 59 | } else { 60 | $(document.body).append(this.model) 61 | } 62 | if(this.opts.isMask) { 63 | $(document.body).append(this.mask); 64 | } 65 | 66 | this.setAttr(o) 67 | this.position() 68 | this.setup() 69 | 70 | return this 71 | } 72 | AdminPopupProto.setup = function (fn) { 73 | fn && fn(this) 74 | } 75 | AdminPopupProto.close = function (closeObj) { 76 | 77 | if(closeObj) { 78 | this.model.remove() 79 | } else { 80 | var allClass = this.conf.className 81 | $("."+allClass).remove(); 82 | return false; 83 | } 84 | } 85 | AdminPopupProto.setPostion = function (o,val) { 86 | var pos = {}, 87 | 88 | offset = o.offset(), 89 | height = o.height(); 90 | 91 | pos.position = "absolute" 92 | pos.left = offset.left + val; 93 | pos.top = offset.top + height + val 94 | 95 | return pos; 96 | 97 | } 98 | 99 | 100 | if (typeof module != "undefined" && module.exports) { 101 | module.exports = AdminPopup 102 | } 103 | }); 104 | seajs.use("adminPopup"); 105 | -------------------------------------------------------------------------------- /UI_mod/js/bak/22.js: -------------------------------------------------------------------------------- 1 | define("postlist",["base","jquery","adminPopup"],function(require, exports, module) { 2 | 3 | var ui = require("base"), 4 | adminPopup = require("adminPopup") 5 | $ = require("jquery"); 6 | 7 | ui.placeholder(".J_focus"); 8 | 9 | /****顶部浮层*****/ 10 | var owner = $(".j_owner"),//{{{ 11 | tips = $(".j_tips"); 12 | 13 | $(".j_moreCont").click(function(){ 14 | owner.trigger("mouseenter") 15 | }) 16 | 17 | ui.hoverdeLay({ 18 | currentObj :owner, 19 | showObj :tips, 20 | speed:650, 21 | point: { 22 | left: owner.offset().left + 100, 23 | top: owner.offset().top - 55 24 | }, 25 | content : owner.text(), 26 | callBack:function () { 27 | //console.log(1) 28 | } 29 | });//}}} 30 | 31 | /********关注********/ 32 | var follow = $(".feed-user-follow");//{{{ 33 | //fid 34 | var followData = { 35 | "fid" : follow.attr("data-follow") 36 | } 37 | 38 | follow.one("click",function () { 39 | 40 | if(!isLogin) { 41 | $("#login").trigger("click"); 42 | } else { 43 | $.ajax({ 44 | url: '/apiSay/follow', 45 | type: 'POST', 46 | dataType: 'json', 47 | data: followData, 48 | success: function (data) { 49 | follow.text("已关注") 50 | follow.addClass("follow-active") 51 | }, 52 | error: function () { 53 | follow.text("关注失败") 54 | console.log("Error") 55 | } 56 | }); 57 | } 58 | }) //}}} 59 | 60 | /*****管理弹出层******/ 61 | 62 | var adminManage = $(".j_admin_manager"); 63 | var adminManagePop = $(".admin-popup"); 64 | var popLock = true; 65 | 66 | var AdminPop = new adminPopup({ 67 | isMask: false 68 | }) 69 | 70 | var checkToggle = $(".j_toggle"); 71 | 72 | //列表按钮 73 | adminManage.on("click",".j_toggle",function() { 74 | 75 | totalNum = totalNumber() 76 | 77 | if(popLock) { 78 | initAdmin($(this)); 79 | popLock = false; 80 | } 81 | 82 | $(this).trigger("total",[totalNum]) 83 | }) 84 | 85 | //获取选则的数量 86 | function totalNumber () { 87 | return $(".j_toggle:checked").length 88 | } 89 | //全选 90 | $("#admin-all-select").click(function() { 91 | 92 | var allChecked = this.checked; 93 | 94 | adminManage.find(".j_toggle").each(function () { 95 | $(this).attr("checked",allChecked) 96 | 97 | }) 98 | adminManage.trigger("total",[totalNumber()]) 99 | }) 100 | 101 | adminManage.on("total",function(event,message) { 102 | 103 | $(".j_admin-num").html(message) 104 | //显示隐藏 105 | message ? adminManagePop.show() : adminManagePop.hide() 106 | }) 107 | 108 | $(window).scroll(function (obj) { 109 | 110 | var t= $(this).scrollTop(); 111 | var h = $(this).height(); 112 | 113 | adminManagePop.css({ 114 | "top" : (h - adminManagePop.height()) / 2 + t 115 | }) 116 | }) 117 | 118 | //生成弹出层 119 | function initAdmin (clickBtn) { 120 | AdminPop.init({ 121 | className: "", 122 | model:adminManagePop, 123 | next: function (current) { 124 | current.setAttr({ 125 | style:{ 126 | left: adminManage.offset().left + adminManage.width() - current.model.width() 127 | } 128 | }) 129 | $(".admin-delete-btn").click(function () { 130 | current.create({ 131 | model :'
'+ 132 | '
'+ 133 | ''+ 137 | ''+ 138 | ''+ 139 | ''+ 140 | '
'+ 141 | '
' 142 | }).setAttr({ 143 | style:{ 144 | 'border':"1px solid green", 145 | 'background':'red', 146 | 'left': current.setPostion($(this),-60).left, 147 | 'top': current.setPostion($(this),-60).top 148 | } 149 | }).setup(function (current) { 150 | 151 | $(".btcc").click(function () { 152 | var cont = $("#as").serialize(); 153 | console.log(cont) 154 | current.model.html("

操作成功关闭

") 155 | $(".close").click(function () { 156 | current.close(current.model) 157 | }) 158 | return false 159 | }) 160 | }) 161 | }) 162 | }, 163 | bindCallback: function () {} 164 | }) 165 | } 166 | 167 | 168 | //$(".btn2").click(function () {//{{{ 169 | //if($(".POPUP").length) { 170 | //$(".POPUP").show() 171 | //} else{ 172 | //AdminPop.init({ 173 | //className: "POPUP", 174 | //model:"
生成全选
", 175 | //next: function (current) { 176 | 177 | //$(".grend").click(function () { 178 | 179 | ////var aa = current.setPostion($(this),200) 180 | ////console.log(aa) 181 | 182 | //current.create({ 183 | //model :'
'+ 184 | //'
'+ 185 | //''+ 189 | //''+ 190 | //''+ 191 | //''+ 192 | //'
'+ 193 | //'
' 194 | //}).setAttr({ 195 | //style:{ 196 | //'border':"1px solid green", 197 | //'background':'red', 198 | //'left': current.setPostion($(this),-60).left, 199 | //'top': current.setPostion($(this),-60).top 200 | //} 201 | //}).setup(function (current) { 202 | //$(".allCheckbox").click(function () { 203 | //$("input[type='checkbox']").each(function () { 204 | //this.checked = !this.checked 205 | //}) 206 | //}) 207 | 208 | //$(".btcc").click(function () { 209 | //var cont = $("#as").serialize(); 210 | //console.log(cont) 211 | //current.model.html("

操作成功关闭

") 212 | //$(".close").click(function () { 213 | //current.close(current.model) 214 | //}) 215 | //return false 216 | //}) 217 | ////$(".current").click(function () { 218 | ////current.close() 219 | ////}) 220 | ////$(".cc").click(function () { 221 | ////current.create({ 222 | ////model :"
dd
" 223 | ////}).setAttr({ 224 | ////style: { 225 | ////'background':'red', 226 | ////'fontsize':20, 227 | ////'left':100, 228 | ////'top':920 229 | ////} 230 | ////}).setup(function (current) { 231 | ////$(".cc2").click(function () { 232 | ////current.close($(this)) 233 | ////}) 234 | ////}) 235 | ////}) 236 | //}) 237 | //}) 238 | 239 | 240 | //}, 241 | //bindCallback: function () {} 242 | //}) 243 | //} 244 | //})//}}} 245 | 246 | }); 247 | seajs.use("postlist"); 248 | 249 | 250 | -------------------------------------------------------------------------------- /UI_mod/js/bak/bak.js: -------------------------------------------------------------------------------- 1 | define("postlist",["base","jquery"],function(require, exports, module) { 2 | 3 | var ui = require("base"), 4 | $ = require("jquery"); 5 | 6 | ui.placeholder(".J_focus"); 7 | 8 | var owner = $(".j_owner"), 9 | tips = $(".j_tips"); 10 | 11 | ui.hoverdeLay({ 12 | currentObj :owner, 13 | showObj :tips, 14 | speed:600, 15 | callBack:function () { 16 | console.log(1) 17 | } 18 | }); 19 | 20 | //关注 21 | var follow = $(".feed-user-follow"); 22 | //fid 23 | var followData = {"fid":follow.attr("data-follow")} 24 | 25 | follow.one("click",function () { 26 | if(!isLogin) { 27 | $("#login").trigger("click"); 28 | } else { 29 | $.ajax({ 30 | url: '/apiSay/follow', 31 | type: 'POST', 32 | dataType: 'json', 33 | data: followData, 34 | success: function (data) { 35 | follow.text("已关注") 36 | follow.addClass("follow-active") 37 | }, 38 | error: function () { 39 | follow.text("关注失败") 40 | console.log("Error") 41 | } 42 | }); 43 | } 44 | }) 45 | }); 46 | seajs.use("postlist"); 47 | 48 | 49 | -------------------------------------------------------------------------------- /UI_mod/js/bak/hover.js: -------------------------------------------------------------------------------- 1 | define("hover",["jquery"],function(require, exports, module) { 2 | 3 | var $ = require("jquery"); 4 | 5 | var hover = (function () { 6 | function init () { 7 | var _item = $(".J_list"); 8 | _item.on("mouseenter","dl",function(){ 9 | var _self = $(this); 10 | _self.addClass("J_hover").siblings().removeClass("J_hover"); 11 | }); 12 | } 13 | return { 14 | init: init 15 | } 16 | })() 17 | 18 | if (typeof module != "undefined" && module.exports) { 19 | module.exports = hover; 20 | } 21 | }); 22 | -------------------------------------------------------------------------------- /UI_mod/js/bak/user.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file user.js 3 | * @brief async login render mod 4 | * @author baozi 5 | * @version 0.0.1 6 | * @date 2014-11-05 7 | */ 8 | 9 | define("user",["mf/login","jquery","handlebars"],function(require, exports, module) { 10 | 11 | var login = require("mf/login"), 12 | $ = require("jquery"), 13 | _h = require("handlebars"); 14 | 15 | function User (param) {//{{{ 16 | this.param = param || {}; 17 | var urlBase = { 18 | loginURL: defaultURL+"/account/login?more=1", // 登陆send url 19 | regURL: defaultURL+"/account/register?more=1", // 注册send url 20 | logoutURL: defaultURL+"/account/logout"// 退出send url 21 | }; 22 | //todo 优化 23 | var tpl = this.param.tpl || '

我的游戏

'+ 24 | '
' + 25 | '' + 26 | '' + 31 | '
'; 32 | 33 | login.urlBase = $.extend(login.urlBase,urlBase); 34 | 35 | this.tpl = tpl; 36 | this.init(); 37 | }//}}} 38 | 39 | User.prototype = { 40 | init :　function () {//{{{ 41 | this.fetch(); 42 | },//}}} 43 | fetch : function () {//{{{ 44 | var self = this; 45 | login.onLoginSuc = function (data) { 46 | //console.dir(data); 47 | var userinfo = data.data; 48 | self.render(userinfo); 49 | } 50 | },//}}} 51 | render : function (data) {//{{{ 52 | 53 | var rendHelp = this.param.obj || $(".j-user"), 54 | sayBar = $(".j-saybar"), 55 | temp = _h.compile(this.tpl), 56 | html = temp(data); 57 | 58 | rendHelp.html(html); 59 | rendHelp.show(); 60 | sayBar.show(); 61 | }//}}} 62 | } 63 | 64 | 65 | var user = new User(); 66 | 67 | if (typeof module != "undefined" && module.exports) { 68 | module.exports = User; 69 | } 70 | 71 | }); 72 | 73 | -------------------------------------------------------------------------------- /UI_mod/js/blacklist.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 小黑屋业务层 3 | * require a.js 4 | * require jquery.js 5 | **/ 6 | define("blacklist",["a","jquery"],function(require, exports, module) { 7 | 8 | var a = require("a"); 9 | var $ = require("jquery"); 10 | 11 | var popupconfirm = new a.PopupConfirm() 12 | var popuplayer = new a.PopupLayer(); 13 | var adminManageWrap = $(".j_admin_manage") 14 | 15 | 16 | popuplayer.subscribe("close",function(topics,data) {//{{{ 17 | popuplayer.destroy() 18 | popupconfirm.destroy() 19 | window.location.reload() 20 | })//}}} 21 | 22 | adminManageWrap.on("click","a",function () { 23 | $(".popup").remove() 24 | var self = $(this) 25 | var type = $(this).attr("data-type"); 26 | 27 | if(type == "CANCEL-SAY") { 28 | popupconfirm.confim({//{{{ 29 | content:"您真的要取消禁言么?", 30 | isscroll: true, 31 | title: "取消禁言" 32 | })//}}} 33 | popupconfirm.subscribe("cancel",function(topics,data) {//{{{ 34 | })//}}} 35 | popupconfirm.subscribe("send",function(topics,data) {//{{{ 36 | var cancelData = { 37 | fid : self.attr("data-fid"), 38 | uid: self.attr("data-uid") 39 | } 40 | $.ajax({//{{{ 41 | url: '/apiModerator/relieve', 42 | type: 'post', 43 | dataType: 'json', 44 | data: cancelData, 45 | success: function (data) { 46 | if(data.code == 0) { 47 | popuplayer.alert({ 48 | content: data.message 49 | }) 50 | } else { 51 | popuplayer.alert({ 52 | tipsstatus: "popup-none", 53 | content: data.message 54 | }) 55 | } 56 | popupconfirm.destroy() 57 | }, 58 | error: function (jqxhr, textstatus, errorthrown) { 59 | popuplayer.alert({ 60 | tipsstatus: "popup-none", 61 | content:"网络错误" 62 | }) 63 | } 64 | });//}}} 65 | })//}}} 66 | } 67 | }) 68 | }); 69 | seajs.use("blacklist"); 70 | 71 | -------------------------------------------------------------------------------- /UI_mod/js/btn.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 创建按钮 3 | */ 4 | 5 | UM.registerUI('feed-emotion', function( name ){ 6 | 7 | //该方法里的this指向编辑器实例 8 | 9 | var me = this, 10 | 11 | //实例化一个UMEDITOR提供的按钮对象 12 | $button = $.eduibutton({ 13 | 'icon': 'feed-emotion', 14 | //'title': me.options.lang === "zh-cn" ? "保存" : "save", 15 | 'click': function(e){ 16 | me.execCommand( name ); 17 | e.stopPropagation(); 18 | 19 | } 20 | }); 21 | 22 | //在这里处理保存按钮的状态反射 23 | me.addListener( "selectionchange", function () { 24 | 25 | //检查当前的编辑器状态是否可以使用save命令 26 | var state = this.queryCommandState( name ); 27 | 28 | $button.edui().disabled( state == -1 ).active( state == 1 ); 29 | 30 | } ); 31 | 32 | //返回该按钮对象后， 该按钮将会被附加到工具栏上 33 | return $button; 34 | 35 | }); 36 | 37 | -------------------------------------------------------------------------------- /UI_mod/js/feed-emotion.js: -------------------------------------------------------------------------------- 1 | 2 | //注册一个名为“feed-emotion”的插件 3 | UM.plugins['feed-emotion'] = function () { 4 | 5 | var mofang_face_map = {//{{{ 6 | '嘻哈' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_xiaha_9481465.png', 7 | '龇牙' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_ziya_2c94900.png', 8 | '受伤' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_shoushang_56c02f5.png', 9 | '大笑' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_daxiao_85572c2.png', 10 | '开心' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_kaixin_e68274a.png', 11 | '笑汗' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_xiaohan_50f11c1.png', 12 | '讥笑' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_jixiao_90dac1b.png', 13 | '天使' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_tianshi_dba4be0.png', 14 | '恶魔' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_emo_b5f33d7.png', 15 | '挑逗' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_tiaodou_eb53a90.png', 16 | '可爱' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_keai_cfb4134.png', 17 | '微笑' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_weixiao_66df40a.png', 18 | '满意' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_manyi_f7b49a1.png', 19 | '色心' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_sexin_3138a3a.png', 20 | '得意' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_deyi_ea1cd7e.png', 21 | '阴险' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_yinxian_dfc8dad.png', 22 | '平静' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_pingjing_42af35a.png', 23 | '淡定' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_danding_f0af606.png', 24 | '斜视' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_xishi_2819ad6.png', 25 | '尴尬' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_ganga_4156747.png', 26 | '失望' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_shiwang_f2f843c.png', 27 | '傲慢' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_aoman_a9dc4e2.png', 28 | '撇嘴' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_pizui_5924bde.png', 29 | '喜欢' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_xihuan_8be7916.png', 30 | '飞吻' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_feiwen_5e1d111.png', 31 | '喜爱' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_xiai_7e90fa9.png', 32 | '亲嘴' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_qinzui_670ec07.png', 33 | '快乐' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_kuaile_346ffba.png', 34 | '调皮' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_tiaopi_ba4c7ba.png', 35 | '吐舌' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_tushe_d64a42a.png', 36 | '失落' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_shiluo_c051da6.png', 37 | '伤心' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_shangxin_5280e71.png', 38 | '发怒' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_fanu_edff1ca.png', 39 | '生气' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_shengqi_1e5cee8.png', 40 | '纠结' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_jiujie_ce8fe76.png', 41 | '喷气' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_penqi_03b4ddc.png', 42 | '汗呐' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_hanna_eaade91.png', 43 | '张嘴' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_zhangzui_e0b1c6c.png', 44 | '意外' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_yiwai_aa26189.png', 45 | '恐怖' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_kongbu_c8b5f71.png', 46 | '大哭' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_daku_c4cf035.png', 47 | '生病' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_shengbin_2f18be2.png', 48 | '难过' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_naguo_6ac90c6.png', 49 | '挤笑' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_jixiao_45_9cbbeb0.png', 50 | '流泪' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_liulei_e82b024.png', 51 | '惊讶' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_jingya_f4d3f19.png', 52 | '期待' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_qidai_230ebe0.png', 53 | '冷汗' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_lenghan_e14a9f1.png', 54 | '惊悚' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_jingsun_5c05f23.png', 55 | '拒绝' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_jujue_e3c96db.png', 56 | '脸红' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_lianhong_595f92f.png', 57 | '睡觉' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_shuijiao_b83bb83.png', 58 | '冷静' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_lengjing_4a97155.png', 59 | '口罩' : 'http://sts0.mofang.com/statics/v4/face/img/emoji/emoji_kouzhao_02c0354.png' 60 | }; 61 | 62 | var me = this; 63 | var init = false; 64 | var strFace = ""; 65 | var list = []; 66 | 67 | 68 | for( var x in mofang_face_map){ 69 | list.push({ 70 | icon:mofang_face_map[x], 71 | labFace : '['+ x +']' 72 | }); 73 | } 74 | 75 | if(init) { 76 | $("#facebox").show(); 77 | } else { 78 | init = true; 79 | // 创建表情框子 80 | if($('#face').length<=0){//{{{ 81 | strFace = '
' + ''; 82 | 83 | for(var i=1; i< list.length; i++){ 84 | var o = list[i]; 85 | var imgSrc = o.icon; 86 | //imgSrc += "?r=" + Math.floor(Math.random() * 1000000000000); 87 | strFace += ''; 88 | if( i % 15 == 0 ) strFace += ''; 89 | } 90 | 91 | strFace += '
'; 92 | 93 | $("body").append(strFace); 94 | }//}}} 95 | } 96 | 97 | UM.commands[ 'feed-emotion' ] = { 98 | execCommand: function (cmdName,name) { 99 | 100 | var meDom = $(".edui-btn-feed-emotion"); 101 | var offset = meDom.offset(), 102 | top = offset.top +24; 103 | 104 | $('#facebox').css({ 105 | 'top':top, 106 | 'left':offset.left - 6 107 | }); 108 | 109 | $('#facebox').show(); 110 | 111 | function inserItem() {//{{{ 112 | $("#facebox").off().one("click",".emotion-item",function (event) { 113 | var labface = $(this).attr("data-face"); 114 | me.execCommand( "inserthtml",labface); 115 | }) 116 | } 117 | inserItem() 118 | 119 | $(document).click(function(){ 120 | $('#facebox').hide(); 121 | }); 122 | return false; 123 | 124 | }, 125 | queryCommandState: function (cmdName) { 126 | 127 | //在这里总是返回0， 这样做可以使保存按钮一直可点击 128 | return 0; 129 | }, 130 | //声明该插件不支持“撤销／保存”功能， 这样就不会触发ctrl+z 和ctrl+y的记忆功能 131 | notNeedUndo: 1 132 | 133 | }; 134 | 135 | }; 136 | -------------------------------------------------------------------------------- /UI_mod/js/fixed.js: -------------------------------------------------------------------------------- 1 | define("fixed", ["jquery"], function(require, exports, module) { 2 | var $ = require("jquery"), 3 | win = $(window); 4 | $.fn.stick_in_parent = function(opts) { 5 | var elm, inner_scrolling, offset_top, parent_selector, sticky_class, _fn, _i, _len; 6 | 7 | if (opts == null) { 8 | opts = {}; 9 | } 10 | sticky_class = opts.sticky_class, 11 | inner_scrolling = opts.inner_scrolling, 12 | parent_selector = opts.parent, 13 | offset_top = opts.offset_top; 14 | 15 | if (offset_top == null) { 16 | //TODO 改了源码 17 | offset_top = -60; 18 | } 19 | if (parent_selector == null) { 20 | parent_selector = void 0; 21 | } 22 | if (inner_scrolling == null) { 23 | inner_scrolling = true; 24 | } 25 | if (sticky_class == null) { 26 | sticky_class = "is_stuck"; 27 | } 28 | _fn = function(elm, padding_bottom, parent_top, parent_height, top, height, el_float) { 29 | var bottomed, detach, fixed, last_pos, offset, parent, recalc, recalc_and_tick, spacer, tick; 30 | if (elm.data("sticky_kit")) { 31 | return; 32 | } 33 | elm.data("sticky_kit", true); 34 | parent = elm.parent(); 35 | 36 | if (parent_selector != null) { 37 | parent = parent.closest(parent_selector); 38 | } 39 | if (!parent.length) { 40 | throw "failed to find stick parent"; 41 | } 42 | 43 | fixed = false; 44 | bottomed = false; 45 | spacer = $("
"); 46 | spacer.css('position', elm.css('position')); 47 | 48 | recalc = function() { 49 | var border_top, padding_top, restore; 50 | border_top = parseInt(parent.css("border-top-width"), 10); 51 | padding_top = parseInt(parent.css("padding-top"), 10); 52 | padding_bottom = parseInt(parent.css("padding-bottom"), 10); 53 | parent_top = parent.offset().top + border_top + padding_top; 54 | parent_height = parent.height(); 55 | restore = fixed ? (fixed = false, bottomed = false, elm.insertAfter(spacer).css({ 56 | position: "", 57 | top: "", 58 | width: "", 59 | bottom: "" 60 | }).removeClass(sticky_class), spacer.detach(), true) : void 0; 61 | top = elm.offset().top - parseInt(elm.css("margin-top"), 10) - offset_top; 62 | height = elm.outerHeight(true); 63 | el_float = elm.css("float"); 64 | 65 | spacer.css({ 66 | width: elm.outerWidth(true), 67 | height: height, 68 | display: elm.css("display"), 69 | "vertical-align": elm.css("vertical-align"), 70 | "float": el_float 71 | }); 72 | 73 | if (restore) { 74 | return tick(); 75 | } 76 | }; 77 | recalc(); 78 | if (height === parent_height) { 79 | return; 80 | } 81 | last_pos = void 0; 82 | offset = offset_top; 83 | tick = function() { 84 | var css, delta, scroll, will_bottom, win_height; 85 | scroll = win.scrollTop(); 86 | if (last_pos != null) { 87 | delta = scroll - last_pos; 88 | } 89 | last_pos = scroll; 90 | if (fixed) { 91 | will_bottom = scroll + height + offset > parent_height + parent_top; 92 | if (bottomed && ! will_bottom) { 93 | bottomed = false; 94 | elm.css({ 95 | position: "fixed", 96 | bottom: "", 97 | top: offset 98 | }).trigger("sticky_kit:unbottom"); 99 | } 100 | if (scroll < top) { 101 | fixed = false; 102 | offset = offset_top; 103 | if (el_float === "left" || el_float === "right") { 104 | elm.insertAfter(spacer); 105 | } 106 | spacer.detach(); 107 | css = { 108 | position: "", 109 | width: "", 110 | top: "" 111 | }; 112 | elm.css(css).removeClass(sticky_class).trigger("sticky_kit:unstick"); 113 | } 114 | if (inner_scrolling) { 115 | win_height = win.height(); 116 | if (height > win_height) { 117 | if (!bottomed) { 118 | offset -= delta; 119 | offset = Math.max(win_height - height, offset); 120 | offset = Math.min(offset_top, offset); 121 | if (fixed) { 122 | elm.css({ 123 | top: offset + "-50px" 124 | }); 125 | } 126 | } 127 | } 128 | } 129 | } else { 130 | if (scroll > top) { 131 | fixed = true; 132 | css = { 133 | position: "fixed", 134 | top: offset 135 | }; 136 | css.width = elm.css("box-sizing") === "border-box" ? elm.outerWidth() + "px": elm.width() + "px"; 137 | elm.css(css).addClass(sticky_class).after(spacer); 138 | if (el_float === "left" || el_float === "right") { 139 | spacer.append(elm); 140 | } 141 | elm.trigger("sticky_kit:stick"); 142 | } 143 | } 144 | if (fixed) { 145 | if (will_bottom == null) { 146 | will_bottom = scroll + height + offset > parent_height + parent_top; 147 | } 148 | if (!bottomed && will_bottom) { 149 | bottomed = true; 150 | if (parent.css("position") === "static") { 151 | parent.css({ 152 | position: "relative" 153 | }); 154 | } 155 | return elm.css({ 156 | position: "absolute", 157 | bottom: padding_bottom, 158 | top: "auto" 159 | }).trigger("sticky_kit:bottom"); 160 | } 161 | } 162 | }; 163 | recalc_and_tick = function() { 164 | recalc(); 165 | return tick(); 166 | }; 167 | detach = function() { 168 | win.off("scroll", tick); 169 | $(document.body).off("sticky_kit:recalc", recalc_and_tick); 170 | elm.off("sticky_kit:detach", detach); 171 | elm.removeData("sticky_kit"); 172 | elm.css({ 173 | position: "", 174 | bottom: "", 175 | top: "" 176 | }); 177 | parent.position("position", ""); 178 | if (fixed) { 179 | elm.insertAfter(spacer).removeClass(sticky_class); 180 | return spacer.remove(); 181 | } 182 | }; 183 | win.on("touchmove", tick); 184 | win.on("scroll", tick); 185 | win.on("resize", recalc_and_tick); 186 | 187 | $(document.body).on("sticky_kit:recalc", recalc_and_tick); 188 | elm.on("sticky_kit:detach", detach); 189 | return setTimeout(tick, 0); 190 | }; 191 | for (_i = 0, _len = this.length; _i < _len; _i++) { 192 | elm = this[_i]; 193 | _fn($(elm)); 194 | } 195 | return this; 196 | }; 197 | 198 | if (typeof module != "undefined" && module.exports) { 199 | module.exports = $; 200 | } 201 | }); 202 | 203 | -------------------------------------------------------------------------------- /UI_mod/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 模块入口 3 | * require的是别名不是目录看到/ 4 | **/ 5 | define('index',function(require, exports, module) { 6 | 7 | var $ = require("jquery"), 8 | fixed = require("fixed"), 9 | base = require("base"), 10 | LoadNewCont = require("load"); 11 | //user = require("user"); 12 | 13 | function fixedSidebar() { 14 | var fixedObj = $(".J_fixed"); 15 | //todo 改了源代码记录一下偏移值为60 16 | if($.browser.version < 9) { 17 | return; 18 | } else { 19 | fixedObj.stick_in_parent({recalc_every: 1}) 20 | } 21 | } 22 | fixedSidebar(); 23 | 24 | var load = new LoadNewCont({ 25 | "wrapper": $("#postswrapper"), 26 | "url":"/site/getpost?page=", 27 | "tipsText" : "点击加载更多", 28 | "triggerType" : "click" 29 | }); 30 | 31 | var hover = (function () { 32 | function init () { 33 | var _item = $(".J_list"); 34 | _item.on("mouseenter","dl",function(){ 35 | var _self = $(this); 36 | _self.addClass("J_hover").siblings().removeClass("J_hover"); 37 | }); 38 | } 39 | return { 40 | init: init 41 | } 42 | })() 43 | 44 | base.placeholder(".J_focus"); 45 | hover.init(); 46 | 47 | //无接口提供 入口模块 48 | /*if (typeof module != "undefined" && module.exports) { 49 | module.exports = ModuleName; 50 | }*/ 51 | }); 52 | seajs.use("index"); 53 | 54 | -------------------------------------------------------------------------------- /UI_mod/js/load.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file load.js 3 | * @brief Pull Load 4 | * @author baozi 5 | * @version 0.0.2 6 | * @date 2014-12-22 7 | */ 8 | define('load',["jquery","handlebars"],function (require,exports,module){ 9 | 10 | var $ = require("jquery"), 11 | _h = require("handlebars"), 12 | pageNum = 1; 13 | 14 | /********** 数据格式 ********/ 15 | /* avatar: "http://pic0.mofang.com/avatar/b27/292/b2729204da451911a497d1358d7527557e3230d8_80.png" 16 | * create_time: "2014-11-11 17:58" 17 | * fid: 370 18 | * icon: "http://pic2.mofang.com/423/183/8d6e8eb20ab1766f272bfd2b2c027e5533005016" 19 | * name: "测试版块图标" 20 | * nickname: "小小木" 21 | * replies: 0 22 | * subject: "ceshi" 23 | * tid: 13909 24 | * pic:[] 25 | */ 26 | /**** handlebars模板块 ****/ 27 | var tpl = '
' +//{{{ 28 | '' + 29 | '{{name}}'+ 30 | '
'+ 31 | '
'+ 32 | '

{{subject}}

' + 33 | '{{#if videoImg}}'+ 34 | '

'+ 35 | ''+ 36 | ''+ 37 | ''+ 38 | ''+ 39 | ''+ 40 | '

'+ 41 | '{{/if}}' + 42 | '{{#if pic}}'+ 43 | '

'+ 44 | ''+ 45 | '{{#each pic}}' + 46 | ''+ 47 | '{{/each}}'+ 48 | ''+ 49 | '

'+ 50 | '{{/if}}' + 51 | '{{replies}}'+ 52 | '' + 55 | '

' + 56 | '

'+ 57 | '{{#if nickname}}'+ 58 | '{{nickname}}'+ 59 | '{{/if}}'+ 60 | '{{create_time}}'+ 61 | '

'+ 62 | '
';//}}} 63 | 64 | function LoadNewCont(o) {//{{{ 65 | var o = o || {}; 66 | this.url = o.url; 67 | this.data = ""; 68 | this.pullType = o.triggerType; 69 | this.tipsText = o.tipsText || "加载更多"; 70 | this.doc_view = $(document); 71 | this.win_view = $(window); 72 | this.up_wrap = $(o.wrapper) || $(document); 73 | this.loadMoreBtn = $(".feed-load-more"); 74 | this.load_gif = $("
load……
").hide(); 75 | this.init(); 76 | this.load(); 77 | }//}}} 78 | 79 | LoadNewCont.prototype = { 80 | init : function () {//{{{ 81 | this.loadMoreBtn.text(this.tipsText).css("cursor","pointer"); 82 | this.bind(); 83 | },//}}} 84 | bind : function () {//{{{ 85 | var self = this, 86 | _type = self.pullType; 87 | 88 | //加载方式 89 | if(_type) { 90 | self.loadMoreBtn.bind(_type,function () { 91 | self.clickLoad(); 92 | }); 93 | } else { 94 | self.pullLoad(); 95 | } 96 | },//}}} 97 | //点击加载 98 | clickLoad : function () {//{{{ 99 | this.fetch(); 100 | },//}}} 101 | //下拉加载 102 | pullLoad : function () {//{{{ 103 | var self = this, 104 | // TODO 只有内容窗口超过可视区才执行bind 105 | isView = (this.win_view.height() < this.up_wrap.height()); 106 | _loadFlog = false; 107 | if(isView) { 108 | this.win_view.bind('scroll',debounce(function() { 109 | var _scrollTop = self.win_view.scrollTop(), 110 | _docHeight = self.doc_view.height() - self.win_view.height(); 111 | 112 | if(_scrollTop == _docHeight) { 113 | if(self.url) { 114 | self.fetch(); 115 | } else { 116 | throw "url not define param is undefined" 117 | return ; 118 | } 119 | } 120 | },300)); 121 | } 122 | 123 | },//}}} 124 | load : function () {//{{{ 125 | this.up_wrap.after(this.load_gif); 126 | },//}}} 127 | fetch : function () {//{{{ 128 | var self = this; 129 | if(pageNum >= 6) { 130 | return ; 131 | } 132 | 133 | this.loadMoreBtn.text("正在加载……"); 134 | $.ajax({ 135 | url:self.url+(++pageNum), 136 | dataType: "json", 137 | success: function (data) { 138 | self.update(data); 139 | //TODO Fix fuck sidebar 140 | $(".J_fixed").trigger("sticky_kit:detach"); 141 | $(".J_fixed").stick_in_parent({recalc_every: 1}) 142 | }, 143 | error: function () { 144 | alert("网络错误") 145 | //console.log(error) 146 | } 147 | }) 148 | },//}}} 149 | update : function (o) {//{{{ 150 | var self = this, 151 | html ="", 152 | temp =""; 153 | $.each(o,function(idx,item) { 154 | //debugger; 155 | temp = _h.compile(tpl); 156 | html += temp(item); 157 | 158 | }) 159 | if (o.length == 0 || pageNum >= 6) { 160 | this.win_view.unbind(); 161 | this.loadMoreBtn.text("没有更多内容了"); 162 | } else { 163 | //渲染模板 164 | this.up_wrap.append(html).hide().fadeIn(); 165 | this.loadMoreBtn.text(this.tipsText) 166 | } 167 | return false; 168 | } 169 | }//}}} 170 | 171 | // helper 172 | function debounce(func, wait, immediate) {//{{{ 173 | var timeout; 174 | return function() { 175 | var context = this, args = arguments; 176 | var later = function() { 177 | timeout = null; 178 | if (!immediate) func.apply(context, args); 179 | }; 180 | var callNow = immediate && !timeout; 181 | clearTimeout(timeout); 182 | timeout = setTimeout(later, wait); 183 | if (callNow) func.apply(context, args); 184 | }; 185 | }//}}} 186 | 187 | if (typeof module != "undefined" && module.exports) { 188 | module.exports = LoadNewCont; 189 | } 190 | }) 191 | 192 | 193 | 194 | -------------------------------------------------------------------------------- /UI_mod/js/popup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file popup.js 3 | * @brief 4 | * @author baozi 5 | * @version 6 | * @date 2014-12-03 7 | */ 8 | define("popup",["jquery"],function(require, exports, module) { 9 | 10 | var $ = require("jquery"); 11 | 12 | var defaults = { 13 | text : "tips", 14 | model: "", 15 | isMask: true, 16 | callback : function () {} 17 | } 18 | //模板 19 | defaults.model = '
'+//{{{ 20 | '

奖励

'+ 21 | '
'+ 22 | '
'+ 23 | '提示信息'+ 24 | '
'+ 25 | ''+ 26 | ''+ 27 | '
'+ 28 | '
'+ 29 | ''+ 30 | ''+ 31 | '
'+ 32 | ''+ 33 | ''+ 34 | '
'+ 35 | ''+ 36 | ''+ 37 | '
'+ 38 | '
'+ 39 | ''+ 40 | ''+ 41 | '
'+ 42 | '
'+ 43 | '
'+ 44 | '
'//}}} 45 | 46 | function Popup (o) { 47 | this.opts = $.extend({},defaults, o); 48 | this.mask = $('
'); 49 | } 50 | 51 | Popup.prototype = { 52 | init: function (id,next) {//{{{ 53 | this.uid = id; 54 | this.next = next || function () {}; 55 | this.model = $(this.opts.model); 56 | $(document.body).append(this.model); 57 | 58 | if(this.opts.isMask) { 59 | $(document.body).append(this.mask); 60 | } 61 | this.position() 62 | },//}}} 63 | position: function () { 64 | var winObj = $(window), 65 | doc = $(document), 66 | win = { 67 | T: winObj.scrollTop(), 68 | L: winObj.scrollLeft(), 69 | H: winObj.height(), 70 | W: winObj.width() 71 | }, 72 | doc = { 73 | H : doc.height(), 74 | W : doc.width() 75 | }; 76 | obj = { 77 | H: this.model.outerHeight(true), 78 | W: this.model.outerWidth(true), 79 | L: this.model.offset().left, 80 | T: this.model.offset().top 81 | }; 82 | 83 | this.model.css({ 84 | left: ((win.W - obj.W) / 2) + win.L, 85 | top: ((win.H - obj.H) / 2) + win.T 86 | }); 87 | this.mask.css({ 88 | height: Math.max(win.H ,doc.H), 89 | width: Math.max(win.W, doc.W) 90 | }); 91 | this.show(); 92 | this.bind(); 93 | }, 94 | bind: function () {//{{{ 95 | var self = this; 96 | self.next && self.next(self); 97 | },//}}} 98 | show: function () {//{{{ 99 | this.mask.fadeIn(); 100 | this.model.fadeIn(); 101 | },//}}} 102 | hide: function (type) {//{{{ 103 | this.model.fadeOut().remove(); 104 | this.mask.fadeOut().remove(); 105 | },//}}} 106 | autoHide: function (time) {//{{{ 107 | var self = this; 108 | self.globalTime = setTimeout(function() { 109 | self.hide(); 110 | },time || 1500) 111 | },//}}} 112 | send: function () {}, 113 | close: function () {} 114 | } 115 | 116 | if (typeof module != "undefined" && module.exports) { 117 | module.exports = Popup; 118 | } 119 | }); 120 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /UI_mod/js/postlist.js: -------------------------------------------------------------------------------- 1 | define("postlist",["base","jquery","adminPopup"],function(require, exports, module) { 2 | function log() { 3 | var console = window.console; 4 | var args = Array.prototype.slice.call(arguments); 5 | args.unshift('^_^! >>'); 6 | if(!!console && !!console.log.apply) { 7 | console.log && console.log.apply(console,args) 8 | } 9 | } 10 | 11 | var ui = require("base"), 12 | $ = require("jquery"), 13 | adminPopup = require("adminPopup"); 14 | 15 | /*****管理弹出层******/ 16 | var adminManage = $(".j_admin_manager"); 17 | var adminManagePop = $(".admin-popup"); 18 | var popLock = true; 19 | var checkToggle = $(".j_toggle"); 20 | var AdminPop = new adminPopup({ 21 | isMask: false 22 | }) 23 | 24 | /****顶部浮层*****/ 25 | var owner = $(".j_owner"),//{{{ 26 | tips = $(".j_tips"); 27 | $(".j_moreCont").click(function(){ 28 | owner.trigger("mouseenter") 29 | }) 30 | 31 | //如果存在吧主 32 | if(owner.length) { 33 | ui.hoverdeLay({ 34 | currentObj :owner, 35 | showObj :tips, 36 | autoShow:false, 37 | a: true, 38 | point: { 39 | left: owner.offset().left + 10, 40 | top: owner.offset().top - tips.height() - 35 41 | }, 42 | content : owner.text(), 43 | callBack:function () { 44 | //console.log(1) 45 | } 46 | });//}}} 47 | } 48 | /********关注********/ 49 | var follow = $(".feed-user-follow");//{{{ 50 | //fid 51 | var followData = { 52 | "fid" : follow.attr("data-follow") 53 | } 54 | 55 | follow.one("click",function () { 56 | 57 | if(!isLogin) { 58 | $("#login").trigger("click"); 59 | } else { 60 | $.ajax({ 61 | url: '/apiSay/follow', 62 | type: 'POST', 63 | dataType: 'json', 64 | data: followData, 65 | success: function (data) { 66 | if(data.code == 0 ) { 67 | follow.text("已关注") 68 | follow.addClass("follow-active") 69 | } else { 70 | follow.text("关注失败").css({"backgroundColor":"#E52121"}) 71 | } 72 | }, 73 | error: function () { 74 | follow.text("关注失败") 75 | } 76 | }); 77 | } 78 | }) //}}} 79 | 80 | /****获取选则的数量****/ 81 | function totalNumber () {//{{{ 82 | return $(".j_toggle:checked").length 83 | } 84 | function getValue () { 85 | var val = []; 86 | val.length = 0 87 | adminManage.find(".j_toggle:checked").each(function () { 88 | val.push($(this).val()) 89 | }) 90 | return val 91 | }//}}} 92 | //列表按钮 93 | adminManage.on("click",".j_toggle",function() {//{{{ 94 | 95 | totalNum = totalNumber() 96 | if(popLock) { 97 | initAdmin($(this)); 98 | popLock = false; 99 | } 100 | 101 | $(this).trigger("total",[totalNum]) 102 | })//}}} 103 | /*****全选*****/ 104 | $("#admin-all-select").click(function() {//{{{ 105 | 106 | var allChecked = this.checked; 107 | 108 | adminManage.find(".j_toggle").each(function () { 109 | $(this).attr("checked",allChecked) 110 | 111 | }) 112 | adminManage.trigger("total",[totalNumber()]) 113 | })//}}} 114 | /****统计选择文章数****/ 115 | adminManage.on("total",function(event,message) {//{{{ 116 | 117 | $(".j_admin-num").html(message) 118 | //显示隐藏 119 | if(message) { 120 | adminManagePop.show() 121 | } else { 122 | adminManagePop.hide() 123 | //$(".popup").hide() 124 | } 125 | })//}}} 126 | $(window).scroll(function (obj) {//{{{ 127 | 128 | var t= $(this).scrollTop(); 129 | var h = $(this).height(); 130 | 131 | adminManagePop.css({ 132 | "top" : (h - adminManagePop.height()) / 2 + t 133 | }) 134 | })//}}} 135 | /***生成弹出层***/ 136 | function initAdmin (clickBtn) {//{{{ 137 | AdminPop.init({ 138 | className: "", 139 | model:adminManagePop, 140 | next: function (current) { 141 | current.setAttr({ 142 | style:{ 143 | left: adminManage.offset().left + adminManage.width() - current.model.width() 144 | } 145 | }) 146 | }, 147 | bindCallback: function () {} 148 | }) 149 | }//}}} 150 | 151 | }) 152 | 153 | seajs.use("postlist"); 154 | 155 | -------------------------------------------------------------------------------- /UI_mod/js/sea-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * feed js model setting 3 | * 2014-11-05 4 | * 5 | **/ 6 | seajs.config({ 7 | alias : { 8 | 'main': __uri('main.js'), 9 | 'fixed': __uri('fixed.js'), 10 | 'load': __uri('load.js'), 11 | 'popup': __uri('popup.js'), 12 | 'comment': __uri('comment.js'), 13 | 'base': __uri('base.js'), 14 | 'user': __uri('user.js'), 15 | 'emotion':__uri('emotion.js'), 16 | 'article':__uri('article.js'), 17 | 'tips':__uri("tips.js"), 18 | 'adminPopup':__uri("adminPopup.js"), 19 | 'calendar':__uri("calendar.js"), 20 | 'a':__uri("a.js") 21 | } 22 | }); 23 | -------------------------------------------------------------------------------- /UI_mod/js/tips.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @require Popup Model 3 | * @name Tips Model 4 | **/ 5 | define("tips",["jquery","popup"],function(require, exports, module) { 6 | var $ = require("jquery"), 7 | Popup = require("popup"); 8 | 9 | function Tips (o) { 10 | Popup.call(this,o); 11 | var _model = this.opts.model.replace("{{text}}",o.text); 12 | this.model = $(_model); 13 | $(document.body).append(this.model); 14 | } 15 | Tips.prototype = new Popup; 16 | Tips.prototype.constructor = Tips; 17 | var TipsProto = Tips.prototype; 18 | 19 | TipsProto.init = function (o) { 20 | var _me = this; 21 | this.timer = null 22 | this.setting(o); 23 | $(".tips-close").on("click",function () { 24 | _me.close(o) 25 | }) 26 | }, 27 | TipsProto.setting = function (o) { 28 | this.position(); 29 | this.show(); 30 | var _me = this; 31 | clearTimeout(_me.timer) 32 | 33 | _me.timer = setTimeout(function () { 34 | _me.close(o); 35 | },2000) 36 | }, 37 | TipsProto.close = function (o) { 38 | var _me = this; 39 | _me.model.fadeOut("",function () { 40 | o.callback && o.callback() 41 | }).hide() 42 | } 43 | 44 | //var tips = new Tips({ 45 | //model:str, 46 | //isMask: false, 47 | //text:"aa" 48 | //}) 49 | //$(".btn").click(function () { 50 | //tips.init() 51 | //$(".tips-close").click(function () { 52 | //tips.hide(); 53 | //}) 54 | //tips.autoHide(1500); 55 | //}) 56 | 57 | //function Tips (o) { 58 | //Popup.call(this,o); 59 | //} 60 | //Tips.prototype = new Popup; 61 | //Tips.prototype.constructor = Tips; 62 | 63 | if (typeof module != "undefined" && module.exports) { 64 | module.exports = Tips; 65 | } 66 | }); 67 | 68 | 69 | -------------------------------------------------------------------------------- /UI_mod/js/upjs/Uploader.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alanerzhao/doc/58f0ae130e127ba0b47cc7466cd820c9a39416f5/UI_mod/js/upjs/Uploader.swf -------------------------------------------------------------------------------- /UI_mod/js/upjs/expressInstall.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alanerzhao/doc/58f0ae130e127ba0b47cc7466cd820c9a39416f5/UI_mod/js/upjs/expressInstall.swf -------------------------------------------------------------------------------- /UI_mod/js/upjs/upload.js: -------------------------------------------------------------------------------- 1 | define("upload",["jquery"],function(require, exports, module) { 2 | var $ = require("jquery"); 3 | // 图片上传demo 4 | $(function() { 5 | var $ = jQuery, 6 | $list = $('#fileList'), 7 | $btn = $('#ctlBtn'), 8 | state = 'pending', 9 | getData = "", 10 | arrData = []; 11 | 12 | // 优化retina, 在retina下这个值是2 13 | ratio = window.devicePixelRatio || 1, 14 | 15 | // 缩略图大小 16 | thumbnailWidth = 100 * ratio, 17 | thumbnailHeight = 100 * ratio, 18 | 19 | // Web Uploader实例 20 | uploader; 21 | 22 | // 初始化Web Uploader 23 | uploader = WebUploader.create({ 24 | // 自动上传。 25 | auto: false, 26 | // swf文件路径 27 | swf: './Uploader.swf', 28 | fileNumLimit: 5, 29 | fileSizeLimit: 10 * 1024 * 1024, // 200 M 30 | fileSingleSizeLimit: 1024 * 1024, //50 * 1024 * 1024, // 50 M 31 | 32 | // 文件接收服务端。 33 | server: 'http://feed.test.mofang.com/upload/image', 34 | // 选择文件的按钮。可选。 35 | // 内部根据当前运行是创建，可能是input元素，也可能是flash. 36 | pick: '#filePicker', 37 | // 只允许选择文件，可选。 38 | accept: { 39 | title: 'Images', 40 | extensions: 'gif,jpg,jpeg,bmp,png', 41 | mimeTypes: 'image/*' 42 | } 43 | }); 44 | 45 | // 当有文件添加进来的时候 46 | uploader.on( 'fileQueued', function( file ) { 47 | arrData.length = 0; 48 | var $li = $( 49 | '
' + 50 | '' + 51 | '
' + file.name + '
' + 52 | 'X' + 53 | '
' 54 | ), 55 | $img = $li.find('img'); 56 | 57 | 58 | $li.on('click', '.remove-this', function() { 59 | $(this).parents("#"+file.id+"").fadeOut(); 60 | //console.log(file.id) 61 | uploader.removeFile( file.id ); 62 | }) 63 | $btn.removeClass("ok-disabled"); 64 | 65 | $list.append( $li ); 66 | 67 | // 创建缩略图 68 | uploader.makeThumb( file, function( error, src ) { 69 | if ( error ) { 70 | $img.replaceWith('不能预览'); 71 | return; 72 | } 73 | 74 | $img.attr( 'src', src ); 75 | }, thumbnailWidth, thumbnailHeight ); 76 | }); 77 | 78 | // 文件上传成功，给item添加成功class, 用样式标记上传成功。 79 | uploader.on( 'uploadSuccess', function( file,ret ) { 80 | var $li = $( '#'+file.id ), 81 | $error = $li.find('div.success'); 82 | $btn.addClass("ok-disabled"); 83 | //response 84 | if(ret && ret.data) { 85 | arrData.push(ret.data.url); 86 | 87 | } 88 | 89 | // 避免重复创建 90 | if ( !$error.length ) { 91 | $error = $('
').appendTo( $li ); 92 | } 93 | //$error.text('上传成功'); 94 | }); 95 | 96 | // 文件上传失败，现实上传出错。 97 | uploader.on( 'uploadError', function( file ) { 98 | var $li = $( '#'+file.id ), 99 | $error = $li.find('div.error'); 100 | 101 | // 避免重复创建 102 | if ( !$error.length ) { 103 | $error = $('
').appendTo( $li ); 104 | } 105 | 106 | $error.text('上传失败'); 107 | }); 108 | uploader.on("error",function (type) { 109 | 110 | switch (type) { 111 | case 'Q_EXCEED_NUM_LIMIT': 112 | alert("最多上传4张") 113 | break; 114 | case 'Q_EXCEED_SIZE_LIMIT': 115 | alert("图片过大") 116 | break; 117 | case 'Q_TYPE_DENIED': 118 | alert("请上传图片文件") 119 | break; 120 | case 'F_DUPLICATE': 121 | alert("重复文件") 122 | break; 123 | default: 124 | //console.log("error") 125 | } 126 | }) 127 | $btn.on( 'click', function() { 128 | if ( $(this).hasClass( 'ok-disabled' ) ) { 129 | //console.log("ok") 130 | return false; 131 | } 132 | if ( state === 'uploading' ) { 133 | uploader.stop(); 134 | } else { 135 | uploader.upload(); 136 | } 137 | }); 138 | }) 139 | if (typeof module != "undefined" && module.exports) { 140 | module.exports = $; 141 | } 142 | }); 143 | seajs.use("upload"); 144 | -------------------------------------------------------------------------------- /UI_mod/js/upload.js: -------------------------------------------------------------------------------- 1 | /**上传组件**/ 2 | $(function() { 3 | var flag = false; 4 | var up_flag = false; 5 | var $list = $('#fileList'), 6 | $btn = $('#ctlBtn'), 7 | state = 'pending', 8 | // 优化retina, 在retina下这个值是2 9 | ratio = window.devicePixelRatio || 1, 10 | 11 | // 缩略图大小 12 | thumbnailWidth = 100 * ratio, 13 | thumbnailHeight = 100 * ratio, 14 | 15 | // Web Uploader实例 16 | 17 | /** 初始化Web Uploader **/ 18 | uploader = WebUploader.create({ 19 | // 自动上传。 20 | auto: true, 21 | //runtimeOrder: 'flash', 22 | // swf文件路径 23 | swf: '/css/Uploader.swf', 24 | //fileNumLimit: 5,//$("#fileList").attr("data-num"), 25 | //fileSizeLimit: 10 * 1024 * 1024, // 200 M 26 | //fileSingleSizeLimit: 1024 * 1024, //50 * 1024 * 1024, // 50 M 27 | 28 | // 文件接收服务端。 29 | server: "http://" + window.location.host + '/upload/image', 30 | 31 | // 选择文件的按钮。可选。 32 | // 内部根据当前运行是创建，可能是input元素，也可能是flash. 33 | pick: '#filePicker', 34 | // 只允许选择文件，可选。 35 | accept: { 36 | title: 'Images', 37 | extensions: 'gif,jpg,jpeg,bmp,png', 38 | mimeTypes: 'image/*' 39 | } 40 | }); 41 | 42 | uploader.on( 'uploadBeforeSend', function( block, data ) { 43 | // block为分块数据。 44 | // file为分块对应的file对象。 45 | var file = block.file; 46 | // 修改data可以控制发送哪些携带数据。 47 | data.uid = window.location.href; 48 | // 将存在file对象中的md5数据携带发送过去。 49 | // data.fileMd5 = file.md5; 50 | // 删除其他数据 51 | // delete data.key; 52 | }); 53 | uploader.on("beforeFileQueued",function() {//{{{ 54 | $(".upload-tips").show(); 55 | if($("#fileList").children().length >=10) { 56 | if(flag == false) { 57 | flag = true; 58 | uploader.stop() 59 | tips.init({ text: "最多上传10张图片"}) 60 | 61 | 62 | } 63 | return false; 64 | } else { 65 | flag = false; 66 | } 67 | })//}}} 68 | // uploader.on("beforeFileQueued",function() {//{{{ 69 | // if($("#fileList").children().length >=10) { 70 | // if($("#fileList").children().length==10) { 71 | // alert("最多上传10张图片"); 72 | // } 73 | // return false; 74 | // } 75 | //})//}}} 76 | // 当有文件添加进来的时候 77 | uploader.on( 'fileQueued', function( file ) {//{{{ 78 | //重置数据 79 | //arrData.length = 0; 80 | var strHtml = ""; 81 | //console.log(file) 82 | //垃圾处理 83 | if($.browser.version == "6.0") { 84 | strHtml = '
' + 85 | '

' + file.name + '

' + 86 | '

正在上传...

' + 87 | '
'; 88 | 89 | } else { 90 | strHtml = '
' + 91 | '' + '
' + file.name + '
' + 92 | 'X' + 93 | '
'; 94 | } 95 | var $li = $(strHtml); 96 | var $img = $li.find('img'); 97 | 98 | /**删除队列id**/ 99 | $li.on('click', '.remove-this', function() { 100 | uploader.removeFile( file.id ); 101 | $(this).parents("#"+file.id+"").fadeOut().remove(); 102 | 103 | var newVal = $(this).parent().attr("data-url"); 104 | var picVale = pic.val().split(","); 105 | arrData = replaceArr(picVale,newVal); 106 | pic.val(arrData); 107 | }) 108 | 109 | $btn.removeClass("ok-disabled"); 110 | $list.append( $li ); 111 | // 创建缩略图 112 | if($.browser.version != "6.0") { 113 | uploader.makeThumb( file, function( error, src ) { 114 | if ( error ) { 115 | $img.replaceWith('不能预览'); 116 | return; 117 | } 118 | 119 | $img.attr( 'src', src ); 120 | }, thumbnailWidth, thumbnailHeight ); 121 | } 122 | });//}}} 123 | //上传中 124 | uploader.on("uploadProgress",function( file, percentage ) {//{{{ 125 | up_flag = true; 126 | if(up_flag) { 127 | reply.attr("disabled",true).css("background","#ccc"); 128 | up_flag = false; 129 | } 130 | });//}}} 131 | //上传完成 132 | uploader.on("uploadFinished",function( file, percentage ) {//{{{ 133 | reply.attr("disabled",false).css("background","#f4971e"); 134 | });//}}} 135 | /** 文件上传成功 **/ 136 | uploader.on( 'uploadSuccess', function( file,ret ) {//{{{ 137 | var $li = $( '#'+file.id ), 138 | $error = $li.find('div.success'); 139 | $btn.addClass("ok-disabled"); 140 | $( '#'+file.id ).find('p.state').text('已上传'); 141 | feedFlag = 1; 142 | //response 143 | if(ret && ret.data) { 144 | if(pic.val() != ""){ 145 | arrData = pic.val().split(","); 146 | }else{ 147 | arrData = []; 148 | } 149 | arrData.push(ret.data.url); 150 | pic.val(arrData) 151 | $li.attr("data-url",ret.data.url) 152 | } 153 | if($.browser.version != "6.0") { 154 | // 避免重复创建 155 | if ( !$error.length ) { 156 | $error = $('
').appendTo( $li ); 157 | } 158 | } 159 | 160 | });//}}} 161 | /** 文件上传失败，现实上传出错。**/ 162 | uploader.on( 'uploadError', function( file ) {//{{{ 163 | var $li = $( '#'+file.id ), 164 | $error = $li.find('div.error'); 165 | 166 | // 避免重复创建 167 | if ( !$error.length ) { 168 | $error = $('
').appendTo( $li ); 169 | } 170 | $error.text('上传失败'); 171 | });//}}} 172 | /**出错监听**/ 173 | uploader.on("error",function (type) {//{{{ 174 | switch (type) { 175 | case 'Q_EXCEED_NUM_LIMIT': 176 | alert("最多上传"+$("#fileList").attr("data-num")+"张") 177 | break; 178 | case 'Q_EXCEED_SIZE_LIMIT': 179 | alert("图片过大") 180 | break; 181 | case 'Q_TYPE_DENIED': 182 | alert("请上传图片文件") 183 | break; 184 | case 'F_DUPLICATE': 185 | alert("重复文件") 186 | break; 187 | default: 188 | alert("上传出错") 189 | } 190 | })//}}} 191 | 192 | $btn.on( 'click', function() { 193 | if ( $(this).hasClass( 'ok-disabled' ) ) { 194 | return false; 195 | } 196 | if ( state === 'uploading' ) { 197 | uploader.stop(); 198 | } else { 199 | uploader.upload(); 200 | } 201 | }); 202 | $(".editor-remove-this").click(function() { 203 | var newVal = $(this).parent().attr("data-url"); 204 | $(this).parent().remove(); 205 | var picVale = pic.val().split(","); 206 | editorArrData = replaceArr(picVale,newVal); 207 | pic.val(editorArrData); 208 | }) 209 | 210 | }) 211 | 212 | -------------------------------------------------------------------------------- /UI_mod/js/user-admin.js: -------------------------------------------------------------------------------- 1 | /**用户取消关注**/ 2 | define("usermanage",["jquery","a","base"],function(require, exports, module) { 3 | /**绑定log**/ 4 | function log() {//{{{ 5 | var console = window.console; 6 | var args = Array.prototype.slice.call(arguments); 7 | args.unshift('^_^! >>'); 8 | 9 | if(!!console && !!console.log.apply) { 10 | console.log && console.log.apply(console,args); 11 | } 12 | }//}}} 13 | 14 | var $ = require("jquery"); 15 | var a = require("a"); 16 | 17 | var ui = require("base"); 18 | 19 | var dd = ui.tab({ 20 | wrap: ".j_tab", 21 | head: ".user-tab-hd li", 22 | cont: ".user-tab-cont div" 23 | }) 24 | 25 | var popupConfirm = new a.PopupConfirm() 26 | var popuplayer = new a.PopupLayer(); 27 | 28 | popuplayer.subscribe("close",function(topics,data) {//{{{ 29 | popuplayer.destroy() 30 | popupConfirm.destroy() 31 | window.location.reload() 32 | })//}}} 33 | 34 | $(".j_user_start").on("click",".delete-follow",function () { 35 | $(".popup").remove() 36 | var self = $(this) 37 | 38 | popupConfirm.confim({//{{{ 39 | content:"您真的要取消关注么?", 40 | isscroll: true, 41 | title: "取消关注" 42 | })//}}} 43 | popupConfirm.subscribe("cancel",function(topics,data) {//{{{ 44 | })//}}} 45 | popupConfirm.subscribe("send",function(topics,data) {//{{{ 46 | var data = { 47 | fid : self.attr("data-fid"), 48 | follow: 0 49 | } 50 | //debugger; 51 | $.ajax({//{{{ 52 | url: '/apiSay/follow', 53 | type: 'post', 54 | dataType: 'json', 55 | data: data, 56 | success: function (data, textstatus, jqxhr) { 57 | if(data.code == 0) { 58 | popuplayer.alert({ 59 | content: data.message 60 | }) 61 | } else { 62 | popuplayer.alert({ 63 | tipsstatus: "popup-none", 64 | content: data.message 65 | }) 66 | } 67 | popupConfirm.destroy() 68 | }, 69 | error: function (jqxhr, textstatus, errorthrown) { 70 | popuplayer.alert({ 71 | tipsstatus: "popup-none", 72 | content:"网络错误" 73 | }) 74 | } 75 | });//}}} 76 | })//}}} 77 | 78 | }) 79 | }); 80 | seajs.use("usermanage"); 81 | 82 | -------------------------------------------------------------------------------- /UI_mod/js/user-apply.js: -------------------------------------------------------------------------------- 1 | /**早请吧主**/ 2 | define("userapply",["jquery","a","base"],function(require, exports, module) { 3 | function log() {//{{{ 4 | var console = window.console; 5 | var args = Array.prototype.slice.call(arguments); 6 | args.unshift('>>>'); 7 | if(!!console) { 8 | console.log && console.log.apply(console,args) 9 | } 10 | }//}}} 11 | 12 | var $ = require("jquery") 13 | var a = require("a"); 14 | var ui = require("base") 15 | 16 | var popupLayer = new a.PopupLayer(); 17 | var popupConfirm = new a.PopupConfirm(); 18 | 19 | ui.placeholder(".J_focus"); 20 | 21 | var userForm = $(".user-apply-form") 22 | var userInfots = $(".feed-user-infos"); 23 | var writeFloag = true; 24 | var blurFloag = false; 25 | //输入框 26 | var qqReg = /^[1-9]*[1-9][0-9]*$/ 27 | var phoneReg = /0?(13|14|15|18)[0-9]{9}/ 28 | 29 | userForm.on("blur",".apply-text",function () { 30 | var self = $(this) 31 | blurHandle(self); 32 | }) 33 | function blurHandle(obj) {//{{{ 34 | type = obj.attr("data-type"); 35 | if(type == "qq") { 36 | if(qqReg.test(obj.val())) { 37 | writeFloag = true; 38 | userInfots.hide() 39 | } else { 40 | userInfots.html("请添写QQ号") 41 | writeFloag = false; 42 | } 43 | } else if(type == "phone") { 44 | if(phoneReg.test(obj.val())) { 45 | writeFloag = true; 46 | userInfots.hide() 47 | } else { 48 | userInfots.html("请添写手机号").show() 49 | //return false; 50 | writeFloag = false; 51 | } 52 | 53 | 54 | } else if(type == "text") { 55 | if($.trim(obj.val()) !="描述一下游戏经历，让我们更了解你！" && $.trim(obj.val()) !="" ) { 56 | writeFloag = true; 57 | userInfots.hide() 58 | 59 | } else { 60 | userInfots.html("请添写游戏经历").show() 61 | writeFloag = false; 62 | } 63 | } 64 | }//}}} 65 | var success= !true; 66 | 67 | userForm.submit(function () {//{{{ 68 | //userInfots.html("请添写申请信息") 69 | $(".apply-text",this).each(function() { 70 | $(this).blur(); 71 | if(!writeFloag) { 72 | blurFloag = false; 73 | return false; 74 | } else { 75 | blurFloag = true; 76 | } 77 | }) 78 | //return false; 79 | 80 | if(blurFloag) { 81 | var applyData = { 82 | "fid" : $("input[name='fid']").val(), 83 | 'qq' : $(".apply-user-qq").val(), 84 | 'mobile' : $(".apply-user-phone").val(), 85 | 'reason' : $(".apply-user-text").val() 86 | } 87 | $.ajax({ 88 | url:'/apiSay/moderatorapply', 89 | type: 'POST', 90 | dataType: 'json', 91 | data: applyData, 92 | success: function (data) { 93 | if(data.code == 0) { 94 | popupLayer.alert({ 95 | content:data.message, 96 | //切换状态类 97 | tipsStatus:"popup-success" 98 | }) 99 | window.location.reload() 100 | } else { // 不满足条件 101 | popupLayer.alert({ 102 | content:data.message, 103 | //切换状态类 104 | tipsStatus:"popup-none" 105 | }) 106 | } 107 | 108 | }, 109 | error: function () { 110 | alert("网络错误") 111 | } 112 | }) 113 | } 114 | return false; 115 | })//}}} 116 | 117 | }); 118 | seajs.use("userapply"); 119 | -------------------------------------------------------------------------------- /UI_mod/loadimg.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 32 | 33 | 34 | 39 | 40 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /UI_mod/mod/LoadImg.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | /* 3 | * 4 | * // THE ACTUAL DEMO CODE 5 | * $.preLoadImages('http://farm3.static.flickr.com/2066/1997997751_4eed467567.jpg', 6 | * 'http://farm4.static.flickr.com/3362/3252938723_64c586a31e.jpg', 7 | * 'http://farm4.static.flickr.com/3616/3522284481_a46cbc9486.jpg' 8 | * ); 9 | * 10 | * 图图预先加载完毕，让用户体验更友好，如果不用预加载，则在做交互的东西如果图片过大，则给用户显示会很慢 11 | * */ 12 | var cache = []; 13 | $.preLoadImages = function() { 14 | var args_len = arguments.length; 15 | for (var i = args_len; i--;) { 16 | var cacheImage = document.createElement('img'); 17 | cacheImage.src = arguments[i]; 18 | cache.push(cacheImage); 19 | } 20 | console.log(cacheImage); 21 | } 22 | })(jQuery); 23 | 24 | -------------------------------------------------------------------------------- /UI_mod/mod/dialog.js: -------------------------------------------------------------------------------- 1 | /* 2 | example: 3 | $('.btn').on('click', function() { 4 | var _this = $(this); 5 | $.TipsDialog({ 6 | mask: true, //遮罩层 7 | multiple: false, //是否实例 8 | timeout: 2, //秒 9 | tipsCont: _this.attr("data-tips"),//提示内容 10 | autoHide: false, //自动关闭 11 | closeBack: function (current) {//关闭按钮的回调 12 | console.log(current) 13 | } 14 | }); 15 | }); 16 | */ 17 | ;(function($) { 18 | var Tips = function() { 19 | var that = this, 20 | body = $(document.body), 21 | tmpl = $('

提示信息

你发表的评论已经成功

不论你是你无牌还是扁平控，不论你走复古风还是爱未来感只要你的创意好

确定
'); 22 | ifram = $(''); 23 | 24 | //dialog 模板 25 | this.el = $(tmpl); 26 | //dialog mask 模板 27 | this.mask = $('
'); 28 | this.el.appendTo(body); 29 | this.mask.appendTo(body); 30 | this.el.find('.J_close').on('click', function() { 31 | that.hide($(this)); 32 | }); 33 | 34 | }, 35 | //默认参数 36 | defaultConfig = { 37 | mask: true, 38 | multiple: false, 39 | timeout: 1.8, 40 | tipsCont: "提示信息", 41 | tipsInfo: "请写提示信息", 42 | autoHide : true, 43 | rightImg : false, 44 | closeBack: function (){} 45 | }; 46 | Tips.prototype = { 47 | init: function(config) { 48 | this.config = $.extend({},defaultConfig, config); 49 | 50 | this.getXY(); 51 | this.show(); 52 | var jsTipsIcon = this.el.find(".J_status"); 53 | 54 | if(this.config.rightImg == "wran") { 55 | 56 | jsTipsIcon.addClass("wran"); 57 | } else if(this.config.rightImg == "error") { 58 | jsTipsIcon.addClass("error"); 59 | } else { 60 | jsTipsIcon.removeClass("wran error"); 61 | } 62 | if(this.config && this.config.tipsCont !="false") { 63 | this.el.find(".dialog-bd-mess").html(this.config.tipsCont); 64 | } 65 | if(this.config && this.config.tipsInfo !="false") { 66 | this.el.find(".dialog-bd-more").html(this.config.tipsInfo); 67 | } 68 | if(this.config.autoHide) { 69 | if (this.config && ! isNaN(this.config.timeout)) { 70 | clearTimeout(this._globalID); 71 | this.autoHide(); 72 | } 73 | } 74 | return this; 75 | }, 76 | //获取窗口高宽、滚动条偏移量 77 | getXY: function() { 78 | var winObj = $(window), 79 | doc = $(document), 80 | self = this, 81 | win = { 82 | T: winObj.scrollTop(), 83 | L: winObj.scrollLeft(), 84 | H: winObj.height(), 85 | W: winObj.width() 86 | }, 87 | doc = { 88 | H : doc.height(), 89 | W : doc.width() 90 | }, 91 | obj = { 92 | H: this.el.outerHeight(true), 93 | W: this.el.outerWidth(true), 94 | L: this.el.offset().left, 95 | T: this.el.offset().top 96 | }; 97 | self.el.css({ 98 | left: ((win.W - obj.W) / 2) + win.L, 99 | top: ((win.H - obj.H) / 2) + win.T 100 | }); 101 | self.mask.css({ 102 | height: Math.max(win.H ,doc.H), 103 | width: Math.max(win.W, doc.W) 104 | }); 105 | var ie6=!-[1,]&&!window.XMLHttpRequest; 106 | if (ie6) { 107 | ifram.css({"width" : $(this.mask).width(),"height": $(this.mask).height()}).appendTo($(this.mask)); 108 | }; 109 | //if(this.config.size) { 110 | //winObj.bind("scroll resize",function () { 111 | ////TODO 重新获取brower大小 112 | //var curTop = $(window).scrollTop(), 113 | //curWidth = $(window).width(), 114 | //curLeft = $(window).scrollLeft(); 115 | //if(ie6) { 116 | //self.el.css({"top" : ((win.H - obj.H) / 2) + curTop}); 117 | //} 118 | //self.el.css({"left" : ((curWidth - obj.W) / 2) + curLeft}); 119 | //self.mask.css({"width" : curWidth}); 120 | //}) 121 | //} 122 | }, 123 | autoHide: function() { 124 | var that = this; 125 | that._globalID = setTimeout(function() { 126 | that.hide(); 127 | },1000 * that.config.timeout); 128 | }, 129 | show: function() { 130 | if (this.config.mask) this.mask.show(); 131 | this.el.fadeIn(); 132 | }, 133 | hide: function(curObj) { 134 | if(curObj.hasClass("J_btn")) { 135 | this.config.closeBack(this.el); 136 | this.mask.fadeOut(); 137 | this.el.fadeOut(); 138 | clearTimeout(this._globalID); 139 | } else { 140 | this.mask.fadeOut(); 141 | this.el.fadeOut(); 142 | clearTimeout(this._globalID); 143 | } 144 | //关闭回调函数 145 | //if(typeof this.config.closeBack !== "undefined") { 146 | //this.config.closeBack(this.el); 147 | //} 148 | } 149 | }; 150 | var instance = new Tips(); 151 | $.extend({ 152 | TipsDialog: function(config) { 153 | //实例判断 154 | var config = config || {}; 155 | configMultiple = config.multiple; 156 | 157 | configMultiple = configMultiple || false; 158 | if (configMultiple) { 159 | var i = new Tips(); 160 | return i.init(config); 161 | } else { 162 | return instance.init(config); 163 | } 164 | } 165 | }); 166 | })(jQuery); 167 | 168 | 169 | -------------------------------------------------------------------------------- /UI_mod/mod/tab.js: -------------------------------------------------------------------------------- 1 | ; 2 | (function($) { 3 | var Tab = function(obj,option) { 4 | this._timer = null; 5 | this._i = 0; 6 | this.init(obj,option); 7 | }, 8 | defaults = { 9 | eventtyle: "click", 10 | auto : false, 11 | time : 1200, 12 | callBack: function() {} 13 | }; 14 | Tab.prototype = { 15 | init: function(obj,config) { 16 | var self = this; 17 | this.config = $.extend({},defaults, config); 18 | //tab header 19 | this.tabItem = $(obj).find(".tab-hd-item"), 20 | //tab Cont 21 | this.tabCont = $(obj).find(".tab-bd-item"); 22 | this.bindEvent(); 23 | if(this.config.auto) { 24 | this.autoTab(); 25 | $(obj).hover(function () { 26 | clearInterval(self._timer); 27 | },function () { 28 | self.autoTab(); 29 | }) 30 | } 31 | }, 32 | bindEvent: function() { 33 | var self = this; 34 | $(this.tabItem).each(function() { 35 | var _self = $(this), 36 | _index = _self.index(); 37 | _self.bind(self.config.eventtyle, function() { 38 | _self.addClass("J_active").siblings().removeClass("J_active"); 39 | self.tabCont.eq(_index).addClass("J_active").siblings().removeClass("J_active"); 40 | //重置索引 41 | self._i = _index; 42 | }) 43 | }) 44 | }, 45 | 46 | autoTab : function () { 47 | var _length = this.tabItem.length, 48 | _self = this; 49 | this._timer = setInterval(function () { 50 | _self._i++; 51 | if(_self._i >= _length) { 52 | _self._i = 0; 53 | } 54 | _self.tabItem.removeClass("J_active"); 55 | _self.tabCont.removeClass("J_active"); 56 | $(_self.tabItem[_self._i]).addClass("J_active"); 57 | $(_self.tabCont[_self._i]).addClass("J_active"); 58 | },_self.config.time); 59 | } 60 | 61 | } 62 | $.extend({ 63 | tab : function (obj,option) { 64 | new Tab(obj,option); 65 | } 66 | }) 67 | })(jQuery) 68 | 69 | -------------------------------------------------------------------------------- /UI_mod/tab.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 40 | 41 | 42 |
43 |
44 | 49 |
50 |
51 |
52 |

fuck 好久不写逻辑乱了，代码也生疏了！

53 |

fuck 好久不写逻辑乱了，代码也生疏了！

54 |

fuck 好久不写逻辑乱了，代码也生疏了！

55 |
56 |
57 |

fuck 好久不写逻辑乱了，代码也生疏了22！

58 |

fuck 好久不写逻辑乱了，代码也生疏了22！

59 |

fuck 好久不写逻辑乱了，代码也生疏了22！

60 |
61 |
62 |

fuck 好久不写逻辑乱了，代码也生疏了33！

63 |

fuck 好久不写逻辑乱了，代码也生疏了33！

64 |

fuck 好久不写逻辑乱了，代码也生疏了33！

65 |
66 |
67 |
68 |
69 |
70 | 75 |
76 |
77 |
78 |

fuck 好久不写逻辑乱了，代码也生疏了！

79 |

fuck 好久不写逻辑乱了，代码也生疏了！

80 |

fuck 好久不写逻辑乱了，代码也生疏了！

81 |
82 |
tab2
83 |
tab3
84 |
85 |
86 |
87 |
88 | 93 |
94 |
95 |
96 |

fuck 好久不写逻辑乱了，代码也生疏了！

97 |

fuck 好久不写逻辑乱了，代码也生疏了！

98 |

fuck 好久不写逻辑乱了，代码也生疏了！

99 |
100 |
tab2
101 |
tab3
102 |
103 |
104 | 105 | 106 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /UI_mod/touch/explorations1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alanerzhao/doc/58f0ae130e127ba0b47cc7466cd820c9a39416f5/UI_mod/touch/explorations1.jpg -------------------------------------------------------------------------------- /UI_mod/touch/explorations2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alanerzhao/doc/58f0ae130e127ba0b47cc7466cd820c9a39416f5/UI_mod/touch/explorations2.jpg -------------------------------------------------------------------------------- /UI_mod/touch/explorations3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alanerzhao/doc/58f0ae130e127ba0b47cc7466cd820c9a39416f5/UI_mod/touch/explorations3.jpg -------------------------------------------------------------------------------- /UI_mod/touch/touch-slide.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 27 | 28 | 29 |
30 |
31 |
1
32 |
2
33 |
3
34 |
35 |
36 |
37 |
38 |
39 |
    40 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大1
    • 41 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 42 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 43 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 44 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 45 |
46 | 47 |
48 |
49 |
    50 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大2
    • 51 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 52 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 53 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 54 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 55 |
56 | 57 |
58 |
59 |
    60 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大3
    • 61 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 62 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 63 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 64 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 65 |
66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 |
    74 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大1
    • 75 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 76 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 77 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 78 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 79 |
80 | 81 |
82 |
83 |
    84 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大2
    • 85 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 86 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 87 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 88 |
  • asdasdasd阿苏大阿苏大阿苏大阿苏大阿苏大
    • 89 |
90 | 91 |
92 |
93 |
    94 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大3
    • 95 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 96 |
  • 阿苏大阿苏大阿苏大阿苏大iasdasid阿苏大
    • 97 |
  • 阿苏大阿苏大阿苏大阿苏大阿苏大
    • 98 |
  • 阿苏大阿苏大阿苏asdaskd大阿苏大阿苏大
    • 99 |
100 | 101 |
102 |
103 |
104 | 105 | 106 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | /* Retset */ 2 | @charset "utf-8"; 3 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} 4 | body{ font:12px/1.5 tahoma,arial,"Hiragino Sans GB",\5b8b\4f53;} 5 | h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 6 | table{ border-collapse:collapse;border-spacing:0;} 7 | ol,ul{ list-style:none;} 8 | fieldset,img{ border:0 none;} 9 | :focus { outline:0;} 10 | a{ text-decoration:none;} 11 | a:hover { text-decoration:underline;} 12 | /* 高亮选中 */ 13 | ::-moz-selection {background:#08c;color:#fff;} 14 | ::selection {background:#08c;color:#fff;} 15 | 16 | /* Placeholder Color */ 17 | ::-moz-placeholder {color: #aaa;} 18 | ::-webkit-input-placeholder {color: #aaa;} 19 | ::-ms-input-placeholder {color:#aaa;} 20 | :focus{outline:none;} 21 | 22 | /*功能性CSS*/ 23 | .fn-clear:after { content:'\0020';display:block;clear:both;height:0;} 24 | .fn-clear {zoom:1;} 25 | 26 | /*向左向右*/ 27 | .fn-right{float:right;} 28 | .fn-left{float:left;} 29 | 30 | /*显示隐藏*/ 31 | .fn-hide { display:none;} 32 | .fn-show { display:block;} 33 | 34 | .fn-invisible {visibility:hidden;} 35 | .fn-affix {position:fixed;top:0;} 36 | 37 | /*省略号*/ 38 | .fn-ell { text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} 39 | 40 | /*内联块*/ 41 | .fn-inb { display:inline-block; vertical-align:middle; *display:inline; *zoom:1;} 42 | 43 | /*强制文本换行*/ 44 | .fn-wrap { word-wrap:break-word;word-break:break-all;} 45 | 46 | /*grid*/ 47 | .grid_1 { 48 | width: 25px; 49 | } 50 | .grid_2 { 51 | width: 60px; 52 | } 53 | .grid_3 { 54 | width: 95px; 55 | } 56 | .grid_4 { 57 | width: 130px; 58 | } 59 | .grid_5 { 60 | width: 165px; 61 | } 62 | .grid_6 { 63 | width: 200px; 64 | } 65 | .grid_7 { 66 | width: 235px; 67 | } 68 | .grid_8 { 69 | width: 270px; 70 | } 71 | .grid_9 { 72 | width: 305px; 73 | } 74 | .grid_10 { 75 | width: 340px; 76 | } 77 | .grid_11 { 78 | width: 375px; 79 | } 80 | .grid_12 { 81 | width: 410px; 82 | } 83 | .grid_13 { 84 | width: 445px; 85 | } 86 | .grid_14 { 87 | width: 480px; 88 | } 89 | .grid_15 { 90 | width: 515px; 91 | } 92 | .grid_16 { 93 | width: 550px; 94 | } 95 | .grid_17 { 96 | width: 585px; 97 | } 98 | .grid_18 { 99 | width: 620px; 100 | } 101 | .grid_19 { 102 | width: 655px; 103 | } 104 | .grid_20 { 105 | width: 690px; 106 | } 107 | .grid_21 { 108 | width: 725px; 109 | } 110 | .grid_22 { 111 | width: 760px; 112 | } 113 | .grid_23 { 114 | width: 795px; 115 | } 116 | .grid_24 { 117 | width: 830px; 118 | } 119 | .grid_25 { 120 | width: 865px; 121 | } 122 | .grid_26 { 123 | width: 900px; 124 | } 125 | .grid_27 { 126 | width: 935px; 127 | } 128 | .grid_28 { 129 | width: 970px; 130 | } 131 | .grid { 132 | margin: 0 10px 0 0; 133 | overflow: hidden; 134 | float: left; 135 | display: inline; 136 | } 137 | .container { 138 | width: 980px; 139 | margin: 0 auto; 140 | overflow: hidden; 141 | } 142 | 143 | .row .row { 144 | margin: 0 -0px 0 -10px; 145 | width: auto; 146 | display: inline-block; 147 | } 148 | 149 | -------------------------------------------------------------------------------- /css/m_base.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | * Correct `block` display not defined for `main` in IE 11. 30 | */ 31 | 32 | article, 33 | aside, 34 | details, 35 | figcaption, 36 | figure, 37 | footer, 38 | header, 39 | hgroup, 40 | main, 41 | nav, 42 | section, 43 | summary { 44 | display: block; 45 | } 46 | 47 | /** 48 | * 1. Correct `inline-block` display not defined in IE 8/9. 49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; /* 1 */ 57 | vertical-align: baseline; /* 2 */ 58 | } 59 | 60 | /** 61 | * Prevent modern browsers from displaying `audio` without controls. 62 | * Remove excess height in iOS 5 devices. 63 | */ 64 | 65 | audio:not([controls]) { 66 | display: none; 67 | height: 0; 68 | } 69 | 70 | /** 71 | * Address `[hidden]` styling not present in IE 8/9/10. 72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 73 | */ 74 | 75 | [hidden], 76 | template { 77 | display: none; 78 | } 79 | 80 | /* Links 81 | ========================================================================== */ 82 | 83 | /** 84 | * Remove the gray background color from active links in IE 10. 85 | */ 86 | 87 | a { 88 | background: transparent; 89 | } 90 | 91 | /** 92 | * Improve readability when focused and also mouse hovered in all browsers. 93 | */ 94 | 95 | a:active, 96 | a:hover { 97 | outline: 0; 98 | } 99 | 100 | /* Text-level semantics 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 105 | */ 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | /** 112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | /** 121 | * Address styling not present in Safari and Chrome. 122 | */ 123 | 124 | dfn { 125 | font-style: italic; 126 | } 127 | 128 | /** 129 | * Address variable `h1` font-size and margin within `section` and `article` 130 | * contexts in Firefox 4+, Safari, and Chrome. 131 | */ 132 | 133 | h1 { 134 | font-size: 2em; 135 | margin: 0.67em 0; 136 | } 137 | 138 | /** 139 | * Address styling not present in IE 8/9. 140 | */ 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | /** 148 | * Address inconsistent and variable font size in all browsers. 149 | */ 150 | 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /** 156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 157 | */ 158 | 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; 165 | } 166 | 167 | sup { 168 | top: -0.5em; 169 | } 170 | 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | 175 | /* Embedded content 176 | ========================================================================== */ 177 | 178 | /** 179 | * Remove border when inside `a` element in IE 8/9/10. 180 | */ 181 | 182 | img { 183 | border: 0; 184 | } 185 | 186 | /** 187 | * Correct overflow not hidden in IE 9/10/11. 188 | */ 189 | 190 | svg:not(:root) { 191 | overflow: hidden; 192 | } 193 | 194 | /* Grouping content 195 | ========================================================================== */ 196 | 197 | /** 198 | * Address margin not present in IE 8/9 and Safari. 199 | */ 200 | 201 | figure { 202 | margin: 1em 40px; 203 | } 204 | 205 | /** 206 | * Address differences between Firefox and other browsers. 207 | */ 208 | 209 | hr { 210 | -moz-box-sizing: content-box; 211 | box-sizing: content-box; 212 | height: 0; 213 | } 214 | 215 | /** 216 | * Contain overflow in all browsers. 217 | */ 218 | 219 | pre { 220 | overflow: auto; 221 | } 222 | 223 | /** 224 | * Address odd `em`-unit font size rendering in all browsers. 225 | */ 226 | 227 | code, 228 | kbd, 229 | pre, 230 | samp { 231 | font-family: monospace, monospace; 232 | font-size: 1em; 233 | } 234 | 235 | /* Forms 236 | ========================================================================== */ 237 | 238 | /** 239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 240 | * styling of `select`, unless a `border` property is set. 241 | */ 242 | 243 | /** 244 | * 1. Correct color not being inherited. 245 | * Known issue: affects color of disabled elements. 246 | * 2. Correct font properties not being inherited. 247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 248 | */ 249 | 250 | button, 251 | input, 252 | optgroup, 253 | select, 254 | textarea { 255 | color: inherit; /* 1 */ 256 | font: inherit; /* 2 */ 257 | margin: 0; /* 3 */ 258 | } 259 | 260 | /** 261 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 262 | */ 263 | 264 | button { 265 | overflow: visible; 266 | } 267 | 268 | /** 269 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 270 | * All other form control elements do not inherit `text-transform` values. 271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 272 | * Correct `select` style inheritance in Firefox. 273 | */ 274 | 275 | button, 276 | select { 277 | text-transform: none; 278 | } 279 | 280 | /** 281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 282 | * and `video` controls. 283 | * 2. Correct inability to style clickable `input` types in iOS. 284 | * 3. Improve usability and consistency of cursor style between image-type 285 | * `input` and others. 286 | */ 287 | 288 | button, 289 | html input[type="button"], /* 1 */ 290 | input[type="reset"], 291 | input[type="submit"] { 292 | -webkit-appearance: button; /* 2 */ 293 | cursor: pointer; /* 3 */ 294 | } 295 | 296 | /** 297 | * Re-set default cursor for disabled elements. 298 | */ 299 | 300 | button[disabled], 301 | html input[disabled] { 302 | cursor: default; 303 | } 304 | 305 | /** 306 | * Remove inner padding and border in Firefox 4+. 307 | */ 308 | 309 | button::-moz-focus-inner, 310 | input::-moz-focus-inner { 311 | border: 0; 312 | padding: 0; 313 | } 314 | 315 | /** 316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 317 | * the UA stylesheet. 318 | */ 319 | 320 | input { 321 | line-height: normal; 322 | } 323 | 324 | /** 325 | * It's recommended that you don't attempt to style these elements. 326 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 327 | * 328 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 329 | * 2. Remove excess padding in IE 8/9/10. 330 | */ 331 | 332 | input[type="checkbox"], 333 | input[type="radio"] { 334 | box-sizing: border-box; /* 1 */ 335 | padding: 0; /* 2 */ 336 | } 337 | 338 | /** 339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 340 | * `font-size` values of the `input`, it causes the cursor style of the 341 | * decrement button to change from `default` to `text`. 342 | */ 343 | 344 | input[type="number"]::-webkit-inner-spin-button, 345 | input[type="number"]::-webkit-outer-spin-button { 346 | height: auto; 347 | } 348 | 349 | /** 350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 352 | * (include `-moz` to future-proof). 353 | */ 354 | 355 | input[type="search"] { 356 | -webkit-appearance: textfield; /* 1 */ 357 | -moz-box-sizing: content-box; 358 | -webkit-box-sizing: content-box; /* 2 */ 359 | box-sizing: content-box; 360 | } 361 | 362 | /** 363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 364 | * Safari (but not Chrome) clips the cancel button when the search input has 365 | * padding (and `textfield` appearance). 366 | */ 367 | 368 | input[type="search"]::-webkit-search-cancel-button, 369 | input[type="search"]::-webkit-search-decoration { 370 | -webkit-appearance: none; 371 | } 372 | 373 | /** 374 | * Define consistent border, margin, and padding. 375 | */ 376 | 377 | fieldset { 378 | border: 1px solid #c0c0c0; 379 | margin: 0 2px; 380 | padding: 0.35em 0.625em 0.75em; 381 | } 382 | 383 | /** 384 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 386 | */ 387 | 388 | legend { 389 | border: 0; /* 1 */ 390 | padding: 0; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove default vertical scrollbar in IE 8/9/10/11. 395 | */ 396 | 397 | textarea { 398 | overflow: auto; 399 | } 400 | 401 | /** 402 | * Don't inherit the `font-weight` (applied by a rule above). 403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 404 | */ 405 | 406 | optgroup { 407 | font-weight: bold; 408 | } 409 | 410 | /* Tables 411 | ========================================================================== */ 412 | 413 | /** 414 | * Remove most spacing between table cells. 415 | */ 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | td, 423 | th { 424 | padding: 0; 425 | } 426 | -------------------------------------------------------------------------------- /document/BackBone_note.md: -------------------------------------------------------------------------------- 1 | BackBone.js 实战 笔记 2 | ------------ 3 | #### 第一章 初识BackBone 4 | 人们沿用服务器端的MVC体系结构，将其运用于前端技术的开发与管理。 5 | **MVC**:**Model**(模型)，**View**(视图)，**Controller**(控制器) 6 | 7 | 8 | >Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. 9 | 10 | **使用_.bindAll() 函数绑定对象方法** 11 | 12 | var divView = { 13 | ele : "#divTip", 14 | tip : "hello Underscore", 15 | onClick : function () { 16 | //如果不绑定这里的this将指向当前对象，当前点击是#divTip，所以就找不到this.tip 17 | $(this.ele).html(this.tip); 18 | }, 19 | onAlert : function () { 20 | alert(1); 21 | } 22 | } 23 | //将多个方法绑定到指定的对象中，如果不将方法通过_.bindAll绑定到指定对象上，那么this指针将发生变话,说白了_.bindAll也是在处理this指针问题 24 | _.bindAll(divView,'onClick','onAlert'); 25 | 26 | $(divView.ele).bind("click",divView.onClick); 27 | 28 | **使用_.keys() 检索对象属性方法** 29 | 30 | var tmp = _.keys({ 31 | name : "Baozi", 32 | sex : "man", 33 | email : "alanerzhao\@gmail.com" 34 | }) 35 | 36 | //tmp[0]检索出来的属性名称为name 37 | 38 | 39 | **示例** 40 | 41 | $(function () { 42 | //在model层定义数据 43 | window.test = Backbone.Model.extend({ 44 | defaults : { 45 | content : "" 46 | 47 | } 48 | }) 49 | window.TestList = Backbone.Collection.extend({ 50 | model : test 51 | }) 52 | var data = new TestList({ 53 | content : "hello Backbone" 54 | }) 55 | window.data = data; 56 | 57 | window.TestView = Backbone.View.extend({ 58 | el : $("body"), 59 | initialize : function () { 60 | $("#divTip").html(data.models[0].get("content")); 61 | } 62 | }) 63 | window.APP = new TestView; 64 | }) 65 | 66 | #### 依赖库Underscore 67 | Underscore 的一些方法使用及介绍 68 | #### 第三章 事件管理 69 | 基本事件方法 70 | 71 | `on` 方法可以监听对象，也可以监听对象属性，on方法的第一个参数事件对象可以是自定义事件也可以是Backbone提供的事件，如change是对象属性发生改变，change:age 对象的age属性发生改变，也可以同时监听多个属性，而这里传入的回调函数则的value则拿到的是**当前属性** 72 | 73 | `previous` 获取对象中某个属性的原有值 74 | `previousAttributes` 返回一个对象 75 | `set` 方法可以重置对象属性 76 | `once` 方法和`on`方法一样，只不过once只绑定一次 77 | `trigger` 解发事件的方法,触发对象中的某一个事情，一般是自定义事件，像change是backbone提供的事件。 78 | `off` 移除事件，使用方法和绑定事件一样，如果要移动所有事件则使用`obj.off()` 79 | 80 | 81 | 82 | 83 | 84 | var person = Backbone.Model.extend({ 85 | defaults : { 86 | name : "", 87 | sex : "女", 88 | age : 24, 89 | score: 120 90 | } 91 | }); 92 | var man = new person(); 93 | //监听man对象的score属性 94 | //如果不写监听某个对象的属性，则value值是当前对象而不是当前值 95 | man.on("change:score",function (model, value) { 96 | //取得老的数据 97 | var oldscore = model.previous("score"); 98 | var oldAllAttr = model.previousAttributes(); 99 | //console.log(model,value); 100 | //和新的数据做比较 101 | if(value > oldscore) { 102 | console.log("你比上次进步" + (value - oldscore) + "分"); 103 | } else if(value < oldscore) { 104 | console.log("你比上次落后" + (oldscore - value) + "分"); 105 | } else { 106 | console.log("你的成绩没有变化"); 107 | } 108 | }) 109 | man.on("change:age",function (model, value) { 110 | //取得老的数据 111 | var oldAllAttr = model.previousAttributes(); 112 | //console.log(model,value); 113 | //和新的数据做比较 114 | if(value > oldAllAttr.age) { 115 | console.log("你长大了" + (value - oldAllAttr.age) + "岁"); 116 | } else if(value < oldAllAttr.age) { 117 | console.log("你变小" + (oldAllAttr.age - value) + "岁"); 118 | } else { 119 | console.log("你正当年"); 120 | } 121 | }) 122 | man.set({"age":22}) 123 | 124 | **绑定一个has对象** 125 | 126 | var objEvent = { 127 | "change:score" : scoreChange, 128 | "change:age" : ageChange 129 | } 130 | man.on(objEvent); 131 | function scoreChange (model,value) { 132 | var old_score = model.previous("score"); 133 | var new_score = model.get("score"); 134 | if(old_score != new_score) { 135 | console.log("old_score:" + old_score + " - new_score" + new_score) 136 | } 137 | } 138 | function ageChange(model,value) { 139 | var old_age = model.previous("age"); 140 | var new_age = model.get("age"); 141 | if(old_age != new_age) { 142 | console.log("old_age:" + old_age+ " - new_age" + new_age) 143 | } 144 | } 145 | 146 | **trigger 触发自定义事件** 147 | 148 | var person = Backbone.Model.extend({ 149 | defaults : { 150 | name : "", 151 | sex : "女", 152 | age : 24, 153 | score: 120 154 | } 155 | }); 156 | var man = new person(); 157 | man.on("update",function(model,value) { 158 | console.log("trigger") 159 | }) 160 | man.on("change:age",function(model,value) { 161 | console.log(model,value) 162 | }) 163 | man.trigger("update") 164 | man.set("age",55) 165 | 166 | 167 | **视图事件监听** 168 | 169 | (function (B) { 170 | var InfoView = B.View.extend({ 171 | el : "#view", 172 | events : { 173 | 'click #btnShow': 'show', 174 | 'click #btnHide': 'hide' 175 | }, 176 | show : function () { 177 | $("#info").show(); 178 | 179 | }, 180 | hide : function () { 181 | $("#info").hide(); 182 | } 183 | }) 184 | 185 | window.view = new InfoView(); 186 | 187 | })(Backbone) 188 | 189 | 190 | 191 | #### 第四章 数据模型 192 | 193 | Model在Backbone中为数据模型，是一个最基础、最根本的数据基类。 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /document/CSS3_selector.md: -------------------------------------------------------------------------------- 1 | ### CSS3 selector 2 | -------- 3 | 4 | #### 属性选择器 5 | * [att=val] ```att```是属性,```val```是值,例如[id="css3-selector"] 6 | * [att*=val] 只要属性中包含val 7 | * [att^=val] 以某些开头的 8 | * [att$=val] 以某些结尾 9 | #### 伪类选择器 10 | * after 11 | * before 12 | #### 结构性选择器 13 | * root 根元素选择器，指向html 14 | * empty 当元素为空时， 15 | * not 排除这个结构下面的子元素 16 | * target 17 | ####子类选择器 存在问题，如果是列表则无事，如h2 p h2 p 因为它针对不同类 18 | * first-child 19 | * last-child 20 | * nth-child() odd even 21 | * nth-last-child 22 | * nth-of-type 23 | * nth-last-type 24 | * only-child 只有一个子元素时 25 | 26 | ### 自行换行 27 | * word-break:break-all 28 | * word-wrap:break-word; 29 | * white-space:nowrap; 30 | * overflow:hidden,srcoll 31 | * overflow-x overflow-y 32 | * box-sizing :border-box 百分比布局 33 | * transform 四种功能， 旋转，绽放，倾斜，移动 34 | * rotate 旋转 scale 缩放 35 | * scale 缩放大小 1.5 5 36 | * skew 倾斜 30deg 50deg 37 | * translate 移动 38 | 39 | ### 动画 40 | * Transitions 通过属性 property(要更改属性) duration(持续多长时间) timing-function(什么方法过渡) 41 | * Animations 通过关键帧 42 | * 43 | -------------------------------------------------------------------------------- /document/CSS_doc.md: -------------------------------------------------------------------------------- 1 | # 前端规范 文档 （初稿）2013/10/9 15:00:01 2 | 3 | ## base.css 4 | 基础css文件，包括“重置”,“功能”性的集合，初稿待定，如果需要可以另外增加，不建议用网上的，原因，冷门HTML的标签我们是用不到的，所以我们没必要去重置它，如果后面用到HTML5，或者不需要兼容低端浏览器，那升级一套base.css便可以。功能性类开头以"mf"开头，意思是"mofang"。 5 | 6 | ## 命名规范 7 | 命名规范，包括HTML,CSS,JS命名，这里我提取了几个不错网站的命名方案(**豆瓣，youtube,百姓网**)，宗旨都是模块化的命名思路。 8 | 最好用英文去命名（不知道的单词可以查一下，正好学下英语，不怕命名过长） 9 | 10 | #### HTML命名规范 11 | 12 | * HTML命名采用“-”做分隔，均使用英文小写，为什么这样做？能够更明确的提取出公共的代码。这些模块如果是单独，便可以直接拿来用，如果不是单独的或者需要特殊处理可以加入ID（推荐使用，但少用），来处理，如果存在JS交互，则命名加入大写前缀"J_xx"（下划线），来告诉开发者这里存在JS交互，不是单纯的HTML。 13 | 示例： 14 | 15 | ```html 16 |
17 |
18 |
19 |
20 |
21 | ``` 22 | 23 | 假如上面是一个文章的模块，这样如果别的地方需要用我们就可以直接拿过来，那如果同样的模块，有少量的更改，我们也不需要重写？怎么做？，不需要！ 24 | ```html 25 |
26 |
27 |
28 |
29 |
30 | ``` 31 | 这样只需要用“move-article”这个单独类去覆盖少量的变化便可以了，如果模块差异很大，那么就没必要重用了，重新单独写一个。 32 | 33 | * hack 命名规范 34 | 在写样式的时候避免不了存在hack，那如果处理，我们用"B"来标记，低浏览器的hack,这样以后不用兼容低端浏览器的话，直接搜索大写的“B”删除即可以。 35 | 36 | #### CSS命名规范 37 | 38 | * CSS代码也同采用“-”做分隔同html是等价的，，更能适应**F.I.S去require**。在抒写CSS应当与写HTML一样提取公共的。由于样式要兼容IE浏览器，必免不了要去做写hack，那么如果 39 | 40 | #### JavaScript命名规范 41 | ----待定 42 | ## 注释规范 43 | 中英文结合注释防止开发人员看不懂.使用 /* 注释 */，由于中文注释可能导致代码失效，所以采用英文开头，中间用一个空格，中文解释。 44 | 示例： 45 | ```css 46 | /* S module */ 47 | .module { 48 | } 49 | /* E module */ 50 | ``` 51 | -------------------------------------------------------------------------------- /document/Fiddler.md: -------------------------------------------------------------------------------- 1 | 代理映射本地端口到测试机 2 | ========= 3 | 4 | ### 下载软件 5 | 6 | - **Fiddler2** http://www.telerik.com/fiddler 7 | 8 | - **Chrome plug** https://code.google.com/p/switchyplus/ 9 | 10 | - **Switchyplus** 11 | 12 | ### 代理到指定的测试机 13 | ---- 14 | - 点击工具栏里的```Tools```下的```hosts```，更改本地hosts把下方提供的```hosts```文件复制进去```save``` 15 | 16 | - 打开**FillderScript**标签栏，找到```OnBeforeRequest```方法 17 | 18 | 19 | if (oSession.url.toLowerCase().indexOf(".mofang.com")>-1) { 20 | 21 | oSession.oRequest["User-Agent"]="lixinwei";//更改成你指定的名字 22 | oSession.oRequest["Disable-Cache"] = "1"; 23 | 24 | } 25 | 26 | ### Switchyplus配置 27 | 28 | 导入提供的``` SwitchyOptions.bak```，文件既可，默认使用自动切换模式 29 | 30 | 31 | ### Hosts文件 32 | 33 | # mfe share smb 34 | 192.168.1.99 mfe.mofang.com 35 | 36 | # default 37 | 192.168.1.99 mofang.com 38 | 192.168.1.99 www.mofang.com 39 | 40 | # url rewrite for mofang 41 | 42 | 192.168.1.99 yyt.mofang.com 43 | 192.168.1.99 3jh.mofang.com 44 | 192.168.1.99 3kingdoms.mofang.com 45 | 192.168.1.99 a.mofang.com 46 | 192.168.1.99 api.db.games.mofang 47 | 192.168.1.99 astd.mofang.com 48 | 192.168.1.99 card.mofang.com 49 | 192.168.1.99 c.mofang.com 50 | 192.168.1.99 cqzj.mofang.com 51 | 192.168.1.99 dhsh.mofang.com 52 | 192.168.1.99 dhzw.mofang.com 53 | 192.168.1.99 dok.mofang.com 54 | 192.168.1.99 dotababy.mofang.com 55 | 192.168.1.99 dtlm.mofang.com 56 | 192.168.1.99 dzm.mofang.com 57 | # 192.168.1.99 fahao.mofang.com 58 | 192.168.1.99 fkbl.mofang.com 59 | 192.168.1.99 frxz.mofang.com 60 | 192.168.1.99 gc.mofang.com 61 | 192.168.1.99 grpg.mofang.com 62 | 192.168.1.99 hdl.mofang.com 63 | 192.168.1.99 hh.mofang.com 64 | 192.168.1.99 hjsds.mofang.com 65 | 192.168.1.99 hs.mofang.com 66 | 192.168.1.99 huoying.mofang.com 67 | 192.168.1.99 i.mofang.com 68 | 192.168.1.99 jj.mofang.com 69 | 192.168.1.99 jr.mofang.com 70 | 192.168.1.99 k.mofang.com 71 | 192.168.1.99 lal.mofang.com 72 | 192.168.1.99 ldt.mofang.com 73 | 192.168.1.99 lsjs.mofang.com 74 | 192.168.1.99 luobo2.mofang.com 75 | 192.168.1.99 luobo.mofang.com 76 | 192.168.1.99 mjz.mofang.com 77 | 192.168.1.99 moe.mofang.com 78 | 192.168.1.99 mxw.mofang.com 79 | # 192.168.1.99 newfahao.mofang.com 80 | 192.168.1.99 ngb.mofang.com 81 | 192.168.1.99 nj.mofang.com 82 | 192.168.1.99 nt.mofang.com 83 | 192.168.1.99 pvz2.mofang.com 84 | 192.168.1.99 qhero.mofang.com 85 | 192.168.1.99 rrxw.mofang.com 86 | 192.168.1.99 sdxl.mofang.com 87 | 192.168.1.99 sg.mofang.com 88 | 192.168.1.99 shenqu.mofang.com 89 | 192.168.1.99 sm.mofang.com 90 | 192.168.1.99 t3.mofang.com 91 | 192.168.1.99 tdh.mofang.com 92 | 192.168.1.99 tl.mofang.com 93 | 192.168.1.99 tmhx.mofang.com 94 | 192.168.1.99 tszz.mofang.com 95 | 192.168.1.99 ttfc.mofang.com 96 | # 192.168.1.99 u.mofang.com 97 | 192.168.1.99 url.mofang.com 98 | 192.168.1.99 v.mofang.com 99 | 192.168.1.99 wangxian.mofang.com 100 | 192.168.1.99 west.mofang.com 101 | 192.168.1.99 wqxy.mofang.com 102 | 192.168.1.99 wxqz.mofang.com 103 | 192.168.1.99 xb.mofang.com 104 | 192.168.1.99 xiyangyang.mofang.com 105 | 192.168.1.99 xueba.mofang.com 106 | 192.168.1.99 xyxmp.mofang.com 107 | 192.168.1.99 yb.mofang.com 108 | 192.168.1.99 zdzl.mofang.com 109 | 192.168.1.99 zh.mofang.com 110 | 192.168.1.99 zjh.mofang.com 111 | 192.168.1.99 zsm.mofang.com 112 | 113 | #### 相关文档 114 | 115 | [FiddlerBook]:http://fiddlerbook.com/Fiddler2/version.asp 116 | [FiddlerDoc]:http://docs.telerik.com/fiddler/knowledgebase/fiddlerscript/modifyrequestorresponse 117 | [FiddlerBook] - Compass doc 118 | [FiddlerDoc] - Sass doc 119 | 120 | -------------------------------------------------------------------------------- /document/Mobile_deve_tools.md: -------------------------------------------------------------------------------- 1 | Weinre 2 | ================== 3 | Weinre是什么？ 4 | Weinre代表We b In spector Re mote，是一种远程调试工具。举个例子，在电脑上可以即时 的更改手机上对应网页的页面元素、样式表，或是查看Javascript变量，同时还可以看到手机上页面的错误和警告信息. 下图所示中的例子，通过在console中运行“document.body.style.backgroundcolor = 'green';” 即时改变了手机上网页的背景色。 5 | ### 下载安装 6 | 我选用node modules 7 | ```node install -g weinre``` 8 | ```node install -g weinre``` 9 | 10 | 启动 11 | weinre --boundHost -all- --httpPort 9090 12 | 13 | 需要远程调试的页面加入 14 | 15 | 16 | 此页面必须打开服务器才能监听的到 17 | 18 | 本地打开 19 | 20 | http://127.0.0.1:8080/client 21 | 点击远程网址则可以调试 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /document/chrome-search.md: -------------------------------------------------------------------------------- 1 | 谷歌语法 2 | 3 | 4 | 1.site 5 | 6 | 表示搜索结果局限于某个具体网站或者网站频道，如“edu.sina.com.cn”、“www.seoanyi.com”，或者是某个域名，如“com.cn”、“com”等等。 7 | 8 | 如果是要排除某网站或者域名范围内的页面，只需用“-网站/域名”。如：seo site:www.seoanyi.com 9 | 10 | 11 | 12 | 2.link 13 | 14 | 语法返回所有链接到某个URL地址的网页。 15 | 16 | 示例:搜索所有含指向健康论坛“www.renliubbs.com”链接的网页。 17 | 18 | 搜索:“link:www.renliubbs.com” 19 | 20 | 21 | 22 | 3.inurl 23 | 24 | 搜索网址中包含的指定字符串。它更精确的用法是：allinurl。语法返回的网页链接中包含第一个关键字，后面的关键字则出现在链接中或者网页文档中。 25 | 26 | 有很多网站把某一类具有相同属性的资源名称显示在目录名称或者网页名称中，比如“MP3”、“GALLARY”等，于是，就可以用INURL语法找到这些相关资源链接，然后，用第二个关键词确定是否有某项具体资料。 27 | 28 | INURL语法和基本搜索语法的最大区别在于，前者通常能提供非常精确的专题资料。 29 | 30 | 如：搜索:“inurl:pdf seo” 31 | 32 | 33 | 34 | 4.allinurl 35 | 36 | 语法返回的网页的链接中包含所有查询关键字。这个查询的对象只集中于网页的链接字符串。示例:查找可能具有PHF安全漏洞的公司网站。通常这些网站的CGI-BIN目录中含有PHF脚本程序(这个脚本是不安全的)，表现在链接中就是“域名/cgi-bin/phf”。 37 | 38 | 语法:“allinurl:”cgi-bin” phf +com” 39 | 40 | 41 | 42 | 5.related 43 | 44 | 用来搜索结构内容方面相似的网页。例:搜索所有与中文新浪网主页相似的页面(如网易首页，搜狐首页，中华网首页等)，“related:www.sina.com.cn/index.shtml”。 45 | 46 | 【注意事项】related只适用于Google 47 | 48 | 49 | 50 | 6.cache 51 | 52 | 用来搜索GOOGLE服务器上某页面的缓存，这个功能同“网页快照”，通常用于查找某些已经被删除的死链接网页，相当于使用普通搜索结果页面中的“网页快照”功能。 53 | 54 | 55 | 56 | 7.info 57 | 58 | 用来显示与某链接相关的一系列搜索，提供cache、link、related和完全包含该链接的网页的功能。 59 | 60 | 61 | 62 | 8.or 63 | 64 | 当我们要同时搜索Google和baidu的最新情况时，我们用“Google OR baidu”【注意事项】中间的OR要大写 65 | 66 | 67 | 68 | 9.引号“”的用法 69 | 70 | 加上双引号后的搜索结果是完全匹配，不加引号的则是可以把搜索的词拆分了模糊匹配。 71 | 72 | 73 | 74 | 另附上【Google hack之精简部分】 75 | 76 | 1.查看基本情况 77 | 78 | info:xx.com 返回一些基本信息 79 | 80 | site:xx.com 返回所有与该有关的url 81 | 82 | link:xx.com 返回所有与该站做了链接的站 83 | 84 | site:xx.com filetype:txt 查找txt文件 85 | 86 | 87 | 88 | 2.查找后台 89 | 90 | site:xx.com intext:管理 91 | 92 | site:xx.com inurl:login 93 | 94 | site:xx.com intitile:后台 95 | 96 | 97 | 98 | 3.查看服务器使用的程序 99 | 100 | site:xx.com filetype:asp 101 | 102 | site:xx.com filetype:php 103 | 104 | site:xx.com filetype:jsp 105 | 106 | site:xx.com filetype:aspx 107 | 108 | 109 | 110 | 4.查看上传漏洞 111 | 112 | site:xx.com inurl:file 113 | 114 | site:xx.com inurl:load 115 | 116 | 117 | 118 | 5.查找注射点 119 | 120 | site:xx.com filetype:asp 121 | 122 | 123 | -------------------------------------------------------------------------------- /document/git_base.md: -------------------------------------------------------------------------------- 1 | Git 总结分享 2 | ========= 3 | ------ 4 | ## 基础使用 5 | --- 6 | ### 基础配置 7 | 8 | 首先下载完，需要进行一些常规配置，如：**Email** 、**User** 等。 9 | 10 | git config --global user.name "yourname" 11 | git config --global user.email "youremail" 12 | git config --global color.ui auto //高亮 13 | git config --global core.editor vim 14 | git config --global commit.template 15 | 16 | ### 权限配置 17 | 18 | 生成SSH密钥，因为需要和服务器通信,粘贴的时候要注册把**SSH==** 后面的的邮箱删掉, 19 | 20 | 密钥位置在C盘```user/alaner/.ssh ``` ```.pub```是公共密钥，私钥要保管好 21 | 22 | //备份密钥 23 | mkdir key_backup 24 | cp id_rsa* key_backup 25 | rm id_rsa* 26 | ssh -T git@github.com //测试是否成功 27 | 28 | ### 常规工作流 29 | --- 30 | 31 | ### 获取文件 32 | 第一种 获取git仓库的项目(这种是通过克隆的方式，也是最长用的) 33 | 34 | git clone git://github.com/xxx/xxx.git 35 | 36 | 第二种 本地新建文件，然后执行相关的命令 37 | mkdir demo 38 | cd demo 39 | git init //对git初始化，所有git的相关存储版本全部在这里 40 | git remote add origin git@git.mofang.com:zhaoshuai/demo.git 41 | ### 修改文件 42 | 每次修改完文件需要将对应的文件加入到版本库中 43 | git add README //把文件加入到版本库 44 | git commit -m 'first commit' //提交注释，必须明确，有利用你还原文件 45 | 46 | ### 提交到远程仓库 47 | 更改完文件把代码提交到远程仓库 48 | git push -u origin master 49 | 这里的流程应该是先去，把远程代码更新合并以后才去提交 50 | git pull --rebase 51 | 52 | ## 常见问题 53 | --- 54 | ### 解决冲突 55 | 每次更次代码，或提交代码，最常见的就是代码冲突，这问题就是开发人员，修改了同一个文件里的 56 | 相同的地方那么这时就要解决冲突。 57 | 58 | 再从代码库更新代码到本地时，如果出现冲突，git 会停止更新合并代码而且会提示你去解决冲突， 59 | 然后再断续那么这时你就应该去解决相关的冲突文件，然后再把文件加入到版本库里。 60 | 61 | ```--rebase``` 的意思是让合并分支线更清晰，也就是所谓的一条。 62 | 63 | git pull --rebase 64 | git add "bouth file" 65 | git pull --continue //继续合并 66 | git pull --abort //不更新合并，退回到合并之前的代码 67 | 68 | ```pull``` 本身就是拉取代码并自动合并，还有另外一种方式就是拉取代码， 69 | 手动合并 70 | 71 | git fetch origin master //从远程把代码拉下来，它会产生一个head头 72 | 73 | git merge FETCH_HEAD 74 | 75 | 这样就把代码合并了，这中间也有可能产生冲突解决方式是一样的, 76 | 当然手动合并就是可通过git diff 去对比目的就是减少冲突的发生 77 | 78 | ### 还原版本 && 替换本地改动 && 利用标签 79 | 当然更改文件错乱，或者相还原到某个版本，首先要你查看日志信息，然后查看你提交信息的commit ID然后进行还原 80 | git reset commit ID 81 | git reset HEAD //还原到你最近提交的版本 82 | git reset ^HEAD //还原到你最近提交的版本的第二个 83 | git reset --soft HEAD^ //放弃最新提交 84 | 85 | git reflog show master //列出操作历史 86 | git reset master@{} //恢复 87 | 88 | 89 | 如果你越改越乱，想重新获取一份最新的，你可能重新克隆一分，或者用下面这个命令 90 | git checkout files //你想还原的文件名称 还原单一文件 91 | 92 | git fetch origin //放弃本地修改，重新获取代码，你还要把hard指向指向所有的 93 | git reset --hard origin/master 本并将你本地主分支指向到它,如果不指向你的log信息不会变 94 | 95 | 利用标签还原版本，当你的项目开发的算做一个版本时使用村签比较合适 96 | git tag //查看标签 97 | git add tag -a v1.1 -m "mobile version 1.1" 98 | git reset v1.1 99 | git tag v1.4-lw //轻量级标签 100 | git tag -a v1.2 9fceb02 （commit id）//给已提交对象打标签 101 | 102 | 103 | 104 | ### 如果建立分支后 怎么合并代码 105 | 分支应用场景，你在开发新功能，而这里有bug找你，你开发还没有完成，并不能全部提交，那么可以尝试分支 106 | 新建一个分支去解决问题。 107 | git checkout -b deve //新建分支 108 | git checkout master //切换分支 109 | git branch -d deve //删除分支 110 | git push origin // 提交分支 111 | git merge barnchname 112 | 113 | 114 | ## 常用命令操作 115 | 116 | git config --list //查看配置信息 117 | git help //获取帮助 118 | git help clone // 获取某个命令的帮助 119 | git status // 查看文件状态 120 | git log // 查看提交历史 121 | git add // 这是个多功能命令，根据目标文件的状态不同，此命令的效果也不同：可以用它开始跟踪新文件，或者把已跟踪的文件放到暂存区，还能用于合并时把有冲突的文件标记为已解决状态等） 122 | git commit -am// 跳过暂缓区 123 | git fetch //到远程仓库中拉取所有你本地仓库中还没有的数据有一点很重要，需要记住，fetch 命令只是将远端的数据拉到本地仓库，并不自动合并到当前工作分支，只有当你确实准备好了，才能手工合并。 124 | git rm 125 | git rm --cached //只移除暂存区 126 | git commit --amend // 撤消提交 127 | git remote -v 128 | 有一点很重要，需要记住，fetch 命令只是将远端的数据拉到本地仓库，并不自动合并到当前工作分支，只有当你确实准备好了，才能手工合并。 129 | git remote show origin 130 | git push origin --tags //把代标签的版本推送到服务器 默认不推荐标签 131 | git rebase master 132 | git commit -a -m "commit info" 只提交暂存区文件忽略本地没有加入到暂存区的文件 133 | git remote rm remoteName 删除远程仓库 134 | git stash 保存当前工作进度 需要把本地文件追加到暂存区才可以使用 135 | 136 | 137 | git clean -nd //将要删除哪些文件 138 | 139 | git clean -fd //真要删除的文件整个世界清静了 140 | 141 | ###git aliases 142 | 143 | git config --global alias.co checkout 144 | git config --global alias.br branch 145 | git config --global alias.ci commit 146 | git config --global alias.st status 147 | git config --global alias.last 'log -1 HEAD' 148 | 149 | 150 | 151 | ## got git 152 | 文件归档 153 | git archive -o last.zip master 154 | ## 高级功能 155 | --- 156 | ### 子模块 157 | git submodule 158 | 159 | git submodule add 公用库名字 160 | 161 | .gitmodules记录了每个submodule的引用信息，知道在当前项目的位置以及仓库的所在 162 | 163 | 克隆带有submodule的仓库 164 | git clone ../repos/project1.git project1-b 165 | 166 | git submodule 167 | 前面带有-号告诉我们还没有检出 168 | 检出之后再更新一下 169 | git submodule update 170 | 171 | cat .git/config 172 | 173 | 174 | 把远程仓库拉到本地子模块 175 | git submodule add remote 176 | 177 | git submodule foreach git pull 178 | 179 | 180 | ## 相关资源 181 | --- 182 | 183 | ![Alt text](http://git-scm.com/figures/18333fig0201-tn.png) 184 | 185 | ![Alt text](http://git-scm.com/figures/18333fig0502-tn.png) 186 | 187 | ![Alt text](http://git-scm.com/figures/18333fig0511-tn.png) 188 | 189 | ## Git 笔记 190 | * 集中式版本管理工具，都有一个单一集中管理的服务器，这是与分布式最大的区别 191 | * 分布式版本管理工具，并不只是提取最新的文件，而是克隆整个文件的版本 192 | * `Git` 使用 `SHA-1` 算法计算数据的校验,这里便知道每次回溯版本都需要你提 193 | 交的`commit`的`id`也就是所谓的指像历史数据的指针。 194 | * 文件的三种状态 195 | - 已提交 `committed` 已经保存到本地数据库了 196 | - 已修改 `modified` 修改了某些文件但没有提交 197 | - 已暂存 `staged` 已修改的文件放在下次提交时保存 198 | 199 | * git 恢复 200 | git reset --hard version 201 | 202 | * 查看记录命令高级还原 203 | git reflog 204 | 205 | * 查看谁动了你的代码 206 | git blam file name 207 | 208 | * 提交部分更改 209 | git add -p 210 | * 暂停 211 | git stash 212 | git stash apply 213 | 214 | * 检查丢失提交 215 | git fsck --lost-found 216 | 217 | cherry-pick从另一个分支里选出单独的一个提交，然后合并到当前分支。 218 | 如果你正并行工作在两个或者更多的分支上，你也许会发现一个存在于所有分支上的bug。 219 | 如果你解决了一个分支上的这个bug，你可以拣选这个对应的提交应用到其他分支上，而不会弄乱其他文件或者提交 220 | git cherry-pick [commit_hash]] 221 | 222 | 223 | Note :分支搞懂了，你在增加功能的时候新建一个分支，然后提交这个功能分支， 另一个开发人员，pull这个分支下来代码是代你这个功能， 224 | 如果有问题，需要上线，那直接在拉下master没有问题的主分支。如果功能测试通过，后端人员合并开发分支到master 225 | 而我下次再写代码时，可以先更新下我的主分支，这样拿到新版本的代码，再开发时，和上面操作一样。 226 | 如果希望在克隆的时候，自己定义要新建的项目目录名称，可以在上面的命令末尾指定新的名字： 227 | 228 | $ git clone git://github.com/schacon/grit.git mygrit 229 | 230 | 要养成一开始就设置好 .gitignore 文件的习惯，以免将来误提交这类无用的文件。 231 | 232 | 文件 .gitignore 的格式规范如下： 233 | 234 | 所有空行或者以注释符号 ＃ 开头的行都会被 Git 忽略。 235 | 可以使用标准的 glob 模式匹配。 236 | 匹配模式最后跟反斜杠（/）说明要忽略的是目录。 237 | 要忽略指定模式以外的文件或目录，可以在模式前加上惊叹号（!）取反。 238 | 请注意，单单 git diff 不过是显示还没有暂存起来的改动 239 | 跳过使用暂存区域 240 | git commit -am 241 | 242 | 只从仓库移除 243 | git rm --cached readme.txt 244 | 245 | 修改最后一次提交 246 | 有时候我们提交完了才发现漏掉了几个文件没有加，或者提交信息写错了。想要撤消刚才的提交操作，可以使用 --amend 选项重新提交： 247 | 248 | $ git commit --amend 249 | 使用时需要先add所需要的文件再commit 250 | 关联远程仓库第一次需要加-u 251 | git 恢复 252 | git reset --hard version 253 | 254 | 查看记录命令高级还原 255 | git reflog 256 | 257 | 258 | 259 | -------------------------------------------------------------------------------- /document/linux.md: -------------------------------------------------------------------------------- 1 | wget -r -p -np -k http://xxx.com/xxx 2 | 3 | -r, --recursive（递归） specify recursive download.（指定递归下载） 4 | -k, --convert-links（转换链接） make links in downloaded HTML point to local files.（将下载的HTML页面中的链接转换为相对链接即本地链接） 5 | -p, --page-requisites（页面必需元素） get all images, etc. needed to display HTML page.（下载所有的图片等页面显示所需的内容） 6 | -np, --no-parent（不追溯至父级） don't ascend to the parent directory. 7 | 8 | 另外断点续传用-nc参数 日志 用-o参数 9 | 10 | 熟练掌握wget命令，可以帮助你方便的使用linux。 11 | 12 | #### shell 命令 13 | 14 | 文件内容查找 15 | grep content files 16 | 17 | ssh 登录到服务器 18 | ssh zhaoshuai@192.168.1.99 19 | 20 | 更改权限 21 | 22 | chmod -R 777 / 23 | chown -R www:www 24 | 切换到root 25 | sudo su - 26 | 27 | 解压zip 28 | unzip js\ css3.zip -d aa 29 | 压缩 30 | zip 压缩文件名 源文件名 31 | cd - #回到上次所在目录，这个技巧我原来还真是不知道，感觉还是比较有用，省略了很多输入。 32 | cd #回到主目录 33 | cd ~ #同样也是回到主目录 34 | 35 | wget -r -p -np -k http://xxx.com/xxx 36 | -r, --recursive（递归） specify recursive download.（指定递归下载） 37 | 38 | -k, --convert-links（转换链接） make links in downloaded HTML point to local files.（将下载的HTML页面中的链接转换为相对链接即本地链接） 39 | -p, --page-requisites（页面必需元素） get all images, etc. needed to display HTML page.（下载所有的图片等页面显示所需的内容） 40 | -np, --no-parent（不追溯至父级） don't ascend to the parent directory. 41 | 42 | #### chrome 43 | * @http://devtoolstips.com/ 44 | * chrome 更改css类型可以按住shift键点击颜色 45 | * 在source模式下command +d 可以替换下一个 46 | * 在elemet面板的css面板的最下方有查找css属性的搜索 47 | * 在element下搜索html 可以用> 查找子元素 48 | * command + click 多列操作 49 | * 可以托动代码到编辑器 50 | * alt多列操作 51 | * command + click 定位css文件位置 52 | * shift + css 面板颜色的图片可以更改rgba hsl等 53 | * command + css 颜色前的面板可以获得页面的颜色 54 | * alt + click 节点展开多级 55 | 56 | 57 | 笔记 58 | ------------ 59 | ubuntu 安装 openSSH-server 60 | ```sudo apt-get install openssh-server``` 61 | 62 | ### httpie 63 | 64 | 查看请求头 65 | http bbs.mofang.com --headers 66 | 查看请求主体 67 | http bbs.mofang.com --body 68 | 69 | 70 | -------------------------------------------------------------------------------- /document/mobile_base.md: -------------------------------------------------------------------------------- 1 | Mobile web page 2 | ================= 3 | --------- 4 | 去除阴影 5 | input, textarea, button, a,label{ 6 | -webkit-tap-highlight-color:rgba(0,0,0,0); 7 | } 8 | 9 | 以下是规范建议，均是日常在开发当中的的一些经验，仅供参考。 10 | 11 | ## 一.头部声明 ## 12 | 13 | >1、其中width=device-width就是说把页面宽度设置成和屏幕宽度一样 14 | > 15 | 16 | 17 | >2、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用，这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 18 | > 19 | 20 | >3、meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 21 | > 22 | 23 | 24 | >4、 meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式 25 | > 26 | 27 | >5、meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 28 | > 29 | 30 | 31 | 32 | > 33 | 34 | 35 | 36 | > 37 | 38 | 39 | > forbid apple tools 40 | 41 | > 网站开启对web app程序的支持 42 | > 43 | 44 | 45 | >控制状态栏显示样式 46 | > 47 | >默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明） 48 | > 49 | 50 | >phone numer select 51 | 52 | > 53 | 54 | >添加到桌面时有圆角 http://iconogen.com/ 55 | 56 | > 57 | 58 | >不带高光显示 59 | > 60 | 61 | 62 | > iPad (portrait) SPLASHSCREEN 63 | > 64 | 65 | >###3、当前移动主站上用到的声明：### 66 | 67 | > 68 | 69 | 70 | 71 | 魔方 72 | 73 | 74 | 75 | 76 | 77 | 78 | ##二、字体设置## 79 | 80 | >###1、使用无衬线字体### 81 | > 82 | body { 83 | font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 84 | } 85 | 86 | >iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5484?viewlocale=en_US)， 但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体-简或黑体-繁 87 | 88 | > 89 | Heiti SC Light 黑体-简 细体 90 | Heiti SC Medium 黑体-简 中黑 91 | Heiti TC Light 黑体-繁 细体 92 | Heiti TC Medium 黑体-繁 中黑 93 | 94 | >原生Android下中文字体与英文字体都选择默认的无衬线字体 95 | > 96 | 4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback 97 | 4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体 98 | 其他第三方 Android 系统也一致选择默认的无衬线字体 99 | 100 | >下面区分一下无衬线字体与衬线字体之间的区别 101 | 102 | > 103 | 有衬线字体英文名为： serif 104 | 无衬线字体英文名为： sans-serif 105 | 在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和Serif； 106 | Serif的意思是，在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直横的不同而有不同。相反的，Sans Serif则没有这些额外的装饰，笔画粗细大致差不多。 107 | 108 | ## 三、基础交互 ## 109 | > 设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为 110 | 111 | > 112 | a, img { 113 | -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ 114 | }# # 115 | html, body { 116 | -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ 117 | user-select: none; 118 | } 119 | 120 | ## 四、高性能Mobile Web开发 ## 121 | > 122 | >### 1、高性能CSS3动画 ### 123 | > 124 | >高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时 代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情 况，设备耗电量的情况。 125 | > 关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通 过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端，我们选择 性能更优浏览器原生实现方案：CSS3动画。 126 | 127 | > 然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。目前对提 升移动端CSS3动画体验的主要方法有几点： 128 | 129 | >1.尽可能多的利用硬件能力，如使用3D变形来开启GPU加速 130 | > 131 | -webkit-transform: translate3d(0, 0, 0); 132 | -moz-transform: translate3d(0, 0, 0); 133 | -ms-transform: translate3d(0, 0, 0); 134 | transform: translate3d(0, 0, 0); 135 | >2、如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack： 136 | > 137 | -webkit-backface-visibility: hidden; 138 | -moz-backface-visibility: hidden; 139 | -ms-backface-visibility: hidden; 140 | backface-visibility: hidden; 141 | -webkit-perspective: 1000; 142 | -moz-perspective: 1000; 143 | -ms-perspective: 1000; 144 | perspective: 1000; 145 | >3、如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性： 146 | > 147 | #ball-1 { 148 | transition: -webkit-transform .5s ease; 149 | -webkit-transform: translate3d(0, 0, 0); 150 | } 151 | #ball-1.slidein { 152 | -webkit-transform: translate3d(500px, 0, 0); 153 | } 154 | #ball-2 { 155 | transition: left .5s ease; 156 | left: 0; 157 | } 158 | #ball-2.slidein { 159 | left: 500px; 160 | } 161 | 162 | >注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡 163 | >###2、尽可能少的使用box-shadows与gradients### 164 | >box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧 165 | >###3、尽可能的让动画元素不在文档流中，以减少重排### 166 | > 167 | position: fixed; 168 | position: absolute; 169 | >###4、优化 DOM layout 性能### 170 | >我们从实例开始描述这个主题： 171 | >这是两段能力上完全等同的代码，显式的差异正如我们所见，只有执行顺序的区别。但真是如此吗？下面是加了说明注释的代码版本，很好的阐述了其中的进一步差异： 172 | > 173 | // 触发两次 layout 174 | var newWidth = aDiv.offsetWidth + 10; // Read 175 | aDiv.style.width = newWidth + 'px'; // Write 176 | var newHeight = aDiv.offsetHeight + 10; // Read 177 | aDiv.style.height = newHeight + 'px'; // Write 178 | > 179 | // 只触发一次 layout 180 | var newWidth = aDiv.offsetWidth + 10; // Read 181 | var newHeight = aDiv.offsetHeight + 10; // Read 182 | aDiv.style.width = newWidth + 'px'; // Write 183 | aDiv.style.height = newHeight + 'px'; // Write 184 | 185 | > 从注释中可找到规律，连续的读取offsetWidth/Height属性与连续的设置width/height属性，相比分别读取设置单 个属性可少触发一次layout。 186 | > 187 | > 从结论看似乎与执行队列有关，没错，这是浏览器的优化策略。所有可触发layout的操作都会被暂时放入 layout-queue 中，等到必须更新的时候，再计算整个队列中所有操作影响的结果，如此就可只进行一次的layout， 从而提升性能。 188 | 189 | > 关键一，可触发layout的操作，哪些操作下会layout的更新（也称为reflow或者relayout）？ 190 | 191 | > 我们从浏览器的源码实现入手，以开源Webkit/Blink为例， 对layout的更新，Webkit 主要通过 Document::updateLayout 与 Document::updateLayoutIgnorePendingStylesheets 两个方法： 192 | 193 | ##五、CSS动画属性性能## 194 | > CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite 195 | > 196 | > Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite 197 | > 198 | div { 199 | -webkit-animation-duration: 5s; 200 | -webkit-animation-name: move; 201 | -webkit-animation-iteration-count: infinite; 202 | -webkit-animation-direction: alternate; 203 | width: 200px; 204 | height: 200px; 205 | margin: 100px; 206 | background-color: #808080; 207 | position: absolute; 208 | } 209 | > 210 | @-webkit-keyframes move{ 211 | from { 212 | left: 100px; 213 | } 214 | to { 215 | left: 200px; 216 | } 217 | } 218 | ##六、布局技巧## 219 | > box-sizing 220 | 221 | > 行内图片 222 | 223 | > 背景图片 224 | 225 | > 媒体查询 226 | 227 | > flex rem 的使用 228 | 229 | ##七、移动端JS库的使用## 230 | > 231 | SwipeJS Slide show 232 | DeviceJS device check 233 | ZeptoJS Min version jQuery 234 | iscroll scroll lib 235 | FastClick 解决zeptoJS tap 点透，提升click 点击 236 | 237 | >http://www.wheattime.com/increase-your-sites-performance-with-hardware-accelerated-css.html 238 | 239 | 240 | QA transition 抖动 241 | 242 | 开启硬件加速 243 | 244 | .cube { 245 | -webkit-transform: translateZ(0); 246 | -moz-transform: translateZ(0); 247 | -ms-transform: translateZ(0); 248 | -o-transform: translateZ(0); 249 | transform: translateZ(0); 250 | /* Other transform properties here */ 251 | } 252 | 253 | 254 | -------------------------------------------------------------------------------- /document/ng-flow-使用文档.md: -------------------------------------------------------------------------------- 1 | ng-flow 使用文档 2 | ============== 3 | **tbms**业务中，大量使用到上传，包括文件上传，图片上传等，ng-flow是一款相当不错的插件，是基于`flow.js`扩展的一款`angular`组件。 4 | 5 | 总结入门文档如下： 6 | 7 | **repo** : [ng-flow](https://github.com/flowjs/ng-flow) 8 | 9 | ###模块依赖 10 | ``` 11 | angular.module('app', ['flow']) 12 | ``` 13 | 14 | ####directive使用 （三种`html`使用方式） 15 | **TODO** 尽量不要用`a`去做`ng-flow`的按钮，因为`a`有默认行为 16 | 17 | ``` 18 | 19 | 20 | 上传我 21 | 22 | ``` 23 | ###上传块的结构 24 | 25 | 26 | ``` 27 | 28 | //（每一个flow-init都可以定义多个块，互相不影响)， 29 | // 且上传所有信息都要包含在这块`flow-init`大块中 30 |
33 | 34 | Upload File 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
{{$index+1}}{{file.name}}{{file.msg}}
43 |
44 | ``` 45 | 46 | ###配置参数 47 | ``` 48 | //可以选择在js初始化，也可以选择在directive中初始化 49 | var app = angular.module('app', ['flow']) 50 | .config(['flowFactoryProvider', function (flowFactoryProvider) { 51 | flowFactoryProvider.defaults = { 52 | target: UPLOAD, 53 | permanentErrors: [404, 415, 500, 501], //出错状态码 54 | successStatuses: [200, 201, 202], //成功状态码 55 | maxChunkRetries: 1, //上传失败重试次数 56 | chunkRetryInterval: 5000, //上传超时 57 | simultaneousUploads: 4, //最多上传文件 58 | testChunks: false, //上传method true为GET 59 | singleFile:true, //只能上传一个文件 60 | allowDuplicateUploads:true 61 | 62 | }; 63 | // You can also set default events: 64 | flowFactoryProvider.on('catchAll', function (event) { 65 | ... 66 | }); 67 | // Can be used with different implementations of Flow.js 68 | // flowFactoryProvider.factory = fustyFlowFactory; 69 | }]); 70 | 71 | //在directive中初始化，默认会执行flow-init 72 |
73 | 74 |
75 | ``` 76 | ###自定义回调函数 77 | ``` 78 | //通过在directive中定义,在controller中使用 79 |
86 | 87 | 88 | 89 | 选择文件 90 | 91 |
92 | ``` 93 | ``` 94 | //controller 95 | vm.uploader = { 96 | //当文件增加时 97 | addedType: function(file,type) { 98 | //类型判断 99 | if(type != "xls" && type != "xlsx") { 100 | tui.alert("请上传excel格式文件") 101 | return false; 102 | } 103 | return true; 104 | //大小判断 105 | //if (file.size > 1024*1024) { 106 | //tui.alert("文件过大") 107 | //return false; 108 | //} 109 | //return true; 110 | }, 111 | //当文件上传成功时 112 | successController: function ($flow, $file, $message) { 113 | console.log($message) 114 | var resultJSON = angular.fromJson($message) || {}; 115 | if(!resultJSON.data) { 116 | tui.alert("服务器出错"); 117 | return; 118 | } 119 | }, 120 | //上传出错时 121 | uploadError: function (flow) { 122 | }, 123 | //上传控制器出错时 124 | errorController: function ($flow,$message,$file) { 125 | //FIX 否则不会上传重复文件 126 | $file.cancel() 127 | }, 128 | cancel : function($flow,index) { 129 | $flow.files[index].cancel(); 130 | } 131 | }; 132 | ``` 133 | ``` 134 | //在controller中监听 135 | $scope.$on('flow::fileAdded', function (event, $flow, flowFile) { 136 | event.preventDefault();//prevent file from uploading 137 | }); 138 | ``` 139 | ### 如何增加额外的信息 140 | 141 | ``` 142 | //option one 143 |
147 | 148 |
149 | ``` 150 | ``` 151 | //Option two: 152 |
155 |
156 | ``` 157 | ``` 158 | //Option three: 159 |
160 | 161 |
162 | function MyCtrl($scope) { 163 | $scope.config = { 164 | query: function (flowFile, flowChunk) { 165 | // function will be called for every request 166 | return { 167 | id: 2, source: 'flow_query' 168 | }; 169 | } 170 | }; 171 | } 172 | ``` 173 | ### 兼容老的浏览器 174 | 175 | ``` 176 | var app = angular.module('app', ['flow']) 177 | .config(['flowFactoryProvider', function (flowFactoryProvider) { 178 | flowFactoryProvider.factory = fustyFlowFactory; 179 | }]); 180 | ``` 181 | ### Tips: 182 | 1. 我在使用时，一般都不用去操作他默认的`$files`文件对象，因为在业务内上传是单独的接口。 183 | 而且我也不关心上传文件的内容，我只需要传给后端，拿到对应的`url`，来做逻辑。 184 | 所以一般我会把上传成功之后拿到的数据对应到`$scope`,通过对`$scope`的操作来映射`ng-flow` 185 | 2. 官方提供的示例是很好的教程可以借鉴。 186 | 3. **TBMS**业务中，**供应商管理模块**，**行程模块**，**目的地模块**，**图片管理模块**，都有用到可以review 187 | 4. `flow-attrs="{accept:'image/*'}"` **html5** 支持只允许上传图片 188 | -------------------------------------------------------------------------------- /document/sass.md: -------------------------------------------------------------------------------- 1 | sass、Compass 安装使用 2 | ============ 3 | ## 下载安装包 4 | ruby http://www.rubyinstaller.org/downloads/ 5 | devkithttp://rubyinstaller.org/downloads/ 6 | 7 | ## 安装ruby 8 | 9 | 修改ruby gem 镜像(http://ruby.taobao.org/) 10 | $ gem sources --remove https://rubygems.org/ 11 | $ gem sources -a http://ruby.taobao.org/ 12 | $ gem sources -l 13 | *** CURRENT SOURCES *** 14 | http://rubyforge.org/frs/?group_id=167 15 | http://ruby.taobao.org 16 | # 请确保只有 ruby.taobao.org 17 | 18 | ## 安装带有sourcemap的版本 （cmd 命令下） 19 | 20 | 如果以前安装过则先卸载 21 | 22 | gem uninstall sass 23 | gem uninstall compass 24 | gem uninstall compass -rails 25 | 26 | 安装开发版sass 和compass 27 | 28 | gem install sass --pre 29 | gem install compass-core --pre 30 | gem install compass --pre 31 | 32 | 查看是否成功 33 | sass --sourcemap --compass --watch sass file 34 | chrome控制台自动支持，查看是否有sass源文件 35 | 36 | 37 | ## gem 常用命令 38 | 39 | 更新gem 40 | $ gem update -system 41 | 卸载包 42 | $ gem uninstall package 43 | 更新所有包 44 | $ gem update 45 | 列出所有本地包 46 | $ gem list 47 | 48 | 49 | ## 常见出现问题 50 | 51 | ruby build 报错 52 | 下载devkit，cmd进入windows命令操作，进入devkit的文件夹下，执行下面的操作： 53 | ruby dk.rb init 54 | ruby dk.rb install 55 | 56 | ## 相关文档 57 | 58 | [Compass]:http://compass-style.org/ 59 | [Sass]:http://sass-lang.com/ 60 | [Compass] - Compass doc 61 | [Sass] - Sass doc 62 | 63 | ## 小指南 64 | 65 | 1.模块化代码（开发的时候多人合作，可以模块化代码，然后能过sass导入） 66 | 67 | @import module 68 | @import module2 69 | 70 | 2.监听sass文件，发布sourcemap到指定的目录 71 | 72 | //单文件监听 73 | sass --watch --compass --sourcemap src/sass/file.sass:file.css 74 | 75 | //多文件监听 76 | sass --watch --compass --sourcemap src/sass:build/css 77 | 78 | //将css 转成scss 79 | sass-convert style.css style.scss 80 | 81 | //解析后的格试设置 `--style` 四种取值分别为：nested，'expanded'，compact，compressed 82 | sass --watch style.scss:style.css --style compact 83 | sass --watch style.scss:style.css --sourcemap 84 | sass --watch style.scss:style.css --style expanded --sourcemap 85 | sass --watch style.scss:style.css --debug-info 86 | // 工作中使用的`command` 87 | sass --watch --sourcemap --style expanded --compass sass:css 88 | 89 | 3.sass和scss互相转换 90 | sass-convert style.sass style.scss 91 | sass0cibvert style.scss style.sass 92 | 93 | 4.使用compass validate检查你的css 94 | 如果没有安装会提示你安装 95 | 96 | -------------------------------------------------------------------------------- /document/soft.md: -------------------------------------------------------------------------------- 1 | 编译安装指南 2 | ======================= 3 | --------------- 4 | ### 所需软件及插件 5 | 6 | 安装node.js 7 | npm install -g phonegap 8 | npm install -g cordova 9 | 10 | ant apache download http://ant.apache.org/bindownload.cgi 11 | android sdk http://developer.android.com/sdk/index.html 12 | android ndk https://developer.android.com/tools/sdk/ndk/index.html 13 | cocos2d-x-2.2.2 http://www.cocos2d-x.org/download 14 | 15 | Eclipse https://www.eclipse.org/downloads/ 16 | JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 17 | eclipse 插件(help install new soft) 18 | ADT https://dl-ssl.google.com/android/eclipse/ 19 | CDT http://download.eclipse.org/tools/cdt/releases/kepler 20 | 21 | ### 环境变量配置 22 | 23 | #### 新建环境变量 24 | 25 | ANT_HOME {yourpath} apache-ant-1.9.3 26 | JAVA_HOME {yourpath} jdk 27 | NDK_ROOT {android-ndk-r9c} 28 | 29 | #### 加入PATH 30 | 31 | D:\jdk\bin; 32 | E:\TDDownload\andr\adt-bundle-windows-x86-20131030\sdk\tools; 33 | %ANT_HOME%\bin; 34 | E:\TDDownload\andr\adt-bundle-windows-x86-20131030\sdk\platform-tools 35 | 36 | ### 资源 37 | 38 | #### cordova.apache 编译指南 39 | http://cordova.apache.org/docs/zh/edge/guide_overview_index.md.html#%E6%A6%82%E8%BF%B0 40 | 41 | #### phonegap 编译指南 42 | http://www.dotblogs.com.tw/maplenote/archive/2014/01/16/phonegap_android_install.aspx 43 | 44 | ####Cocos2D-HTML5 JSBinding Android编译指南 45 | http://software.intel.com/zh-cn/blogs/2013/03/11/cocos2d-html5-jsbinding-android 46 | 47 | 48 | -------------------------------------------------------------------------------- /document/vim.md: -------------------------------------------------------------------------------- 1 | ## Record 2 | 3 | #### Vim 配置自定义比较工具 4 | 5 | git config --global diff.tool vimdiff 6 | git config --global difftool.prompt false 7 | git config --global alias.d difftool` 使用时`git d file1 8 | 9 | #### Vim 比较命令 10 | vimdiff mvimdiff gvimdiff 11 | :vertical diffsplit FILE_RIGHT 12 | 13 | #### Vimdiff charset 14 | 15 | ]c : - next difference 16 | [c : - previous difference 17 | do - diff obtain 与dp相反把另一个文件的差异复制到当前文件do (diff "get"，之所以不用dg，是因为dg已经被另一个命令占用了) 18 | dp - diff put 当前文件的差异复制到另一个文件 19 | zo - open folded text 20 | zc - close folded text 21 | :diffupdate - re-scan the files for differences 重新比较文件 22 | 23 | #### Vim 命令 24 | 25 | VU 整行大写 26 | g~~ 整行大小写反转 27 | vEU 单词转为大写 28 | vE~ 单词大小写反转 29 | ggguG 所有文本小写 30 | gggUG 所有文本大写 :browse e 图像化文件浏览器 31 | :1,10 w outfile 1到10行内容写到outfile 32 | :1,10 w >> outfile 1到10行内容追加到outfile 33 | :r infile 插入文件内容 34 | :23r infile 插入文件23行的内容 35 | grep class **/*.tpl 在所有tpl文件里查找class 36 | gf 打开光标下文件名对应的文件 37 | :bn 和 :bp → 你可以同时打开很多文件，使用这两个命令来切换下一个或上一个文件。（陈皓注：我喜欢使用:n到下一个文件） 38 | ctrl + V = → 自动给缩进 （陈皓注：这个功能相当强大，我太喜欢了） 39 | 40 | :vimgrep /SearchItem/ **/*.scss grep文件 41 | 42 | #### vim正则匹配 43 | 44 | :%s/str1/str2/ 用字符串 str2 替换行中首次出现的字符串 str1 45 | :s/str1/str2/g 用字符串 str2 替换行中所有出现的字符串 str1 46 | :.,$ s/str1/str2/g 用字符串 str2 替换正文当前行到末尾所有出现的字符串 str1 47 | :1,$ s/str1/str2/g 用字符串 str2 替换正文中所有出现的字符串 str1 48 | :g/str1/s//str2/g 功能同上 49 | :m,ns/str1/str2/g 将从m行到n行的str1替换成str2 50 | 51 | * 将空格转化为制表符的命令则恰好相反： 52 | :set noexpandtab 53 | :%retab! 54 | 55 | * 制表符转空格 56 | :set expandtab 57 | :%retab 58 | * 排版注释 59 | gq]/ 60 | 61 | 62 | ### vim 笔记 63 | #### vim 分为普通模式、插入模式、命令模式 64 | 查看自己是什么模式 "``` :set showmode ``` " 65 | (搞不清模式的清况下，可以连续按esc键) 66 | 67 | ### 新建打开文件 68 | * ``` gvim file.txt ``` 69 | * ``` edit foot.txt ``` 70 | * ``` gvim one.c two.c ``` (** 同时编辑多个文件，默认会先打开第一个,【:next :previous :last :first 则打开第二个** :wnext) 71 | * ``` args five.c six.c sever.h ``` (编辑另一个文件列表) 72 | * ``` vim -R file ``` (只读文件打开) 73 | * ``` "fyy ``` (存入寄存器，寄存器粘贴"fp) 74 | * ``` gvim -M file ``` 75 | * ``` saveas moove.c ``` (修改文件名) 76 | 77 | #### 普通模式移动光标 78 | ``` h j k l ``` 79 | 80 | #### 词移动 81 | * ``` w ``` (向前移动一个单词，可以配合计数,如3w) 82 | * ``` b ``` (向后移动一个单词，原理同w) 83 | * ``` e ``` (移动到下一个单词的词末) ge 移动到前一个单词的词末 84 | * ``` $ ``` (移动到行尾,2$移动到第二行行末) 85 | * ``` ^ ``` (移动到行首) 86 | * ``` 0 ``` (移动到第一行的第一个非空字符) 87 | * ``` fx ``` (移动到一个指定字符，f是find查找的意思) F向左查找 88 | * ``` tx ``` (把光标移动到目标沉降伯前一个字符上) 89 | * ``` % ``` (匹配括号) 90 | * ``` G ``` (移动到文件末) 91 | * ``` gg ``` (移动到文件首) 92 | * ``` ctrl + g ``` (确定当前位置) 93 | * ``` `` ``` (使用标记跳回去原来的地方) 94 | #### 删除字符 95 | * ``` x ``` (删除一个字符) 96 | * ``` X ``` (删除光标左边一个字符) 97 | * ``` dd ``` (删除一行) 98 | * ``` cc ``` (修改一行) 99 | * ``` J ``` (删除换行符，其实等于合并成一行) 100 | * ``` dw ``` (删除一个单词) 101 | * ``` daw ``` (删除一个单词) 102 | * ``` D ``` (删除到行尾) 103 | * ``` D ``` (删除到行尾) 104 | * ``` S ``` (修改一整行) 105 | * ``` s ``` (修改一个字符) 106 | * ``` de ``` (删除一个单词) 107 | * ``` cw ``` (修改一个词组) 108 | * ``` r ``` (替换单个字符) 109 | * ``` . ``` (重复执行操作) 110 | * ``` xp ``` (交换两个字符) 111 | 112 | #### 粘贴复制 113 | * ``` y ``` (复制，yw 复制一个单词，yy 复制一行 Y) 114 | * ``` p ``` (粘贴) 115 | * ``` *yy ``` (拷贝一行到剪贴板) 116 | * ``` *p ``` (粘贴) 117 | 118 | #### 撤销与重做 119 | *``` u``` (撤销操作) U (行撤销) 120 | * ``` ctrl + r ``` (是你撤销过多，重做) 121 | 122 | #### 插入 123 | * ``` i ``` (在光标前插入) I (在行首) 124 | * ``` a ``` (在光标后插入) A (在行末) 125 | 126 | #### 新行 127 | * ``` o ``` (在光标下方插入新的空行) O (在光标的止方插入新的空行) 128 | 129 | #### 指定计数 130 | * 用在很多地方(比如向上移动10行，则可以用10k，插入3个！！！，则可以用3a! esc) 131 | 132 | #### 退出 133 | * ``` zz ``` (保存文件并退出) 134 | * ``` q! ``` (放弃之前的修改，并退出) 135 | * ``` q ``` (提示退出) 136 | 137 | #### 滚屏 138 | * ``` ctrl + u ``` (向上滚) 139 | * ``` ctrl + d ``` (向下滚) 140 | * ``` ctrl + e ``` (向下滚) 141 | * ``` ctrl + f ``` (正向滚动一整屏) 142 | * ``` ctrl + b ``` (反向滚支一整屏) 143 | * ``` zz ``` (光标处于屏幕中间) 144 | 145 | #### 自定义标记(强大) 146 | * ``` ma ``` (用a标记当前光标的位置) 147 | 148 | #### 查找 149 | * ``` "/String" ``` (查找指定的字符串，使用n则找到下一个) 150 | * ``` "?String" ``` (反向查找) 151 | * ``` "*" ``` (把光标定位到要查找的单词然后shift + *) 152 | * ``` "#" ``` (与*号相同) 153 | #### 可视模式 154 | * ``` v ``` 进入可视模式 155 | * ``` V ``` 选择一行 156 | * ``` o ``` (选择模式下按o来选择一端，还是另一端) 157 | *``` ctrl + q ``` 块选关闭所有窗口择 158 | 159 | #### 命令 160 | * ``` set ruler ``` 161 | * ``` set number nonumber ``` 162 | * ``` set ignorecase ``` 163 | * ``` set backgroun=dark ``` 164 | * ``` set hlsearch ``` 165 | * ``` colorscheme evening ``` 166 | * ``` args ``` (查看文件列表) 167 | * ``` set autowrite ``` (自动保存) 168 | * ``` write >> files ``` (追加到文件) 169 | * ``` set modifiable ``` (去掉保护) 170 | * ``` set write ``` 171 | * ``` split ``` (分窗口,close关闭窗口：only关闭所有窗口 new 编辑一个新文件，接收计算例如3split demo.c) 172 | * ``` ctrl + w + "+" ``` (改变窗口大小) 173 | * ``` ctrl + w ``` (切换分割窗口，加入方向键 h j k l) 174 | * ``` vsplit ``` (垂直分割) 175 | * ``` ctrl + w + K ``` (移动窗口) 176 | * ``` qall ``` (关闭所有窗口) 177 | * ``` vertical diffsplit main.c ``` 178 | * ``` tabedit files ``` (tab页) 179 | * ``` set noscrollbind ``` (禁止分屏光标跟随) 180 | * ``` e : $MYVIMRC 181 | * ``` buffers ``` 查看缓存区 buffer num 打开缓存文件 182 | 183 | 184 | :bn -- buffer列表中下一个 buffer 185 | :bp -- buffer列表中前一个 buffer 186 | :b# -- 你之前所在的前一个 buffer 187 | 188 | vimwiki 189 | ww 在当前窗口打开维基首页 190 | wt 在新tab打开维基首页 191 | ww 打开/新建当天日记 192 | wt 在新tab打开/新建当天日记 193 | ws 选择维基项目（详见下面的“多个维基项目”一节） 194 | map :VimwikiAll2HTML 195 | map :Vimwiki2HTML 196 | 197 | 在vim中，有时需要将tab转换成space。使用ret命令（replace tab）。 198 | [range]ret[ab]! [new-tabstop] 199 | 200 | 举例：将第一行到文件尾的tab转换成space，每个tab用4个space替代。 201 | :set expandtab 202 | :%ret! 4 203 | 如果没有给定4，则用当前的tab宽度设定替换为space。 204 | 205 | 其它相关命令： 206 | :set tabstop=4 设定tab宽度为4个字符 207 | :set shiftwidth=4 设定自动缩进为4个字符 208 | :set expandtab 用space替代tab的输入 209 | :set noexpandtab 不用space替代tab的输入 210 | ----- end 80 page ------ 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 以前用editplus的时候,有一个在文件中查找的功能,可以在所有打开的文件中查找字符串,也可以在某一个目录及它的子目录中查找.那么在VIM中是否也有相关的功能呢?答案当然是肯定的.VIM中有个类似grep的命令,叫做vimgrep,语法如下: 219 | :vimgrep /{pattern}/[g][j] {file} ... 220 | 简单来讲,就是在路径和文件命符合{file}的所有文件中,查找符合{pattern}的字符串.(查找的结果可以用:copen命令打开quickfix列表查看). 221 | 没有参数g的话,则行只查找一次关键字.反之会查找所有的关键字. 222 | 没有参数j的话,查找后,VIM会跳转至第一个关键字所在的文件.反之,只更新结果列表(quickfix). 223 | 224 | 洒家再给几个例子,比方 225 | :vimgrep /the menu/ *.php 226 | 227 | 表示在当前目录下的扩展名为php的所有文件中,查找字符串"the menu". 228 | 229 | :vimgrep /the menu/ ./includes/*.* 230 | 231 | 表示在当前目录中的"includes"目录里的所有文件中,查找字符串"the menu". 232 | 233 | 如果要在当前目录及其子目录中查找怎么办呢?也好办 234 | :vimgrep /the menu/ **/*.* 235 | 236 | 用这句就可以了. 237 | 238 | 查找时{pattern}可用正则表达式,使用起来和'/'命令是一样的,就不多说了. 239 | 240 | 查找的结果可以用":copen"命令查看,在列表里,将光标移动至相应的位置,按回车就打开对应的文件了. 241 | 注: 242 | 243 | :copen 打开quickfix 244 | 245 | :cclose 关闭quickfix 246 | 247 | :cc 是在转到当前查找到的位置 248 | :cn 转到下一个位置 249 | :cp 转到前一个位置 250 | 251 | 当然,用grep同样可以达到这个效果,不过用vimgrep的好处就是与系统无关,能适用于所有系统的VIM,而且能自动识别文件编码和换行.嘿嘿,VIM就是你用的越多就越能感觉到它的强大了. 252 | gD 跳到第一次引用的地方 253 | gd 只在当前函数查找 254 | marker 建立标记 m1 建立1 m2 建立2 使用`1 `2跳转 255 | makes 查看标记 256 | gf 跳到连接的文件 257 | ctrl + z stop vim open shell 258 | fg commint 打开 stop vim- 259 | 排版注释 260 | gq]/ 261 | :command 列出用户定义命令 262 | vimgrep /匹配模式/[g][j] 要搜索的文件/范围 263 | g：表示是否把每一行的多个匹配结果都加入 264 | j：表示是否搜索完后定位到第一个匹配位置 265 | vimgrep /pattern/ % 在当前打开文件中查找 266 | vimgrep /pattern/ * 在当前目录下查找所有 267 | vimgrep /pattern/ ** 在当前目录及子目录下查找所有 268 | vimgrep /pattern/ *.c 查找当前目录下所有.c文件 269 | vimgrep /pattern/ **/* 只查找子目录 270 | 271 | cn 查找下一个 272 | cp 查找上一个 273 | copen 打开quickfix 274 | cw 打开quickfix 275 | cclose 关闭qucikfix 276 | help vimgrep 查看vimgrep帮助]] 277 | 278 | 279 | vimgrep 280 | http://blog.csdn.net/qilihechuncai/article/details/8587389 281 | 282 | " Amazing custom search command. Thansk to Ingo: http://stackoverflow.com/a/24818933/1147859 283 | "vommand -nargs=+ Se execute 'vimgrep /' . [][0] . '/ **/*.' . [][1] 284 | "vim -u ~/.vimrc.basic 285 | "还有一个值得知道的技巧，在 Vim 中键入 CTRL-Z 会将 Vim 临时挂起并返回其父进程（多数情况下就是 Terminal Shell），之后在终端里输入 fg 回车之后会回到 Vim。这个技巧有助于你快捷的往返于 Vim 和 终端之间。如果你不方便按 CTRL-Z（比如 Windows……），可以用命令 :st[op] 或 :sus[pend] 代替。 286 | " 287 | 288 | -------------------------------------------------------------------------------- /js/cons.js: -------------------------------------------------------------------------------- 1 | console.log(2); 2 | -------------------------------------------------------------------------------- /js/device.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var previousDevice, _addClass, _doc_element, _find, _handleOrientation, _hasClass, _orientation_event, _removeClass, _supports_orientation, _user_agent; 3 | 4 | previousDevice = window.device; 5 | 6 | window.device = {}; 7 | 8 | _doc_element = window.document.documentElement; 9 | 10 | _user_agent = window.navigator.userAgent.toLowerCase(); 11 | 12 | device.ios = function() { 13 | return device.iphone() || device.ipod() || device.ipad(); 14 | }; 15 | 16 | device.iphone = function() { 17 | return _find('iphone'); 18 | }; 19 | 20 | device.ipod = function() { 21 | return _find('ipod'); 22 | }; 23 | 24 | device.ipad = function() { 25 | return _find('ipad'); 26 | }; 27 | 28 | device.android = function() { 29 | return _find('android'); 30 | }; 31 | 32 | device.androidPhone = function() { 33 | return device.android() && _find('mobile'); 34 | }; 35 | 36 | device.androidTablet = function() { 37 | return device.android() && !_find('mobile'); 38 | }; 39 | 40 | device.blackberry = function() { 41 | return _find('blackberry') || _find('bb10') || _find('rim'); 42 | }; 43 | 44 | device.blackberryPhone = function() { 45 | return device.blackberry() && !_find('tablet'); 46 | }; 47 | 48 | device.blackberryTablet = function() { 49 | return device.blackberry() && _find('tablet'); 50 | }; 51 | 52 | device.windows = function() { 53 | return _find('windows'); 54 | }; 55 | 56 | device.windowsPhone = function() { 57 | return device.windows() && _find('phone'); 58 | }; 59 | 60 | device.windowsTablet = function() { 61 | return device.windows() && _find('touch'); 62 | }; 63 | 64 | device.fxos = function() { 65 | return _find('(mobile; rv:') || _find('(tablet; rv:'); 66 | }; 67 | 68 | device.fxosPhone = function() { 69 | return device.fxos() && _find('mobile'); 70 | }; 71 | 72 | device.fxosTablet = function() { 73 | return device.fxos() && _find('tablet'); 74 | }; 75 | 76 | device.mobile = function() { 77 | return device.androidPhone() || device.iphone() || device.ipod() || device.windowsPhone() || device.blackberryPhone() || device.fxosPhone(); 78 | }; 79 | 80 | device.tablet = function() { 81 | return device.ipad() || device.androidTablet() || device.blackberryTablet() || device.windowsTablet() || device.fxosTablet(); 82 | }; 83 | 84 | device.portrait = function() { 85 | return Math.abs(window.orientation) !== 90; 86 | }; 87 | 88 | device.landscape = function() { 89 | return Math.abs(window.orientation) === 90; 90 | }; 91 | 92 | device.noConflict = function() { 93 | window.device = previousDevice; 94 | return this; 95 | }; 96 | 97 | _find = function(needle) { 98 | return _user_agent.indexOf(needle) !== -1; 99 | }; 100 | 101 | _hasClass = function(class_name) { 102 | var regex; 103 | regex = new RegExp(class_name, 'i'); 104 | return _doc_element.className.match(regex); 105 | }; 106 | 107 | _addClass = function(class_name) { 108 | if (!_hasClass(class_name)) { 109 | return _doc_element.className += " " + class_name; 110 | } 111 | }; 112 | 113 | _removeClass = function(class_name) { 114 | if (_hasClass(class_name)) { 115 | return _doc_element.className = _doc_element.className.replace(class_name, ""); 116 | } 117 | }; 118 | 119 | if (device.ios()) { 120 | if (device.ipad()) { 121 | _addClass("ios ipad tablet"); 122 | } else if (device.iphone()) { 123 | _addClass("ios iphone mobile"); 124 | } else if (device.ipod()) { 125 | _addClass("ios ipod mobile"); 126 | } 127 | } else if (device.android()) { 128 | if (device.androidTablet()) { 129 | _addClass("android tablet"); 130 | } else { 131 | _addClass("android mobile"); 132 | } 133 | } else if (device.blackberry()) { 134 | if (device.blackberryTablet()) { 135 | _addClass("blackberry tablet"); 136 | } else { 137 | _addClass("blackberry mobile"); 138 | } 139 | } else if (device.windows()) { 140 | if (device.windowsTablet()) { 141 | _addClass("windows tablet"); 142 | } else if (device.windowsPhone()) { 143 | _addClass("windows mobile"); 144 | } else { 145 | _addClass("desktop"); 146 | } 147 | } else if (device.fxos()) { 148 | if (device.fxosTablet()) { 149 | _addClass("fxos tablet"); 150 | } else { 151 | _addClass("fxos mobile"); 152 | } 153 | } else { 154 | _addClass("desktop"); 155 | } 156 | 157 | _handleOrientation = function() { 158 | if (device.landscape()) { 159 | _removeClass("portrait"); 160 | return _addClass("landscape"); 161 | } else { 162 | _removeClass("landscape"); 163 | return _addClass("portrait"); 164 | } 165 | }; 166 | 167 | _supports_orientation = "onorientationchange" in window; 168 | 169 | _orientation_event = _supports_orientation ? "orientationchange" : "resize"; 170 | 171 | if (window.addEventListener) { 172 | window.addEventListener(_orientation_event, _handleOrientation, false); 173 | } else if (window.attachEvent) { 174 | window.attachEvent(_orientation_event, _handleOrientation); 175 | } else { 176 | window[_orientation_event] = _handleOrientation; 177 | } 178 | 179 | _handleOrientation(); 180 | 181 | }).call(this); 182 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | var click = $(".click"); 3 | click.on("click",function () { 4 | alert(1); 5 | }) 6 | $(".swipe").tap(function () { 7 | alert(2); 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /mvc/Controller.js: -------------------------------------------------------------------------------- 1 | var exports = this; 2 | //var mod = {}; 3 | (function($) { 4 | var mod = {}; 5 | mod.create = function(includes) { 6 | var result = function() { 7 | //执行第个实例的init构造属性 8 | this.init.apply(this, arguments); 9 | }; 10 | 11 | result.fn = result.prototype; 12 | 13 | result.fn.init = function() {} 14 | 15 | result.proxy = function(func) { 16 | return $.proxy(func, this); 17 | } 18 | 19 | result.fn.proxy = result.proxy; 20 | //给实例继承属性或方法 21 | result.include = function(obj) { 22 | $.extend(this.fn, obj); 23 | } 24 | 25 | result.extend = function(obj) { 26 | $.extend(this, obj); 27 | } 28 | if (includes) result.include(includes); 29 | 30 | //返回对象 31 | return result; 32 | 33 | } 34 | //暴露接口 35 | exports.Controller = mod; 36 | 37 | })(jQuery); 38 | 39 | var exports = this; 40 | 41 | jQuery(function($) { 42 | exports.SearchView = Controller.create({ 43 | //把jquery对象映射成js对象 44 | elements: { 45 | "input[type=search]": "searchInput", 46 | "form": "searchForm" 47 | }, 48 | 49 | //要绑定的事件 50 | events: { 51 | "submit form": "search" 52 | }, 53 | 54 | init: function(element) { 55 | 56 | this.el = $(element); 57 | this.refreshElements(); 58 | this.delegateEvents(); 59 | }, 60 | 61 | search: function() { 62 | alert("Searching: " + this.searchInput.val()); 63 | return false; 64 | }, 65 | 66 | // Private 67 | //映射helper 68 | $: function(selector) { 69 | return $(selector, this.el); 70 | }, 71 | 72 | //映射 73 | refreshElements: function() { 74 | for (var key in this.elements) { 75 | this[this.elements[key]] = this.$(key); 76 | } 77 | }, 78 | 79 | eventSplitter: /^(\w+)\s*(.*)$/, 80 | 81 | delegateEvents: function() { 82 | for (var key in this.events) { 83 | var methodName = this.events[key]; 84 | var method = this.proxy(this[methodName]); 85 | 86 | var match = key.match(this.eventSplitter); 87 | var eventName = match[1], 88 | selector = match[2]; 89 | 90 | if (selector === '') { 91 | this.el.bind(eventName, method); 92 | } else { 93 | //事件委托 94 | this.el.delegate(selector, eventName, method); 95 | } 96 | } 97 | } 98 | }); 99 | 100 | 101 | 102 | /* 写代码的思想好牛b */ 103 | console.dir(new SearchView("#users")); 104 | }); 105 | 106 | -------------------------------------------------------------------------------- /mvc/class.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 | 18 | 19 |
wrapper
20 | 21 |
    22 |
  • 1
    • 23 |
  • 2
    • 24 |
  • 3
    • 25 |
  • 4
    • 26 |
  • 5
    • 27 |
  • 6
    • 28 |
  • 7
    • 29 |
  • 8
    • 30 |
  • 9
    • 31 |
  • 10
    • 32 |
33 |
div
34 | 35 | 36 | 37 | 38 | 39 | 40 | 64 |
65 |
66 | 67 | 68 |
69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /mvc/class.js: -------------------------------------------------------------------------------- 1 | var Class = function(parent) { 2 | var klass = function() { 3 | 4 | /* 在实例上调用init方法 5 | * 为什么要用apply是因为想给每个实例都绑定一个init初始化方法 6 | */ 7 | 8 | this.init.apply(this, arguments); 9 | }; 10 | 11 | 12 | if(parent) { 13 | 14 | /* 15 | * 定义一个临时构造函数，让这个临时构造函数的原型对象等于父类的原型对象 16 | * 再把临时构造函数的实例引用给类的原型对象上 17 | * 从此看出只有实例的属性会被继承 18 | */ 19 | var subclass = function () {}; 20 | subclass.prototype = parent.prototype; 21 | klass.prototype = new subclass; 22 | 23 | } 24 | 25 | //更改执行上下文作用域,作用域代理函数封装 26 | 27 | klass.proxy = function (func) { 28 | var self = this; 29 | return (function() { 30 | return func.apply(self,arguments); 31 | }) 32 | } 33 | // 34 | //定义这个fn是为了方便 给实例添加属性或方法 35 | klass.fn = klass.prototype; 36 | klass.fn.proxy = klass.proxy; 37 | //定义类的别名 38 | klass.fn.parent = klass; 39 | 40 | /* 41 | * 写在类或构造函数上的方法叫表静态方法是不能被实例共享的，在JS里并 42 | * 没有这个概念，是借用的Java等面向对象的语言 43 | */ 44 | 45 | klass.extend = function(obj) { 46 | 47 | var extended = obj.extended; 48 | 49 | //拷贝属性 50 | for (var i in obj) { 51 | klass[i] = obj[i]; 52 | }; 53 | //回调函数对外提供类 54 | if (extended) extended(klass); 55 | } 56 | 57 | 58 | /* 59 | * 写在原型对象上的方法当然实例对象能拿到 60 | */ 61 | 62 | klass.include = function(obj) { 63 | 64 | var included = obj.included; 65 | 66 | //拷贝属性 67 | for (var i in obj) { 68 | klass.fn[i] = obj[i]; 69 | }; 70 | //回调函数对外提供类 71 | if (included) included(klass); 72 | } 73 | // 初始化实例 74 | klass.fn.init = function() { 75 | }; 76 | return klass; 77 | } 78 | 79 | 80 | 81 | /*var Person = new Class();//{{{ 82 | 83 | //给类增加方法 84 | Person.extend({ 85 | classFind: function () {} 86 | }) 87 | 88 | //给实例增加方法 89 | Person.include({ 90 | instanceFind: function () {} 91 | }) 92 | 93 | Person.include({ 94 | included: function (klass) { 95 | console.log(klass) 96 | } 97 | }) 98 | 99 | [> 100 | * 这样在类上就会多出来一个classFind 101 | * 在实例上多出一个instanceFind的方法 102 | * classFind是静态方法无法被实例调用到 103 | <] 104 | 105 | var person = new Person("baozi"); 106 | 107 | console.dir(person); 108 | *///}}} 109 | 110 | var Animal = new Class; 111 | 112 | 113 | /* 114 | * 给类的实例添加breath方法 115 | * */ 116 | Animal.include({ 117 | breath:function () { 118 | console.log("breath"); 119 | } 120 | }) 121 | var Cat = new Class(Animal); 122 | 123 | var tommy = new Cat 124 | //继承了Animal的breath方法 125 | //tommy.breath() 126 | //console.dir(tommy); 127 | -------------------------------------------------------------------------------- /mvc/data.json: -------------------------------------------------------------------------------- 1 | {"data":"1"} 2 | -------------------------------------------------------------------------------- /mvc/handlebars.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 47 | 48 | 49 | 50 | 77 | 81 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /mvc/model.js: -------------------------------------------------------------------------------- 1 | var Model = { 2 | inherited: function() {}, 3 | created: function() {}, 4 | prototype: { 5 | init: function() {} 6 | }, 7 | extend: function(o){ 8 | var extended = o.extended; 9 | for(var i in o) { 10 | this[i] = o[i]; 11 | } 12 | if(extended) extended(this); 13 | }, 14 | include: function(o){ 15 | var included = o.included; 16 | for(var i in o) { 17 | this.prototype[i] = o[i]; 18 | } 19 | if(included) included(this); 20 | }, 21 | create: function() { 22 | 23 | //继承了Model对象 24 | var object = Object.create(this); 25 | //Model对象别名 26 | object.parent = this; 27 | //返回继承了model prototype的新对象 28 | object.prototype = object.fn = Object.create(this.prototype); 29 | 30 | object.created(); 31 | this.inherited(object); 32 | return object; 33 | }, 34 | 35 | init: function () { 36 | var instance = Object.create(this.prototype); 37 | instance.parent = this; 38 | instance.init.apply(instance,arguments); 39 | return instance; 40 | } 41 | } 42 | Model.include({ 43 | init: function (attr) { 44 | if(attr) this.load(attr); 45 | }, 46 | load: function (attr) { 47 | for(var name in attr) { 48 | this[name] = attr[name]; 49 | } 50 | } 51 | }) 52 | Model.extend({ 53 | populate: function (values) { 54 | //debugger; 55 | this.records = {}; 56 | for(var i in values) { 57 | var record = this.init(values[i]); 58 | record.newRecord = false; 59 | this.records[record.id] = record; 60 | } 61 | } 62 | }) 63 | var User = Model.create(); 64 | var user = User.init(); 65 | console.log(user); 66 | /*$.ajax({ 67 | dataType:"json", 68 | url:"./data.json", 69 | success:function (data){ 70 | User.populate(data); 71 | //console.log(data); 72 | }, 73 | error:function () { 74 | console.log("error") 75 | } 76 | }) 77 | */ 78 | -------------------------------------------------------------------------------- /mvc/pubsub.js: -------------------------------------------------------------------------------- 1 | var Pubsub = { 2 | subscrib:function(ev,callback) { 3 | 4 | var calls = this._callbacks || (this._callbacks = {}); 5 | /* 6 | * calls = {};第一次得到第一个空对象 7 | */ 8 | 9 | //存取对应事件传进来的回调函数 10 | /* 11 | * [{"wen":"fun"},{"list":"func"}] 12 | * */ 13 | (this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback); 14 | 15 | return this; 16 | }, 17 | publish: function () { 18 | var args = Array.prototype.slice.call(arguments,0); 19 | 20 | var ev = args.shift(); 21 | 22 | var list, calls, i, l; 23 | //console.log(this._callbacks) 24 | //如果不存在对应事件对象 25 | //如果不存在以地应事件对象回调方法 26 | if(!(calls = this._callbacks)) return this; 27 | if(!(list = this._callbacks[ev])) return this; 28 | 29 | //如果存在则调用执行 30 | for(i=0, l = list.length;i < l;i++) { 31 | 32 | list[i].apply(this,args); 33 | return this; 34 | } 35 | } 36 | } 37 | Pubsub.subscrib("wen",function () { 38 | console.log("wen"); 39 | }).subscrib("list",function () { 40 | console.log("list"); 41 | }) 42 | //Pubsub.publish("wen"); 43 | -------------------------------------------------------------------------------- /rc/.bashrc: -------------------------------------------------------------------------------- 1 | source ~/.git-completion.bash 2 | set completion-ignore-case on 3 | eval "$(grunt --completion=bash)" 4 | -------------------------------------------------------------------------------- /rc/.gemrc: -------------------------------------------------------------------------------- 1 | --- 2 | :backtrace: false 3 | :bulk_threshold: 1000 4 | :sources: 5 | - http://ruby.taobao.org/ 6 | :update_sources: true 7 | :verbose: true 8 | -------------------------------------------------------------------------------- /rc/.gitconfig: -------------------------------------------------------------------------------- 1 | # git base my setting 2 | [user] 3 | email = alanerzhao@gmail.com 4 | name = baozi 5 | 6 | [alias] 7 | 8 | # add 9 | a = add # add 10 | chunkyadd = add --patch # stage commits chunk by chunk 11 | 12 | #status 13 | st = status 14 | 15 | # commit 16 | c = commit -m # commit with message 17 | ca = commit -am # commit all with message 18 | ci = commit # commit 19 | amend = commit --amend # ammend your last commit 20 | ammend = commit --amend # ammend your last commit 21 | 22 | #branch 23 | br = branch 24 | ft = fetch 25 | 26 | #rebase 27 | rb = rebase 28 | rc = rebase --continue 29 | rs = rebase --skip 30 | 31 | 32 | # checkout 33 | co = checkout # checkout 34 | nb = checkout -b # create and switch to a new branch (mnemonic: "git new branch branchname...") 35 | 36 | #diff 37 | df = diff 38 | dc = diff --cached 39 | dl = diff HEAD^ 40 | 41 | #pull && push 42 | pl = pull 43 | ps = push 44 | 45 | #log 46 | lg = log -p 47 | lol = log --graph --decorate --pretty=oneline --abbrev-commit 48 | lola = log --graph --decorate --pretty=oneline --abbrev-commit --all 49 | hist = log --pretty=format:\"%h %ad | %s%d [%an]\" --graph --date=short 50 | ign = ls-files -o -i --exclude-standard 51 | 52 | [color] 53 | 54 | ui = true 55 | 56 | [color "branch"] 57 | 58 | current = yellow reverse 59 | local = yellow 60 | remote = green 61 | 62 | [color "diff"] 63 | 64 | meta = yellow bold 65 | frag = magenta bold 66 | old = red bold 67 | new = green bold 68 | 69 | [color "status"] 70 | added = yellow 71 | changed = green 72 | untracked = cyan 73 | 74 | -------------------------------------------------------------------------------- /rc/SwitchyOptions.bak: -------------------------------------------------------------------------------- 1 | eyJjb25maWciOiJ7XCJmaXJzdFRpbWVcIjpcIjpdXCIsXCJwcm94eU1vZGVcIjpcImF1dG9cIixcImF1dG9QYWNTY3JpcHRQYXRoXCI6XCI6bWVtb3J5OlwiLFwicnVsZUxpc3RVcmxcIjpcImh0dHA6Ly9hdXRvcHJveHktZ2Z3bGlzdC5nb29nbGVjb2RlLmNvbS9zdm4vdHJ1bmsvZ2Z3bGlzdC50eHRcIixcInJ1bGVMaXN0UmVsb2FkXCI6XCI3MjBcIixcInJ1bGVMaXN0UHJvZmlsZUlkXCI6XCJHb0FnZW50XCIsXCJydWxlTGlzdEF1dG9Qcm94eVwiOnRydWUsXCJzd2l0Y2hSdWxlc1wiOnRydWUsXCJydWxlTGlzdEVuYWJsZWRcIjp0cnVlLFwicGFjU2NyaXB0RGF0YVwiOlwiXCIsXCJwcm94eVNlcnZlclwiOlwiXCIsXCJxdWlja1N3aXRjaFwiOmZhbHNlLFwicXVpY2tTd2l0Y2hUeXBlXCI6XCJiaW5hcnlcIixcInJlYXBwbHlTZWxlY3RlZFByb2ZpbGVcIjp0cnVlLFwiY29uZmlybURlbGV0aW9uXCI6ZmFsc2UsXCJydWxlc0ZpcnN0VGltZVwiOlwiO11cIixcIm1vbml0b3JQcm94eUNoYW5nZXNcIjpmYWxzZSxcInByZXZlbnRQcm94eUNoYW5nZXNcIjpmYWxzZSxcImxhc3RMaXN0VXBkYXRlXCI6XCJGcmkgTWFyIDIxIDIwMTQgMTE6Mzk6MzQgR01UKzA4MDAgKENoaW5hIFN0YW5kYXJkIFRpbWUpXCIsXCJyZWZyZXNoVGFiXCI6ZmFsc2UsXCJzdGFydHVwUHJvZmlsZUlkXCI6XCJcIixcInF1aWNrUnVsZVByb2ZpbGVJZFwiOlwiR29BZ2VudFwiLFwicXVpY2tSdWxlUGF0dGVyblR5cGVcIjpcIndpbGRjYXJkXCIsXCJwcm94eUNvbmZpZ1VybFwiOlwiOm1lbW9yeTpcIn0iLCJkZWZhdWx0UnVsZSI6IntcImlkXCI6XCJkZWZhdWx0UnVsZVwiLFwibmFtZVwiOlwiRGVmYXVsdCBSdWxlXCIsXCJ1cmxQYXR0ZXJuXCI6XCJcIixcInBhdHRlcm5UeXBlXCI6XCJ3aWxkY2FyZFwiLFwicHJvZmlsZUlkXCI6XCJkaXJlY3RcIn0iLCJwcm9maWxlcyI6IntcImZpZGRsZXJcIjp7XCJuYW1lXCI6XCJmaWRkbGVyXCIsXCJwcm94eU1vZGVcIjpcIm1hbnVhbFwiLFwicHJveHlIdHRwXCI6XCIxMjcuMC4wLjE6ODg4OFwiLFwidXNlU2FtZVByb3h5XCI6ZmFsc2UsXCJwcm94eUh0dHBzXCI6XCJcIixcInByb3h5RnRwXCI6XCJcIixcInByb3h5U29ja3NcIjpcIlwiLFwic29ja3NWZXJzaW9uXCI6NCxcInByb3h5RXhjZXB0aW9uc1wiOlwibG9jYWxob3N0OyAxMjcuMC4wLjE7IDxsb2NhbD5cIixcInByb3h5Q29uZmlnVXJsXCI6XCJcIixcImNvbG9yXCI6XCJibHVlXCIsXCJpZFwiOlwiZmlkZGxlclwifSxcIkdvQWdlbnRcIjp7XCJuYW1lXCI6XCJHb0FnZW50XCIsXCJwcm94eU1vZGVcIjpcIm1hbnVhbFwiLFwicHJveHlIdHRwXCI6XCIxMjcuMC4wLjE6ODA4N1wiLFwidXNlU2FtZVByb3h5XCI6dHJ1ZSxcInByb3h5SHR0cHNcIjpcIlwiLFwicHJveHlGdHBcIjpcIlwiLFwicHJveHlTb2Nrc1wiOlwiXCIsXCJzb2Nrc1ZlcnNpb25cIjo0LFwicHJveHlFeGNlcHRpb25zXCI6XCJsb2NhbGhvc3Q7IDEyNy4wLjAuMTsgPGxvY2FsPlwiLFwicHJveHlDb25maWdVcmxcIjpcIlwiLFwiY29sb3JcIjpcImJsdWVcIixcImlkXCI6XCJHb0FnZW50XCJ9LFwiR29BZ2VudCBQSFBcIjp7XCJuYW1lXCI6XCJHb0FnZW50IFBBQ1wiLFwicHJveHlNb2RlXCI6XCJhdXRvXCIsXCJwcm94eUh0dHBcIjpcIlwiLFwidXNlU2FtZVByb3h5XCI6dHJ1ZSxcInByb3h5SHR0cHNcIjpcIlwiLFwicHJveHlGdHBcIjpcIlwiLFwicHJveHlTb2Nrc1wiOlwiXCIsXCJzb2Nrc1ZlcnNpb25cIjo1LFwicHJveHlFeGNlcHRpb25zXCI6XCJsb2NhbGhvc3Q7IDEyNy4wLjAuMTsgPGxvY2FsPlwiLFwicHJveHlDb25maWdVcmxcIjpcImh0dHA6Ly8xMjcuMC4wLjE6ODA4Ni9wcm94eS5wYWNcIixcImNvbG9yXCI6XCJibHVlXCIsXCJpZFwiOlwiR29BZ2VudCBQSFBcIn0sXCJHb0FnZW50IFBIUDJcIjp7XCJuYW1lXCI6XCJHb0FnZW50IFBIUFwiLFwicHJveHlNb2RlXCI6XCJtYW51YWxcIixcInByb3h5SHR0cFwiOlwiMTI3LjAuMC4xOjgwODhcIixcInVzZVNhbWVQcm94eVwiOnRydWUsXCJwcm94eUh0dHBzXCI6XCJcIixcInByb3h5RnRwXCI6XCJcIixcInByb3h5U29ja3NcIjpcIlwiLFwic29ja3NWZXJzaW9uXCI6NCxcInByb3h5RXhjZXB0aW9uc1wiOlwibG9jYWxob3N0OyAxMjcuMC4wLjE7IDxsb2NhbD5cIixcInByb3h5Q29uZmlnVXJsXCI6XCJcIixcImNvbG9yXCI6XCJibHVlXCIsXCJpZFwiOlwiR29BZ2VudCBQSFAyXCJ9fSIsInF1aWNrU3dpdGNoUHJvZmlsZXMiOiJbXCJkaXJlY3RcIl0iLCJydWxlcyI6IntcIk5ldyBSdWxlM1wiOntcIm5hbWVcIjpcImdvb2dsZVwiLFwidXJsUGF0dGVyblwiOlwiKjovLyouZ29vZ2xlLmNvbS4qLypcIixcInBhdHRlcm5UeXBlXCI6XCJ3aWxkY2FyZFwiLFwicHJvZmlsZUlkXCI6XCJHb0FnZW50XCIsXCJpZFwiOlwiTmV3IFJ1bGUzXCJ9LFwiTmV3IFJ1bGUyXCI6e1wibmFtZVwiOlwiZ29vZ2xlXCIsXCJ1cmxQYXR0ZXJuXCI6XCIqOi8vKi5nb29nbGUqLmNvbS8qXCIsXCJwYXR0ZXJuVHlwZVwiOlwid2lsZGNhcmRcIixcInByb2ZpbGVJZFwiOlwiR29BZ2VudFwiLFwiaWRcIjpcIk5ldyBSdWxlMlwifSxcIm1vZmFuZ1wiOntcIm5hbWVcIjpcIm1vZmFuZ1wiLFwidXJsUGF0dGVyblwiOlwiKjovLyoubW9mYW5nLmNvbS8qXCIsXCJwYXR0ZXJuVHlwZVwiOlwid2lsZGNhcmRcIixcInByb2ZpbGVJZFwiOlwiZmlkZGxlclwiLFwiaWRcIjpcIm1vZmFuZ1wifSxcInNmXCI6e1wibmFtZVwiOlwic291cmNlZm9yZ2VcIixcInVybFBhdHRlcm5cIjpcIio6Ly8qLnNvdXJjZWZvcmdlLm5ldC8qXCIsXCJwYXR0ZXJuVHlwZVwiOlwid2lsZGNhcmRcIixcInByb2ZpbGVJZFwiOlwiR29BZ2VudFwiLFwiaWRcIjpcInNmXCJ9LFwic2YyXCI6e1wibmFtZVwiOlwic291cmNlZm9yZ2VcIixcInVybFBhdHRlcm5cIjpcIio6Ly8qLnNmLm5ldC8qXCIsXCJwYXR0ZXJuVHlwZVwiOlwid2lsZGNhcmRcIixcInByb2ZpbGVJZFwiOlwiR29BZ2VudFwiLFwiaWRcIjpcInNmMlwifSxcIk5ldyBSdWxlOFwiOntcIm5hbWVcIjpcIndpa2lwZWRpYVwiLFwidXJsUGF0dGVyblwiOlwiKjovLyoud2lraXBlZGlhLm9yZy8qXCIsXCJwYXR0ZXJuVHlwZVwiOlwid2lsZGNhcmRcIixcInByb2ZpbGVJZFwiOlwiR29BZ2VudFwiLFwiaWRcIjpcIk5ldyBSdWxlOFwifX0iLCJzZWxlY3RlZFByb2ZpbGUiOiJ7XCJpZFwiOlwiYXV0b1wiLFwibmFtZVwiOlwiW+iHquWKqOWIh+aNol1cIixcInByb3h5TW9kZVwiOlwiYXV0b1wiLFwiY29sb3JcIjpcImF1dG8tYmx1ZVwiLFwiaXNBdXRvbWF0aWNNb2RlUHJvZmlsZVwiOnRydWUsXCJwcm94eUNvbmZpZ1VybFwiOlwiOm1lbW9yeTpcIn0ifQ== -------------------------------------------------------------------------------- /scss/mobile.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 3 | sass 使用示例 4 | 5 | 1.引入一个sass 6 | example @import 'tool'; 7 | 8 | 2.引入一个css TODO ( 引入外部css文件 不建议用这种方式引用单独的css因为也会靠成下载) 9 | example @import 'normalize.css 10 | example @import '../../src/sass/mobile.base.css'; 11 | 12 | 3.引入compass框架 13 | example @import 'compass/css3'; 14 | 15 | 4.使用代码块混合 (mixin) 16 | example @include flexbox() 17 | 18 | QA 问题 19 | 20 | 1.头部声明否则会有编码问题 21 | 2.属性结束注意";" 22 | */ 23 | //@import 'compass/css3'; 24 | @import 'tool'; 25 | html { 26 | font-size: $browser-default-font-size;/* 62.5% 10 ÷ 16 × 100% = 62.5% */ 27 | } 28 | .page { 29 | @include flexbox(); 30 | & > section { 31 | @include flex(1); 32 | border:1px solid red; 33 | font-size: pxTorem(14px); 34 | @include rem-fallback(height,100); 35 | @include rem-fallback(margin,10,20); 36 | @include rem-fallback(padding,1,2,3,4); 37 | @include rem-fallback(width,20); 38 | @include rem-fallback(line-height,1.2); 39 | width: 200px; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /scss/tool.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | 4 | 5 | @function mfe-px2rem($px) { 6 | @return $px/16 + rem; 7 | } 8 | 9 | /*flexbox */ 10 | @mixin flexbox() { 11 | display: -webkit-box; 12 | display: -moz-box; 13 | display: -ms-flexbox; 14 | display: -webkit-flex; 15 | display: flex; 16 | } 17 | 18 | @mixin flex($values) { 19 | -webkit-box-flex: $values; 20 | -moz-box-flex: $values; 21 | -webkit-flex: $values; 22 | -ms-flex: $values; 23 | flex: $values; 24 | // float:left; /*QQ*/ 25 | } 26 | 27 | @mixin order($val) { 28 | -webkit-box-ordinal-group: $val; 29 | -moz-box-ordinal-group: $val; 30 | -ms-flex-order: $val; 31 | -webkit-order: $val; 32 | order: $val; 33 | } 34 | 35 | /* 36 | px to rem 37 | @include rem-fallback(height,100); 38 | @include rem-fallback(margin,10,20); 39 | @include rem-fallback(padding,1,2,3,4); 40 | @include rem-fallback(width,20) 41 | */ 42 | $browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义 43 | 44 | @function pxTorem($px){//$px为需要转换的字号 45 | @return $px / $browser-default-font-size * 1rem; 46 | } 47 | @function strip-unit($num) { 48 | @return $num / ($num * 0 + 1); 49 | } 50 | 51 | @mixin rem-fallback($property, $values...) { 52 | $max: length($values); 53 | $pxValues: ''; 54 | $remValues: ''; 55 | 56 | @for $i from 1 through $max { 57 | $value: strip-unit(nth($values, $i)); 58 | $pxValues: #{$pxValues + $value*16}px; 59 | 60 | @if $i < $max { 61 | $pxValues: #{$pxValues + " "}; 62 | } 63 | } 64 | 65 | @for $i from 1 through $max { 66 | $value: strip-unit(nth($values, $i)); 67 | $remValues: #{$remValues + $value}rem; 68 | 69 | @if $i < $max { 70 | $remValues: #{$remValues + " "}; 71 | } 72 | } 73 | 74 | #{$property}: $pxValues; 75 | #{$property}: $remValues; 76 | } 77 | /*图片比例缩放*/ 78 | /*http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios*/ 79 | /* Calculate fluid ratio based on two dimensions (width/height) */ 80 | @mixin fluid-ratio($large-size, $small-size) { 81 | $width-large: nth($large-size, 1); 82 | $width-small: nth($small-size, 1); 83 | $height-large: nth($large-size, 2); 84 | $height-small: nth($small-size, 2); 85 | $slope: ($height-large - $height-small) / ($width-large - $width-small); 86 | $height: $height-small - $width-small * $slope; 87 | padding-top: $slope * 100%; 88 | height: $height; 89 | 90 | background-size: cover; 91 | -moz-background-size: cover; /* Firefox 3.6 */ 92 | background-position: center; /* Internet Explorer 7/8 */ 93 | } 94 | 95 | figure.fluidratio { 96 | /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ 97 | @include fluid-ratio(800px 200px, 300px 150px); 98 | 99 | background-image: url(http://voormedia.com/examples/amsterdam.jpg); 100 | } 101 | --------------------------------------------------------------------------------