自定义html
自定义html
基础引用:
							//引用相关js文件后前端编辑js方法
							new SYSDrag({
								//这里配置参数,编辑方法
							});
						
参数说明:
  • DragModule-执行编辑的区域 传值可以为class或者id 必填
  • DragWidth-区域的宽度,传整数 int,不填写默认浏览器的宽度 选填
  • DragHeight-区域的高度,传整数 int,不填写默认浏览器的高度 选填
  • SessionName-Session存储名称,自定义名称,存储在本地浏览器中,浏览器关闭时该存储信息删除,主要保存用户自己编辑的html,及其栏目相关值,该值为必填
  • DragContent-编辑需要操作的内容区显示区域,传值可以为class或者id必填
  • DragOperation-提交编辑区域,传值可以为class或者id,事例如下:必填
    									<div class="sys-operation btn-operation" id="operation">
    										<button class="btn btn-blue sort-submit sort-btn" id="submit" sys-operate="submit" >提交</button>
    										<button class="btn btn-green sort-refactoring sort-btn" id="Refactoring" sys-operate="Refactoring" >从新编辑</button>
    									</div>
    								
  • DrageditMethod-编辑信息内容模块,该为编辑html内容的元素,传值可以为class或者id必填
    									<div id="DragSort">
    										//具体的html,根据相应的属性标签,生成用户自己编辑的样式
    									</div>
    								
  • DragModuleHeight-自定义每个模块的默认高度,传整数 int,不填写默认高度为150 选填
  • SubmitName-提交事件的元素,传值可以为class或者id必填
  • ResetName-重置事件的元素,传值可以为class或者id必填
  • DragSlide-是否允许拖拽栏目,false/true选填
方法说明:
//自定义编辑模块的方法
DragMethod:[{'module':指定区域id,"title":名称,event:function(sys,par,obj){
	//sys集合,par初始值调用,obj当前事件
	编辑处理方法事例
	var h=sys.$(par.DragContent).offsetHeight;
	obj.style.height=(h-42)+'px';
	sys.ajaxGet('json/Exam.json',true,'加载中,请稍等......',function(success){ 
		var template=obj.getAttribute('sys-template');
		var structure=obj.getAttribute('sys-structure');
		sys.htmltemplate(sys,par,success,obj,template,structure);//调用栏目方法,用于显示在页面上,结合html代码使用
	    var clickname=sys.getElementsByClassName(obj,"topic-link");
		clickname.myMap(function(eve,i){
			eve.onclick=function(e){
				var sort=i;
				var onobj=sys.eve(e);
				var title=onobj.getAttribute('sys-type');
				var typeid=onobj.getAttribute('sys-typeid');
				var Level=onobj.getAttribute('sys-Level');
				sys.Moduleclass(sys,par,onobj,title,typeid,Level,sort);//点击后用于调用各个相关类的样式方法
				}
			})
		});
	}
}]
方法说明:
	//提交后处理的方法
	SubmitEvent:function(sys,par,json){
		//sys集合,par初始值调用,json数据
		编辑处理方法
	}
方法说明:
//添加当前模块自定义处理事件
ModuleExtension:function(sys, par,obj){
	//sys集合,par初始值调用,obj当前事件
	编辑处理方法
}
方法说明:
	//上传控件处理的方法
	 ModuleUpload:function(sys,par,event){
		//sys集合,par初始值调用,event当前事件
		new verUpload({
				files: event,
				name: "sys-Required",
				load_list: true,
				success: function(d) {
					PromptBox(d, 2);
				}, //返回提示
				fail: function(d) {
					PromptBox(d, 2)
				}, //判断提示
				size: 1024 * 4,
				imgw: 200,
				imgh: 200,
				chinese: true, //是否启用中文过滤
				keyname: 'titleImg', //传值
				promptm: '摘要图',
				pathName: "../js/verUpload/asset/images", //显示文件图标地址路径
				verify: '', //是否必填,默认verify
				ext: ['jpg', 'jpeg', 'png', 'gif', 'xls', 'doc', 'docx'] //支持的文件格式
			});
	}
html属性标签使用说明:
	//事例代码,该示例是获取列表展示的html代码。下面说明里面的属性标签    id值用于编辑模块
	<ul class="topic-list" id="topiclist" sys-template='html' sys-structure="cycle">
		<li class="topic-name sys-region" sys-key="id,type,amount,typeid">
			<a href="javascript:;" class="topic-link sys-region" sys-key="id,type,amount,typeid,Level" >
				<span class="sys-region" sys-key="type"  sys-type="text"></span>
			    <span class="sys-region" sys-key="id,amount" sys-type="text"></span>
		    </a>
		</li>
	</ul>
  • sys-structure-循环模式 cycle普通循环 menu多级栏目循环 必填
  • sys-template="html"-内容为html形式编辑展示必填
  • sys-region-class值,对需要进行操作的层添加该属性值用于编辑选填
  • sys-key-key值,里面编辑数据名称,该数据名称和你数据库里的一样就行,用于处理数据值的获取和展示。需要结合class="sys-region"使用必填
  • sys-type-显示模式 text文本模式,img图片模式,label标签模式,icon图标模式 需要结合class="sys-region"使用必填
	//事例代码
	<div class="sys-type-module  sys-edit-info" sys-module="edit" sys-id="#4" title="复选题" >
		 <ul class="sys-addinfo add_style sys-edit-content" sys-key="id,title,label,answer,checkbox-topics">
		   	<a href="javascript:;" sys-name="button" class="iconfont delete-topics" sys-operate="delete-topics" sys-id="#4" title="复选题"></a>
		   	<li class="content_look topic-title sys-region" sys-name="title" >
		   	    <li class="topic-info content_look sys-region" sys-mode="title">
			   	  	<label class="label_name">题目:</label>
			   	  <span class="text_input info_data clearfix">
			   	  		<input sys-name="选择题目" sys-verify="verify"  data-type="title" data-reveal="value"  data-key="title" type="text" class="sys-Required text_input col-sm-10 col-xs-10">
			   	  	</span>
		   	    </li>
		   	  <li class="topic-info content_look sys-region" sys-plus="input" sys-bout="5" sys-mode="select">
		   	  	 <div class="mb10 sys-edit-condition clearfix">
		   	  		<label class="label_name sys-region sys-Required" sys-name="label" data-key="label"></label>
		   	  	    <span class="text_input info_data">
			   	  		<input  sys-name="选择" sys-verify="verify" sys-type="checkbox-topics" data-reveal="value"  data-key="checkbox-topics" type="text" class="sys-Required text_input col-sm-6 col-xs-12">
			   	  		<button class="sys-region btn btn-green  sys-edit-button" sys-name="button" sys-operate="answer-select" sys-id="#4" title="复选题" sys-mode="checkbox" >选择</button>
			   	  		<button class="sys-region btn btn-blue sys-edit-button" sys-name="button" sys-operate="add-select" sys-id="#4" title="复选题"><i class="iconfont">添加</button>
			   	  		<button class="sys-region btn btn-danger sys-edit-button" sys-name="button" sys-operate="delete-select" sys-id="#4" title="复选题" ><i class="iconfont"></i>删除</button>	
			   	  	</span>
			   	</div>
		   	  </li>
		   </ul>
	</div>
  • sys-edit-info-class值必填,每个单独的类添加该class 必填
  • sys-edit-content-class值必填,每个单独的类下内容添加该class 必填
  • sys-edit-button-class值必填,需要按钮时并需要处理时添加该class 必填
  • sys-edit-condition-class值必填,添加多个文本处理时添加该class 必填
  • sys-name-声明名称 必填
  • sys-mode-声明模式名称 checkbox选择模式,title标题模式,select需要进行单选或复选添加 ,content操作普通内容是添加该值必填
  • sys-operate-声明名称,delete-topics为需要拖拽添加该值,answer-select选择当前栏目是添加,add-select添加选择栏目时添加,delete-select删除当前栏时处理必填
栏目