demo.html 2.43 KB
<div id="ffile" class="page out" data-title="附件">
	<div class="page-content" id="ffile_content">
		<div id="ffile-header"></div>
		<div id="ffile-form"></div>
		<div id="ffile-file"></div>
		<div id="ffile-break"></div>
		<div id="ffile-file2"></div>
		<div id="ffile-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FFile", "FButton"], function(NavHeader, Form, FFile, FButton) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if(!hasClsPicker) {
		new NavHeader({
			el: "ffile-header",
			option: {
				title:"表单-附件", 
				smallTitle:"ffile"
			}
		}).render();
	
		new Form({
			el: "ffile-form",
			option: {
				submit : {
					action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
					validate : function(){
						//表单提交前验证脚本
					}
				}
			}
		}).render();
	}

	new FFile({
		el: "ffile-file",
		option: {
			form: "ffile-form",
			field : {
				label : "附件上传",		//显示名
				name : "file",			//字段名
				value : ""				//字段值,数据库保存值,文档id 如447,446,451
			},
			required : true,
			readonly : false
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#ffile-file");

		clsPicker.golalSetting({
			container: ".wev-comp-FFile",
			type: "FFile"
		});

		new clsPicker({
			selector: ".wev-field.vertical",
			text: ".wev-field.vertical",
			lineYSkew: 20
		});
		new clsPicker({
			selector: ".wev-field.vertical>div:nth-child(1)",
			text: " ",
			lineYSkew: 20,
		});
		new clsPicker({
			selector: ".wev-upload>span",
			text: " ",
			lineYSkew: 80,
		});
		new clsPicker({
			selector: ".wev-file-wrapper",
			text: ".wev-file-wrapper",
			lineYSkew: 50,
			skew: [3, ""]
		});
		new clsPicker({
			selector: ".wev-upload",
			text: ".wev-upload",
			lineYSkew: 50,
			skew: [1.2, ""],
			position: "top right"
		});
	});
	
	if(!hasClsPicker) {
		new FFile({
			el: "ffile-file2",
			option: {
				form: "ffile-form",
				field : {
					name : "file2"		//字段名
				}
			}
		}).render();
		
		new FButton({
			el: "ffile-fbutton",
			container: "#ffile",
			option: {
				form : "ffile-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(billid) {
							console.log(billid);
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}
});
</script>