UNPKG

magix-components

Version:

magix组件

github.com/magix-components/magix-components

magix-components/magix-components

1 lines • 14.2 kB

JavaScript

define("mx-form/__test__/index",["magix","../index","mx-color/picker","mx-taginput/index","mx-dropdown/index","mx-time/picker","mx-calendar/datepicker","mx-slider/index","mx-number/index","mx-slider/range","mx-progress/index","mx-uploader/index","./sub"],function(t,e,a){t("mx-color/picker"),t("mx-taginput/index"),t("mx-dropdown/index"),t("mx-time/picker"),t("mx-calendar/datepicker"),t("mx-slider/index"),t("mx-number/index"),t("mx-slider/range"),t("mx-progress/index"),t("mx-uploader/index"),t("./sub");var l=t("magix"),i=t("../index");a.exports=l.View.extend({tmpl:{html:'<h2>mx-form</h2><h3>示例表单</h3><div class="B ag"><div style="width:600px;border:solid 1px #ccc;border-radius: 5px;padding: 25px 0"><div class="at ag"><label class="au av">活动名称：</label><div class="aw"><input mx-guid="g0" mx-ssid="0" class="an" placeholder="请填写活动名称" value="<%=$$.name%>" mx-change="__b({c:[{p:\'name\',f:{required:true,blength:[20,50]}}]})" mx-focusout="__b()" mx-focusin="__b({m:\'___\',a:{}})"></div></div><div class="at ag"><label class="au">色彩：</label><div class="aw"><input mx-view="mx-color/picker" class="an"></div></div><div class="at"><label class="au av">标签：</label><div class="aw"><div mx-guid="g1" mx-ssid="1" mx-view="mx-taginput/index?list=<%@$$.list%>&placeholder=%E8%AF%B7%E9%80%89%E6%8B%A9%E6%A0%87%E7%AD%BE&selected=<%@$$.tags%>" mx-change="__b({c:[{p:\'tags\',f:{required:true},n:\'selected\'}]})" mx-focusout="__b()" mx-focusin="__b()"></div></div></div><div class="at"><label class="au av">活动时间：</label><div class="aw"><div mx-guid="g2" mx-ssid="2" mx-view="mx-dropdown/index?searchbox=true&emptyText=%E8%AF%B7%E9%80%89%E6%8B%A9%E6%97%A5%E6%9C%9F&selected=<%@$$.day%>" mx-change="__b({c:[{p:\'day\',f:{required:true},n:\'selected\'}]})" mx-focusout="__b()" mx-focusin="__b()" style="width:180px"><item value="mon">周一</item><item value="wed">周三</item><item value="thu">周四</item><item value="fri">周五</item><item value="sat">周六</item></div><span class="aa s g">-</span><input mx-guid="g3" mx-ssid="3" class="an" style="width:145px" placeholder="请选择时间" value="<%=$$.time%>" mx-change="__b({c:[{p:\'time\',f:{required:true}}]})" mx-focusout="__b()" mx-focusin="__b()" mx-view="mx-time/picker"></div></div><div class="at"><label class="au">checkbox：</label><div class="aw"><label class="h ak"><input type="checkbox" name="cb" value="c1" class="aq" mx-change="__b({c:[{p:\'checkbox\'}]})" mx-focusout="__b()" mx-focusin="__b()" disabled="disabled" checked="checked">c1</label><label class="h"><input type="checkbox" name="cb" value="c2" class="aq" mx-change="__b({c:[{p:\'checkbox\'}]})" mx-focusout="__b()" mx-focusin="__b()">c2</label><label class="h"><input type="checkbox" mx-change="__b({c:[{p:\'checkbox\'}]})" mx-focusout="__b()" mx-focusin="__b()" name="cb" value="c3" class="as" disabled="disabled">c3</label><label class="h"><input type="checkbox" mx-change="__b({c:[{p:\'checkbox\'}]})" mx-focusout="__b()" mx-focusin="__b()" name="cb" value="c4" class="as">c4</label></div></div><div class="at"><label class="au">radio：</label><div class="aw"><label class="h ak"><input checked="checked" disabled="disabled" type="radio" mx-change="__b({c:[{p:\'radio\'}]})" mx-focusout="__b()" mx-focusin="__b()" value="r1" class="ar" name="magix">r1</label><label class="h"><input type="radio" mx-change="__b({c:[{p:\'radio\'}]})" mx-focusout="__b()" mx-focusin="__b()" value="r2" class="ar" name="magix">r2</label><label class="h"><input type="radio" mx-change="__b({c:[{p:\'radio\'}]})" mx-focusout="__b()" mx-focusin="__b()" value="r3" class="ar" name="magix">r3</label></div></div><div class="at"><label class="au">日期：</label><div class="aw"><input mx-guid="g4" mx-view="mx-calendar/datepicker" class="an" placeholder="请选择开始日期" value="<%=$$.dateStart%>" mx-change="__b({c:[{p:\'dateStart\'}]})" mx-focusout="__b()" mx-focusin="__b()" style="width:162px"><span class="aa s g">-</span><input mx-guid="g5" mx-view="mx-calendar/datepicker" class="an" placeholder="请选择结束日期" value="<%=$$.dateEnd%>" mx-change="__b({c:[{p:\'dateEnd\'}]})" mx-focusout="__b()" mx-focusin="__b()" style="width:162px"></div></div><div class="at"><label class="au">范围：</label><div class="aw"><div mx-guid="g6" mx-change="__b({c:[{p:\'range\',n:\'value\'}]})" mx-focusout="__b()" mx-focusin="__b()" mx-view="mx-slider/index?max=200&min=20&value=<%@$$.range%>&step=0.2"></div></div></div><div class="at"><label class="au">数字：</label><div class="aw"><div mx-view="mx-number/index"></div></div></div><div class="at"><label class="au">范围：</label><div class="aw"><div mx-guid="g7" mx-view="mx-slider/range?max=500&min=200&value=<%@$$.range1%>&step=10" mx-change="__b({c:[{p:\'range1\',n:\'value\'}]})" mx-focusout="__b()" mx-focusin="__b()"></div></div></div><div class="at"><label class="au">进度条：</label><div class="aw"><div mx-view="mx-progress/index?value=0.35"></div></div></div><div class="at"><label class="au">封面：</label><div class="aw"><button class="al am" mx-view="mx-uploader/index?action=.%2F&name=file1&multiple=true">上传文件</button></div></div><div class="at"><label class="au">备注：</label><div class="aw"><textarea mx-guid="g8" mx-ssid="4" class="ao" rows="8" mx-change="__b({c:[{p:\'mark\',f:{maxLength:10}}]})" mx-focusout="__b()" mx-focusin="__b()"><%=$$.mark,"{maxLength:10}"%></textarea></div></div><div mx-guid="g9" mx-ssid="5" mx-view="mx-form/__test__/sub?nameX1=<%@$$.name_x1%>" mx-change="__b({c:[{p:\'name_x1\',f:{from:\'nameX1\'},n:\'name-x1\'},{p:\'de\',f:{from:\'name_sub1\'}}]})" mx-focusout="__b()" mx-focusin="__b()"></div><div class="ax"><button class="al am" mx-click="isValid()">isValid</button><button class="al am t" mx-click="getData()">getData</button></div></div></div><div class="B"><div>HTML Code:</div><pre><div class="form-item clearfix">\n <label class="form-label form-required">活动名称：</label>\n <div class="form-content"><input class="input" placeholder="请填写活动名称" value="<%:name{required:true,blength:[20,50]}%>" /></div>\n</div>\n\n<div class="form-item clearfix">\n <label class="form-label">色彩：</label>\n <div class="form-content"><input mx-view="app/gallery/mx-color/picker" class="input" /></div>\n</div>\n\n<div class="form-item">\n <label class="form-label form-required">活动时间：</label>\n <div class="form-content">\n <mx-view path="app/gallery/mx-dropdown/index"\n searchbox="true"\n empty-text="请选择日期"\n selected="<%:day{required:true}%>" style="width:180px;">\n <item value="mon">周一</item>\n <item value="wed">周三</item>\n <item value="thu">周四</item>\n <item value="fri">周五</item>\n <item value="sat">周六</item>\n </mx-view>\n <span class="ib ml5 mr5">-</span>\n <input class="input" style="width:145px" placeholder="请选择时间" value="<%:time{required:true}%>" mx-view="app/gallery/mx-time/picker" />\n </div>\n</div>\n\n<div class="form-item">\n <label class="form-label form-required">标签：</label>\n <div class="form-content">\n <mx-view path="app/gallery/mx-taginput/index"\n list="<%@list%>"\n placeholder="请选择标签"\n selected="<%:tags{required:true}%>"\n ></mx-view>\n </div>\n</div>\n<div class="form-item">\n <label class="form-label">checkbox：</label>\n <div class="form-content">\n <label class="mr10">\n <mx-input type="checkbox" <%:checkbox%> name="cb" value="c1" class="checkbox" />c1\n </label>\n <label class="mr10">\n <mx-input type="checkbox" <%:checkbox%> name="cb" value="c2" class="checkbox" />c2\n </label>\n <label class="mr10">\n <mx-input type="checkbox" <%:checkbox%> name="cb" value="c3" class="checkbox" />c3\n </label>\n <label class="mr10">\n <mx-input type="checkbox" <%:checkbox%> name="cb" value="c4" class="checkbox" />c4\n </label>\n </div>\n</div>\n<div class="form-item">\n <label class="form-label">radio：</label>\n <div class="form-content">\n <label class="mr10">\n <mx-input type="radio" <%:radio%> value="r1" class="radio" name="magix" />r1\n </label>\n <label class="mr10">\n <mx-input type="radio" <%:radio%> value="r2" class="radio" name="magix" />r2\n </label>\n <label class="mr10">\n <mx-input type="radio" <%:radio%> value="r3" class="radio" name="magix" />r3\n </label>\n </div>\n</div>\n<div class="form-item">\n <label class="form-label">日期：</label>\n <div class="form-content">\n <input mx-view="app/gallery/mx-calendar/datepicker" class="input" placeholder="请选择开始日期" value="<%:dateStart%>" style="width:162px;">\n <span class="ib ml5 mr5">-</span>\n <input mx-view="app/gallery/mx-calendar/datepicker" class="input" placeholder="请选择结束日期" value="<%:dateEnd%>" style="width:162px;">\n </div>\n</div>\n<div class="form-item">\n <label class="form-label">范围：</label>\n <div class="form-content">\n <mx-view mx-view="app/gallery/mx-slider/index"\n max="200"\n min="0"\n value="<%:range%>"\n step="0.2"\n ></mx-view>\n </div>\n</div>\n<div class="form-item">\n <label class="form-label">范围：</label>\n <div class="form-content">\n <mx-view mx-view="app/gallery/mx-slider/range"\n max="500"\n min="200"\n value="<%:range1%>"\n step="10"\n ></mx-view>\n </div>\n</div>\n<div class="form-item">\n <label class="form-label">封面：</label>\n <div class="form-content">\n <mx-view\n tag="button"\n class="btn btn-brand"\n path="app/gallery/mx-uploader/index"\n action="./"\n view-name="file1"\n multiple="true"\n >上传文件</button>\n </div>\n</div>\n\n<div class="form-item">\n <label class="form-label">备注：</label>\n <div class="form-content">\n <textarea class="textarea" rows="8"><%:mark{maxLength:10}%></textarea>\n </div>\n</div>\n<div class="form-footer">\n <button class="btn btn-brand" mx-click="isValid()">isValid</button>\n <button class="btn btn-brand ml10" mx-click="getData()">getData</button>\n</div></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nlet Form = require(\'app/gallery/mx-form/index\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@index.html\',\n mixins: [Form],\n render() {\n let me = this;\n me.updater.digest({\n checkbox: [],\n range: 0,\n range1: [230, 300],\n list: [111111111111111, 222222222222222, 333333333333, 44444444444444]\n });\n },\n \'isValid<click>\' () {\n console.log(this.isValid());\n },\n \'getData<click>\' () {\n let src = this.updater.get();\n let data = this.fromKeys(src, \'name,day,time,tags,checkbox,radio,dateStart,dateEnd,range,range1,mark\');\n console.log(data);\n }\n});</pre></div>',subs:[{keys:["name"],path:'input[mx-guid="g0"]',attr:'value="<%=$$.name%>"',attrs:[{n:"value",q:1,p:1}]},{keys:["list","tags"],path:'div[mx-guid="g1"]',attr:'mx-view="mx-taginput/index?list=<%@$$.list%>&placeholder=%E8%AF%B7%E9%80%89%E6%8B%A9%E6%A0%87%E7%AD%BE&selected=<%@$$.tags%>"',attrs:[{n:"mx-view",v:1}]},{keys:["day"],path:'div[mx-guid="g2"]',attr:'mx-view="mx-dropdown/index?searchbox=true&emptyText=%E8%AF%B7%E9%80%89%E6%8B%A9%E6%97%A5%E6%9C%9F&selected=<%@$$.day%>"',attrs:[{n:"mx-view",v:1}]},{keys:["time"],path:'input[mx-guid="g3"]',attr:'value="<%=$$.time%>"',attrs:[{n:"value",q:1,p:1}]},{keys:["dateStart"],path:'input[mx-guid="g4"]',attr:'value="<%=$$.dateStart%>"',attrs:[{n:"value",q:1,p:1}]},{keys:["dateEnd"],path:'input[mx-guid="g5"]',attr:'value="<%=$$.dateEnd%>"',attrs:[{n:"value",q:1,p:1}]},{keys:["range"],path:'div[mx-guid="g6"]',attr:'mx-view="mx-slider/index?max=200&min=20&value=<%@$$.range%>&step=0.2"',attrs:[{n:"mx-view",v:1}]},{keys:["range1"],path:'div[mx-guid="g7"]',attr:'mx-view="mx-slider/range?max=500&min=200&value=<%@$$.range1%>&step=10"',attrs:[{n:"mx-view",v:1}]},{keys:["mark"],path:'textarea[mx-guid="g8"]'},{keys:["name_x1"],path:'div[mx-guid="g9"]',attr:'mx-view="mx-form/__test__/sub?nameX1=<%@$$.name_x1%>"',attrs:[{n:"mx-view",v:1}]}]},mixins:[i],render:function(){this.updater.digest({keys:["aa","bb","cc"],name_x1:"----",user:[{name:"a"},{name:"b"},{name:"c"},{name:"d"},{name:"e"}],checkbox:[],range:2,range1:[230,300],list:[0x650e124ef1c7,0xca1c249de38e,333333333333,44444444444444]})},"isValid<click>":function(){},"getData<click>":function(){var t=this.updater.get();this.fromKeys(t,"name,day,time,tags,checkbox,radio,dateStart,dateEnd,range,range1,mark,name_x1,de")},"___<focusin>":function(t){},"delete<click>":function(t){var e=this.updater.get("user");e.splice(t.params.key,1),this.updater.digest({user:e})}})});