magix-components
Version:
1 lines • 148 kB
JavaScript
define("__test__/all",["magix","$"],function(e,t,i){var n=e("magix"),a=e("$");n.applyStyle("_",'body,dd,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,input,legend,ol,p,pre,tbody,td,textarea,tfoot,th,thead,ul{margin:0;padding:0}ol,ul{list-style-type:none;list-style-image:none}a{background-color:transparent}a:active,a:hover{outline-width:0}a:focus{outline:1px dotted}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;font-size:62.5%}body{font-size:14px;line-height:1.8}body,button,input,textarea{font-family:helvetica neue,arial,hiragino sans gb,stheiti,wenquanyi micro hei,sans-serif;-ms-text-autospace:ideograph-alpha ideograph-numeric ideograph-parenthesis;-ms-text-spacing:ideograph-alpha ideograph-numeric ideograph-parenthesis;text-spacing:ideograph-alpha ideograph-numeric ideograph-parenthesis}h1,h2,h3,h4,h5,h6{font-weight:400}h1{font-size:36px}h2{font-size:30px}h3{font-size:22px}h4{font-size:18px}h5{font-size:14px}h6{font-size:12px}b,strong{font-weight:700}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;overflow:auto}q{quotes:none}q:after,q:before{content:"";content:none}small{font-size:85.7%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}table{border-collapse:collapse;border-spacing:0}th{text-align:left}td,th{border:1px solid #ddd;padding:8px 10px}th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc}img{border-style:none;width:auto\\9;height:auto;max-width:100%;vertical-align:top;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border-style:none;white-space:normal;*margin-left:-7px}button,input,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:middle;*vertical-align:middle}button,input{*overflow:visible}button{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:not-allowed}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;*height:13px;*width:13px}button::-moz-focus-inner,input::-moz-focus-inner{border-style:none;padding:0}textarea{overflow:auto;resize:vertical}@media screen and (-webkit-min-device-pixel-ratio:0){input{line-height:normal!important}}input::-moz-placeholder,textarea::-moz-placeholder{color:#a9a9a9;opacity:1}label{cursor:pointer}audio,canvas,video{display:inline-block;vertical-align:baseline}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}a:focus,button:focus,input:focus,textarea:focus{outline:none;resize:none}a{color:#6363e6;text-decoration:none}a:focus,a:hover{color:#3838a9}a:active,a:focus,a:hover,a:visited{outline:0;text-decoration:none}label{cursor:default;display:inline-block;max-width:100%;font-weight:400}[mx-view] item{display:none}@font-face{font-family:a;src:url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff")}._{font-family:a;line-height:1;font-size:16px;font-style:normal;font-weight:400;font-variant:normal;display:inline-block;speak:none;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.a{margin-top:5px}.b{margin-top:10px}.c{margin-top:15px}.d{margin-top:20px}.e{margin-top:25px}.f{margin-top:30px}.g{margin-right:5px}.h{margin-right:10px}.i{margin-right:15px}.j{margin-right:20px}.k{margin-right:25px}.l{margin-right:30px}.m{margin-bottom:5px}.n{margin-bottom:10px}.o{margin-bottom:15px}.p{margin-bottom:20px}.q{margin-bottom:25px}.r{margin-bottom:30px}.s{margin-left:5px}.t{margin-left:10px}.u{margin-left:15px}.v{margin-left:20px}.w{margin-left:25px}.x{margin-left:30px}.y{padding-top:5px}.z{padding-top:10px}.A{padding-top:15px}.B{padding-top:20px}.C{padding-top:25px}.D{padding-top:30px}.E{padding-right:5px}.F{padding-right:10px}.G{padding-right:15px}.H{padding-right:20px}.I{padding-right:25px}.J{padding-right:30px}.K{padding-bottom:5px}.L{padding-bottom:10px}.M{padding-bottom:15px}.N{padding-bottom:20px}.O{padding-bottom:25px}.P{padding-bottom:30px}.Q{padding-left:5px}.R{padding-left:10px}.S{padding-left:15px}.T{padding-left:20px}.U{padding-left:25px}.V{padding-left:30px}.W{text-align:right}.X{text-align:left}.Y{text-align:center}.Z{float:left}.a_{float:right}html .aa{display:inline-block}.ab{cursor:pointer}.ac{cursor:move}.ad{position:absolute}.ae{position:relative}html .af{display:none}.ag:after,.ag:before{content:" ";display:table}.ag:after{clear:both}.ah{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ai::-webkit-scrollbar{width:10px;height:10px;overflow:auto}.ai::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:6px;height:30px;border:2px solid #e5e5e5}.ai::-webkit-scrollbar-thumb:hover{background-color:#6a6a6a}.ai::-webkit-scrollbar-track{background-color:#e5e5e5}.aj{white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}.ak{color:#d2d2d2;cursor:not-allowed}.al{display:inline-block;font-weight:400;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;background-color:#eaeaea;white-space:nowrap;padding:9px 14px;font-size:14px;line-height:1;border:0;color:#333;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.al:focus{outline:none}.al:hover{background-color:#ccc;color:#333}.am{background-color:#6363e6;color:#fff}.am:focus,.am:hover{background-color:#3838a9;color:#fff}.al[disabled]{background-color:#fbfbfb}.al[disabled]:hover{border-color:#e6e6e6}::-webkit-input-placeholder{color:#999}:-ms-input-placeholder,::-ms-input-placeholder{color:#999}::placeholder{color:#999}.an,.ao{display:inline-block;height:32px;padding:6px 9px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:none;box-shadow:none;border:1px solid #e6e6e6;background-color:#fff;color:#333;width:340px;max-width:100%}.an:hover,.ao:hover{border-color:#ccc}.an:focus,.ao:focus,.ap,.ap:hover{border-color:#6363e6!important}.ao{height:auto}.an[disabled],.ao[disabled]{background-color:#fbfbfb}.an[disabled]:hover,.ao[disabled]:hover{border-color:#e6e6e6}.aq,.ar{width:14px;height:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;border-radius:2px;-webkit-transition:all .25s;transition:all .25s;background-color:#fff;border:1px solid #e6e6e6;margin-right:8px;cursor:pointer}.ar{border-radius:50%}.aq:checked,.aq:indeterminate,.ar:checked{background-color:#6363e6;border-color:#6363e6}.aq:checked:after{content:"";display:block;margin:1px auto;height:8px;width:5px;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1)}.aq:indeterminate:after{content:"";display:block;height:2px;width:8px;margin:40% auto;background-color:#fff}.ar:checked:after{content:"";display:block;height:4px;width:4px;border-radius:50%;margin:4px auto;background-color:#fff}.aq:disabled,.ar:disabled{background-color:#fbfbfb;border-color:#e6e6e6}.aq:disabled:after{border-color:rgba(0,0,0,.25)}.aq:indeterminate:disabled:after,.ar:disabled:after{background-color:rgba(0,0,0,.25)}.as{width:42px;height:21px;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;border-radius:10.5px;background-color:#eaeaea;margin-right:8px;cursor:pointer;position:relative}.as,.as:after{-webkit-transition:all .25s;transition:all .25s}.as:after{content:"";display:block;position:absolute;height:17px;width:17px;background:#fff;margin:2px;border-radius:50%;left:0}.as:disabled,.as:disabled:checked{background-color:#fbfbfb}.as:checked:after{margin-left:-20px;left:100%}.as:checked{background-color:#6363e6}.at{margin-bottom:22px}.au{height:32px;line-height:32px;text-align:right;width:140px;vertical-align:top;white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}.av:before{margin-right:4px;content:"*";font-family:SimSun;line-height:1;color:#f04134}.av:before,.aw{display:inline-block}.aw{position:relative;min-height:32px;line-height:32px;margin-left:15px}.ax{margin-left:140px}.ay{width:100%;border:1px solid #e6e6e6}.ay th{border:0 none;border-bottom:2px solid #e6e6e6;font-weight:700}.ay td{border:0 none;border-top:1px solid #e6e6e6}.az tbody tr:nth-child(odd) td{background-color:rgba(0,0,0,.05)}.ay tfoot td{padding:0}.aA{padding:150px 0;margin:0 auto;width:150px;text-align:center;line-height:0}.aA:after,.aA:before{content:""}.aA:after,.aA:before,.aB{width:14px;height:14px;background-color:#eaeaea;border-radius:100%;display:inline-block;-webkit-animation:_ 1s infinite ease-in-out both;animation:_ 1s infinite ease-in-out both}.aA:before{-webkit-animation-delay:-.32s;animation-delay:-.32s}.aB{margin:0 10px;-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes _{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes _{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.aC{padding:15px 40px;border-bottom:1px solid #e6e6e6;color:#333;margin:0;line-height:1.42857143}.aD{padding:18px 40px}.aE{padding:15px 40px;text-align:left;border-top:1px solid #e6e6e6}'),n.applyStyle("b",".aG{color:red}.aH{padding:50px}"),i.exports=n.View.extend({tmpl:{html:'<div mx-guid="g0 " class="aH" mx-view="<%=$$.view%>"><div class="aA"><span class="aB"></span></div></div>',subs:[{keys:["view"],path:'div[mx-guid="g0 "]',attr:'mx-view="<%=$$.view%>"',attrs:[{n:"mx-view",v:1}]}]},init:function(){this.observeLocation({path:!0}),this.owner.on("created",function(){a("pre").each(function(e,t){t.rendered||(t.rendered=!0,hljs.highlightBlock(t))})})},render:function(){var e=this,t=n.Router.parse().path;if("list"==(t=t.slice(1)))t="__test__/list";else{var i=t.indexOf("/");t=t.slice(0,i)+"/__test__"+t.slice(i)}e.updater.digest({view:t})}}),define("__test__/list",["magix"],function(e,t,i){var n=e("magix");n.applyStyle("a",".aF{color:red}"),i.exports=n.View.extend({tmpl:{html:'<a href="#!/mx-calendar/index">mx-calendar/index(日历)</a><br><a href="#!/mx-calendar/datepicker">mx-calendar/datepicker(日期选择)</a><br><a href="#!/mx-calendar/rangepicker">mx-calendar/rangepicker(日期范围选择)</a><br><a href="#!/mx-checkbox/linkage">mx-checkbox/linkage(联动)</a><br><a href="#!/mx-checkbox/storestate">mx-checkbox/storestate(保存状态)</a><br><a href="#!/mx-color/index">mx-color/index(颜色选择)</a><br><a href="#!/mx-copy/index">mx-copy/index(复制)</a><br><a href="#!/mx-dialog/index">mx-dialog/index(对话框)</a><br><a href="#!/mx-dragselect/index">mx-dragselect/index(拖动选取)</a><br><a href="#!/mx-dragsort/index">mx-dragsort/index(拖动排序)</a><br><a href="#!/mx-dropdown/index">mx-dropdown/index(下拉框)</a><br><a href="#!/mx-effect/index">mx-effect/index(效果库)</a><br><a href="#!/mx-form/index">mx-form/index(表单)</a><br><a href="#!/mx-gtip/index">mx-gtip/index(提示)</a><br><a href="#!/mx-hour/index">mx-hour/index(小时)</a><br><a href="#!/mx-linkage/index">mx-linkage/index(联动选择)</a><br><a href="#!/mx-loading/mask">mx-loading/mask(加载动画)</a><br><a href="#!/mx-number/index">mx-number/index</a><br><a href="#!/mx-pagination/index">mx-pagination/index(分页)</a><br><a href="#!/mx-popconfirm/index">mx-popconfirm/index</a><br><a href="#!/mx-popmenu/index">mx-popmenu/index</a><br><a href="#!/mx-popover/index">mx-popover/index</a><br><a href="#!/mx-progress/index">mx-progress/index</a><br><a href="#!/mx-slider/index">mx-slider/index(滑块)</a><br><a href="#!/mx-slider/range">mx-slider/range(范围滑块)</a><br><a href="#!/mx-suggest/index">mx-suggest/index</a><br><a href="#!/mx-table/index">mx-table/index(表格)</a><br><a href="#!/mx-taginput/index">mx-taginput/index(标签输入)</a><br><a href="#!/mx-time/index">mx-time/index(时间)</a><br><a href="#!/mx-time/picker">mx-time/picker(时间选取)</a><br><a href="#!/mx-tree/index">mx-tree/index(tree)</a><br><a href="#!/mx-uploader/index">mx-uploader/index(上传)</a><br>',subs:[]},render:function(){this.updater.digest()}})}),define("mx-calendar/__test__/index",["magix","mx-gtip/index","../index"],function(e,t,i){e("../index");var n=e("magix"),a=e("mx-gtip/index");i.exports=n.View.extend({tmpl:{html:'<h2>mx-calendar</h2><h3>默认情形</h3><div class="B ag"><div mx-view="mx-calendar/index"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="app/gallery/mx-calendar/index" /></pre></div><h3 class="f">默认选中某天</h3><div class="B ag"><div mx-view="mx-calendar/index?selected=2018-01-01"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="app/gallery/mx-calendar/index"\n selected="2018-01-01"/></pre></div><h3 class="f">设置可选择的范围</h3><div class="B ag"><div mx-view="mx-calendar/index?min=2017-08-05&max=2017-08-22&selected=2017-08-12"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="app/gallery/mx-calendar/index"\n min="2017-08-05"\n max="2017-08-22"\n selected="2017-08-12"/></pre></div><h3 class="f">设置周二为一周的开始</h3><div class="B ag"><div mx-view="mx-calendar/index?weekStart=<%@2%>"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="app/gallery/mx-calendar/index"\n week-start="<%@ 2 %>"/></pre></div><h3 class="f">带时分秒</h3><div class="B ag"><div mx-view="mx-calendar/index?timeType=all"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="app/gallery/mx-calendar/index"\n time-type="all"></pre></div><h3 class="f">带时分秒的选中</h3><div class="B ag"><div mx-view="mx-calendar/index?timeType=all&selected=2018-08-08%2018%3A08%3A20"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="app/gallery/mx-calendar/index"\n time-type="all"\n selected="2018-08-08 18:08:20"/></pre></div><h3 class="f">带时分秒,只能选择小时和分钟</h3><div class="B ag"><div mx-view="mx-calendar/index?timeType=hour%2Cminute"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="app/gallery/mx-calendar/index"\n time-type="hour,minute"/></pre></div><h3 class="f">change事件</h3><div class="B ag"><div mx-view="mx-calendar/index?timeType=all&selected=2018-08-08%2018%3A08%3A20" mx-change=" showDatetime()"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="app/gallery/mx-calendar/index"\n time-type="all"\n selected="2018-08-08 18:08:20"\n mx-change="showDatetime()"/></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nlet GTip = require(\'mx-gtip/index\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@index.html\',\n mixins: [GTip],\n render() {\n let me = this;\n me.updater.digest();\n },\n \'showDatetime<change>\' (e) {\n this.gtipRT(\'日期：\' + e.date + \'，时间：\' + e.time);\n }\n});</pre></div>',subs:[]},mixins:[a],render:function(){this.updater.digest()},"showDatetime<change>":function(e){this.gtipRT("日期："+e.date+"，时间："+e.time)}})}),define("mx-calendar/__test__/datepicker",["magix","mx-gtip/index","../datepicker"],function(e,t,i){e("../datepicker");var n=e("magix"),a=e("mx-gtip/index");i.exports=n.View.extend({tmpl:{html:'<h2>mx-calendar</h2><h3>默认情形</h3><div class="B ag"><input mx-view="mx-calendar/datepicker" class="an" placeholder="请选择日期"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallerymx-calendar/datepicker" class="input" placeholder="请选择日期"/></pre></div><h3 class="f">默认选中某天</h3><div class="B ag"><input class="an" placeholder="请选择日期" mx-view="mx-calendar/datepicker?selected=2018-01-01"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" class="input" placeholder="请选择日期"\n path="app/gallery/mx-calendar/datepicker"\n selected="2018-01-01"></pre></div><h3 class="f">从input中读取日期</h3><div class="B ag"><input class="an" placeholder="请选择日期" value="2018-03-02" mx-view="mx-calendar/datepicker"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" class="input" placeholder="请选择日期"\n value="2018-03-02"\n path="app/gallery/mx-calendar/datepicker"></pre></div><h3 class="f">设置可选择的范围</h3><div class="B ag"><input mx-view="mx-calendar/datepicker?min=2017-08-05&max=2017-08-22" value="2017-08-12" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallery/mx-calendar/datepicker"\n min="2017-08-05"\n max="2017-08-22"\n value="2017-08-12"\n class="input"/></pre></div><h3 class="f">设置周二为一周的开始</h3><div class="B ag"><input mx-view="mx-calendar/datepicker?weekStart=<%@2%>" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallery/mx-calendar/datepicker"\n week-start="<%@ 2 %>"\n class="input"/></pre></div><h3 class="f">右下对齐</h3><div class="B ag"><input mx-view="mx-calendar/datepicker?align=right" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallery/mx-calendar/datepicker"\n align="right"\n class="input"/></pre></div><h3 class="f">右上对齐</h3><div class="B ag"><input mx-view="mx-calendar/datepicker?align=right&placement=top" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallery/mx-calendar/datepicker"\n align="right"\n placement="top"\n class="input"/></pre></div><h3 class="f">带时分秒</h3><div class="B ag"><input mx-view="mx-calendar/datepicker?timeType=all" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallery/mx-calendar/datepicker"\n time-type="all"\n class="input"/></pre></div><h3 class="f">带时分秒的选中</h3><div class="B ag"><input mx-view="mx-calendar/datepicker?timeType=all" value="2018-08-08 18:08:20" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallery/mx-calendar/datepicker"\n time-type="all"\n value="2018-08-08 18:08:20"\n class="input"/></pre></div><h3 class="f">带时分秒,只能选择小时</h3><div class="B ag"><input mx-view="mx-calendar/datepicker?timeType=hour" value="2018-08-08 18:08:20" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallery/mx-calendar/datepicker"\n time-type="hour"\n value="2018-08-08 18:08:20"\n class="input"/></pre></div><h3 class="f">change事件</h3><div class="B ag"><input mx-view="mx-calendar/datepicker?timeType=all&selected=2018-08-08%2018%3A08%3A20" mx-change=" showDatetime()" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="app/gallery/mx-calendar/datepicker"\n time-type="all"\n selected="2018-08-08 18:08:20"\n mx-change="showDatetime()"\n class="input"/></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nlet GTip = require(\'mx-gtip/index\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@index.html\',\n mixins: [GTip],\n render() {\n let me = this;\n me.updater.digest();\n },\n \'showDatetime<change>\' (e) {\n this.gtipRT(\'日期：\' + e.date + \'，时间：\' + e.time);\n }\n});</pre></div><h3 class="f">只选择年月</h3><div class="B ag"><input class="an" mx-view="mx-calendar/datepicker?dateType=year%2Cmonth&selected=2010-02"></div><div class="B"><div>HTML Code:</div><pre><mx-calendar-datepicker class="input" date-type="year,month" selected="2010-02" /></pre></div>',subs:[]},mixins:[a],render:function(){this.updater.digest()},"showDatetime<change>":function(e){this.gtipRT("日期："+e.date+"，时间："+e.time)}})}),define("mx-calendar/__test__/rangepicker",["magix","mx-gtip/index","../rangepicker"],function(e,t,i){e("../rangepicker");var n=e("magix"),a=e("mx-gtip/index");i.exports=n.View.extend({tmpl:{html:'<h2>mx-calendar</h2><h3>默认情形</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker" class="an" placeholder="请选择日期范围"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n class="input"\n placeholder="请选择日期范围"/></pre></div><h3 class="f">指定开始结束日期</h3><div class="B ag"><input class="an" placeholder="请选择日期范围" mx-view="mx-calendar/rangepicker?start=2018-01-01&end=2019-01-01"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n class="input"\n placeholder="请选择日期范围"\n path="app/gallery/mx-calendar/rangepicker"\n start="2018-01-01"\n end="2019-01-01"/></pre></div><h3 class="f">不显示快捷日期</h3><div class="B ag"><input class="an" placeholder="请选择日期范围" mx-view="mx-calendar/rangepicker?shortcuts=false"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n class="input"\n placeholder="请选择日期范围"\n path="app/gallery/mx-calendar/datepicker"\n shortcuts="false"/></pre></div><h3 class="f">设置可选择的范围</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?min=2017-08-05&max=2017-08-22&start=2017-08-08&end=2017-08-20&shortcuts=false" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n min="2017-08-05"\n max="2017-08-22"\n start="2017-08-08"\n end="2017-08-20"\n shortcuts="false"\n class="input"/></pre></div><h3 class="f">右上对齐</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?align=right&placement=top" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n align="right"\n placement="top"\n class="input"/></pre></div><h3 class="f">带时分秒</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?timeType=all" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n time-type="all"\n class="input"/></pre></div><h3 class="f">带时分秒的选中</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?timeType=all&start=2017-07-07%2018%3A08%3A08&end=2017-12-30%2015%3A15%3A15" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n time-type="all"\n start="2017-07-07 18:08:08"\n end="2017-12-30 15:15:15"\n class="input"/></pre></div><h3 class="f">change事件</h3><div class="B ag"><input mx-view="mx-calendar/rangepicker?timeType=all" mx-change=" showDatetime()" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view\n tag="input"\n path="app/gallery/mx-calendar/rangepicker"\n time-type="all"\n mx-change="showDatetime()"\n class="input"/></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nlet GTip = require(\'mx-gtip/index\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@rangepicker.html\',\n mixins: [GTip],\n render() {\n let me = this;\n me.updater.digest();\n },\n \'showDatetime<change>\' (e) {\n console.log(e.dates);\n this.gtipRT(\'日期：\' + JSON.stringify(e.dates));\n }\n});</pre></div><h3 class="f">只有年月</h3><div class="B ag"><input class="an" mx-view="mx-calendar/rangepicker?dateType=year%2Cmonth&start=2017-07&end=2017-12&formatter=YYYY-MM&shortcuts=false"></div><div class="B"><div>HTML Code:</div><pre><mx-calendar-rangepicker\n class="input"\n date-type="year,month"\n start="2017-07"\n end="2017-12"\n formatter="YYYY-MM"\n shortcuts="false" /></pre></div>',subs:[]},mixins:[a],render:function(){this.updater.digest()},"showDatetime<change>":function(e){this.gtipRT("日期："+JSON.stringify(e.dates))}})}),define("mx-checkbox/__test__/linkage",["magix","../linkage","../../mx-gtip/index"],function(e,t,i){var n=e("magix"),a=e("../linkage"),l=e("../../mx-gtip/index");i.exports=n.View.extend({tmpl:{html:'<h2>mx-checkbox</h2><div class="B ag"><table class="ay az"><thead><tr><th><input type="checkbox" class="aq" linkage="example1"></th><%for(var a=0;a<5;a++){%><th>示例字段<%=a%></th><%}%></tr></thead><tbody><%for(var b=0;b<10;b++){%><tr><td><input type="checkbox" class="aq" linkage-parent="example1" value="ex1_<%=b%>"></td><%for(var c=0;c<5;c++){%><td>示例字段内容<%=c%></td><%}%></tr><%}%></tbody></table><div class="ag"><button class="a_ a al am" mx-click=" showEx1()">显示选中的checkbox</button></div></div><div class="B"><div>HTML Code:</div><pre><table class="table table-striped">\n <thead>\n <tr>\n <th><input type="checkbox" class="checkbox" linkage="example1" /></th>\n <%for(var i=0;i<5;i++){%>\n <th>示例字段<%=i%></th>\n <%}%>\n </tr>\n </thead>\n <tbody>\n <%for(var i=0;i<10;i++){%>\n <tr>\n <td><input type="checkbox" class="checkbox" linkage-parent="example1" value="ex1_<%=i%>" /></td>\n <%for(var j=0;j<5;j++){%>\n <td>示例字段内容<%=j%></td>\n <%}%>\n </tr>\n <%}%>\n </tbody>\n</table>\n<div class="clearfix">\n <button class="fr mt5 btn btn-brand" mx-click="showEx1()">显示示例1选中的checkbox</button>\n</div></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nlet Linkage = require(\'app/gallery/mx-checkbox/linkage\');\nlet GTip = require(\'app/gallery/mx-gtip/index\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@linkage.html\',\n mixins: [Linkage, GTip],\n render() {\n let me = this;\n me.updater.digest();\n },\n \'showEx1<click>\' () {\n this.gtipRT(this.getSelectedIds(\'example1\'));\n }\n});</pre></div>',subs:[]},mixins:[a,l],render:function(){this.updater.digest()},"showEx1<click>":function(){this.gtipRT(this.getSelectedIds("example1"))}})}),define("mx-checkbox/__test__/storestate",["magix","../linkage","../../mx-gtip/index","../storestate","mx-pagination/index"],function(e,t,i){e("mx-pagination/index");var n=e("magix"),a=e("../linkage"),l=e("../../mx-gtip/index"),s=e("../storestate");i.exports=n.View.extend({tmpl:{html:'<h2>mx-checkbox</h2><div class="B ag"><table class="ay az"><thead><tr><th><input type="checkbox" class="aq" linkage="example1"></th><%for(var a=0;a<5;a++){%><th>示例字段<%=a%></th><%}%></tr></thead><tbody mx-guid="g1 ">2 </tbody><tfoot><tr><td mx-guid="g2 " colspan="6" mx-view="mx-pagination/index?total=<%@100%>&step=3&page=<%@$$.list1Page%>&size=<%@$$.list1Size%>" mx-change=" chageList1()" style="height:60px"></td></tr></tfoot></table><div class="ag"><button class="a_ a al am" mx-click=" showEx1()">显示选中的checkbox</button></div></div><div class="B"><div>HTML Code:</div><pre><table class="table table-striped">\n <thead>\n <tr>\n <th><input type="checkbox" class="checkbox" linkage="example1" /></th>\n <%for(var i=0;i<5;i++){%>\n <th>示例字段<%=i%></th>\n <%}%>\n </tr>\n </thead>\n <tbody>\n <%for(var i=0;i<list1.length;i++){%>\n <tr>\n <td><input type="checkbox" class="checkbox" linkage-parent="example1" value="<%=list1[i].id%>" /></td>\n <%for(var j=0;j<5;j++){%>\n <td><%=list1[i][\'f\'+j]%></td>\n <%}%>\n </tr>\n <%}%>\n </tbody>\n <tfoot>\n <tr>\n <mx-view\n tag="td"\n colspan="6"\n path="app/gallery/mx-pagination/index"\n total="<%@100%>"\n step="3"\n page="<%@list1Page%>"\n size="<%@list1Size%>"\n mx-change="chageList1()"/>\n </tr>\n </tfoot>\n</table>\n\n<div class="clearfix">\n <button class="fr mt5 btn btn-brand" mx-click="showEx1()">显示选中的checkbox</button>\n</div></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nlet Linkage = require(\'app/gallery/mx-chekcbox/linkage\');\nlet GTip = require(\'app/gallery/mx-gtip/index\');\nlet StoreState = require(\'app/gallery/mx-chekcbox/storestate\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@storestate.html\',\n mixins: [Linkage, GTip, StoreState],\n init() {\n let list1 = [];\n for (let j = 0; j < 100; j++) {\n let temp = {\n id: j\n };\n for (let i = 0; i < 5; i++) {\n temp[\'f\' + i] = \'字段内容\' + j + \'_\' + i;\n }\n list1.push(temp);\n }\n let me = this;\n me.$list1 = list1;\n me.$list1Page = 1;\n me.$list1Size = 10;\n },\n getList(type) {\n let me = this;\n let list = me[\'$\' + type];\n let page = me[\'$\' + type + \'Page\'];\n let size = me[\'$\' + type + \'Size\'];\n return list.slice((page - 1) * size, page * size);\n },\n render() {\n let me = this;\n me.updater.digest({\n list1: me.getList(\'list1\'),\n list1Page: me.$list1Page,\n list1Size: me.$list1Size\n });\n },\n \'chageList1<change>\' (e) {\n let me = this;\n me.$list1Page = e.page;\n me.$list1Size = e.size;\n me.render();\n },\n \'showEx1<click>\' () {\n let list = this.getStoreState(\'example1\');\n if (list.length) {\n this.gtipRT(\'选中的值：\' + list.join(\',\'));\n } else {\n this.gtipRT(\'请选择checkbox\');\n }\n }\n});</pre></div>',subs:[{keys:["list1"],path:'tbody[mx-guid="g1 "]',tmpl:'<%for(var b=0;b<$$.list1.length;b++){%><tr><td><input type="checkbox" class="aq" linkage-parent="example1" value="<%=$$.list1[b].id%>"></td><%for(var c=0;c<5;c++){%><td><%=$$.list1[b][\'f\'+c]%></td><%}%></tr><%}%>',s:"2 "},{keys:["list1Page","list1Size"],path:'td[mx-guid="g2 "]',attr:'mx-view="mx-pagination/index?total=<%@100%>&step=3&page=<%@$$.list1Page%>&size=<%@$$.list1Size%>"',attrs:[{n:"mx-view",v:1}]}]},mixins:[l,s,a],init:function(){for(var e=[],t=0;t<100;t++){for(var i={id:t},n=0;n<5;n++)i["f"+n]="字段内容"+t+"_"+n;e.push(i)}var a=this;a.$list1=e,a.$list1Page=1,a.$list1Size=10},getList:function(e){var t=this,i=t["$"+e],n=t["$"+e+"Page"],a=t["$"+e+"Size"];return i.slice((n-1)*a,n*a)},render:function(){var e=this;e.updater.digest({list1:e.getList("list1"),list1Page:e.$list1Page,list1Size:e.$list1Size})},"chageList1<change>":function(e){var t=this;t.$list1Page=e.page,t.$list1Size=e.size,t.render()},"showEx1<click>":function(){var e=this.getStoreState("example1");e.length?this.gtipRT("选中的值："+e.join(",")):this.gtipRT("请选择checkbox")}})}),define("mx-color/__test__/index",["magix","../index","../picker"],function(e,t,i){e("../index"),e("../picker");var n=e("magix");i.exports=n.View.extend({tmpl:{html:'<h2>mx-color</h2><h3>默认情形</h3><div class="B ag"><div mx-view="mx-color/index"></div></div><div class="B"><div>HTML Code:</div><pre><mx-view path="mx-color/index"/></pre></div><h3 class="f">颜色选择</h3><div class="B ag"><input mx-view="mx-color/picker" class="an"></div><div class="B"><div>HTML Code:</div><pre><mx-view tag="input" path="mx-color/picker" class="input" /></pre></div>',subs:[]},render:function(){this.updater.digest()}})}),define("mx-copy/__test__/index",["magix","../../mx-gtip/index","../index"],function(e,t,i){e("../index");var n=e("magix"),a=e("../../mx-gtip/index");i.exports=n.View.extend({tmpl:{html:'<h2>mx-copy</h2><div class="B ag"><div mx-guid="g0 " id="text_<%=$$.viewId%>">这里是要复制的<span style="font-weight:bold">内容</span>的节点</div><button mx-guid="g1 " type="button" class="al am j" mx-success=" done()" mx-error=" bad()" mx-view="mx-copy/index?copyNode=text_<%!$eu($$.viewId)%>">复制</button></div><div class="B"><div>HTML Code:</div><pre>\n<div id="text_<%=viewId%>">这里是要复制的<span style="font-weight:bold">内容</span>的节点</div>\n<mx-copy copy-node="text_<%=viewId%>" tag="button" type="button" class="btn btn-brand mr20" mx-success="done()" mx-error="bad()">复制</mx-copy></pre><div class="z">Javascript Code:</div><pre>\nlet Magix = require(\'magix\');\nlet GTip = require(\'app/gallery/mx-gtip/index\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@index.html\',\n mixins: [GTip],\n render() {\n let me = this;\n me.updater.digest({\n viewId: me.id\n });\n },\n \'done<success>\'() {\n this.gtipRT(\'复制成功～\');\n },\n \'bad<error>\'() {\n this.gtipRT(\'复制失败～\');\n }\n}); \n</pre></div>',subs:[{keys:["viewId"],path:'div[mx-guid="g0 "]',attr:'id="text_<%=$$.viewId%>"',attrs:[{n:"id",p:1}]},{keys:["viewId"],path:'button[mx-guid="g1 "]',attr:'mx-view="mx-copy/index?copyNode=text_<%!$eu($$.viewId)%>"',attrs:[{n:"mx-view",v:1}]}]},mixins:[a],render:function(){var e=this;e.updater.digest({viewId:e.id})},"done<success>":function(){this.gtipRT("复制成功～")},"bad<error>":function(){this.gtipRT("复制失败～")}})}),define("mx-dragselect/__test__/index",["magix","$","../index"],function(e,t,i){e("../index");var n=e("magix"),a=e("$");n.applyStyle("c",".aI{width:500px;cursor:default}.aI li{width:100px;height:100px;text-align:center;float:left;line-height:100px;background:#f8f6f6;border:1px solid #fff;margin:10px}.aI li[select]{background:#ccc}.aI .aJ{border:1px solid #5665eb;background:#4d4fa8;opacity:.5;color:#fff}"),i.exports=n.View.extend({tmpl:{html:'<h2>mx-dragselect</h2><h3>默认示例</h3><div class="B ag"><ul mx-view="mx-dragselect/index" class="aI Z" mx-change=" show()" mx-dragbegin=" begin()" mx-dragfinish=" end()"><li>123</li><li>456</li><li>123</li><li>456</li><li>123</li><li>456</li><li>123</li><li>456</li></ul></div><div class="B"><div>HTML Code:</div><pre>\n<ul mx-view="mx-dragselect/index" class="hor fl" mx-change="show()" mx-dragbegin="begin()" mx-dragfinish="end()">\n <li>123</li>\n <li>456</li>\n <li>123</li>\n <li>456</li>\n <li>123</li>\n <li>456</li>\n <li>123</li>\n <li>456</li>\n</ul></pre><div class="z">Javascript Code:</div><pre>\nlet Magix = require(\'magix\');\nlet $ = require(\'$\');\nMagix.applyStyle(\'@index.less\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@index.html\',\n render() {\n let me = this;\n me.updater.digest();\n me.$selected = {};\n },\n \'show<change>\'(e) {\n let node = e.node;\n let me = this;\n if (!node.id) node.id = Magix.guid(\'mx_\');\n if (e.action == \'add\') {\n if (me.$selected[node.id]) {\n $(node).css({\n opacity: 1\n });\n delete me.$selected[node.id];\n\n me.$temp[node.id] = 1;\n } else {\n $(node).css({\n opacity: 0.1\n });\n me.$selected[node.id] = node;\n delete me.$temp[node.id];\n }\n } else if (e.action == \'remove\') {\n if (me.$temp[node.id]) {\n $(node).css({\n opacity: 0.1\n });\n me.$selected[node.id] = node;\n delete me.$temp[node.id];\n } else {\n $(node).css({\n opacity: 1\n });\n delete me.$selected[node.id];\n me.$temp[node.id] = 1;\n }\n }\n console.log(me.$selected);\n },\n \'begin<dragbegin>\'() {\n this.$temp = {};\n },\n \'end<dragfinish>\'() {\n delete this.$temp;\n }\n});\n </pre></div><h3 class="f">部分不能选择</h3><div class="B ag"><ul mx-view="mx-dragselect/index?selector=li%5Bselect%21%3Dfalse%5D" class="aI Z" mx-change=" show()" mx-dragbegin=" begin()" mx-dragfinish=" end()" test="aI"><li>123</li><li>456</li><li>123</li><li>456</li><li>123</li><li>456</li><li select="false">123</li><li select="false">456</li></ul></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="mx-dragselect/index" class="hor fl" mx-change="show()" mx-dragbegin="begin()" mx-dragfinish="end()" view-selector="li[select!=false]">\n <li>123</li>\n <li>456</li>\n <li>123</li>\n <li>456</li>\n <li>123</li>\n <li>456</li>\n <li select="false">123</li>\n <li select="false">456</li>\n </ul></pre></div>',subs:[]},render:function(){var e=this;e.updater.digest(),e.$selected={}},"show<change,click>":function(e){var t=e.node,i=this;t.id||(t.id=n.guid("mx_")),"add"==e.action?i.$selected[t.id]?(a(t).removeClass("aJ"),delete i.$selected[t.id],"drag"==e.mode&&(i.$temp[t.id]=1)):(a(t).addClass("aJ"),i.$selected[t.id]=t,"drag"==e.mode&&delete i.$temp[t.id]):"remove"==e.action&&(i.$temp[t.id]?(a(t).addClass("aJ"),i.$selected[t.id]=t,"drag"==e.mode&&delete i.$temp[t.id]):(a(t).removeClass("aJ"),delete i.$selected[t.id],"drag"==e.mode&&(i.$temp[t.id]=1)))},"begin<dragbegin>":function(){this.$temp={}},"end<dragfinish>":function(){delete this.$temp}})}),define("mx-dragsort/__test__/index",["magix","../index"],function(e,t,i){e("../index");var n=e("magix");n.applyStyle("d",".aK{width:300px;cursor:default}.aK li{line-height:30px;padding:10px}.aK li:nth-child(odd){background-color:rgba(172,236,182,.5)}.aK span{cursor:move;margin-right:10px;display:inline-block;height:100%}.aL{background:#f8f6f6;height:120px;overflow:auto;width:500px}.aM,.aL{cursor:default}.aM{width:100%}.aM li{width:100px;height:60px;text-align:center;float:left;line-height:60px;background:#f8f6f6;border-right:1px solid #fff}.aM li[ds-draggable=false]{background:#ccc}"),i.exports=n.View.extend({tmpl:{html:'<h2>mx-dragsort</h2><h3>默认示例</h3><div class="B ag"><ul mx-view="mx-dragsort/index?selector=span" class="aK Z"><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li></ul><div class="a_"><table class="ay az"><thead><tr><th><input type="checkbox" class="aq" linkage="example1"></th><%for(var a=0;a<5;a++){%><th>示例字段<%=a%></th><%}%></tr></thead><tbody mx-view="mx-dragsort/index"><%for(var b=0;b<10;b++){%><tr><td><input type="checkbox" class="aq" linkage-parent="example1" value="ex1_<%=b%>"></td><%for(var c=0;c<5;c++){%><td><%=b%>示例字段内容<%=c%></td><%}%></tr><%}%></tbody></table></div></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="left fl" view-selector="span">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul>\n<div class="fr">\n <table class="table table-striped">\n <thead>\n <tr>\n <th><input type="checkbox" class="checkbox" linkage="example1" /></th>\n <%for(var i=0;i<5;i++){%>\n <th>示例字段<%=i%></th>\n <%}%>\n </tr>\n </thead>\n <tbody mx-view="app/gallery/mx-dragsort/index">\n <%for(var i=0;i<10;i++){%>\n <tr>\n <td><input type="checkbox" class="checkbox" linkage-parent="example1" value="ex1_<%=i%>" /></td>\n <%for(var j=0;j<5;j++){%>\n <td><%=i%>示例字段内容<%=j%></td>\n <%}%>\n </tr>\n <%}%>\n </tbody>\n </table>\n</div></pre></div><h3 class="f">水平拖动</h3><div class="B ag"><ul mx-view="mx-dragsort/index?horizonal=true&vertical=false" class="aM Z"><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li></ul></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="false">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul></pre></div><h3 class="f">四个方向</h3><div class="B ag"><ul mx-view="mx-dragsort/index?horizonal=true&vertical=true" class="aM Z"><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li></ul></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="true">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul></pre></div><h3 class="f">滚动容器和窗口</h3><h4>拖动的容器节点如果可以滚动，则会自动滚动，如果拖动靠近窗口，则会自动滚动窗口</h4><div class="B ag"><ul mx-view="mx-dragsort/index?selector=span" class="aK aL Z ai"><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li></ul></div><h3 class="f">跨容器拖动</h3><div class="B ag"><ul mx-view="mx-dragsort/index?drops=_def&selector=span" class="aK aL Z ai" id="_abc"><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li></ul><ul mx-view="mx-dragsort/index?selector=span&drops=_abc" class="aK aL Z ai x" id="_def"></ul></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="left left1 fl scrollable" view-drops="_def" view-selector="span" id="_abc">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul>\n<ul mx-view="mx-dragsort/index" class="left left1 fl scrollable ml30" id="_def" view-selector="span" view-drops="_abc">\n</ul></pre></div><h3 class="f">拖出容器删除</h3><div class="B ag"><ul mx-view="mx-dragsort/index?sort=false" class="aK aL Z ai" mx-enterzone=" stop()" mx-leavezone=" ok()" mx-dragfinish=" del()"><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li></ul></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="left left1 fl scrollable" mx-enterzone="stop()" mx-leavezone="ok()" mx-dragfinish="del()" view-sort="false">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nMagix.applyStyle(\'@index.less\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@index.html\',\n render() {\n let me = this;\n me.updater.digest();\n },\n \'stop<enterzone>\'(e) {\n e.changePointer(false);\n },\n \'ok<leavezone>\'(e) {\n e.changePointer(true);\n },\n \'del<dragfinish>\'(e) {\n if (e.moved && e.outZone) {//moved and outside zone\n $(e.dragNode).slideUp();\n setTimeout(() => {\n e.dragZone.removeChild(e.dragNode);\n }, 500);\n }\n }\n});</pre></div><h3 class="f">部分不能拖动及排序</h3><div class="B ag"><ul mx-view="mx-dragsort/index?horizonal=true&vertical=false" class="aM Z"><li ds-draggable="false"><span>move</span>123</li><li ds-draggable="false"><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li><span>move</span>456</li><li><span>move</span>123</li><li ds-draggable="false"><span>move</span>456</li></ul></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="false">\n <li ds-draggable="false"><span>move</span>123</li>\n <li ds-draggable="false"><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li ds-draggable="false"><span>move</span>456</li>\n</ul></pre></div><h3 class="f">drag and drop</h3><div class="B ag"><ul class="aM Z"><li ds-draggable="false"><span>move</span>123</li><li ds-draggable="false"><span>move</span>456</li><li draggable="true" mx-dragstart=" start()"><span>move</span>123</li><li draggable="true" mx-dragstart=" start()"><span>move</span>456</li><li draggable="true" mx-dragstart=" start()"><span>move</span>123</li><li draggable="true" mx-dragstart=" start()"><span>move</span>456</li><li draggable="true" mx-dragstart=" start()"><span>move</span>123</li><li ds-draggable="false"><span>move</span>456</li></ul><div style="width:300px;height:300px;border:solid 1px #c