├── .gitignore ├── README.md ├── examples ├── api.html ├── bootstrap │ ├── css │ │ ├── bootstrap-responsive.css │ │ ├── bootstrap-responsive.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── img │ │ ├── glyphicons-halflings-white.png │ │ └── glyphicons-halflings.png │ └── js │ │ ├── bootstrap.js │ │ └── bootstrap.min.js ├── css │ ├── 960.css │ ├── main.css │ └── normalize.css ├── data │ ├── stockQuote.json │ ├── stockQuoteMore.json │ └── stockQuotePage.json ├── examples1.html ├── img │ ├── botton_g1.gif │ ├── botton_g2.gif │ ├── low_contrast_linen.png │ ├── low_contrast_linen_@2X.png │ ├── pw_maze_white.png │ └── pw_maze_white_@2X.png ├── index.html └── js │ ├── main.js │ ├── plugins.js │ └── vendor │ ├── css3-mediaqueries.js │ ├── html5shiv.js │ ├── jquery-1.9.1.min.js │ ├── json2.js │ └── modernizr-2.6.2.min.js ├── index.html └── src ├── img ├── arrow_down.png ├── arrow_up.png ├── furley_bg.png ├── furley_bg_@2X.png ├── loading.gif ├── sort-asc.png └── sort-desc.png ├── mmGrid.css ├── mmGrid.js ├── mmPaginator.css ├── mmPaginator.js └── theme └── bootstrap ├── mmGrid-bootstrap.css └── mmPaginator-bootstrap.css /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | mmGrid.iml -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 文档和示例参见 [http://lidatui.github.io/mmGrid](http://lidatui.github.io/mmGrid) 3 | 4 | -------------------------------------------------------------------------------- /examples/api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 |
25 |

mmGrid 参数列表

26 |
27 |
28 |
29 |

一、表选项

30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 |
名称可选值描述
width'auto', 500, '500px'表格宽度。参数为'auto'和以'%'结尾,表格可在调整窗口尺寸时根据父元素调整尺寸。
height'280px', 500, '500px'表格高度。如果以'%'结尾,表格可在调整窗口尺寸时根据父元素调整尺寸。如果设置为'auto'，表格显示全部行，不显示垂直滚动条
urlfalse, stringAJAX请求数据的地址。
params{}, object, function(){ return {}; }AJAX请求的参数。可以是普通对象或函数。 56 | 函数返回一个参数对象，每次调用AJAX时调用。如果返回为空则不会调用AJAX。 57 |
method'post', 'get'AJAX提交方式。
cachefalse, trueAJAX缓存。
items[], Array数据使用本地对象数组。
root'', string指定json对象的数组字段为数据。
nowrapfalse, true表格显示的数据超出列宽时是否换行。
multiSelectfalse, true数据使用本地对象数组。
fullWidthRowsfalse, truetrue:表格第一次加载数据时列伸展，自动充满表格。
checkColfalse, true表格显示checkbox
indexColfalse, true表格显示索引列
indexColWidth30表格索引列宽度
loadingText'正在载入...', string数据载入时的提示文字。
noDataText'没有数据', string没有数据时的提示文字。
loadErrorText'数据加载出现异常', string护具加载异常的提示文字。
cols[], Array数据模型。
sortName'', string排序的字段名。字段名的值为列模型设置的sortName或name中的值。
sortStatus'asc', string排序方向。
remoteSortfalse, true是否使用服务器端排序。当值为true时，sortName和sortStatus会作为参数放入AJAX请求中。
autoLoadtrue, false是否表格准备好时加载数据。
showBackboardtrue, false是否显示选项背板。
plugins[]表格插件，插件必须实现 init($mmGrid)和params()方法，参考mmPaginator
161 | 162 | 163 |

二.列选项

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 |
名称可选值描述
titlestring标题文字。
titleHtmlstring标题文字的HTML代码。
widthint标题宽度像素值，默认为100。
namestring字段名。
align'left', 'center', 'right'文字位置。
hiddenfalse, true是否隐藏列。
lockDisplayfalse, true是否锁定列的显示状态。
lockWidthfalse, true是否锁定列宽。被锁定的列不参与fitCols选项的计算。
sortablefalse, true是否可排序。
sortNamestring当sortable为true，远程排序发出的字段名，如果这个字段名为空，则发出的字段名为name的值
rendererfunction(val,item,rowIndex){ return val;}显示规则。参数: val 值, item 对象, rowIndex 行索引; 225 | 返回值: 可以是纯文本或html。 226 |
type'number'字段类型。只用于数字的本地排序。
cols[], Array数据模型。用于表头分组，目前只支持两层。
239 | 240 |

三.表操作

241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 |
名称参数描述
load{} | []如果配置过AJAX选项，则这里是AJAX参数，如果传入对象数组，则为加载本地数据。
selectedRows无参数返回选择行数据的数组。
selectedRowsIndex无参数返回选择行索引的数组。
selectint | function(item, index){ return true; } | 'all'选中参数条件的行。int: 选中索引行; function: 过滤函数, item参数为行数据, index参数为行索引; 'all': 选中所有行。
deselectint | function(item, index){ return true; } | 'all'取消选中参数条件的行。int: 取消选择索引行; function: 过滤函数, item参数为行数据, index参数为行索引; 'all': 取消选中所有行。
rows无参数返回所有行的数据数组。
rowint返回指定索引行的数据。
rowsLength无参数返回行数。
addRowitem,index添加数据到索引行，index为可选。如item为对象数组则一次添加多行。
updateRowitem,index更新数据到索引行，index为必选。一次只能更新一行。
removeRowindex移除索引行。如index为索引数组则一次移除多行。如果index为undefined则移除所有行。
303 | 304 |

四.事件

305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 327 | 328 | 329 | 330 | 331 | 334 | 335 | 336 | 337 | 338 | 341 | 342 | 343 | 344 | 345 | 348 | 349 |
名称参数描述
loadSuccessfunction(e, data){}数据加载成功后执行。
loadErrorfunction(e, data){}数据加载失败后执行。
cellSelectedfunction(e, item, rowIndex, colIndex){} 325 | 表格中的单元格被选择后执行。item：被选择单元格所在行对应的数据对象；rowIndex：行索引；colIndex：列索引。 326 |
rowInsertedfunction(e, item, index){} 332 | 表格中的数据被插入后执行。item：插入的数据对象；index：行索引。 333 |
rowUpdatedfunction(e, oldItem, newItem, index){} 339 | 表格中的数据被更新后执行。oldItem：更新前的数据对象；newItem：更新后的数据对象；index：行索引。 340 |
rowRemovedfunction(e, item, index){} 346 | 表格中的数据被删除后执行。oldItem：被删除行的数据对象；index：被删除前的行索引。 347 |
350 |
351 |
352 | Fork me on GitHub 353 | 354 | 355 | 356 | 358 | 359 | 360 | -------------------------------------------------------------------------------- /examples/bootstrap/css/bootstrap-responsive.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Responsive v2.2.2 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */@-ms-viewport{width:device-width}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.hidden{display:none;visibility:hidden}.visible-phone{display:none!important}.visible-tablet{display:none!important}.hidden-desktop{display:none!important}.visible-desktop{display:inherit!important}@media(min-width:768px) and (max-width:979px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-tablet{display:inherit!important}.hidden-tablet{display:none!important}}@media(max-width:767px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-phone{display:inherit!important}.hidden-phone{display:none!important}}@media(min-width:1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:30px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span12{width:1170px}.span11{width:1070px}.span10{width:970px}.span9{width:870px}.span8{width:770px}.span7{width:670px}.span6{width:570px}.span5{width:470px}.span4{width:370px}.span3{width:270px}.span2{width:170px}.span1{width:70px}.offset12{margin-left:1230px}.offset11{margin-left:1130px}.offset10{margin-left:1030px}.offset9{margin-left:930px}.offset8{margin-left:830px}.offset7{margin-left:730px}.offset6{margin-left:630px}.offset5{margin-left:530px}.offset4{margin-left:430px}.offset3{margin-left:330px}.offset2{margin-left:230px}.offset1{margin-left:130px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.564102564102564%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%}.row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%}.row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%}.row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%}.row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%}.row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%}.row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%}.row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%}.row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%}.row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%}.row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%}.row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%}.row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%}.row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%}.row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%}.row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%}.row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%}.row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%}.row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%}.row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%}.row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%}.row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%}.row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%}.row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%}.row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%}.row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%}.row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%}.row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%}.row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%}.row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%}.row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%}.row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%}.row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%}.row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%}.row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:30px}input.span12,textarea.span12,.uneditable-input.span12{width:1156px}input.span11,textarea.span11,.uneditable-input.span11{width:1056px}input.span10,textarea.span10,.uneditable-input.span10{width:956px}input.span9,textarea.span9,.uneditable-input.span9{width:856px}input.span8,textarea.span8,.uneditable-input.span8{width:756px}input.span7,textarea.span7,.uneditable-input.span7{width:656px}input.span6,textarea.span6,.uneditable-input.span6{width:556px}input.span5,textarea.span5,.uneditable-input.span5{width:456px}input.span4,textarea.span4,.uneditable-input.span4{width:356px}input.span3,textarea.span3,.uneditable-input.span3{width:256px}input.span2,textarea.span2,.uneditable-input.span2{width:156px}input.span1,textarea.span1,.uneditable-input.span1{width:56px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media(min-width:768px) and (max-width:979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span12{width:724px}.span11{width:662px}.span10{width:600px}.span9{width:538px}.span8{width:476px}.span7{width:414px}.span6{width:352px}.span5{width:290px}.span4{width:228px}.span3{width:166px}.span2{width:104px}.span1{width:42px}.offset12{margin-left:764px}.offset11{margin-left:702px}.offset10{margin-left:640px}.offset9{margin-left:578px}.offset8{margin-left:516px}.offset7{margin-left:454px}.offset6{margin-left:392px}.offset5{margin-left:330px}.offset4{margin-left:268px}.offset3{margin-left:206px}.offset2{margin-left:144px}.offset1{margin-left:82px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.7624309392265194%;*margin-left:2.709239449864817%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.7624309392265194%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.43646408839778%;*width:91.38327259903608%}.row-fluid .span10{width:82.87292817679558%;*width:82.81973668743387%}.row-fluid .span9{width:74.30939226519337%;*width:74.25620077583166%}.row-fluid .span8{width:65.74585635359117%;*width:65.69266486422946%}.row-fluid .span7{width:57.18232044198895%;*width:57.12912895262725%}.row-fluid .span6{width:48.61878453038674%;*width:48.56559304102504%}.row-fluid .span5{width:40.05524861878453%;*width:40.00205712942283%}.row-fluid .span4{width:31.491712707182323%;*width:31.43852121782062%}.row-fluid .span3{width:22.92817679558011%;*width:22.87498530621841%}.row-fluid .span2{width:14.3646408839779%;*width:14.311449394616199%}.row-fluid .span1{width:5.801104972375691%;*width:5.747913483013988%}.row-fluid .offset12{margin-left:105.52486187845304%;*margin-left:105.41847889972962%}.row-fluid .offset12:first-child{margin-left:102.76243093922652%;*margin-left:102.6560479605031%}.row-fluid .offset11{margin-left:96.96132596685082%;*margin-left:96.8549429881274%}.row-fluid .offset11:first-child{margin-left:94.1988950276243%;*margin-left:94.09251204890089%}.row-fluid .offset10{margin-left:88.39779005524862%;*margin-left:88.2914070765252%}.row-fluid .offset10:first-child{margin-left:85.6353591160221%;*margin-left:85.52897613729868%}.row-fluid .offset9{margin-left:79.8342541436464%;*margin-left:79.72787116492299%}.row-fluid .offset9:first-child{margin-left:77.07182320441989%;*margin-left:76.96544022569647%}.row-fluid .offset8{margin-left:71.2707182320442%;*margin-left:71.16433525332079%}.row-fluid .offset8:first-child{margin-left:68.50828729281768%;*margin-left:68.40190431409427%}.row-fluid .offset7{margin-left:62.70718232044199%;*margin-left:62.600799341718584%}.row-fluid .offset7:first-child{margin-left:59.94475138121547%;*margin-left:59.838368402492065%}.row-fluid .offset6{margin-left:54.14364640883978%;*margin-left:54.037263430116376%}.row-fluid .offset6:first-child{margin-left:51.38121546961326%;*margin-left:51.27483249088986%}.row-fluid .offset5{margin-left:45.58011049723757%;*margin-left:45.47372751851417%}.row-fluid .offset5:first-child{margin-left:42.81767955801105%;*margin-left:42.71129657928765%}.row-fluid .offset4{margin-left:37.01657458563536%;*margin-left:36.91019160691196%}.row-fluid .offset4:first-child{margin-left:34.25414364640884%;*margin-left:34.14776066768544%}.row-fluid .offset3{margin-left:28.45303867403315%;*margin-left:28.346655695309746%}.row-fluid .offset3:first-child{margin-left:25.69060773480663%;*margin-left:25.584224756083227%}.row-fluid .offset2{margin-left:19.88950276243094%;*margin-left:19.783119783707537%}.row-fluid .offset2:first-child{margin-left:17.12707182320442%;*margin-left:17.02068884448102%}.row-fluid .offset1{margin-left:11.32596685082873%;*margin-left:11.219583872105325%}.row-fluid .offset1:first-child{margin-left:8.56353591160221%;*margin-left:8.457152932878806%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:710px}input.span11,textarea.span11,.uneditable-input.span11{width:648px}input.span10,textarea.span10,.uneditable-input.span10{width:586px}input.span9,textarea.span9,.uneditable-input.span9{width:524px}input.span8,textarea.span8,.uneditable-input.span8{width:462px}input.span7,textarea.span7,.uneditable-input.span7{width:400px}input.span6,textarea.span6,.uneditable-input.span6{width:338px}input.span5,textarea.span5,.uneditable-input.span5{width:276px}input.span4,textarea.span4,.uneditable-input.span4{width:214px}input.span3,textarea.span3,.uneditable-input.span3{width:152px}input.span2,textarea.span2,.uneditable-input.span2{width:90px}input.span1,textarea.span1,.uneditable-input.span1{width:28px}}@media(max-width:767px){body{padding-right:20px;padding-left:20px}.navbar-fixed-top,.navbar-fixed-bottom,.navbar-static-top{margin-right:-20px;margin-left:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;width:auto;clear:none;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}.thumbnails>li{float:none;margin-left:0}[class*="span"],.uneditable-input[class*="span"],.row-fluid [class*="span"]{display:block;float:none;width:100%;margin-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.span12,.row-fluid .span12{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="offset"]:first-child{margin-left:0}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}.controls-row [class*="span"]+[class*="span"]{margin-left:0}.modal{position:fixed;top:20px;right:20px;left:20px;width:auto;margin:0}.modal.fade{top:-100px}.modal.fade.in{top:20px}}@media(max-width:480px){.nav-collapse{-webkit-transform:translate3d(0,0,0)}.page-header h1 small{display:block;line-height:20px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.media .pull-left,.media .pull-right{display:block;float:none;margin-bottom:10px}.media-object{margin-right:0;margin-left:0}.modal{top:10px;right:10px;left:10px}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media(max-width:979px){body{padding-top:0}.navbar-fixed-top,.navbar-fixed-bottom{position:static}.navbar-fixed-top{margin-bottom:20px}.navbar-fixed-bottom{margin-top:20px}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-right:10px;padding-left:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 10px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#777;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:9px 15px;font-weight:bold;color:#777;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .dropdown-menu a:hover{background-color:#f2f2f2}.navbar-inverse .nav-collapse .nav>li>a,.navbar-inverse .nav-collapse .dropdown-menu a{color:#999}.navbar-inverse .nav-collapse .nav>li>a:hover,.navbar-inverse .nav-collapse .dropdown-menu a:hover{background-color:#111}.nav-collapse.in .btn-group{padding:0;margin-top:5px}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;display:none;float:none;max-width:none;padding:0;margin:0 15px;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .open>.dropdown-menu{display:block}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .nav>li>.dropdown-menu:before,.nav-collapse .nav>li>.dropdown-menu:after{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:10px 15px;margin:10px 0;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)}.navbar-inverse .nav-collapse .navbar-form,.navbar-inverse .nav-collapse .navbar-search{border-top-color:#111;border-bottom-color:#111}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-right:10px;padding-left:10px}}@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}} 10 | -------------------------------------------------------------------------------- /examples/bootstrap/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/examples/bootstrap/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /examples/bootstrap/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/examples/bootstrap/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /examples/css/960.css: -------------------------------------------------------------------------------- 1 | /* 2 | 960 Grid System ~ Core CSS. 3 | Learn more ~ http://960.gs/ 4 | 5 | Licensed under GPL and MIT. 6 | */ 7 | 8 | /* 9 | Forces backgrounds to span full width, 10 | even if there is horizontal scrolling. 11 | Increase this if your layout is wider. 12 | 13 | Note: IE6 works fine without this fix. 14 | */ 15 | 16 | body { 17 | min-width: 960px; 18 | } 19 | 20 | /* `Container 21 | ----------------------------------------------------------------------------------------------------*/ 22 | 23 | .container_12, 24 | .container_16 { 25 | margin-left: auto; 26 | margin-right: auto; 27 | width: 960px; 28 | } 29 | 30 | /* `Grid >> Global 31 | ----------------------------------------------------------------------------------------------------*/ 32 | 33 | .grid_1, 34 | .grid_2, 35 | .grid_3, 36 | .grid_4, 37 | .grid_5, 38 | .grid_6, 39 | .grid_7, 40 | .grid_8, 41 | .grid_9, 42 | .grid_10, 43 | .grid_11, 44 | .grid_12, 45 | .grid_13, 46 | .grid_14, 47 | .grid_15, 48 | .grid_16 { 49 | display: inline; 50 | float: left; 51 | margin-left: 10px; 52 | margin-right: 10px; 53 | } 54 | 55 | .push_1, .pull_1, 56 | .push_2, .pull_2, 57 | .push_3, .pull_3, 58 | .push_4, .pull_4, 59 | .push_5, .pull_5, 60 | .push_6, .pull_6, 61 | .push_7, .pull_7, 62 | .push_8, .pull_8, 63 | .push_9, .pull_9, 64 | .push_10, .pull_10, 65 | .push_11, .pull_11, 66 | .push_12, .pull_12, 67 | .push_13, .pull_13, 68 | .push_14, .pull_14, 69 | .push_15, .pull_15 { 70 | position: relative; 71 | } 72 | 73 | .container_12 .grid_3, 74 | .container_16 .grid_4 { 75 | width: 220px; 76 | } 77 | 78 | .container_12 .grid_6, 79 | .container_16 .grid_8 { 80 | width: 460px; 81 | } 82 | 83 | .container_12 .grid_9, 84 | .container_16 .grid_12 { 85 | width: 700px; 86 | } 87 | 88 | .container_12 .grid_12, 89 | .container_16 .grid_16 { 90 | width: 940px; 91 | } 92 | 93 | /* `Grid >> Children (Alpha ~ First, Omega ~ Last) 94 | ----------------------------------------------------------------------------------------------------*/ 95 | 96 | .alpha { 97 | margin-left: 0; 98 | } 99 | 100 | .omega { 101 | margin-right: 0; 102 | } 103 | 104 | /* `Grid >> 12 Columns 105 | ----------------------------------------------------------------------------------------------------*/ 106 | 107 | .container_12 .grid_1 { 108 | width: 60px; 109 | } 110 | 111 | .container_12 .grid_2 { 112 | width: 140px; 113 | } 114 | 115 | .container_12 .grid_4 { 116 | width: 300px; 117 | } 118 | 119 | .container_12 .grid_5 { 120 | width: 380px; 121 | } 122 | 123 | .container_12 .grid_7 { 124 | width: 540px; 125 | } 126 | 127 | .container_12 .grid_8 { 128 | width: 620px; 129 | } 130 | 131 | .container_12 .grid_10 { 132 | width: 780px; 133 | } 134 | 135 | .container_12 .grid_11 { 136 | width: 860px; 137 | } 138 | 139 | /* `Grid >> 16 Columns 140 | ----------------------------------------------------------------------------------------------------*/ 141 | 142 | .container_16 .grid_1 { 143 | width: 40px; 144 | } 145 | 146 | .container_16 .grid_2 { 147 | width: 100px; 148 | } 149 | 150 | .container_16 .grid_3 { 151 | width: 160px; 152 | } 153 | 154 | .container_16 .grid_5 { 155 | width: 280px; 156 | } 157 | 158 | .container_16 .grid_6 { 159 | width: 340px; 160 | } 161 | 162 | .container_16 .grid_7 { 163 | width: 400px; 164 | } 165 | 166 | .container_16 .grid_9 { 167 | width: 520px; 168 | } 169 | 170 | .container_16 .grid_10 { 171 | width: 580px; 172 | } 173 | 174 | .container_16 .grid_11 { 175 | width: 640px; 176 | } 177 | 178 | .container_16 .grid_13 { 179 | width: 760px; 180 | } 181 | 182 | .container_16 .grid_14 { 183 | width: 820px; 184 | } 185 | 186 | .container_16 .grid_15 { 187 | width: 880px; 188 | } 189 | 190 | /* `Prefix Extra Space >> Global 191 | ----------------------------------------------------------------------------------------------------*/ 192 | 193 | .container_12 .prefix_3, 194 | .container_16 .prefix_4 { 195 | padding-left: 240px; 196 | } 197 | 198 | .container_12 .prefix_6, 199 | .container_16 .prefix_8 { 200 | padding-left: 480px; 201 | } 202 | 203 | .container_12 .prefix_9, 204 | .container_16 .prefix_12 { 205 | padding-left: 720px; 206 | } 207 | 208 | /* `Prefix Extra Space >> 12 Columns 209 | ----------------------------------------------------------------------------------------------------*/ 210 | 211 | .container_12 .prefix_1 { 212 | padding-left: 80px; 213 | } 214 | 215 | .container_12 .prefix_2 { 216 | padding-left: 160px; 217 | } 218 | 219 | .container_12 .prefix_4 { 220 | padding-left: 320px; 221 | } 222 | 223 | .container_12 .prefix_5 { 224 | padding-left: 400px; 225 | } 226 | 227 | .container_12 .prefix_7 { 228 | padding-left: 560px; 229 | } 230 | 231 | .container_12 .prefix_8 { 232 | padding-left: 640px; 233 | } 234 | 235 | .container_12 .prefix_10 { 236 | padding-left: 800px; 237 | } 238 | 239 | .container_12 .prefix_11 { 240 | padding-left: 880px; 241 | } 242 | 243 | /* `Prefix Extra Space >> 16 Columns 244 | ----------------------------------------------------------------------------------------------------*/ 245 | 246 | .container_16 .prefix_1 { 247 | padding-left: 60px; 248 | } 249 | 250 | .container_16 .prefix_2 { 251 | padding-left: 120px; 252 | } 253 | 254 | .container_16 .prefix_3 { 255 | padding-left: 180px; 256 | } 257 | 258 | .container_16 .prefix_5 { 259 | padding-left: 300px; 260 | } 261 | 262 | .container_16 .prefix_6 { 263 | padding-left: 360px; 264 | } 265 | 266 | .container_16 .prefix_7 { 267 | padding-left: 420px; 268 | } 269 | 270 | .container_16 .prefix_9 { 271 | padding-left: 540px; 272 | } 273 | 274 | .container_16 .prefix_10 { 275 | padding-left: 600px; 276 | } 277 | 278 | .container_16 .prefix_11 { 279 | padding-left: 660px; 280 | } 281 | 282 | .container_16 .prefix_13 { 283 | padding-left: 780px; 284 | } 285 | 286 | .container_16 .prefix_14 { 287 | padding-left: 840px; 288 | } 289 | 290 | .container_16 .prefix_15 { 291 | padding-left: 900px; 292 | } 293 | 294 | /* `Suffix Extra Space >> Global 295 | ----------------------------------------------------------------------------------------------------*/ 296 | 297 | .container_12 .suffix_3, 298 | .container_16 .suffix_4 { 299 | padding-right: 240px; 300 | } 301 | 302 | .container_12 .suffix_6, 303 | .container_16 .suffix_8 { 304 | padding-right: 480px; 305 | } 306 | 307 | .container_12 .suffix_9, 308 | .container_16 .suffix_12 { 309 | padding-right: 720px; 310 | } 311 | 312 | /* `Suffix Extra Space >> 12 Columns 313 | ----------------------------------------------------------------------------------------------------*/ 314 | 315 | .container_12 .suffix_1 { 316 | padding-right: 80px; 317 | } 318 | 319 | .container_12 .suffix_2 { 320 | padding-right: 160px; 321 | } 322 | 323 | .container_12 .suffix_4 { 324 | padding-right: 320px; 325 | } 326 | 327 | .container_12 .suffix_5 { 328 | padding-right: 400px; 329 | } 330 | 331 | .container_12 .suffix_7 { 332 | padding-right: 560px; 333 | } 334 | 335 | .container_12 .suffix_8 { 336 | padding-right: 640px; 337 | } 338 | 339 | .container_12 .suffix_10 { 340 | padding-right: 800px; 341 | } 342 | 343 | .container_12 .suffix_11 { 344 | padding-right: 880px; 345 | } 346 | 347 | /* `Suffix Extra Space >> 16 Columns 348 | ----------------------------------------------------------------------------------------------------*/ 349 | 350 | .container_16 .suffix_1 { 351 | padding-right: 60px; 352 | } 353 | 354 | .container_16 .suffix_2 { 355 | padding-right: 120px; 356 | } 357 | 358 | .container_16 .suffix_3 { 359 | padding-right: 180px; 360 | } 361 | 362 | .container_16 .suffix_5 { 363 | padding-right: 300px; 364 | } 365 | 366 | .container_16 .suffix_6 { 367 | padding-right: 360px; 368 | } 369 | 370 | .container_16 .suffix_7 { 371 | padding-right: 420px; 372 | } 373 | 374 | .container_16 .suffix_9 { 375 | padding-right: 540px; 376 | } 377 | 378 | .container_16 .suffix_10 { 379 | padding-right: 600px; 380 | } 381 | 382 | .container_16 .suffix_11 { 383 | padding-right: 660px; 384 | } 385 | 386 | .container_16 .suffix_13 { 387 | padding-right: 780px; 388 | } 389 | 390 | .container_16 .suffix_14 { 391 | padding-right: 840px; 392 | } 393 | 394 | .container_16 .suffix_15 { 395 | padding-right: 900px; 396 | } 397 | 398 | /* `Push Space >> Global 399 | ----------------------------------------------------------------------------------------------------*/ 400 | 401 | .container_12 .push_3, 402 | .container_16 .push_4 { 403 | left: 240px; 404 | } 405 | 406 | .container_12 .push_6, 407 | .container_16 .push_8 { 408 | left: 480px; 409 | } 410 | 411 | .container_12 .push_9, 412 | .container_16 .push_12 { 413 | left: 720px; 414 | } 415 | 416 | /* `Push Space >> 12 Columns 417 | ----------------------------------------------------------------------------------------------------*/ 418 | 419 | .container_12 .push_1 { 420 | left: 80px; 421 | } 422 | 423 | .container_12 .push_2 { 424 | left: 160px; 425 | } 426 | 427 | .container_12 .push_4 { 428 | left: 320px; 429 | } 430 | 431 | .container_12 .push_5 { 432 | left: 400px; 433 | } 434 | 435 | .container_12 .push_7 { 436 | left: 560px; 437 | } 438 | 439 | .container_12 .push_8 { 440 | left: 640px; 441 | } 442 | 443 | .container_12 .push_10 { 444 | left: 800px; 445 | } 446 | 447 | .container_12 .push_11 { 448 | left: 880px; 449 | } 450 | 451 | /* `Push Space >> 16 Columns 452 | ----------------------------------------------------------------------------------------------------*/ 453 | 454 | .container_16 .push_1 { 455 | left: 60px; 456 | } 457 | 458 | .container_16 .push_2 { 459 | left: 120px; 460 | } 461 | 462 | .container_16 .push_3 { 463 | left: 180px; 464 | } 465 | 466 | .container_16 .push_5 { 467 | left: 300px; 468 | } 469 | 470 | .container_16 .push_6 { 471 | left: 360px; 472 | } 473 | 474 | .container_16 .push_7 { 475 | left: 420px; 476 | } 477 | 478 | .container_16 .push_9 { 479 | left: 540px; 480 | } 481 | 482 | .container_16 .push_10 { 483 | left: 600px; 484 | } 485 | 486 | .container_16 .push_11 { 487 | left: 660px; 488 | } 489 | 490 | .container_16 .push_13 { 491 | left: 780px; 492 | } 493 | 494 | .container_16 .push_14 { 495 | left: 840px; 496 | } 497 | 498 | .container_16 .push_15 { 499 | left: 900px; 500 | } 501 | 502 | /* `Pull Space >> Global 503 | ----------------------------------------------------------------------------------------------------*/ 504 | 505 | .container_12 .pull_3, 506 | .container_16 .pull_4 { 507 | left: -240px; 508 | } 509 | 510 | .container_12 .pull_6, 511 | .container_16 .pull_8 { 512 | left: -480px; 513 | } 514 | 515 | .container_12 .pull_9, 516 | .container_16 .pull_12 { 517 | left: -720px; 518 | } 519 | 520 | /* `Pull Space >> 12 Columns 521 | ----------------------------------------------------------------------------------------------------*/ 522 | 523 | .container_12 .pull_1 { 524 | left: -80px; 525 | } 526 | 527 | .container_12 .pull_2 { 528 | left: -160px; 529 | } 530 | 531 | .container_12 .pull_4 { 532 | left: -320px; 533 | } 534 | 535 | .container_12 .pull_5 { 536 | left: -400px; 537 | } 538 | 539 | .container_12 .pull_7 { 540 | left: -560px; 541 | } 542 | 543 | .container_12 .pull_8 { 544 | left: -640px; 545 | } 546 | 547 | .container_12 .pull_10 { 548 | left: -800px; 549 | } 550 | 551 | .container_12 .pull_11 { 552 | left: -880px; 553 | } 554 | 555 | /* `Pull Space >> 16 Columns 556 | ----------------------------------------------------------------------------------------------------*/ 557 | 558 | .container_16 .pull_1 { 559 | left: -60px; 560 | } 561 | 562 | .container_16 .pull_2 { 563 | left: -120px; 564 | } 565 | 566 | .container_16 .pull_3 { 567 | left: -180px; 568 | } 569 | 570 | .container_16 .pull_5 { 571 | left: -300px; 572 | } 573 | 574 | .container_16 .pull_6 { 575 | left: -360px; 576 | } 577 | 578 | .container_16 .pull_7 { 579 | left: -420px; 580 | } 581 | 582 | .container_16 .pull_9 { 583 | left: -540px; 584 | } 585 | 586 | .container_16 .pull_10 { 587 | left: -600px; 588 | } 589 | 590 | .container_16 .pull_11 { 591 | left: -660px; 592 | } 593 | 594 | .container_16 .pull_13 { 595 | left: -780px; 596 | } 597 | 598 | .container_16 .pull_14 { 599 | left: -840px; 600 | } 601 | 602 | .container_16 .pull_15 { 603 | left: -900px; 604 | } 605 | 606 | /* `Clear Floated Elements 607 | ----------------------------------------------------------------------------------------------------*/ 608 | 609 | /* http://sonspring.com/journal/clearing-floats */ 610 | 611 | .clear { 612 | clear: both; 613 | display: block; 614 | overflow: hidden; 615 | visibility: hidden; 616 | width: 0; 617 | height: 0; 618 | } 619 | 620 | /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ 621 | 622 | .clearfix:before, 623 | .clearfix:after, 624 | .container_12:before, 625 | .container_12:after, 626 | .container_16:before, 627 | .container_16:after { 628 | content: '.'; 629 | display: block; 630 | overflow: hidden; 631 | visibility: hidden; 632 | font-size: 0; 633 | line-height: 0; 634 | width: 0; 635 | height: 0; 636 | } 637 | 638 | .clearfix:after, 639 | .container_12:after, 640 | .container_16:after { 641 | clear: both; 642 | } 643 | 644 | /* 645 | The following zoom:1 rule is specifically for IE6 + IE7. 646 | Move to separate stylesheet if invalid CSS is a problem. 647 | */ 648 | 649 | .clearfix, 650 | .container_12, 651 | .container_16 { 652 | zoom: 1; 653 | } -------------------------------------------------------------------------------- /examples/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | * HTML5 Boilerplate 3 | * 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html, 14 | button, 15 | input, 16 | select, 17 | textarea { 18 | color: #222; 19 | } 20 | 21 | body { 22 | font-size: 1em; 23 | line-height: 1.4; 24 | } 25 | 26 | /* 27 | * Remove text-shadow in selection highlight: h5bp.com/i 28 | * These selection declarations have to be separate. 29 | * Customize the background color to match your design. 30 | */ 31 | 32 | ::-moz-selection { 33 | background: #b3d4fc; 34 | text-shadow: none; 35 | } 36 | 37 | ::selection { 38 | background: #b3d4fc; 39 | text-shadow: none; 40 | } 41 | 42 | /* 43 | * A better looking default horizontal rule 44 | */ 45 | 46 | hr { 47 | display: block; 48 | height: 1px; 49 | border: 0; 50 | border-top: 1px solid #ccc; 51 | margin: 1em 0; 52 | padding: 0; 53 | } 54 | 55 | /* 56 | * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 57 | */ 58 | 59 | img { 60 | vertical-align: middle; 61 | } 62 | 63 | /* 64 | * Remove default fieldset styles. 65 | */ 66 | 67 | fieldset { 68 | border: 0; 69 | margin: 0; 70 | padding: 0; 71 | } 72 | 73 | /* 74 | * Allow only vertical resizing of textareas. 75 | */ 76 | 77 | textarea { 78 | resize: vertical; 79 | } 80 | 81 | /* ========================================================================== 82 | Chrome Frame prompt 83 | ========================================================================== */ 84 | 85 | .chromeframe { 86 | margin: 0.2em 0; 87 | background: #ccc; 88 | color: #000; 89 | padding: 0.2em 0; 90 | } 91 | 92 | /* ========================================================================== 93 | Author's custom styles 94 | ========================================================================== */ 95 | 96 | html, 97 | body{ 98 | /* 99 | background-image: url(../img/pw_maze_white.png); 100 | background-image: -webkit-image-set( 101 | url(../img/pw_maze_white.png) 1x, 102 | url(../img/pw_maze_white_@2X.png) 2x 103 | ); 104 | */ 105 | font-family: Verdana,'Helvetica Neue',helvetica, "Hiragino Sans GB",'Microsoft YaHei', "WenQuanYi Micro Hei", sans-serif; 106 | font-size: 14px; 107 | color: #444; 108 | } 109 | 110 | h1, h2, h3, h4, h5, h6 { 111 | margin: 0 0 0.4em 0; 112 | line-height: 1.5; 113 | color: #000; 114 | font-family: 'Segoe UI Light','Segoe UI', "Hiragino Sans GB",'Microsoft JhengHei UI', "Microsoft YaHei"; 115 | font-weight: normal; 116 | } 117 | 118 | h1{ 119 | margin: 20px 0 10px; 120 | font-size: 38px; 121 | line-height: 1; 122 | } 123 | 124 | 125 | 126 | h1 a{ 127 | font-family: "Hiragino Sans GB",'Microsoft YaHei', "WenQuanYi Micro Hei"; 128 | margin: 0 10px; 129 | color: #b00; 130 | font-size: 14px; 131 | line-height: 1; 132 | text-decoration: none; 133 | } 134 | 135 | h1 a:hover{ 136 | text-decoration: underline; 137 | 138 | } 139 | 140 | h1 a.index{ 141 | margin: 0; 142 | font-size: 38px; 143 | color: #333; 144 | font-family: Verdana; 145 | font-weight: normal; 146 | line-height: 1; 147 | } 148 | 149 | h2{ 150 | font-size: 22px; 151 | } 152 | h3{ 153 | font-size: 16px; 154 | } 155 | 156 | hr{ 157 | margin: 10px 0 20px 0 ; 158 | } 159 | p{ 160 | line-height: 1.8; 161 | text-indent: 2em; 162 | } 163 | 164 | em { 165 | color: #b00; 166 | font-style: normal; 167 | margin: 0 3px; 168 | 169 | } 170 | 171 | .well{ 172 | margin: 10px 0 0 0; 173 | padding: 10px; 174 | background: #f4f4f4; 175 | border: 1px solid #ddd; 176 | line-height: 1.5; 177 | text-indent: 0; 178 | } 179 | 180 | .table { 181 | margin-bottom: 20px; 182 | } 183 | .table td, .table th{ 184 | padding: 8px; 185 | border: 1px solid rgb(221, 221, 221); 186 | text-align: left; 187 | } 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | /* ========================================================================== 196 | Helper classes 197 | ========================================================================== */ 198 | 199 | /* 200 | * Image replacement 201 | */ 202 | 203 | .ir { 204 | background-color: transparent; 205 | border: 0; 206 | overflow: hidden; 207 | /* IE 6/7 fallback */ 208 | *text-indent: -9999px; 209 | } 210 | 211 | .ir:before { 212 | content: ""; 213 | display: block; 214 | width: 0; 215 | height: 150%; 216 | } 217 | 218 | /* 219 | * Hide from both screenreaders and browsers: h5bp.com/u 220 | */ 221 | 222 | .hidden { 223 | display: none !important; 224 | visibility: hidden; 225 | } 226 | 227 | /* 228 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 229 | */ 230 | 231 | .visuallyhidden { 232 | border: 0; 233 | clip: rect(0 0 0 0); 234 | height: 1px; 235 | margin: -1px; 236 | overflow: hidden; 237 | padding: 0; 238 | position: absolute; 239 | width: 1px; 240 | } 241 | 242 | /* 243 | * Extends the .visuallyhidden class to allow the element to be focusable 244 | * when navigated to via the keyboard: h5bp.com/p 245 | */ 246 | 247 | .visuallyhidden.focusable:active, 248 | .visuallyhidden.focusable:focus { 249 | clip: auto; 250 | height: auto; 251 | margin: 0; 252 | overflow: visible; 253 | position: static; 254 | width: auto; 255 | } 256 | 257 | /* 258 | * Hide visually and from screenreaders, but maintain layout 259 | */ 260 | 261 | .invisible { 262 | visibility: hidden; 263 | } 264 | 265 | /* 266 | * Clearfix: contain floats 267 | * 268 | * For modern browsers 269 | * 1. The space content is one way to avoid an Opera bug when the 270 | * `contenteditable` attribute is included anywhere else in the document. 271 | * Otherwise it causes space to appear at the top and bottom of elements 272 | * that receive the `clearfix` class. 273 | * 2. The use of `table` rather than `block` is only necessary if using 274 | * `:before` to contain the top-margins of child elements. 275 | */ 276 | 277 | .clearfix:before, 278 | .clearfix:after { 279 | content: " "; /* 1 */ 280 | display: table; /* 2 */ 281 | } 282 | 283 | .clearfix:after { 284 | clear: both; 285 | } 286 | 287 | /* 288 | * For IE 6/7 only 289 | * Include this rule to trigger hasLayout and contain floats. 290 | */ 291 | 292 | .clearfix { 293 | *zoom: 1; 294 | } 295 | 296 | /* ========================================================================== 297 | EXAMPLE Media Queries for Responsive Design. 298 | Theses examples override the primary ('mobile first') styles. 299 | Modify as content requires. 300 | ========================================================================== */ 301 | 302 | @media only screen and (min-width: 35em) { 303 | /* Style adjustments for viewports that meet the condition */ 304 | } 305 | 306 | @media print, 307 | (-o-min-device-pixel-ratio: 5/4), 308 | (-webkit-min-device-pixel-ratio: 1.25), 309 | (min-resolution: 120dpi) { 310 | /* Style adjustments for high resolution devices */ 311 | } 312 | 313 | /* ========================================================================== 314 | Print styles. 315 | Inlined to avoid required HTTP connection: h5bp.com/r 316 | ========================================================================== */ 317 | 318 | @media print { 319 | * { 320 | background: transparent !important; 321 | color: #000 !important; /* Black prints faster: h5bp.com/s */ 322 | box-shadow: none !important; 323 | text-shadow: none !important; 324 | } 325 | 326 | a, 327 | a:visited { 328 | text-decoration: underline; 329 | } 330 | 331 | a[href]:after { 332 | content: " (" attr(href) ")"; 333 | } 334 | 335 | abbr[title]:after { 336 | content: " (" attr(title) ")"; 337 | } 338 | 339 | /* 340 | * Don't show links for images, or javascript/internal links 341 | */ 342 | 343 | .ir a:after, 344 | a[href^="javascript:"]:after, 345 | a[href^="#"]:after { 346 | content: ""; 347 | } 348 | 349 | pre, 350 | blockquote { 351 | border: 1px solid #999; 352 | page-break-inside: avoid; 353 | } 354 | 355 | thead { 356 | display: table-header-group; /* h5bp.com/t */ 357 | } 358 | 359 | tr, 360 | img { 361 | page-break-inside: avoid; 362 | } 363 | 364 | img { 365 | max-width: 100% !important; 366 | } 367 | 368 | @page { 369 | margin: 0.5cm; 370 | } 371 | 372 | p, 373 | h2, 374 | h3 { 375 | orphans: 3; 376 | widows: 3; 377 | } 378 | 379 | h2, 380 | h3 { 381 | page-break-after: avoid; 382 | } 383 | } 384 | -------------------------------------------------------------------------------- /examples/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v1.1.0 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | *display: inline; 35 | *zoom: 1; 36 | } 37 | 38 | /** 39 | * Prevent modern browsers from displaying `audio` without controls. 40 | * Remove excess height in iOS 5 devices. 41 | */ 42 | 43 | audio:not([controls]) { 44 | display: none; 45 | height: 0; 46 | } 47 | 48 | /** 49 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 50 | * Known issue: no IE 6 support. 51 | */ 52 | 53 | [hidden] { 54 | display: none; 55 | } 56 | 57 | /* ========================================================================== 58 | Base 59 | ========================================================================== */ 60 | 61 | /** 62 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 63 | * `em` units. 64 | * 2. Prevent iOS text size adjust after orientation change, without disabling 65 | * user zoom. 66 | */ 67 | 68 | html { 69 | font-size: 100%; /* 1 */ 70 | -webkit-text-size-adjust: 100%; /* 2 */ 71 | -ms-text-size-adjust: 100%; /* 2 */ 72 | } 73 | 74 | /** 75 | * Address `font-family` inconsistency between `textarea` and other form 76 | * elements. 77 | */ 78 | 79 | html, 80 | button, 81 | input, 82 | select, 83 | textarea { 84 | font-family: sans-serif; 85 | } 86 | 87 | /** 88 | * Address margins handled incorrectly in IE 6/7. 89 | */ 90 | 91 | body { 92 | margin: 0; 93 | } 94 | 95 | /* ========================================================================== 96 | Links 97 | ========================================================================== */ 98 | 99 | /** 100 | * Address `outline` inconsistency between Chrome and other browsers. 101 | */ 102 | 103 | a:focus { 104 | outline: thin dotted; 105 | } 106 | 107 | /** 108 | * Improve readability when focused and also mouse hovered in all browsers. 109 | */ 110 | 111 | a:active, 112 | a:hover { 113 | outline: 0; 114 | } 115 | 116 | /* ========================================================================== 117 | Typography 118 | ========================================================================== */ 119 | 120 | /** 121 | * Address font sizes and margins set differently in IE 6/7. 122 | * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, 123 | * and Chrome. 124 | */ 125 | 126 | h1 { 127 | font-size: 2em; 128 | margin: 0.67em 0; 129 | } 130 | 131 | h2 { 132 | font-size: 1.5em; 133 | margin: 0.83em 0; 134 | } 135 | 136 | h3 { 137 | font-size: 1.17em; 138 | margin: 1em 0; 139 | } 140 | 141 | h4 { 142 | font-size: 1em; 143 | margin: 1.33em 0; 144 | } 145 | 146 | h5 { 147 | font-size: 0.83em; 148 | margin: 1.67em 0; 149 | } 150 | 151 | h6 { 152 | font-size: 0.67em; 153 | margin: 2.33em 0; 154 | } 155 | 156 | /** 157 | * Address styling not present in IE 7/8/9, Safari 5, and Chrome. 158 | */ 159 | 160 | abbr[title] { 161 | border-bottom: 1px dotted; 162 | } 163 | 164 | /** 165 | * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. 166 | */ 167 | 168 | b, 169 | strong { 170 | font-weight: bold; 171 | } 172 | 173 | blockquote { 174 | margin: 1em 40px; 175 | } 176 | 177 | /** 178 | * Address styling not present in Safari 5 and Chrome. 179 | */ 180 | 181 | dfn { 182 | font-style: italic; 183 | } 184 | 185 | /** 186 | * Address differences between Firefox and other browsers. 187 | * Known issue: no IE 6/7 normalization. 188 | */ 189 | 190 | hr { 191 | -moz-box-sizing: content-box; 192 | box-sizing: content-box; 193 | height: 0; 194 | } 195 | 196 | /** 197 | * Address styling not present in IE 6/7/8/9. 198 | */ 199 | 200 | mark { 201 | background: #ff0; 202 | color: #000; 203 | } 204 | 205 | /** 206 | * Address margins set differently in IE 6/7. 207 | */ 208 | 209 | p, 210 | pre { 211 | margin: 1em 0; 212 | } 213 | 214 | /** 215 | * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. 216 | */ 217 | 218 | code, 219 | kbd, 220 | pre, 221 | samp { 222 | font-family: monospace, serif; 223 | _font-family: 'courier new', monospace; 224 | font-size: 1em; 225 | } 226 | 227 | /** 228 | * Improve readability of pre-formatted text in all browsers. 229 | */ 230 | 231 | pre { 232 | white-space: pre; 233 | white-space: pre-wrap; 234 | word-wrap: break-word; 235 | } 236 | 237 | /** 238 | * Address CSS quotes not supported in IE 6/7. 239 | */ 240 | 241 | q { 242 | quotes: none; 243 | } 244 | 245 | /** 246 | * Address `quotes` property not supported in Safari 4. 247 | */ 248 | 249 | q:before, 250 | q:after { 251 | content: ''; 252 | content: none; 253 | } 254 | 255 | /** 256 | * Address inconsistent and variable font size in all browsers. 257 | */ 258 | 259 | small { 260 | font-size: 80%; 261 | } 262 | 263 | /** 264 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 265 | */ 266 | 267 | sub, 268 | sup { 269 | font-size: 75%; 270 | line-height: 0; 271 | position: relative; 272 | vertical-align: baseline; 273 | } 274 | 275 | sup { 276 | top: -0.5em; 277 | } 278 | 279 | sub { 280 | bottom: -0.25em; 281 | } 282 | 283 | /* ========================================================================== 284 | Lists 285 | ========================================================================== */ 286 | 287 | /** 288 | * Address margins set differently in IE 6/7. 289 | */ 290 | 291 | dl, 292 | menu, 293 | ol, 294 | ul { 295 | margin: 1em 0; 296 | } 297 | 298 | dd { 299 | margin: 0 0 0 40px; 300 | } 301 | 302 | /** 303 | * Address paddings set differently in IE 6/7. 304 | */ 305 | 306 | menu, 307 | ol, 308 | ul { 309 | padding: 0 0 0 40px; 310 | } 311 | 312 | /** 313 | * Correct list images handled incorrectly in IE 7. 314 | */ 315 | 316 | nav ul, 317 | nav ol { 318 | list-style: none; 319 | list-style-image: none; 320 | } 321 | 322 | /* ========================================================================== 323 | Embedded content 324 | ========================================================================== */ 325 | 326 | /** 327 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 328 | * 2. Improve image quality when scaled in IE 7. 329 | */ 330 | 331 | img { 332 | border: 0; /* 1 */ 333 | -ms-interpolation-mode: bicubic; /* 2 */ 334 | } 335 | 336 | /** 337 | * Correct overflow displayed oddly in IE 9. 338 | */ 339 | 340 | svg:not(:root) { 341 | overflow: hidden; 342 | } 343 | 344 | /* ========================================================================== 345 | Figures 346 | ========================================================================== */ 347 | 348 | /** 349 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 350 | */ 351 | 352 | figure { 353 | margin: 0; 354 | } 355 | 356 | /* ========================================================================== 357 | Forms 358 | ========================================================================== */ 359 | 360 | /** 361 | * Correct margin displayed oddly in IE 6/7. 362 | */ 363 | 364 | form { 365 | margin: 0; 366 | } 367 | 368 | /** 369 | * Define consistent border, margin, and padding. 370 | */ 371 | 372 | fieldset { 373 | border: 1px solid #c0c0c0; 374 | margin: 0 2px; 375 | padding: 0.35em 0.625em 0.75em; 376 | } 377 | 378 | /** 379 | * 1. Correct color not being inherited in IE 6/7/8/9. 380 | * 2. Correct text not wrapping in Firefox 3. 381 | * 3. Correct alignment displayed oddly in IE 6/7. 382 | */ 383 | 384 | legend { 385 | border: 0; /* 1 */ 386 | padding: 0; 387 | white-space: normal; /* 2 */ 388 | *margin-left: -7px; /* 3 */ 389 | } 390 | 391 | /** 392 | * 1. Correct font size not being inherited in all browsers. 393 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 394 | * and Chrome. 395 | * 3. Improve appearance and consistency in all browsers. 396 | */ 397 | 398 | button, 399 | input, 400 | select, 401 | textarea { 402 | font-size: 100%; /* 1 */ 403 | margin: 0; /* 2 */ 404 | vertical-align: baseline; /* 3 */ 405 | *vertical-align: middle; /* 3 */ 406 | } 407 | 408 | /** 409 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in 410 | * the UA stylesheet. 411 | */ 412 | 413 | button, 414 | input { 415 | line-height: normal; 416 | } 417 | 418 | /** 419 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 420 | * All other form control elements do not inherit `text-transform` values. 421 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 422 | * Correct `select` style inheritance in Firefox 4+ and Opera. 423 | */ 424 | 425 | button, 426 | select { 427 | text-transform: none; 428 | } 429 | 430 | /** 431 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 432 | * and `video` controls. 433 | * 2. Correct inability to style clickable `input` types in iOS. 434 | * 3. Improve usability and consistency of cursor style between image-type 435 | * `input` and others. 436 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 437 | * Known issue: inner spacing remains in IE 6. 438 | */ 439 | 440 | button, 441 | html input[type="button"], /* 1 */ 442 | input[type="reset"], 443 | input[type="submit"] { 444 | -webkit-appearance: button; /* 2 */ 445 | cursor: pointer; /* 3 */ 446 | *overflow: visible; /* 4 */ 447 | } 448 | 449 | /** 450 | * Re-set default cursor for disabled elements. 451 | */ 452 | 453 | button[disabled], 454 | html input[disabled] { 455 | cursor: default; 456 | } 457 | 458 | /** 459 | * 1. Address box sizing set to content-box in IE 8/9. 460 | * 2. Remove excess padding in IE 8/9. 461 | * 3. Remove excess padding in IE 7. 462 | * Known issue: excess padding remains in IE 6. 463 | */ 464 | 465 | input[type="checkbox"], 466 | input[type="radio"] { 467 | box-sizing: border-box; /* 1 */ 468 | padding: 0; /* 2 */ 469 | *height: 13px; /* 3 */ 470 | *width: 13px; /* 3 */ 471 | } 472 | 473 | /** 474 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 475 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 476 | * (include `-moz` to future-proof). 477 | */ 478 | 479 | input[type="search"] { 480 | -webkit-appearance: textfield; /* 1 */ 481 | -moz-box-sizing: content-box; 482 | -webkit-box-sizing: content-box; /* 2 */ 483 | box-sizing: content-box; 484 | } 485 | 486 | /** 487 | * Remove inner padding and search cancel button in Safari 5 and Chrome 488 | * on OS X. 489 | */ 490 | 491 | input[type="search"]::-webkit-search-cancel-button, 492 | input[type="search"]::-webkit-search-decoration { 493 | -webkit-appearance: none; 494 | } 495 | 496 | /** 497 | * Remove inner padding and border in Firefox 3+. 498 | */ 499 | 500 | button::-moz-focus-inner, 501 | input::-moz-focus-inner { 502 | border: 0; 503 | padding: 0; 504 | } 505 | 506 | /** 507 | * 1. Remove default vertical scrollbar in IE 6/7/8/9. 508 | * 2. Improve readability and alignment in all browsers. 509 | */ 510 | 511 | textarea { 512 | overflow: auto; /* 1 */ 513 | vertical-align: top; /* 2 */ 514 | } 515 | 516 | /* ========================================================================== 517 | Tables 518 | ========================================================================== */ 519 | 520 | /** 521 | * Remove most spacing between table cells. 522 | */ 523 | 524 | table { 525 | border-collapse: collapse; 526 | border-spacing: 0; 527 | } 528 | -------------------------------------------------------------------------------- /examples/data/stockQuote.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "AMPLITUDE":0.9309, 4 | "PREVCLOSINGPRICE":7.52, 5 | "TURNOVERDEALS":0, 6 | "HIGHESTPRICE":7.56, 7 | "TURNOVERVOL":36268940, 8 | "TRADINGDAY":1345478400000, 9 | "TOTALSHARE":18653471415, 10 | "SECUCODE":"600000", 11 | "EPS":0.9217, 12 | "LOWESTPRICE":7.49, 13 | "OPENINGPRICE":7.51, 14 | "SECUABBR":"浦发银行", 15 | "ALISTEDSHARE":14922777132, 16 | "ID":3131258, 17 | "WCOSTAVG":8.7968, 18 | "NETCASHFLOWOPERPS":1.125, 19 | "SECUNAME":"上海浦东发展银行股份有限公司", 20 | "CLOSINGPRICE":7.51, 21 | "DAYCHANGERATE":-0.133, 22 | "TURNOVERVAL":272732527, 23 | "BVPS":8.686, 24 | "DAYCHANGE":-0.01, 25 | "PE":5.134, 26 | "TURNOVERRATE":0.243, 27 | "ADJUSTCLOSINGPRICE":51.8586, 28 | "PB":0.9409 29 | }, 30 | { 31 | "AMPLITUDE":2.0472, 32 | "PREVCLOSINGPRICE":6.35, 33 | "TURNOVERDEALS":0, 34 | "HIGHESTPRICE":6.41, 35 | "TURNOVERVOL":1278011, 36 | "TRADINGDAY":1345478400000, 37 | "TOTALSHARE":1150000000, 38 | "SECUCODE":"600004", 39 | "EPS":0.1567, 40 | "LOWESTPRICE":6.28, 41 | "OPENINGPRICE":6.34, 42 | "SECUABBR":"白云机场", 43 | "ALISTEDSHARE":1150000000, 44 | "ID":3131387, 45 | "WCOSTAVG":6.8846, 46 | "NETCASHFLOWOPERPS":0.23, 47 | "SECUNAME":"广州白云国际机场股份有限公司", 48 | "CLOSINGPRICE":6.39, 49 | "DAYCHANGERATE":0.6299, 50 | "TURNOVERVAL":8115183, 51 | "BVPS":6.13, 52 | "DAYCHANGE":0.04, 53 | "PE":10.5415, 54 | "TURNOVERRATE":0.1111, 55 | "ADJUSTCLOSINGPRICE":9.429, 56 | "PB":1.0697 57 | }, 58 | { 59 | "AMPLITUDE":1.5504, 60 | "PREVCLOSINGPRICE":2.58, 61 | "TURNOVERDEALS":0, 62 | "HIGHESTPRICE":2.61, 63 | "TURNOVERVOL":10685141, 64 | "TRADINGDAY":1345478400000, 65 | "TOTALSHARE":10093779823, 66 | "SECUCODE":"600005", 67 | "EPS":0.0043, 68 | "LOWESTPRICE":2.57, 69 | "OPENINGPRICE":2.59, 70 | "SECUABBR":"武钢股份", 71 | "ALISTEDSHARE":10093779823, 72 | "ID":3131671, 73 | "WCOSTAVG":3.0629, 74 | "NETCASHFLOWOPERPS":0.09, 75 | "SECUNAME":"武汉钢铁股份有限公司", 76 | "CLOSINGPRICE":2.6, 77 | "DAYCHANGERATE":0.7752, 78 | "TURNOVERVAL":27677196, 79 | "BVPS":3.562, 80 | "DAYCHANGE":0.02, 81 | "PE":24.2193, 82 | "TURNOVERRATE":0.1059, 83 | "ADJUSTCLOSINGPRICE":13.4817, 84 | "PB":0.7308 85 | }, 86 | { 87 | "AMPLITUDE":2.069, 88 | "PREVCLOSINGPRICE":2.9, 89 | "TURNOVERDEALS":0, 90 | "HIGHESTPRICE":2.95, 91 | "TURNOVERVOL":2511165, 92 | "TRADINGDAY":1345478400000, 93 | "TOTALSHARE":2000000000, 94 | "SECUCODE":"600006", 95 | "EPS":0.0266, 96 | "LOWESTPRICE":2.89, 97 | "OPENINGPRICE":2.9, 98 | "SECUABBR":"东风汽车", 99 | "ALISTEDSHARE":2000000000, 100 | "ID":3131903, 101 | "WCOSTAVG":3.5362, 102 | "NETCASHFLOWOPERPS":-0.4041, 103 | "SECUNAME":"东风汽车股份有限公司", 104 | "CLOSINGPRICE":2.9, 105 | "DAYCHANGERATE":0, 106 | "TURNOVERVAL":7316381, 107 | "BVPS":3.0533, 108 | "DAYCHANGE":0, 109 | "PE":12.4963, 110 | "TURNOVERRATE":0.1256, 111 | "ADJUSTCLOSINGPRICE":10.0741, 112 | "PB":0.9581 113 | }, 114 | { 115 | "AMPLITUDE":1.9704, 116 | "PREVCLOSINGPRICE":10.15, 117 | "TURNOVERDEALS":0, 118 | "HIGHESTPRICE":10.35, 119 | "TURNOVERVOL":155609, 120 | "TRADINGDAY":1345478400000, 121 | "TOTALSHARE":1007282534, 122 | "SECUCODE":"600007", 123 | "EPS":0.0887, 124 | "LOWESTPRICE":10.15, 125 | "OPENINGPRICE":10.15, 126 | "SECUABBR":"中国国贸", 127 | "ALISTEDSHARE":1007282534, 128 | "ID":3132032, 129 | "WCOSTAVG":9.8783, 130 | "NETCASHFLOWOPERPS":0.22, 131 | "SECUNAME":"中国国际贸易中心股份有限公司", 132 | "CLOSINGPRICE":10.26, 133 | "DAYCHANGERATE":1.0837, 134 | "TURNOVERVAL":1599848, 135 | "BVPS":4.5, 136 | "DAYCHANGE":0.11, 137 | "PE":53.2288, 138 | "TURNOVERRATE":0.0154, 139 | "ADJUSTCLOSINGPRICE":16.142, 140 | "PB":2.3261 141 | }, 142 | { 143 | "AMPLITUDE":2.7211, 144 | "PREVCLOSINGPRICE":4.41, 145 | "TURNOVERDEALS":0, 146 | "HIGHESTPRICE":4.53, 147 | "TURNOVERVOL":3872525, 148 | "TRADINGDAY":1345478400000, 149 | "TOTALSHARE":2200000000, 150 | "SECUCODE":"600008", 151 | "EPS":0.0714, 152 | "LOWESTPRICE":4.41, 153 | "OPENINGPRICE":4.42, 154 | "SECUABBR":"首创股份", 155 | "ALISTEDSHARE":2200000000, 156 | "ID":3131442, 157 | "WCOSTAVG":5.2878, 158 | "NETCASHFLOWOPERPS":0.055, 159 | "SECUNAME":"北京首创股份有限公司", 160 | "CLOSINGPRICE":4.49, 161 | "DAYCHANGERATE":1.8141, 162 | "TURNOVERVAL":17341208, 163 | "BVPS":2.3832, 164 | "DAYCHANGE":0.08, 165 | "PE":18.8918, 166 | "TURNOVERRATE":0.176, 167 | "ADJUSTCLOSINGPRICE":15.1655, 168 | "PB":1.8324 169 | }, 170 | { 171 | "AMPLITUDE":0.7389, 172 | "PREVCLOSINGPRICE":12.18, 173 | "TURNOVERDEALS":0, 174 | "HIGHESTPRICE":12.22, 175 | "TURNOVERVOL":1332194, 176 | "TRADINGDAY":1345478400000, 177 | "TOTALSHARE":1926958448, 178 | "SECUCODE":"600009", 179 | "EPS":0.1909, 180 | "LOWESTPRICE":12.13, 181 | "OPENINGPRICE":12.19, 182 | "SECUABBR":"上海机场", 183 | "ALISTEDSHARE":1093476397, 184 | "ID":3131171, 185 | "WCOSTAVG":12.8369, 186 | "NETCASHFLOWOPERPS":-0.04, 187 | "SECUNAME":"上海国际机场股份有限公司", 188 | "CLOSINGPRICE":12.14, 189 | "DAYCHANGERATE":-0.3284, 190 | "TURNOVERVAL":16207539, 191 | "BVPS":8.16, 192 | "DAYCHANGE":-0.04, 193 | "PE":15.5997, 194 | "TURNOVERRATE":0.1218, 195 | "ADJUSTCLOSINGPRICE":33.1878, 196 | "PB":1.523 197 | }, 198 | { 199 | "AMPLITUDE":3.9604, 200 | "PREVCLOSINGPRICE":6.06, 201 | "TURNOVERDEALS":0, 202 | "HIGHESTPRICE":6.11, 203 | "TURNOVERVOL":95948038, 204 | "TRADINGDAY":1345478400000, 205 | "TOTALSHARE":6423643659, 206 | "SECUCODE":"600010", 207 | "EPS":0.0017, 208 | "LOWESTPRICE":5.87, 209 | "OPENINGPRICE":6.06, 210 | "SECUABBR":"包钢股份", 211 | "ALISTEDSHARE":6423643659, 212 | "ID":3133528, 213 | "WCOSTAVG":5.6692, 214 | "NETCASHFLOWOPERPS":-0.09, 215 | "SECUNAME":"内蒙古包钢钢联股份有限公司", 216 | "CLOSINGPRICE":5.99, 217 | "DAYCHANGERATE":-1.1551, 218 | "TURNOVERVAL":572896242, 219 | "BVPS":2.01, 220 | "DAYCHANGE":-0.07, 221 | "PE":77.53, 222 | "TURNOVERRATE":1.4937, 223 | "ADJUSTCLOSINGPRICE":17.6883, 224 | "PB":2.9846 225 | }, 226 | { 227 | "AMPLITUDE":2.0864, 228 | "PREVCLOSINGPRICE":6.71, 229 | "TURNOVERDEALS":0, 230 | "HIGHESTPRICE":6.8, 231 | "TURNOVERVOL":8203502, 232 | "TRADINGDAY":1345478400000, 233 | "TOTALSHARE":14055383440, 234 | "SECUCODE":"600011", 235 | "EPS":0.1571, 236 | "LOWESTPRICE":6.66, 237 | "OPENINGPRICE":6.78, 238 | "SECUABBR":"华能国际", 239 | "ALISTEDSHARE":10000000000, 240 | "ID":3132159, 241 | "WCOSTAVG":5.7905, 242 | "NETCASHFLOWOPERPS":0.91, 243 | "SECUNAME":"华能国际电力股份有限公司", 244 | "CLOSINGPRICE":6.68, 245 | "DAYCHANGERATE":-0.4471, 246 | "TURNOVERVAL":55167434, 247 | "BVPS":3.66, 248 | "DAYCHANGE":-0.03, 249 | "PE":74.0314, 250 | "TURNOVERRATE":0.082, 251 | "ADJUSTCLOSINGPRICE":23.7094, 252 | "PB":1.875 253 | }, 254 | { 255 | "AMPLITUDE":0.7712, 256 | "PREVCLOSINGPRICE":3.89, 257 | "TURNOVERDEALS":0, 258 | "HIGHESTPRICE":3.91, 259 | "TURNOVERVOL":418515, 260 | "TRADINGDAY":1345478400000, 261 | "TOTALSHARE":1658610000, 262 | "SECUCODE":"600012", 263 | "EPS":0.1278, 264 | "LOWESTPRICE":3.88, 265 | "OPENINGPRICE":3.89, 266 | "SECUABBR":"皖通高速", 267 | "ALISTEDSHARE":1165600000, 268 | "ID":3133590, 269 | "WCOSTAVG":4.4675, 270 | "NETCASHFLOWOPERPS":0.25, 271 | "SECUNAME":"安徽皖通高速公路股份有限公司", 272 | "CLOSINGPRICE":3.9, 273 | "DAYCHANGERATE":0.2571, 274 | "TURNOVERVAL":1632075, 275 | "BVPS":3.8226, 276 | "DAYCHANGE":0.01, 277 | "PE":7.5503, 278 | "TURNOVERRATE":0.0359, 279 | "ADJUSTCLOSINGPRICE":6.945, 280 | "PB":1.0322 281 | }, 282 | { 283 | "AMPLITUDE":0.8037, 284 | "PREVCLOSINGPRICE":8.71, 285 | "TURNOVERDEALS":0, 286 | "HIGHESTPRICE":8.75, 287 | "TURNOVERVOL":14473038, 288 | "TRADINGDAY":1345478400000, 289 | "TOTALSHARE":6849725776, 290 | "SECUCODE":"600015", 291 | "EPS":0.8869, 292 | "LOWESTPRICE":8.68, 293 | "OPENINGPRICE":8.71, 294 | "SECUABBR":"华夏银行", 295 | "ALISTEDSHARE":4990528316, 296 | "ID":3133403, 297 | "WCOSTAVG":10.581, 298 | "NETCASHFLOWOPERPS":2, 299 | "SECUNAME":"华夏银行股份有限公司", 300 | "CLOSINGPRICE":8.7, 301 | "DAYCHANGERATE":-0.1148, 302 | "TURNOVERVAL":126109959, 303 | "BVPS":10.01, 304 | "DAYCHANGE":-0.01, 305 | "PE":6.4621, 306 | "TURNOVERRATE":0.29, 307 | "ADJUSTCLOSINGPRICE":16.1875, 308 | "PB":0.9326 309 | }, 310 | { 311 | "AMPLITUDE":1.0135, 312 | "PREVCLOSINGPRICE":5.92, 313 | "TURNOVERDEALS":0, 314 | "HIGHESTPRICE":5.94, 315 | "TURNOVERVOL":47828421, 316 | "TRADINGDAY":1345478400000, 317 | "TOTALSHARE":28365585227, 318 | "SECUCODE":"600016", 319 | "EPS":0.3433, 320 | "LOWESTPRICE":5.88, 321 | "OPENINGPRICE":5.91, 322 | "SECUABBR":"民生银行", 323 | "ALISTEDSHARE":22587602387, 324 | "ID":3132062, 325 | "WCOSTAVG":6.1797, 326 | "NETCASHFLOWOPERPS":-1.61, 327 | "SECUNAME":"中国民生银行股份有限公司", 328 | "CLOSINGPRICE":5.91, 329 | "DAYCHANGERATE":-0.1689, 330 | "TURNOVERVAL":282428002, 331 | "BVPS":5.2, 332 | "DAYCHANGE":-0.01, 333 | "PE":6.0043, 334 | "TURNOVERRATE":0.2117, 335 | "ADJUSTCLOSINGPRICE":83.8993, 336 | "PB":1.2936 337 | }, 338 | { 339 | "AMPLITUDE":1.8657, 340 | "PREVCLOSINGPRICE":2.68, 341 | "TURNOVERDEALS":0, 342 | "HIGHESTPRICE":2.72, 343 | "TURNOVERVOL":2086859, 344 | "TRADINGDAY":1345478400000, 345 | "TOTALSHARE":3075653888, 346 | "SECUCODE":"600017", 347 | "EPS":0.1249, 348 | "LOWESTPRICE":2.67, 349 | "OPENINGPRICE":2.69, 350 | "SECUABBR":"日照港", 351 | "ALISTEDSHARE":2630631660, 352 | "ID":3133407, 353 | "WCOSTAVG":3.0421, 354 | "NETCASHFLOWOPERPS":0.122, 355 | "SECUNAME":"日照港股份有限公司", 356 | "CLOSINGPRICE":2.71, 357 | "DAYCHANGERATE":1.1194, 358 | "TURNOVERVAL":5634455, 359 | "BVPS":2.674, 360 | "DAYCHANGE":0.03, 361 | "PE":17.342, 362 | "TURNOVERRATE":0.0793, 363 | "ADJUSTCLOSINGPRICE":8.5585, 364 | "PB":1.2871 365 | } 366 | ] -------------------------------------------------------------------------------- /examples/examples1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 操作演示&Bootstrap样式 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 43 | 46 | 47 | 48 | 49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | 62 | 63 |
64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | 244 | 245 | 246 | -------------------------------------------------------------------------------- /examples/img/botton_g1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/examples/img/botton_g1.gif -------------------------------------------------------------------------------- /examples/img/botton_g2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/examples/img/botton_g2.gif -------------------------------------------------------------------------------- /examples/img/low_contrast_linen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/examples/img/low_contrast_linen.png -------------------------------------------------------------------------------- /examples/img/low_contrast_linen_@2X.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/examples/img/low_contrast_linen_@2X.png -------------------------------------------------------------------------------- /examples/img/pw_maze_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/examples/img/pw_maze_white.png -------------------------------------------------------------------------------- /examples/img/pw_maze_white_@2X.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/examples/img/pw_maze_white_@2X.png -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | mmGrid document 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 38 | 41 | 42 | 43 | 44 |
45 |

mmGrid 参数列表 操作示例&Bootstrap样式

46 |
47 |
48 |
49 |

一、介绍

50 | 51 |

52 | 这是一个基于jQuery的表格部件。它提供了几个基本的功能，可以用于面积有限却要显示较多数据的页面。 53 | 它的样式表很简单，修改起来非常容易，你可以很快的给它更换一个样式融入到你的页面中。 54 | 如果你喜欢简洁点的东西，不想在工程里加入太多依赖的文件，那你可以尝试一下它。顺便说一句，它也支持IE6这样的老古董。 55 |

56 |
57 |

二、基本示例

58 |

59 | mmGrid支持两种数据加载方式：本地对象数据和远程AJAX数据。 60 |

61 | 62 |
63 |

例 1：使用本地对象加载数据

64 |
65 |

66 | 以客户端数据为数据源。参数items，类型可以是对象或数组。如果数据源为对象，则使用root选项标记对象内的数组字段为数据源。 67 |

68 |
69 |
70 |

例 2：使用AJAX加载数据

71 |
72 |

73 | AJAX数据为数据源。参数url为请求地址，返回数据为json格式，可以是对象或数组。如果返回数据为对象，则使用root选项标记对象内的数组字段为数据源。 74 |

75 |
76 |
77 |
78 |

三、排序示例

79 |

80 | 排序参数为sortName和sortStatus。 如果初始化时设置排序列，则直接显示排序后数据。 81 | 排序方式分为客户端排序与AJAX服务器端排序，设置参数为remoteSort。 82 | 排序方式与数据源关系不大，但如果数据源为本地数据，设置remoteSort为true无效。 83 | 如果排序字段为数字类型需要将列选项添加type:'number'属性。远程排序时，列模型可以设置sortName来指定远程排序的字段名称，如不设置则为name中的值。 84 |

85 |
86 |

例 1：客户端排序

87 |
88 |
89 |
90 |

例 2：AJAX远程排序

91 |
92 | * 此示例无后端处理程序，请查看请求的url参数 93 |
94 |
95 |
96 |

四、列状态

97 |
98 |

例 1：锁定列宽

99 |
100 |

101 | 锁定列宽选项为lockWidth:true。列宽被锁定后则不可调整，当表选项fullWidthRows设为true列的宽度也不参与计算。 102 |

103 |
104 |
105 |

例 2：隐藏列

106 |
107 |

108 | 隐藏列选项为hidden: true。当光标移至标题时标题最右侧会显示向下按钮，单击此按钮则可打开选项板来调整隐藏和显示的列，调整完毕后单击选项板右下方的向上按钮来关闭选项板。 109 |

110 |
111 |
112 |

例 3：锁定列显示状态

113 |
114 |

115 | 锁定列显示状态选项为lockDisplay: true。锁定列显示状态后，在选项板中列选项会被值为灰色，此列则不可调整显示状态。 116 |

117 |
118 |
119 |
120 |

五、内容折行

121 |

122 | 表选项nowrap设置单元格内容超出单元格长度时是否折行显示。 123 |

124 |
125 |

例 1：内容不折行

126 |
127 |
128 |
129 |

例 2：内容折行

130 |
131 |
132 |
133 |
134 |

六、自适应列宽

135 |

136 | 当表选项fullWidthRows设置为true时，表格在第一次数据加载时计算列宽，将其充满整个表格。锁定列宽的列不参与计算。如果所有显示的列宽总和大于表格宽度这个参数将不起作用。 137 |

138 |
139 |

例 1：自动调整列宽充满表格

140 |
141 |
142 |
143 |

例 2：默认列宽

144 |
145 |
146 |
147 |
148 |

七、选择行

149 |

150 | 表选项multiSelect设置表格是否可多选，默认为单选。可通过表操作$('#table').mmGrid('selected')获取选择的行对象。 151 | 当光标单击单元格时触发cellSelected事件，该事件可在表选项设置。 152 |

153 |
154 |

例 1：行多选

155 |
156 |
157 |
158 |

例 2：行单选

159 |
160 |
161 |
162 |
163 |

八、选框列

164 |

165 | 表选项checkCol可以在表格前插入选框列。checkCol选项可以和multiSelect搭配使用。 166 |

167 |
168 |

例 1：行多选

169 |
170 |
171 |
172 |

例 2：行单选

173 |
174 |
175 |
176 |
177 | 178 |

九、索引列

179 |

180 | 表选项indexCol可以在表格前插入索引列。如果索引数字过大超出单元格可使用indexColWidth调整宽度。 181 |

182 |
183 |

例 1：索引列

184 |
185 |
186 |
187 |

例 2：索引选框列同时显示

188 |
189 |
190 |
191 |
192 | 193 |

十、显示全部行

194 |

195 | 表选项height设置为'auto'时，表格显示全部行，并不显示垂直滚动条。 196 |

197 |
198 |
199 |
200 |
201 |
202 | 203 |

十一、分页

204 |

205 | 这里的分页示例借助了分页器，开发者可以根据自己的需求选择使用其他分页器。 206 |

207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 | 216 |

十二、表头分组

217 |

218 | 列模型可嵌套一个cols选项用来将表头分组，目前只支持两层。 219 |

220 |
221 |
222 |
223 |
224 |
225 |
226 | Fork me on GitHub 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 236 | 237 | 238 | -------------------------------------------------------------------------------- /examples/js/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | //本地数据 4 | var items = [{AMPLITUDE:0.9309,PREVCLOSINGPRICE:7.52,TURNOVERDEALS:0,HIGHESTPRICE:7.56,TURNOVERVOL:36268940,TRADINGDAY:1345478400000,TOTALSHARE:18653471415,SECUCODE:"600000",EPS:0.9217,LOWESTPRICE:7.49,OPENINGPRICE:7.51,SECUABBR:"浦发银行",ALISTEDSHARE:14922777132,ID:3131258,WCOSTAVG:8.7968,NETCASHFLOWOPERPS:1.125,SECUNAME:"上海浦东发展银行股份有限公司",CLOSINGPRICE:7.51,DAYCHANGERATE:-0.133,TURNOVERVAL:272732527,BVPS:8.686,DAYCHANGE:-0.01,PE:5.134,TURNOVERRATE:0.243,ADJUSTCLOSINGPRICE:51.8586,PB:0.9409},{AMPLITUDE:2.0472,PREVCLOSINGPRICE:6.35,TURNOVERDEALS:0,HIGHESTPRICE:6.41,TURNOVERVOL:1278011,TRADINGDAY:1345478400000,TOTALSHARE:1150000000,SECUCODE:"600004",EPS:0.1567,LOWESTPRICE:6.28,OPENINGPRICE:6.34,SECUABBR:"白云机场",ALISTEDSHARE:1150000000,ID:3131387,WCOSTAVG:6.8846,NETCASHFLOWOPERPS:0.23,SECUNAME:"广州白云国际机场股份有限公司",CLOSINGPRICE:6.39,DAYCHANGERATE:0.6299,TURNOVERVAL:8115183,BVPS:6.13,DAYCHANGE:0.04,PE:10.5415,TURNOVERRATE:0.1111,ADJUSTCLOSINGPRICE:9.429,PB:1.0697},{AMPLITUDE:1.5504,PREVCLOSINGPRICE:2.58,TURNOVERDEALS:0,HIGHESTPRICE:2.61,TURNOVERVOL:10685141,TRADINGDAY:1345478400000,TOTALSHARE:10093779823,SECUCODE:"600005",EPS:0.0043,LOWESTPRICE:2.57,OPENINGPRICE:2.59,SECUABBR:"武钢股份",ALISTEDSHARE:10093779823,ID:3131671,WCOSTAVG:3.0629,NETCASHFLOWOPERPS:0.09,SECUNAME:"武汉钢铁股份有限公司",CLOSINGPRICE:2.6,DAYCHANGERATE:0.7752,TURNOVERVAL:27677196,BVPS:3.562,DAYCHANGE:0.02,PE:24.2193,TURNOVERRATE:0.1059,ADJUSTCLOSINGPRICE:13.4817,PB:0.7308},{AMPLITUDE:2.069,PREVCLOSINGPRICE:2.9,TURNOVERDEALS:0,HIGHESTPRICE:2.95,TURNOVERVOL:2511165,TRADINGDAY:1345478400000,TOTALSHARE:2000000000,SECUCODE:"600006",EPS:0.0266,LOWESTPRICE:2.89,OPENINGPRICE:2.9,SECUABBR:"东风汽车",ALISTEDSHARE:2000000000,ID:3131903,WCOSTAVG:3.5362,NETCASHFLOWOPERPS:-0.4041,SECUNAME:"东风汽车股份有限公司",CLOSINGPRICE:2.9,DAYCHANGERATE:0,TURNOVERVAL:7316381,BVPS:3.0533,DAYCHANGE:0,PE:12.4963,TURNOVERRATE:0.1256,ADJUSTCLOSINGPRICE:10.0741,PB:0.9581},{AMPLITUDE:1.9704,PREVCLOSINGPRICE:10.15,TURNOVERDEALS:0,HIGHESTPRICE:10.35,TURNOVERVOL:155609,TRADINGDAY:1345478400000,TOTALSHARE:1007282534,SECUCODE:"600007",EPS:0.0887,LOWESTPRICE:10.15,OPENINGPRICE:10.15,SECUABBR:"中国国贸",ALISTEDSHARE:1007282534,ID:3132032,WCOSTAVG:9.8783,NETCASHFLOWOPERPS:0.22,SECUNAME:"中国国际贸易中心股份有限公司",CLOSINGPRICE:10.26,DAYCHANGERATE:1.0837,TURNOVERVAL:1599848,BVPS:4.5,DAYCHANGE:0.11,PE:53.2288,TURNOVERRATE:0.0154,ADJUSTCLOSINGPRICE:16.142,PB:2.3261},{AMPLITUDE:2.7211,PREVCLOSINGPRICE:4.41,TURNOVERDEALS:0,HIGHESTPRICE:4.53,TURNOVERVOL:3872525,TRADINGDAY:1345478400000,TOTALSHARE:2200000000,SECUCODE:"600008",EPS:0.0714,LOWESTPRICE:4.41,OPENINGPRICE:4.42,SECUABBR:"首创股份",ALISTEDSHARE:2200000000,ID:3131442,WCOSTAVG:5.2878,NETCASHFLOWOPERPS:0.055,SECUNAME:"北京首创股份有限公司",CLOSINGPRICE:4.49,DAYCHANGERATE:1.8141,TURNOVERVAL:17341208,BVPS:2.3832,DAYCHANGE:0.08,PE:18.8918,TURNOVERRATE:0.176,ADJUSTCLOSINGPRICE:15.1655,PB:1.8324},{AMPLITUDE:0.7389,PREVCLOSINGPRICE:12.18,TURNOVERDEALS:0,HIGHESTPRICE:12.22,TURNOVERVOL:1332194,TRADINGDAY:1345478400000,TOTALSHARE:1926958448,SECUCODE:"600009",EPS:0.1909,LOWESTPRICE:12.13,OPENINGPRICE:12.19,SECUABBR:"上海机场",ALISTEDSHARE:1093476397,ID:3131171,WCOSTAVG:12.8369,NETCASHFLOWOPERPS:-0.04,SECUNAME:"上海国际机场股份有限公司",CLOSINGPRICE:12.14,DAYCHANGERATE:-0.3284,TURNOVERVAL:16207539,BVPS:8.16,DAYCHANGE:-0.04,PE:15.5997,TURNOVERRATE:0.1218,ADJUSTCLOSINGPRICE:33.1878,PB:1.523},{AMPLITUDE:3.9604,PREVCLOSINGPRICE:6.06,TURNOVERDEALS:0,HIGHESTPRICE:6.11,TURNOVERVOL:95948038,TRADINGDAY:1345478400000,TOTALSHARE:6423643659,SECUCODE:"600010",EPS:0.0017,LOWESTPRICE:5.87,OPENINGPRICE:6.06,SECUABBR:"包钢股份",ALISTEDSHARE:6423643659,ID:3133528,WCOSTAVG:5.6692,NETCASHFLOWOPERPS:-0.09,SECUNAME:"内蒙古包钢钢联股份有限公司",CLOSINGPRICE:5.99,DAYCHANGERATE:-1.1551,TURNOVERVAL:572896242,BVPS:2.01,DAYCHANGE:-0.07,PE:77.53,TURNOVERRATE:1.4937,ADJUSTCLOSINGPRICE:17.6883,PB:2.9846},{AMPLITUDE:2.0864,PREVCLOSINGPRICE:6.71,TURNOVERDEALS:0,HIGHESTPRICE:6.8,TURNOVERVOL:8203502,TRADINGDAY:1345478400000,TOTALSHARE:14055383440,SECUCODE:"600011",EPS:0.1571,LOWESTPRICE:6.66,OPENINGPRICE:6.78,SECUABBR:"华能国际",ALISTEDSHARE:10000000000,ID:3132159,WCOSTAVG:5.7905,NETCASHFLOWOPERPS:0.91,SECUNAME:"华能国际电力股份有限公司",CLOSINGPRICE:6.68,DAYCHANGERATE:-0.4471,TURNOVERVAL:55167434,BVPS:3.66,DAYCHANGE:-0.03,PE:74.0314,TURNOVERRATE:0.082,ADJUSTCLOSINGPRICE:23.7094,PB:1.875},{AMPLITUDE:0.7712,PREVCLOSINGPRICE:3.89,TURNOVERDEALS:0,HIGHESTPRICE:3.91,TURNOVERVOL:418515,TRADINGDAY:1345478400000,TOTALSHARE:1658610000,SECUCODE:"600012",EPS:0.1278,LOWESTPRICE:3.88,OPENINGPRICE:3.89,SECUABBR:"皖通高速",ALISTEDSHARE:1165600000,ID:3133590,WCOSTAVG:4.4675,NETCASHFLOWOPERPS:0.25,SECUNAME:"安徽皖通高速公路股份有限公司",CLOSINGPRICE:3.9,DAYCHANGERATE:0.2571,TURNOVERVAL:1632075,BVPS:3.8226,DAYCHANGE:0.01,PE:7.5503,TURNOVERRATE:0.0359,ADJUSTCLOSINGPRICE:6.945,PB:1.0322},{AMPLITUDE:0.8037,PREVCLOSINGPRICE:8.71,TURNOVERDEALS:0,HIGHESTPRICE:8.75,TURNOVERVOL:14473038,TRADINGDAY:1345478400000,TOTALSHARE:6849725776,SECUCODE:"600015",EPS:0.8869,LOWESTPRICE:8.68,OPENINGPRICE:8.71,SECUABBR:"华夏银行",ALISTEDSHARE:4990528316,ID:3133403,WCOSTAVG:10.581,NETCASHFLOWOPERPS:2,SECUNAME:"华夏银行股份有限公司",CLOSINGPRICE:8.7,DAYCHANGERATE:-0.1148,TURNOVERVAL:126109959,BVPS:10.01,DAYCHANGE:-0.01,PE:6.4621,TURNOVERRATE:0.29,ADJUSTCLOSINGPRICE:16.1875,PB:0.9326},{AMPLITUDE:1.0135,PREVCLOSINGPRICE:5.92,TURNOVERDEALS:0,HIGHESTPRICE:5.94,TURNOVERVOL:47828421,TRADINGDAY:1345478400000,TOTALSHARE:28365585227,SECUCODE:"600016",EPS:0.3433,LOWESTPRICE:5.88,OPENINGPRICE:5.91,SECUABBR:"民生银行",ALISTEDSHARE:22587602387,ID:3132062,WCOSTAVG:6.1797,NETCASHFLOWOPERPS:-1.61,SECUNAME:"中国民生银行股份有限公司",CLOSINGPRICE:5.91,DAYCHANGERATE:-0.1689,TURNOVERVAL:282428002,BVPS:5.2,DAYCHANGE:-0.01,PE:6.0043,TURNOVERRATE:0.2117,ADJUSTCLOSINGPRICE:83.8993,PB:1.2936},{AMPLITUDE:1.8657,PREVCLOSINGPRICE:2.68,TURNOVERDEALS:0,HIGHESTPRICE:2.72,TURNOVERVOL:2086859,TRADINGDAY:1345478400000,TOTALSHARE:3075653888,SECUCODE:"600017",EPS:0.1249,LOWESTPRICE:2.67,OPENINGPRICE:2.69,SECUABBR:"日照港",ALISTEDSHARE:2630631660,ID:3133407,WCOSTAVG:3.0421,NETCASHFLOWOPERPS:0.122,SECUNAME:"日照港股份有限公司",CLOSINGPRICE:2.71,DAYCHANGERATE:1.1194,TURNOVERVAL:5634455,BVPS:2.674,DAYCHANGE:0.03,PE:17.342,TURNOVERRATE:0.0793,ADJUSTCLOSINGPRICE:8.5585,PB:1.2871}]; 5 | //保留两位小数 6 | var fixed2 = function(val){ 7 | return val.toFixed(2); 8 | } 9 | 10 | //加百分号 11 | var fixed2percentage = function(val){ 12 | return fixed2(val)+'%'; 13 | } 14 | //高亮 15 | var highliht = function(val){ 16 | if(val > 0){ 17 | return '' + fixed2(val) + ''; 18 | }else if(val < 0){ 19 | return '' + fixed2(val) + ''; 20 | } 21 | return fixed2(val); 22 | }; 23 | //列 24 | var cols = [ 25 | {title:'行情', name:'', width: 30, align: 'center', renderer: function(val,item,rowIndex){ 26 | return '
'; 27 | }}, 28 | { title:'股票代码', name:'SECUCODE' ,width:100, align:'center' }, 29 | { title:'股票名称', name:'SECUABBR' ,width:100, align:'center'}, 30 | { title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right', renderer: fixed2}, 31 | { title:'涨跌幅', name:'DAYCHANGERATE' ,width:60, align:'right',renderer: highliht}, 32 | { title:'涨跌额', name:'DAYCHANGE' ,width:60, align:'right', renderer: highliht}, 33 | { title:'振幅', name:'AMPLITUDE' ,width:60, align:'right', renderer: fixed2percentage}, 34 | { title:'成交量(手)', name:'TURNOVERVOL' ,width:100, align:'right', renderer: function(val){ 35 | return (val / 100).toFixed(2); 36 | }}, 37 | { title:'成交额(万)', name:'TURNOVERVAL' ,width:100, align:'right', renderer: function(val){ 38 | return (val / 10000).toFixed(2); 39 | }}, 40 | { title:'昨收盘', name:'PREVCLOSINGPRICE' ,width:60, align:'right', renderer: fixed2}, 41 | { title:'今开盘', name:'OPENINGPRICE',width:60, align:'right', renderer: fixed2}, 42 | { title:'最高价', name:'HIGHESTPRICE' ,width:60, align:'right', renderer: fixed2}, 43 | { title:'最低价', name:'LOWESTPRICE' ,width:60, align:'right', renderer: fixed2} 44 | ]; 45 | 46 | //本地示例 47 | $('#table2-1').mmGrid({ 48 | cols: cols, 49 | items: items 50 | }); 51 | //AJAX示例 52 | $('#table2-2').mmGrid({ 53 | cols: cols, 54 | url: 'data/stockQuote.json', 55 | method: 'get' 56 | }); 57 | 58 | 59 | 60 | 61 | 62 | var cols3 = [ 63 | {title:'行情', name:'', width: 30, align: 'center', sortable: true, renderer: function(val,item,rowIndex){ 64 | return '
'; 65 | }}, 66 | { title:'股票代码', name:'SECUCODE' ,width:100, align:'center', sortable: true, sortName:'secu_code'}, 67 | { title:'股票名称', name:'SECUABBR' ,width:100, align:'center', sortable: true, sortName:'secu_abbr'}, 68 | { title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right',type:'number', sortable: true, renderer: fixed2}, 69 | { title:'涨跌幅', name:'DAYCHANGERATE' ,width:60, align:'right',type:'number', sortable: true,renderer: highliht}, 70 | { title:'涨跌额', name:'DAYCHANGE' ,width:60, align:'right',type:'number', sortable: true, renderer: highliht}, 71 | { title:'振幅', name:'AMPLITUDE' ,width:60, align:'right',type:'number', sortable: true, renderer: fixed2percentage}, 72 | { title:'成交量(手)', name:'TURNOVERVOL' ,width:100, align:'right',type:'number', sortable: true, renderer: function(val){ 73 | return (val / 100).toFixed(2); 74 | }}, 75 | { title:'成交额(万)', name:'TURNOVERVAL' ,width:100, align:'right',type:'number', sortable: true, renderer: function(val){ 76 | return (val / 10000).toFixed(2); 77 | }}, 78 | { title:'昨收盘', name:'PREVCLOSINGPRICE' ,width:60, align:'right',type:'number', sortable: true, renderer: fixed2}, 79 | { title:'今开盘', name:'OPENINGPRICE',width:60, align:'right',type:'number', sortable: true, renderer: fixed2}, 80 | { title:'最高价', name:'HIGHESTPRICE' ,width:60, align:'right',type:'number', sortable: true, renderer: fixed2}, 81 | { title:'最低价', name:'LOWESTPRICE' ,width:60, align:'right',type:'number', sortable: true, renderer: fixed2} 82 | ]; 83 | //客户端排序示例 84 | $('#table3-1').mmGrid({ 85 | cols: cols3, 86 | items: items, 87 | sortName: 'DAYCHANGERATE', 88 | sortStatus: 'desc' 89 | }); 90 | //服务器端排序示例 91 | $('#table3-2').mmGrid({ 92 | cols: cols3, 93 | url: 'data/stockQuote.json', 94 | method: 'get', 95 | remoteSort:true , 96 | sortName: 'SECUCODE', 97 | sortStatus: 'asc' 98 | }); 99 | 100 | 101 | 102 | //锁定列宽 103 | var cols41 = [ 104 | {title:'行情', name:'', width: 30, align: 'center',lockWidth:true, renderer: function(val,item,rowIndex){ 105 | return '
'; 106 | }}, 107 | { title:'股票代码', name:'SECUCODE' ,width:80,lockWidth:true, align:'center' }, 108 | { title:'股票名称', name:'SECUABBR' ,width:80,lockWidth:true, align:'center'}, 109 | { title:'今收盘', name:'CLOSINGPRICE' ,width:60,lockWidth:true, align:'right', renderer: fixed2}, 110 | { title:'涨跌幅', name:'DAYCHANGERATE' ,width:60,lockWidth:true, align:'right',renderer: highliht} 111 | ]; 112 | $('#table4-1').mmGrid({ 113 | height: 200, 114 | cols: cols41, 115 | items: items 116 | }); 117 | 118 | //隐藏列 119 | var cols42 = [ 120 | {title:'行情', name:'',width: 30, align: 'center', renderer: function(val,item,rowIndex){ 121 | return '
'; 122 | }}, 123 | { title:'股票代码', name:'SECUCODE' ,width:80, align:'center', hidden: true }, 124 | { title:'股票名称', name:'SECUABBR' ,width:80, align:'center'}, 125 | { title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right', renderer: fixed2}, 126 | { title:'涨跌幅', name:'DAYCHANGERATE' ,width:60, align:'right',renderer: highliht} 127 | ]; 128 | $('#table4-2').mmGrid({ 129 | height: 200, 130 | cols: cols42, 131 | items: items 132 | }); 133 | 134 | //锁定列显示状态 135 | var cols43 = [ 136 | {title:'行情', name:'',width: 30, align: 'center',lockDisplay: true, renderer: function(val,item,rowIndex){ 137 | return '
'; 138 | }}, 139 | { title:'股票代码', name:'SECUCODE' ,width:80, align:'center' }, 140 | { title:'股票名称', name:'SECUABBR' ,width:80, lockDisplay: true,align:'center'}, 141 | { title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right',lockDisplay: true, renderer: fixed2}, 142 | { title:'涨跌幅', name:'DAYCHANGERATE',width:60 , align:'right',renderer: highliht } 143 | ]; 144 | $('#table4-3').mmGrid({ 145 | height: 200, 146 | cols: cols43, 147 | items: items 148 | }); 149 | 150 | //内容折行 151 | var cols5 = [ 152 | {title:'行情', name:'', width: 30, align: 'center', renderer: function(val,item,rowIndex){ 153 | return '
'; 154 | }}, 155 | { title:'股票名称', name:'' ,width:80, align:'center', renderer: function(val, item){ 156 | return item.SECUABBR + '(' + item.SECUCODE + ')'; 157 | } }, 158 | { title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right', renderer: fixed2}, 159 | { title:'涨跌幅', name:'DAYCHANGERATE' ,width:60, align:'right',renderer: highliht}, 160 | { title:'涨跌额', name:'DAYCHANGE' ,width:60, align:'right', renderer: highliht}, 161 | { title:'振幅', name:'AMPLITUDE' ,width:60, align:'right', renderer: fixed2percentage}, 162 | { title:'成交量(手)', name:'TURNOVERVOL' ,width:90, align:'right', renderer: function(val){ 163 | return (val / 100).toFixed(2); 164 | }}, 165 | { title:'成交额(万)', name:'TURNOVERVAL' ,width:90, align:'right', renderer: function(val){ 166 | return (val / 10000).toFixed(2); 167 | }}, 168 | { title:'昨收盘', name:'PREVCLOSINGPRICE' ,width:60, align:'right', renderer: fixed2}, 169 | { title:'今开盘', name:'OPENINGPRICE',width:60, align:'right', renderer: fixed2}, 170 | { title:'最高价', name:'HIGHESTPRICE' ,width:60, align:'right', renderer: fixed2}, 171 | { title:'最低价', name:'LOWESTPRICE' ,width:60, align:'right', renderer: fixed2} 172 | ]; 173 | 174 | $('#table5-1').mmGrid({ 175 | cols: cols5, 176 | items: items, 177 | nowrap: true 178 | }); 179 | $('#table5-2').mmGrid({ 180 | cols: cols5, 181 | items: items 182 | }); 183 | 184 | //列宽自适应表格宽度 185 | var cols6 = [ 186 | {title:'行情', name:'', width: 30, align: 'center',lockWidth:true, renderer: function(val,item,rowIndex){ 187 | return '
'; 188 | }}, 189 | { title:'股票代码', name:'SECUCODE' ,width:80, align:'center' }, 190 | { title:'股票名称', name:'SECUABBR' ,width:80, align:'center'}, 191 | { title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right', renderer: fixed2}, 192 | { title:'涨跌幅', name:'DAYCHANGERATE' ,width:60, align:'right',renderer: highliht} 193 | ]; 194 | $('#table6-1').mmGrid({ 195 | cols: cols6, 196 | items: items, 197 | fullWidthRows: true 198 | }); 199 | $('#table6-2').mmGrid({ 200 | cols: cols6, 201 | items: items 202 | }); 203 | 204 | 205 | //多选 206 | $('#table7-1').mmGrid({ 207 | multiSelect: true, 208 | cols: cols, 209 | items: items 210 | }); 211 | $('#table7-2').mmGrid({ 212 | cols: cols, 213 | items: items 214 | }); 215 | 216 | //选框列 217 | $('#table8-1').mmGrid({ 218 | multiSelect: true, 219 | checkCol: true, 220 | cols: cols, 221 | items: items 222 | }); 223 | $('#table8-2').mmGrid({ 224 | checkCol: true, 225 | cols: cols, 226 | items: items 227 | }); 228 | 229 | 230 | //索引列 231 | $('#table9-1').mmGrid({ 232 | indexCol: true, 233 | indexColWidth: 25, 234 | cols: cols, 235 | items: items 236 | }); 237 | $('#table9-2').mmGrid({ 238 | checkCol: true, 239 | indexCol: true, 240 | indexColWidth: 25, 241 | cols: cols, 242 | items: items 243 | }); 244 | 245 | 246 | //显示全部行 247 | $('#table10-1').mmGrid({ 248 | height: 'auto', 249 | cols: cols, 250 | items: items 251 | }); 252 | 253 | //分页 254 | $('#table11-1').mmGrid({ 255 | indexCol: true, 256 | indexColWidth: 35, 257 | cols: cols, 258 | url: 'data/stockQuotePage.json', 259 | method: 'get', 260 | root: 'items', 261 | plugins : [ 262 | $('#paginator11-1').mmPaginator() 263 | ] 264 | }); 265 | 266 | //表头分组 267 | var groupCols = [ 268 | {title:'行情', name:'', width: 30, align: 'center', renderer: function(val,item,rowIndex){ 269 | return '
'; 270 | }}, 271 | {title:'股票', align: 'center', cols:[ 272 | { title:'股票代码', name:'SECUCODE' ,width:100, align:'center' ,sortable: true}, 273 | { title:'股票名称', name:'SECUABBR' ,width:100, align:'center' ,sortable: true} 274 | ]}, 275 | { title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right' ,sortable: true, renderer: fixed2}, 276 | { title:'涨跌幅', name:'DAYCHANGERATE' ,width:60, align:'right' ,sortable: true,renderer: highliht}, 277 | { title:'涨跌额', name:'DAYCHANGE' ,width:60, align:'right' ,sortable: true, renderer: highliht}, 278 | { title:'振幅', name:'AMPLITUDE' ,width:60, align:'right' ,sortable: true, renderer: fixed2percentage}, 279 | { title:'成交' ,align: 'center', cols: [ 280 | { title:'成交量(手)', name:'TURNOVERVOL' ,width:100, align:'right' ,sortable: true, renderer: function(val){ 281 | return (val / 100).toFixed(2); 282 | }}, 283 | { title:'成交额(万)', name:'TURNOVERVAL' ,width:100, align:'right' ,sortable: true, renderer: function(val){ 284 | return (val / 10000).toFixed(2); 285 | }} 286 | ]}, 287 | { title:'昨收盘', name:'PREVCLOSINGPRICE' ,width:60, align:'right' ,sortable: true, renderer: fixed2}, 288 | { title:'今开盘', name:'OPENINGPRICE',width:60, align:'right' ,sortable: true, renderer: fixed2}, 289 | { title:'最高价', name:'HIGHESTPRICE' ,width:60, align:'right' ,sortable: true, renderer: fixed2}, 290 | { title:'最低价', name:'LOWESTPRICE' ,width:60, align:'right' ,sortable: true, renderer: fixed2} 291 | ]; 292 | $('#table12-1').mmGrid({ 293 | cols: groupCols, 294 | items: items 295 | }); 296 | }); 297 | -------------------------------------------------------------------------------- /examples/js/plugins.js: -------------------------------------------------------------------------------- 1 | // Avoid `console` errors in browsers that lack a console. 2 | (function() { 3 | var method; 4 | var noop = function () {}; 5 | var methods = [ 6 | 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 7 | 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 8 | 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 9 | 'timeStamp', 'trace', 'warn' 10 | ]; 11 | var length = methods.length; 12 | var console = (window.console = window.console || {}); 13 | 14 | while (length--) { 15 | method = methods[length]; 16 | 17 | // Only stub undefined methods. 18 | if (!console[method]) { 19 | console[method] = noop; 20 | } 21 | } 22 | }()); 23 | 24 | // Place any jQuery/helper plugins in here. 25 | -------------------------------------------------------------------------------- /examples/js/vendor/css3-mediaqueries.js: -------------------------------------------------------------------------------- 1 | if(typeof Object.create!=="function"){ 2 | Object.create=function(o){ 3 | function F(){ 4 | }; 5 | F.prototype=o; 6 | return new F(); 7 | }; 8 | } 9 | var ua={toString:function(){ 10 | return navigator.userAgent; 11 | },test:function(s){ 12 | return this.toString().toLowerCase().indexOf(s.toLowerCase())>-1; 13 | }}; 14 | ua.version=(ua.toString().toLowerCase().match(/[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[])[1]; 15 | ua.webkit=ua.test("webkit"); 16 | ua.gecko=ua.test("gecko")&&!ua.webkit; 17 | ua.opera=ua.test("opera"); 18 | ua.ie=ua.test("msie")&&!ua.opera; 19 | ua.ie6=ua.ie&&document.compatMode&&typeof document.documentElement.style.maxHeight==="undefined"; 20 | ua.ie7=ua.ie&&document.documentElement&&typeof document.documentElement.style.maxHeight!=="undefined"&&typeof XDomainRequest==="undefined"; 21 | ua.ie8=ua.ie&&typeof XDomainRequest!=="undefined"; 22 | var domReady=function(){ 23 | var _1=[]; 24 | var _2=function(){ 25 | if(!arguments.callee.done){ 26 | arguments.callee.done=true; 27 | for(var i=0;i<_1.length;i++){ 28 | _1[i](); 29 | } 30 | } 31 | }; 32 | if(document.addEventListener){ 33 | document.addEventListener("DOMContentLoaded",_2,false); 34 | } 35 | if(ua.ie){ 36 | (function(){ 37 | try{ 38 | document.documentElement.doScroll("left"); 39 | } 40 | catch(e){ 41 | setTimeout(arguments.callee,50); 42 | return; 43 | } 44 | _2(); 45 | })(); 46 | document.onreadystatechange=function(){ 47 | if(document.readyState==="complete"){ 48 | document.onreadystatechange=null; 49 | _2(); 50 | } 51 | }; 52 | } 53 | if(ua.webkit&&document.readyState){ 54 | (function(){ 55 | if(document.readyState!=="loading"){ 56 | _2(); 57 | }else{ 58 | setTimeout(arguments.callee,10); 59 | } 60 | })(); 61 | } 62 | window.onload=_2; 63 | return function(fn){ 64 | if(typeof fn==="function"){ 65 | _1[_1.length]=fn; 66 | } 67 | return fn; 68 | }; 69 | }(); 70 | var cssHelper=function(){ 71 | var _3={BLOCKS:/[^\s{][^{]*\{(?:[^{}]*\{[^{}]*\}[^{}]*|[^{}]*)*\}/g,BLOCKS_INSIDE:/[^\s{][^{]*\{[^{}]*\}/g,DECLARATIONS:/[a-zA-Z\-]+[^;]*:[^;]+;/g,RELATIVE_URLS:/url\(['"]?([^\/\)'"][^:\)'"]+)['"]?\)/g,REDUNDANT_COMPONENTS:/(?:\/\*([^*\\\\]|\*(?!\/))+\*\/|@import[^;]+;)/g,REDUNDANT_WHITESPACE:/\s*(,|:|;|\{|\})\s*/g,MORE_WHITESPACE:/\s{2,}/g,FINAL_SEMICOLONS:/;\}/g,NOT_WHITESPACE:/\S+/g}; 72 | var _4,_5=false; 73 | var _6=[]; 74 | var _7=function(fn){ 75 | if(typeof fn==="function"){ 76 | _6[_6.length]=fn; 77 | } 78 | }; 79 | var _8=function(){ 80 | for(var i=0;i<_6.length;i++){ 81 | _6[i](_4); 82 | } 83 | }; 84 | var _9={}; 85 | var _a=function(n,v){ 86 | if(_9[n]){ 87 | var _b=_9[n].listeners; 88 | if(_b){ 89 | for(var i=0;i<_b.length;i++){ 90 | _b[i](v); 91 | } 92 | } 93 | } 94 | }; 95 | var _c=function(_d,_e,_f){ 96 | if(ua.ie&&!window.XMLHttpRequest){ 97 | window.XMLHttpRequest=function(){ 98 | return new ActiveXObject("Microsoft.XMLHTTP"); 99 | }; 100 | } 101 | if(!XMLHttpRequest){ 102 | return ""; 103 | } 104 | var r=new XMLHttpRequest(); 105 | try{ 106 | r.open("get",_d,true); 107 | r.setRequestHeader("X_REQUESTED_WITH","XMLHttpRequest"); 108 | } 109 | catch(e){ 110 | _f(); 111 | return; 112 | } 113 | var _10=false; 114 | setTimeout(function(){ 115 | _10=true; 116 | },5000); 117 | document.documentElement.style.cursor="progress"; 118 | r.onreadystatechange=function(){ 119 | if(r.readyState===4&&!_10){ 120 | if(!r.status&&location.protocol==="file:"||(r.status>=200&&r.status<300)||r.status===304||navigator.userAgent.indexOf("Safari")>-1&&typeof r.status==="undefined"){ 121 | _e(r.responseText); 122 | }else{ 123 | _f(); 124 | } 125 | document.documentElement.style.cursor=""; 126 | r=null; 127 | } 128 | }; 129 | r.send(""); 130 | }; 131 | var _11=function(_12){ 132 | _12=_12.replace(_3.REDUNDANT_COMPONENTS,""); 133 | _12=_12.replace(_3.REDUNDANT_WHITESPACE,"$1"); 134 | _12=_12.replace(_3.MORE_WHITESPACE," "); 135 | _12=_12.replace(_3.FINAL_SEMICOLONS,"}"); 136 | return _12; 137 | }; 138 | var _13={mediaQueryList:function(s){ 139 | var o={}; 140 | var idx=s.indexOf("{"); 141 | var lt=s.substring(0,idx); 142 | s=s.substring(idx+1,s.length-1); 143 | var mqs=[],rs=[]; 144 | var qts=lt.toLowerCase().substring(7).split(","); 145 | for(var i=0;i-1&&_23.href&&_23.href.length!==0&&!_23.disabled){ 315 | _1f[_1f.length]=_23; 316 | } 317 | } 318 | if(_1f.length>0){ 319 | var c=0; 320 | var _24=function(){ 321 | c++; 322 | if(c===_1f.length){ 323 | _20(); 324 | } 325 | }; 326 | var _25=function(_26){ 327 | var _27=_26.href; 328 | _c(_27,function(_28){ 329 | _28=_11(_28).replace(_3.RELATIVE_URLS,"url("+_27.substring(0,_27.lastIndexOf("/"))+"/$1)"); 330 | _26.cssHelperText=_28; 331 | _24(); 332 | },_24); 333 | }; 334 | for(i=0;i<_1f.length;i++){ 335 | _25(_1f[i]); 336 | } 337 | }else{ 338 | _20(); 339 | } 340 | }; 341 | var _29={mediaQueryLists:"array",rules:"array",selectors:"object",declarations:"array",properties:"object"}; 342 | var _2a={mediaQueryLists:null,rules:null,selectors:null,declarations:null,properties:null}; 343 | var _2b=function(_2c,v){ 344 | if(_2a[_2c]!==null){ 345 | if(_29[_2c]==="array"){ 346 | return (_2a[_2c]=_2a[_2c].concat(v)); 347 | }else{ 348 | var c=_2a[_2c]; 349 | for(var n in v){ 350 | if(v.hasOwnProperty(n)){ 351 | if(!c[n]){ 352 | c[n]=v[n]; 353 | }else{ 354 | c[n]=c[n].concat(v[n]); 355 | } 356 | } 357 | } 358 | return c; 359 | } 360 | } 361 | }; 362 | var _2d=function(_2e){ 363 | _2a[_2e]=(_29[_2e]==="array")?[]:{}; 364 | for(var i=0;i<_4.length;i++){ 365 | _2b(_2e,_4[i].cssHelperParsed[_2e]); 366 | } 367 | return _2a[_2e]; 368 | }; 369 | domReady(function(){ 370 | var els=document.body.getElementsByTagName("*"); 371 | for(var i=0;i=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44)); 554 | }else{ 555 | return false; 556 | } 557 | }else{ 558 | return _46>0; 559 | } 560 | }else{ 561 | if("device-height"===_41.substring(l-13,l)){ 562 | _47=screen.height; 563 | if(_42!==null){ 564 | if(_43==="length"){ 565 | return ((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44)); 566 | }else{ 567 | return false; 568 | } 569 | }else{ 570 | return _47>0; 571 | } 572 | }else{ 573 | if("width"===_41.substring(l-5,l)){ 574 | _46=document.documentElement.clientWidth||document.body.clientWidth; 575 | if(_42!==null){ 576 | if(_43==="length"){ 577 | return ((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44)); 578 | }else{ 579 | return false; 580 | } 581 | }else{ 582 | return _46>0; 583 | } 584 | }else{ 585 | if("height"===_41.substring(l-6,l)){ 586 | _47=document.documentElement.clientHeight||document.body.clientHeight; 587 | if(_42!==null){ 588 | if(_43==="length"){ 589 | return ((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44)); 590 | }else{ 591 | return false; 592 | } 593 | }else{ 594 | return _47>0; 595 | } 596 | }else{ 597 | if("device-aspect-ratio"===_41.substring(l-19,l)){ 598 | return _43==="aspect-ratio"&&screen.width*_44[1]===screen.height*_44[0]; 599 | }else{ 600 | if("color-index"===_41.substring(l-11,l)){ 601 | var _48=Math.pow(2,screen.colorDepth); 602 | if(_42!==null){ 603 | if(_43==="absolute"){ 604 | return ((min&&_48>=_44)||(max&&_48<_44)||(!min&&!max&&_48===_44)); 605 | }else{ 606 | return false; 607 | } 608 | }else{ 609 | return _48>0; 610 | } 611 | }else{ 612 | if("color"===_41.substring(l-5,l)){ 613 | var _49=screen.colorDepth; 614 | if(_42!==null){ 615 | if(_43==="absolute"){ 616 | return ((min&&_49>=_44)||(max&&_49<_44)||(!min&&!max&&_49===_44)); 617 | }else{ 618 | return false; 619 | } 620 | }else{ 621 | return _49>0; 622 | } 623 | }else{ 624 | if("resolution"===_41.substring(l-10,l)){ 625 | var res; 626 | if(_45==="dpcm"){ 627 | res=_3d("1cm"); 628 | }else{ 629 | res=_3d("1in"); 630 | } 631 | if(_42!==null){ 632 | if(_43==="resolution"){ 633 | return ((min&&res>=_44)||(max&&res<_44)||(!min&&!max&&res===_44)); 634 | }else{ 635 | return false; 636 | } 637 | }else{ 638 | return res>0; 639 | } 640 | }else{ 641 | return false; 642 | } 643 | } 644 | } 645 | } 646 | } 647 | } 648 | } 649 | } 650 | }; 651 | var _4a=function(mq){ 652 | var _4b=mq.getValid(); 653 | var _4c=mq.getExpressions(); 654 | var l=_4c.length; 655 | if(l>0){ 656 | for(var i=0;i0){ 675 | s[c++]=","; 676 | } 677 | s[c++]=n; 678 | } 679 | } 680 | if(s.length>0){ 681 | _39[_39.length]=cssHelper.addStyle("@media "+s.join("")+"{"+mql.getCssText()+"}",false); 682 | } 683 | }; 684 | var _4e=function(_4f){ 685 | for(var i=0;i<_4f.length;i++){ 686 | _4d(_4f[i]); 687 | } 688 | if(ua.ie){ 689 | document.documentElement.style.display="block"; 690 | setTimeout(function(){ 691 | document.documentElement.style.display=""; 692 | },0); 693 | setTimeout(function(){ 694 | cssHelper.broadcast("cssMediaQueriesTested"); 695 | },100); 696 | }else{ 697 | cssHelper.broadcast("cssMediaQueriesTested"); 698 | } 699 | }; 700 | var _50=function(){ 701 | for(var i=0;i<_39.length;i++){ 702 | cssHelper.removeStyle(_39[i]); 703 | } 704 | _39=[]; 705 | cssHelper.mediaQueryLists(_4e); 706 | }; 707 | var _51=0; 708 | var _52=function(){ 709 | var _53=cssHelper.getViewportWidth(); 710 | var _54=cssHelper.getViewportHeight(); 711 | if(ua.ie){ 712 | var el=document.createElement("div"); 713 | el.style.position="absolute"; 714 | el.style.top="-9999em"; 715 | el.style.overflow="scroll"; 716 | document.body.appendChild(el); 717 | _51=el.offsetWidth-el.clientWidth; 718 | document.body.removeChild(el); 719 | } 720 | var _55; 721 | var _56=function(){ 722 | var vpw=cssHelper.getViewportWidth(); 723 | var vph=cssHelper.getViewportHeight(); 724 | if(Math.abs(vpw-_53)>_51||Math.abs(vph-_54)>_51){ 725 | _53=vpw; 726 | _54=vph; 727 | clearTimeout(_55); 728 | _55=setTimeout(function(){ 729 | if(!_3a()){ 730 | _50(); 731 | }else{ 732 | cssHelper.broadcast("cssMediaQueriesTested"); 733 | } 734 | },500); 735 | } 736 | }; 737 | window.onresize=function(){ 738 | var x=window.onresize||function(){ 739 | }; 740 | return function(){ 741 | x(); 742 | _56(); 743 | }; 744 | }(); 745 | }; 746 | var _57=document.documentElement; 747 | _57.style.marginLeft="-32767px"; 748 | setTimeout(function(){ 749 | _57.style.marginTop=""; 750 | },20000); 751 | return function(){ 752 | if(!_3a()){ 753 | cssHelper.addListener("newStyleParsed",function(el){ 754 | _4e(el.cssHelperParsed.mediaQueryLists); 755 | }); 756 | cssHelper.addListener("cssMediaQueriesTested",function(){ 757 | if(ua.ie){ 758 | _57.style.width="1px"; 759 | } 760 | setTimeout(function(){ 761 | _57.style.width=""; 762 | _57.style.marginLeft=""; 763 | },0); 764 | cssHelper.removeListener("cssMediaQueriesTested",arguments.callee); 765 | }); 766 | _3c(); 767 | _50(); 768 | }else{ 769 | _57.style.marginLeft=""; 770 | } 771 | _52(); 772 | }; 773 | }()); 774 | try{ 775 | document.execCommand("BackgroundImageCache",false,true); 776 | } 777 | catch(e){ 778 | } 779 | 780 | -------------------------------------------------------------------------------- /examples/js/vendor/html5shiv.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @preserve HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | ;(function(window, document) { 5 | /*jshint evil:true */ 6 | /** version */ 7 | var version = '3.6.2pre'; 8 | 9 | /** Preset options */ 10 | var options = window.html5 || {}; 11 | 12 | /** Used to skip problem elements */ 13 | var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i; 14 | 15 | /** Not all elements can be cloned in IE **/ 16 | var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i; 17 | 18 | /** Detect whether the browser supports default html5 styles */ 19 | var supportsHtml5Styles; 20 | 21 | /** Name of the expando, to work with multiple documents or to re-shiv one document */ 22 | var expando = '_html5shiv'; 23 | 24 | /** The id for the the documents expando */ 25 | var expanID = 0; 26 | 27 | /** Cached data for each document */ 28 | var expandoData = {}; 29 | 30 | /** Detect whether the browser supports unknown elements */ 31 | var supportsUnknownElements; 32 | 33 | (function() { 34 | try { 35 | var a = document.createElement('a'); 36 | a.innerHTML = ''; 37 | //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles 38 | supportsHtml5Styles = ('hidden' in a); 39 | 40 | supportsUnknownElements = a.childNodes.length == 1 || (function() { 41 | // assign a false positive if unable to shiv 42 | (document.createElement)('a'); 43 | var frag = document.createDocumentFragment(); 44 | return ( 45 | typeof frag.cloneNode == 'undefined' || 46 | typeof frag.createDocumentFragment == 'undefined' || 47 | typeof frag.createElement == 'undefined' 48 | ); 49 | }()); 50 | } catch(e) { 51 | // assign a false positive if detection fails => unable to shiv 52 | supportsHtml5Styles = true; 53 | supportsUnknownElements = true; 54 | } 55 | 56 | }()); 57 | 58 | /*--------------------------------------------------------------------------*/ 59 | 60 | /** 61 | * Creates a style sheet with the given CSS text and adds it to the document. 62 | * @private 63 | * @param {Document} ownerDocument The document. 64 | * @param {String} cssText The CSS text. 65 | * @returns {StyleSheet} The style element. 66 | */ 67 | function addStyleSheet(ownerDocument, cssText) { 68 | var p = ownerDocument.createElement('p'), 69 | parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement; 70 | 71 | p.innerHTML = 'x'; 72 | return parent.insertBefore(p.lastChild, parent.firstChild); 73 | } 74 | 75 | /** 76 | * Returns the value of `html5.elements` as an array. 77 | * @private 78 | * @returns {Array} An array of shived element node names. 79 | */ 80 | function getElements() { 81 | var elements = html5.elements; 82 | return typeof elements == 'string' ? elements.split(' ') : elements; 83 | } 84 | 85 | /** 86 | * Returns the data associated to the given document 87 | * @private 88 | * @param {Document} ownerDocument The document. 89 | * @returns {Object} An object of data. 90 | */ 91 | function getExpandoData(ownerDocument) { 92 | var data = expandoData[ownerDocument[expando]]; 93 | if (!data) { 94 | data = {}; 95 | expanID++; 96 | ownerDocument[expando] = expanID; 97 | expandoData[expanID] = data; 98 | } 99 | return data; 100 | } 101 | 102 | /** 103 | * returns a shived element for the given nodeName and document 104 | * @memberOf html5 105 | * @param {String} nodeName name of the element 106 | * @param {Document} ownerDocument The context document. 107 | * @returns {Object} The shived element. 108 | */ 109 | function createElement(nodeName, ownerDocument, data){ 110 | if (!ownerDocument) { 111 | ownerDocument = document; 112 | } 113 | if(supportsUnknownElements){ 114 | return ownerDocument.createElement(nodeName); 115 | } 116 | if (!data) { 117 | data = getExpandoData(ownerDocument); 118 | } 119 | var node; 120 | 121 | if (data.cache[nodeName]) { 122 | node = data.cache[nodeName].cloneNode(); 123 | } else if (saveClones.test(nodeName)) { 124 | node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode(); 125 | } else { 126 | node = data.createElem(nodeName); 127 | } 128 | 129 | // Avoid adding some elements to fragments in IE < 9 because 130 | // * Attributes like `name` or `type` cannot be set/changed once an element 131 | // is inserted into a document/fragment 132 | // * Link elements with `src` attributes that are inaccessible, as with 133 | // a 403 response, will cause the tab/window to crash 134 | // * Script elements appended to fragments will execute when their `src` 135 | // or `text` property is set 136 | return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node; 137 | } 138 | 139 | /** 140 | * returns a shived DocumentFragment for the given document 141 | * @memberOf html5 142 | * @param {Document} ownerDocument The context document. 143 | * @returns {Object} The shived DocumentFragment. 144 | */ 145 | function createDocumentFragment(ownerDocument, data){ 146 | if (!ownerDocument) { 147 | ownerDocument = document; 148 | } 149 | if(supportsUnknownElements){ 150 | return ownerDocument.createDocumentFragment(); 151 | } 152 | data = data || getExpandoData(ownerDocument); 153 | var clone = data.frag.cloneNode(), 154 | i = 0, 155 | elems = getElements(), 156 | l = elems.length; 157 | for(;i',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 3 | 4 | 5 | Redirect 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/img/arrow_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/src/img/arrow_down.png -------------------------------------------------------------------------------- /src/img/arrow_up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/src/img/arrow_up.png -------------------------------------------------------------------------------- /src/img/furley_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/src/img/furley_bg.png -------------------------------------------------------------------------------- /src/img/furley_bg_@2X.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/src/img/furley_bg_@2X.png -------------------------------------------------------------------------------- /src/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/src/img/loading.gif -------------------------------------------------------------------------------- /src/img/sort-asc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/src/img/sort-asc.png -------------------------------------------------------------------------------- /src/img/sort-desc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lidatui/mmGrid/88270ab1385d0d01b9910a1d9aa4b859ac338096/src/img/sort-desc.png -------------------------------------------------------------------------------- /src/mmGrid.css: -------------------------------------------------------------------------------- 1 | 2 | .mmGrid{ 3 | position: relative; 4 | overflow: hidden; 5 | background: #fff; 6 | border: 1px solid #ccc; 7 | text-align: left; 8 | } 9 | 10 | .mmGrid table{ 11 | border-collapse: separate; 12 | border-spacing: 0; 13 | text-align: left; 14 | 15 | } 16 | 17 | .mmGrid input[type="radio"], 18 | .mmGrid input[type="checkbox"]{ 19 | margin: 0; 20 | } 21 | 22 | /* 遮罩 */ 23 | .mmGrid .mmg-mask{ 24 | position: absolute; 25 | left: 0; 26 | top: 0; 27 | display: none; 28 | width: 100%; 29 | height: 100%; 30 | background: #ddd; 31 | 32 | 33 | } 34 | 35 | /* 半透明 */ 36 | .mmGrid .mmg-transparent{ 37 | /* IE 8 */ 38 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 39 | /* IE 5-7 */ 40 | filter: alpha(opacity=50); 41 | /* Netscape */ 42 | -moz-opacity: 0.5; 43 | /* Safari 1.x */ 44 | -khtml-opacity: 0.5; 45 | /* Good browsers */ 46 | opacity: 0.5; 47 | } 48 | 49 | /* loading */ 50 | .mmGrid .mmg-loading{ 51 | position: absolute; 52 | display: none; 53 | text-align: center; 54 | 55 | } 56 | 57 | .mmGrid .mmg-loading .mmg-loadingImg{ 58 | margin: 5px auto; 59 | width: 32px; 60 | height: 32px; 61 | background: url(img/loading.gif) no-repeat center center; 62 | } 63 | 64 | .mmGrid .mmg-loading .mmg-loadingText{ 65 | 66 | } 67 | 68 | /* 标题包装 */ 69 | .mmGrid .mmg-headWrapper{ 70 | position: relative; 71 | overflow: hidden; 72 | width: 9999px; 73 | 74 | background: #eee; /* Old browsers */ 75 | background: -moz-linear-gradient(top, #f9f9f9 0%, #eaeaea 100%); /* FF3.6+ */ 76 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */ 77 | background: -webkit-linear-gradient(top, #f9f9f9 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */ 78 | background: -o-linear-gradient(top, #f9f9f9 0%,#eaeaea 100%); /* Opera 11.10+ */ 79 | background: -ms-linear-gradient(top, #f9f9f9 0%,#eaeaea 100%); /* IE10+ */ 80 | background: linear-gradient(to bottom, #f9f9f9 0%,#eaeaea 100%); /* W3C */ 81 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea',GradientType=0 ); /* IE6-8 */ 82 | 83 | -moz-box-shadow: 0 0px 2px #bbb; 84 | -webkit-box-shadow: 0 0px 2px #bbb; 85 | box-shadow: 0 0px 2px #bbb; 86 | border-top: 2px solid #b00; 87 | z-index: 1; 88 | 89 | } 90 | 91 | /* 标题 */ 92 | .mmGrid .mmg-headWrapper .mmg-head{ 93 | position: relative; 94 | } 95 | 96 | .mmGrid .mmg-headWrapper .mmg-head th{ 97 | position: relative; 98 | padding: 0 5px; 99 | border-right: 1px solid #ddd; 100 | border-bottom: 1px solid #d2d2d2; 101 | overflow: hidden; 102 | } 103 | 104 | .mmGrid .mmg-headWrapper .mmg-head th.mmg-groupCol{ 105 | /* 分组列 */ 106 | } 107 | 108 | .mmGrid .mmg-headWrapper .mmg-head th input{ 109 | height: 2em; 110 | } 111 | 112 | .mmGrid .mmg-headWrapper .mmg-head th .mmg-titleWrapper{ 113 | position: relative; 114 | height: 2em; 115 | } 116 | 117 | .mmGrid .mmg-headWrapper .mmg-head th .mmg-titleWrapper .mmg-colResize{ 118 | position: absolute; 119 | top: 0; 120 | right: -6px; 121 | _right: -4px; 122 | width: 4px; 123 | height: 100%; 124 | cursor: col-resize; 125 | } 126 | 127 | .mmGrid .mmg-headWrapper .mmg-head th .mmg-titleWrapper .mmg-title{ 128 | display: inline-block; 129 | *display: inline; 130 | *zoom: 1; 131 | height: 2em; 132 | font-weight: bold; 133 | line-height: 2; 134 | vertical-align: top; 135 | } 136 | 137 | .mmGrid .mmg-headWrapper .mmg-head th .mmg-titleWrapper .mmg-canSort{ 138 | cursor: pointer; 139 | text-decoration: underline; 140 | } 141 | 142 | .mmGrid .mmg-headWrapper .mmg-head th .mmg-titleWrapper .mmg-sort{ 143 | overflow: hidden; 144 | display: none; 145 | width: 7px; 146 | height: 2em; 147 | margin-left: 2px; 148 | vertical-align: top; 149 | } 150 | 151 | .mmGrid .mmg-headWrapper .mmg-head th .mmg-titleWrapper .mmg-asc{ 152 | display: inline-block; 153 | *display: inline; 154 | *zoom: 1; 155 | background: url(img/sort-asc.png) no-repeat center center; 156 | } 157 | 158 | .mmGrid .mmg-headWrapper .mmg-head th .mmg-titleWrapper .mmg-desc{ 159 | display: inline-block; 160 | *display: inline; 161 | *zoom: 1; 162 | background: url(img/sort-desc.png) no-repeat center center; 163 | } 164 | 165 | .mmGrid .mmg-colResizePointer{ 166 | position: absolute; 167 | top: 0; 168 | left: 0; 169 | display: none; 170 | width: 1px; 171 | height: 100%; 172 | background: #999; 173 | cursor: col-resize; 174 | z-index: 1; 175 | } 176 | 177 | .mmGrid .mmg-colResizePointer-before{ 178 | position: absolute; 179 | top: 0; 180 | left: 0; 181 | display: none; 182 | width: 1px; 183 | height: 100%; 184 | background: #999; 185 | cursor: col-resize; 186 | z-index: 1; 187 | } 188 | 189 | /* 背板 */ 190 | .mmGrid .mmg-backboard{ 191 | position: relative; 192 | display: none; 193 | background-image: url(img/furley_bg.png); 194 | background-image: -webkit-image-set( 195 | url(img/furley_bg.png) 1x, 196 | url(img/furley_bg_@2X.png) 2x 197 | ); 198 | -webkit-box-shadow: inset 0 0 2px 1px #d9d9d9; 199 | -moz-box-shadow: inset 0 0 2px 1px #d9d9d9; 200 | -o-box-shadow: inset 0 0 2px 1px #d9d9d9; 201 | -ms-box-shadow: inset 0 0 2px 1px #d9d9d9; 202 | box-shadow: inset 0 0 2px 1px #d9d9d9; 203 | text-align: left; 204 | } 205 | .mmGrid .mmg-backboard h1{ 206 | margin: 0 10px 5px 10px; 207 | padding: 10px 0 5px 0; 208 | font-size: 1em; 209 | font-weight: bold; 210 | line-height: 1.8; 211 | border-bottom: 1px solid #ccc; 212 | } 213 | 214 | .mmGrid .mmg-backboard label{ 215 | display: inline-block; 216 | *display: inline; 217 | *zoom: 1; 218 | width: 95px; 219 | font-size: 1em; 220 | line-height: 2.2; 221 | white-space: nowrap; 222 | overflow: hidden; 223 | text-overflow: ellipsis; 224 | } 225 | 226 | .mmGrid .mmg-backboard label input{ 227 | margin: 0 5px 0 10px; 228 | padding: 0px; 229 | border: 0px; 230 | } 231 | 232 | /* 内容包装器 */ 233 | .mmGrid .mmg-bodyWrapper{ 234 | position: relative; 235 | overflow: auto; 236 | width: 9999px; 237 | min-height: 0%; /* fix IE9 hover bug see: http://jsfiddle.net/pjkix/86Lfv/ */ 238 | } 239 | 240 | /* 内容 */ 241 | .mmGrid .mmg-bodyWrapper .mmg-body{ 242 | table-layout: fixed; 243 | } 244 | 245 | .mmGrid .mmg-bodyWrapper .mmg-body tr{ 246 | 247 | } 248 | 249 | .mmGrid .mmg-bodyWrapper .mmg-body tr.even{ 250 | background: #f9f9f9; 251 | } 252 | 253 | .mmGrid .mmg-bodyWrapper .mmg-body td{ 254 | padding: 0 5px; 255 | border-right: 1px solid #e4e4e4; 256 | border-bottom: 1px solid #e4e4e4; 257 | line-height: 2; 258 | } 259 | 260 | .mmGrid .mmg-bodyWrapper .mmg-body td.colSelected{ 261 | background: #f7f7f7; 262 | } 263 | 264 | .mmGrid .mmg-bodyWrapper .mmg-body td.colSelectedEven{ 265 | background: #f5f5f5; 266 | } 267 | 268 | .mmGrid .mmg-bodyWrapper .mmg-body tr.hover td{ 269 | background: #e1eff8; 270 | } 271 | 272 | .mmGrid .mmg-bodyWrapper .mmg-body tr:hover td{ 273 | background: #e1eff8; 274 | } 275 | 276 | .mmGrid .mmg-bodyWrapper .mmg-body tr.selected td{ 277 | background: #fff5cc; 278 | } 279 | 280 | .mmGrid .mmg-bodyWrapper .mmg-body td .mmg-index{ 281 | color: #555; 282 | } 283 | 284 | .mmGrid .nowrap{ 285 | overflow: hidden; 286 | white-space: nowrap; 287 | text-overflow: ellipsis; 288 | -o-text-overflow: ellipsis; 289 | -ms-text-overflow: ellipsis; 290 | } 291 | 292 | /* 消息 */ 293 | .mmGrid .mmg-message{ 294 | position: absolute; 295 | display: none; 296 | text-align: center; 297 | } 298 | 299 | .mmGrid .mmg-btnBackboardDn{ 300 | position: absolute; 301 | top: 0; 302 | right: 20px; 303 | display: block; 304 | width: 50px; 305 | height: 20px; 306 | background: #fff url(img/arrow_down.png) no-repeat center center; 307 | border: 1px solid #ccc; 308 | border-top: 0; 309 | -webkit-border-radius: 2px; 310 | -moz-border-radius: 2px; 311 | border-radius: 2px; 312 | -webkit-box-shadow: 1px 1px 3px #ccc; 313 | -moz-box-shadow: 1px 1px 3px #ccc; 314 | -o-box-shadow: 1px 1px 3px #ccc; 315 | -ms-box-shadow: 1px 1px 3px #ccc; 316 | box-shadow:1px 1px 3px #ccc; 317 | cursor: pointer; 318 | } 319 | 320 | .mmGrid .mmg-backboard .mmg-btnBackboardUp{ 321 | position: absolute; 322 | right: 20px; 323 | bottom: 0; 324 | display: block; 325 | width: 50px; 326 | height: 20px; 327 | background: #fff url(img/arrow_up.png) no-repeat center center; 328 | border: 1px solid #ccc; 329 | border-bottom: 0; 330 | -webkit-border-radius: 2px; 331 | -moz-border-radius: 2px; 332 | border-radius: 2px; 333 | -webkit-box-shadow: 1px 1px 3px #ccc; 334 | -moz-box-shadow: 1px 1px 3px #ccc; 335 | -o-box-shadow: 1px 1px 3px #ccc; 336 | -ms-box-shadow: 1px 1px 3px #ccc; 337 | box-shadow:1px 1px 3px #ccc; 338 | cursor: pointer; 339 | } 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | -------------------------------------------------------------------------------- /src/mmPaginator.css: -------------------------------------------------------------------------------- 1 | .mmPaginator { 2 | margin: 5px 0; 3 | white-space: nowrap; 4 | } 5 | 6 | .mmPaginator .totalCountLabel{ 7 | display: inline-block; 8 | *display: inline; 9 | *zoom: 1; 10 | margin: 0 5px 0 0; 11 | padding: 1px 0 0 0; 12 | line-height: 1.5; 13 | vertical-align: top; 14 | } 15 | .mmPaginator .totalCountLabel span{ 16 | color: #b00; 17 | font-weight: bold; 18 | } 19 | 20 | .mmPaginator .pageList{ 21 | display: inline-block; 22 | *display: inline; 23 | *zoom: 1; 24 | margin: 0 5px 0 0; 25 | padding: 0; 26 | list-style: none; 27 | } 28 | 29 | .mmPaginator .pageList li{ 30 | display: inline-block; 31 | *display: inline; 32 | *zoom: 1; 33 | margin: 0 2px; 34 | padding: 0 6px; 35 | background: #fff; 36 | border: 1px solid #ccc; 37 | line-height: 1.5; 38 | vertical-align: top; 39 | 40 | } 41 | 42 | .mmPaginator .pageList li.active{ 43 | background: none; 44 | padding-top: 1px; 45 | border: 0; 46 | } 47 | 48 | .mmPaginator .pageList li.disable a{ 49 | color: #333; 50 | cursor: default; 51 | } 52 | 53 | .mmPaginator .pageList li.disable{ 54 | background: #efefef; 55 | } 56 | 57 | .mmPaginator .pageList li.disable a{ 58 | color: #333; 59 | cursor: default; 60 | } 61 | 62 | .mmPaginator .pageList li a{ 63 | color: #b00; 64 | text-align: center; 65 | cursor: pointer; 66 | } 67 | 68 | .mmPaginator .pageList li a.head{ 69 | 70 | } 71 | 72 | .mmPaginator .pageList li a.headDisable{ 73 | 74 | } 75 | 76 | .mmPaginator .pageList li a.prev{ 77 | 78 | } 79 | 80 | .mmPaginator .pageList li a.prevDisable{ 81 | 82 | } 83 | 84 | .mmPaginator .pageList li a.next{ 85 | 86 | } 87 | 88 | .mmPaginator .pageList li a.nextDisable{ 89 | 90 | } 91 | 92 | .mmPaginator .pageList li a.tail{ 93 | 94 | } 95 | 96 | .mmPaginator .pageList li a.tailDisable{ 97 | 98 | } 99 | 100 | .mmPaginator .pageList li a.current{ 101 | 102 | } 103 | 104 | .mmPaginator .pageList li a.skip{ 105 | 106 | } 107 | 108 | .mmPaginator .limit{ 109 | display: inline-block; 110 | *display: inline; 111 | *zoom: 1; 112 | line-height: 1.5; 113 | vertical-align: top; 114 | } 115 | 116 | .mmPaginator .limit select{ 117 | border: 1px solid #ccc; 118 | padding: 1px; 119 | width: auto; 120 | height: auto; 121 | margin: 0; 122 | line-height: 1.5; 123 | font-size: 1em; 124 | } 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /src/mmPaginator.js: -------------------------------------------------------------------------------- 1 | !function($){ 2 | var MMPaginator = function(element, options){ 3 | this.$el = $(element); 4 | this.opts = options; 5 | }; 6 | 7 | MMPaginator.prototype = { 8 | _initLayout: function(){ 9 | var that = this; 10 | var $el = this.$el; 11 | var opts = this.opts; 12 | 13 | $el.addClass("mmPaginator"); 14 | var pgHtmls = [ 15 | '
', 16 | '
    ', 17 | '
    ' 18 | ]; 19 | $el.append($(pgHtmls.join(''))); 20 | 21 | this.$totalCountLabel = $el.find('.totalCountLabel'); 22 | this.$pageList = $el.find('.pageList'); 23 | this.$limitList = $el.find('.limit select'); 24 | 25 | var $limitList = this.$limitList 26 | $.each(opts.limitList, function(){ 27 | var $option = $('') 28 | .prop('value',this) 29 | .text(that.formatString(opts.limitLabel,[this])); 30 | $limitList.append($option); 31 | }); 32 | 33 | $limitList.on('change', function(){ 34 | $el.data('page', 1); 35 | that.$mmGrid.load(); 36 | }); 37 | 38 | } 39 | 40 | , _plain: function(page, totalCount, limit){ 41 | var that = this; 42 | var $el = this.$el; 43 | var $pageList = this.$pageList; 44 | 45 | var totalPage = totalCount % limit === 0 ? parseInt(totalCount/limit) : parseInt(totalCount/limit) + 1; 46 | totalPage = totalPage ? totalPage : 0; 47 | if(totalPage === 0){ 48 | page = 1; 49 | }else if(page > totalPage){ 50 | page = totalPage; 51 | }else if(page < 1 && totalPage != 0){ 52 | page = 1; 53 | } 54 | // 55 | var $prev = $(''); 56 | if(page<=1){ 57 | $prev.addClass('disable'); 58 | }else{ 59 | $prev.find('a').on('click', function(){ 60 | $el.data('page', page-1); 61 | that.$mmGrid.load(); 62 | }); 63 | } 64 | $pageList.append($prev); 65 | ///// 66 | var list = [1]; 67 | if(page > 4 ){ 68 | list.push('...'); 69 | } 70 | for(var i= 0; i < 5; i++){ 71 | var no = page - 2 + i; 72 | if(no > 1 && no <= totalPage-1){ 73 | list.push(no); 74 | } 75 | } 76 | if(page+1 < totalPage-1){ 77 | list.push('...'); 78 | } 79 | if(totalPage>1){ 80 | list.push(totalPage); 81 | } 82 | $.each(list, function(index, item){ 83 | var $li = $('
    • '); 84 | if(item === '...'){ 85 | $li.addClass('').html('...'); 86 | }else if(item === page){ 87 | $li.addClass('active').find('a').text(item); 88 | }else{ 89 | $li.find('a').text(item).prop('title','第'+item+'页').on('click', function(e){ 90 | $el.data('page', item); 91 | that.$mmGrid.load(); 92 | }); 93 | } 94 | $pageList.append($li); 95 | }); 96 | // 97 | var $next = $(''); 98 | if(page>=totalPage){ 99 | $next.addClass('disable'); 100 | }else{ 101 | $next.find('a').on('click', function(){ 102 | $el.data('page', page+1); 103 | that.$mmGrid.load(); 104 | }); 105 | } 106 | $pageList.append($next); 107 | } 108 | 109 | , _search: function(page, totalCount, limit){ 110 | 111 | } 112 | 113 | , load: function(params){ 114 | var $el = this.$el; 115 | var $limitList = this.$limitList; 116 | var opts = this.opts; 117 | 118 | if(!params){ 119 | params = {}; 120 | } 121 | 122 | var page = params[opts.pageParamName]; 123 | if(page === undefined || page === null){ 124 | page = $el.data('page'); 125 | } 126 | $el.data('page', page); 127 | 128 | var totalCount = params[opts.totalCountName]; 129 | if(totalCount === undefined){ 130 | totalCount = 0; 131 | } 132 | $el.data('totalCount', totalCount); 133 | 134 | var limit = params[opts.limitParamName]; 135 | if(!limit){ 136 | limit = $limitList.val(); 137 | } 138 | this.$limitList.val(limit); 139 | 140 | this.$totalCountLabel.html(this.formatString(opts.totalCountLabel,[totalCount])); 141 | this.$pageList.empty(); 142 | 143 | this._plain(page, totalCount, this.$limitList.val()); 144 | } 145 | 146 | , formatString: function(text, args){ 147 | return text.replace(/{(\d+)}/g, function(match, number) { 148 | return typeof args[number] != 'undefined' 149 | ? args[number] 150 | : match 151 | ; 152 | }); 153 | } 154 | 155 | , params: function(){ 156 | var opts = this.opts; 157 | var $el = this.$el; 158 | var $limitList = this.$limitList; 159 | 160 | var params = {}; 161 | params[opts.pageParamName] = $el.data('page'); 162 | params[opts.limitParamName] = $limitList.val(); 163 | return params; 164 | } 165 | 166 | , init: function($grid){ 167 | var that = this; 168 | var opts = that.opts; 169 | this.$mmGrid = $grid; 170 | this._initLayout(); 171 | this.$mmGrid.on('loadSuccess', function(e, data){ 172 | that.load(data); 173 | }); 174 | 175 | var params = {}; 176 | params[opts.totalCountName] = 0; 177 | params[opts.pageParamName] = opts.page; 178 | params[opts.limitParamName] = opts.limit; 179 | this.load(params); 180 | 181 | if($grid.opts.indexCol){ 182 | var indexCol = $grid.opts.cols[0]; 183 | indexCol.renderer = function(val,item,rowIndex){ 184 | var params = that.params(); 185 | return ''; 188 | }; 189 | } 190 | 191 | } 192 | 193 | }; 194 | 195 | $.fn.mmPaginator = function(){ 196 | 197 | if(arguments.length === 0 || typeof arguments[0] === 'object'){ 198 | var option = arguments[0] 199 | , data = this.data('mmPaginator') 200 | , options = $.extend(true, {}, $.fn.mmPaginator.defaults, option); 201 | if (!data) { 202 | data = new MMPaginator(this[0], options); 203 | this.data('mmPaginator', data); 204 | } 205 | return $.extend(true, this, data); 206 | } 207 | if(typeof arguments[0] === 'string'){ 208 | var data = this.data('mmPaginator'); 209 | var fn = data[arguments[0]]; 210 | if(fn){ 211 | var args = Array.prototype.slice.call(arguments); 212 | return fn.apply(data,args.slice(1)); 213 | } 214 | } 215 | }; 216 | 217 | $.fn.mmPaginator.defaults = { 218 | style: 'plain' 219 | , totalCountName: 'totalCount' 220 | , page: 1 221 | , pageParamName: 'page' 222 | , limitParamName: 'limit' 223 | , limitLabel: '每页{0}条' 224 | , totalCountLabel: '共{0}条记录' 225 | , limit: undefined 226 | , limitList: [20, 30, 40, 50] 227 | }; 228 | 229 | $.fn.mmPaginator.Constructor = MMPaginator; 230 | 231 | }(window.jQuery); -------------------------------------------------------------------------------- /src/theme/bootstrap/mmGrid-bootstrap.css: -------------------------------------------------------------------------------- 1 | 2 | .mmGrid{ 3 | -webkit-border-radius: 4px; 4 | -moz-border-radius: 4px; 5 | border-radius: 4px; 6 | } 7 | 8 | .mmGrid .mmg-headWrapper{ 9 | background: #fff; 10 | filter: none; 11 | -moz-box-shadow: none; 12 | -webkit-box-shadow: none; 13 | box-shadow: none; 14 | border-top: 0; 15 | border-bottom: 1px solid #dddddd; 16 | } 17 | 18 | .mmGrid .mmg-headWrapper .mmg-head th{ 19 | padding: 4px 6px; 20 | border-right: 1px solid #dddddd; 21 | border-bottom: 0; 22 | } 23 | 24 | .mmGrid .mmg-headWrapper .mmg-head th.mmg-groupCol{ 25 | border-bottom: 1px solid #dddddd; 26 | } 27 | 28 | .mmGrid .mmg-backboard{ 29 | background: #f7f7f7; 30 | } 31 | .mmGrid .mmg-bodyWrapper .mmg-body td{ 32 | padding: 4px 6px; 33 | border-right: 1px solid #dddddd; 34 | border-bottom: 1px solid #dddddd; 35 | 36 | } 37 | 38 | .mmGrid .mmg-bodyWrapper .mmg-body tr.hover td{ 39 | background: #f5f5f5; 40 | } 41 | 42 | .mmGrid .mmg-bodyWrapper .mmg-body tr:hover td{ 43 | background: #f5f5f5; 44 | } 45 | 46 | .mmGrid .mmg-bodyWrapper .mmg-body tr.selected td{ 47 | background: #fcf8e3; 48 | } 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/theme/bootstrap/mmPaginator-bootstrap.css: -------------------------------------------------------------------------------- 1 | 2 | .mmPaginator .totalCountLabel{ 3 | 4 | padding: 5px 0 0 0; 5 | } 6 | 7 | .mmPaginator .pageList li{ 8 | margin: 0; 9 | padding: 4px 12px; 10 | background-color: #ffffff; 11 | border: 1px solid #dddddd; 12 | border-left-width: 0; 13 | } 14 | 15 | .mmPaginator .pageList li.active{ 16 | padding: 4px 12px; 17 | border: 1px solid #dddddd; 18 | border-left-width: 0; 19 | background-color: #f5f5f5; 20 | } 21 | 22 | .mmPaginator .pageList li.active a{ 23 | color: #999999; 24 | cursor: default; 25 | } 26 | 27 | .mmPaginator .pageList li.disable a{ 28 | color: #999999; 29 | } 30 | 31 | .mmPaginator .pageList li.disable{ 32 | background: #f5f5f5; 33 | } 34 | 35 | .mmPaginator .pageList li.disable a{ 36 | color: #999999; 37 | } 38 | 39 | .mmPaginator .pageList li a{ 40 | color: #005580; 41 | text-decoration: none; 42 | } 43 | 44 | .mmPaginator .pageList li.prev{ 45 | border-left-width: 1px; 46 | -webkit-border-bottom-left-radius: 4px; 47 | border-bottom-left-radius: 4px; 48 | -webkit-border-top-left-radius: 4px; 49 | border-top-left-radius: 4px; 50 | -moz-border-radius-bottomleft: 4px; 51 | -moz-border-radius-topleft: 4px; 52 | } 53 | 54 | 55 | .mmPaginator .pageList li.next{ 56 | -webkit-border-top-right-radius: 4px; 57 | border-top-right-radius: 4px; 58 | -webkit-border-bottom-right-radius: 4px; 59 | border-bottom-right-radius: 4px; 60 | -moz-border-radius-topright: 4px; 61 | -moz-border-radius-bottomright: 4px; 62 | } 63 | 64 | 65 | .mmPaginator .limit{ 66 | padding: 4px 0 0 0; 67 | line-height: 1.5; 68 | vertical-align: top; 69 | } 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | --------------------------------------------------------------------------------