sysui拖拽式试卷问卷调组合插件


sysui拖拽式试卷问卷调组合插件
sysui拖拽式试卷问卷调组合插件以及拖拽式试卷、问卷调组合等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/SYSUI.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/moldbox.css" />
<link rel="stylesheet" href="skin/black/skin.css" id="skin"/>
<link rel="stylesheet" href="font/iconfont.css" />
<link rel="stylesheet" href="js/built/built-editor.css" />
<link rel="stylesheet" href="css/SYSUI.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/moldbox.css" />
<link rel="stylesheet" href="skin/black/skin.css" id="skin"/>
<link rel="stylesheet" href="font/iconfont.css" />
<link rel="stylesheet" href="js/built/built-editor.css" />

2. 引入JS

<script type="text/javascript" src="js/SYSUI.js" ></script>
<script type="text/javascript" src="js/box.js" ></script>
<script type="text/javascript" src="js/sys-Module-Drag.js" ></script>
<script type="text/javascript" src="js/verUpload/verUpload.js" ></script>
<script src="js/built/built-editor.min.js"></script>
<script type="text/javascript" src="js/SYSUI.js" ></script>
<script type="text/javascript" src="js/box.js" ></script>
<script type="text/javascript" src="js/sys-Module-Drag.js" ></script>
<script type="text/javascript" src="js/verUpload/verUpload.js" ></script>
<script src="js/built/built-editor.min.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
	 <style type="text/css">
	 	.DragModule{border: 1px solid #DDDDDD; background: #FFFFFF;}
	 	.title-name{text-align: left;position: relative;z-index:11;}
	 	.title-name:before{position: absolute;z-index: 11; content: ''; width: 5px; height: 100%; left: 0px; top:0px; background: #0088CC;}
	 	.Section-type{ width: 200px; float: right; border-left: 1px solid #DDDDDD;}
	 	.sys-scrollbar{ float: left;}
	 	.sort-module{position: relative;z-index: 3; border: 1px dashed #DDDDDD;margin: 15px; background: #FFFFFF;}
	 	.sys-type-btn{float: right;  color: #FFFFFF; height: 30px; line-height: 30px; padding: 0px 10px; font-size: 13px; margin-top: 5px; margin-left: 5px;}
	 	.sys-dragregion{ background: #F2F2F2;border:2px dashed #DDDDDD; min-height: 150px;}
	 	.sys-operation{ height: 60px; padding: 10px; border-top: 1px solid #dddddd; width: 100%; text-align: center; }
	 	.sys-Editarea{float: left;}
	 	.sort-btn{ height: 40px; line-height: 40px; padding: 0px 50px;font-size: 16px;}
	 	.sort-content{padding: 10px;}
	 	.sys-edit-button{ height: 40px; margin-left: 15px; width: 80px;}
	 	.sys-prompt{font-size: 12px; color: #F07102; padding: 0px 10px;}
	 	.sys-edit-content{position: relative; z-index: 2;  padding-bottom: 15px; border-bottom: 1px  dashed #DDDDDD;}
	 	.sys-edit-content:last-child{ border-bottom:0px;}
	 	.delete-topics{
	 		position: absolute;
	 		z-index: 111; 
	 		top:10px; 
	 		right:10px; 
	 		color: #D01D33; 
	 		font-size: 18px; 
	 		width: 30px; 
	 		height: 30px; 
	 		text-align: center; 
	 		line-height: 30px;
	 		border-radius: 3px;
	 	}
	 	.delete-topics:hover{background: #FFEECC;}
	 	.SelectionBox{ margin-right: 10px;}
	 	.form-textarea{ height: 150px;}
	 	.verUpload {
				width: 204px;
				height: 204px;
				border: 2px dashed #DDDDDD;
				position: relative;
				z-index: 1;
				cursor: pointer;
			}
			.verUpload_files {
				display: block;
				width: 200px;
				height: 200px;
				position: absolute;
				z-index: 11;
				top: 0px;
				left: 0px;
			}
			.verUpload .icon_Upload {
				position: absolute;
				width: 80px;
				height: 80px;
				top: 50%;
				margin-top: -40px;
				left: 50%;
				margin-left: -40px;
				z-index: 10;
				font-size: 80px;
				line-height: 80px;
				text-align: center;
				color: #cccccc;
			}
			.verUpload .prompt {
				position: absolute;
				bottom: 0px;
				z-index: 10;
				width: 100%;
				left: 0px;
				text-align: center;
			}
			.verUpload input {
				width: 200px;
				height: 200px;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.uploadFilesBox {
				width: 200px;
				height: 200px;
			}
			.height400 {
				height: 400px;
				max-height: 400px;
			}
			.number {
				color: #DB2023;
			}
			.javascript_editor{ height: 450px;border: 1px solid #DDDDDD; text-align: left;}
			.Plugin_title{font-size: 18px; color: #D9534F; font-weight: bold;}
			.Plugin_content{background: #EED3D7;}
	 </style>
	</head>
	<body class="padding15">
		<div id="DragModule" class="DragModule">
			<div class="clearfix sys-edit">
			<div class="sys-Editarea" id="Editarea">
				<div id="DragSort">
				<div class="sys-type-module  sys-edit-info" sys-module="edit" sys-id="#3" title="单选题">
					   <ul class="sys-addinfo add_style sys-edit-content" sys-key="id,title,label,answer,department">
					   	<a href="javascript:;" sys-name="button" class="iconfont delete-topics" sys-operate="delete-topics" sys-id="#3" title="单选题">&#xe6b4;</a>
					   	<li class="content_look topic-title sys-region" sys-name="title" ></li>
					   	    <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="4" 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="department" data-reveal="value" data-key="department" 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="#3" title="单选题" sys-mode="radio" >选择</button>
						   	  		<button class="sys-region btn btn-blue sys-edit-button" sys-name="button" sys-operate="add-select" sys-id="#3" title="单选题"><i class="iconfont">&#xe61d;</i>添加</button>
						   	  		<button class="sys-region btn btn-danger sys-edit-button" sys-name="button" sys-operate="delete-select" sys-id="#3" title="单选题" ><i class="iconfont">&#xe6b4;</i>删除</button>
						   	  	</span>
						   	  </div>
					   	  </li>
					   </ul>
				</div>
				<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="复选题">&#xe6b4;</a>
					   	<li class="content_look topic-title sys-region" sys-name="title" ></li>
					   	    <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">&#xe61d;</i>添加</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">&#xe6b4;</i>删除</button>	
						   	  	</span>
						   	  </div>
					   	  </li>
					   </ul>
				</div>
				<div class="sys-type-module  sys-edit-info" sys-module="edit" sys-id="#5" title="判断题">
					<ul class="sys-addinfo add_style sys-edit-content" sys-key="id,title,correct_answer,answer">
						<a href="javascript:;" sys-name="button" class="iconfont delete-topics" sys-operate="delete-topics" sys-id="#5" title="判断题">&#xe6b4;</a>
						<li class="content_look topic-title sys-region" sys-name="title" ></li>
					   	<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-mode="content">
							<label class="label_name">是否正确:</label>
							<span class="sys-Required info_data" data-key="correct_answer" sys-type="status" sys-array="对,错" data-value="0" sys-method="SelectionBox" sys-mode="radio"> 			        			    
						    </span>
						</li>
						<li class="topic-info content_look sys-region" sys-mode="content">
							<label class="label_name">题目解答:</label>
							<span class="text_input info_data clearfix">
								<textarea sys-name="题目解答" data-prompt="text_content" data-reveal="value"sys-verify="verify"  sys-type="summary" data-key="answer" data-stint="Wordcount" size="300" class="sys-Required form-textarea col-sm-12 textarea height100 mr10" placeholder=""></textarea>
						    </span>
						</li>
					</ul>
				</div>
				<div class="sys-type-module  sys-edit-info" sys-module="edit" sys-id="#6" title="填空题">
					<div class="color3">自定义html</div>
				</div>
				<div class="sys-type-module  sys-edit-info" sys-module="edit" sys-id="#7" title="阅读理解">
					<div class="">自定义html</div>
				</div>
				<div class="sys-type-module  sys-edit-info" sys-module="edit" sys-id="#13" title="解答题">
					<ul class="sys-addinfo add_style sys-edit-content" sys-key="id,title,correct_answer,answer,titleImg">
						<a href="javascript:;" sys-name="button" class="iconfont delete-topics" sys-operate="delete-topics" sys-id="#13" title="解答题">&#xe6b4;</a>
						<li class="content_look topic-title sys-region" sys-name="title" ></li>
						<li class="topic-info content_look sys-region" sys-mode="title">
					   	  	<label class="label_name">题目:</label>
					   	  	<span class="text_input info_data clearfix">
								<textarea sys-name="题目信息" data-prompt="text_content" data-reveal="value"sys-verify="verify"  sys-type="summary" data-key="title" data-stint="Wordcount" size="300" class="sys-Required form-textarea col-sm-12 textarea height100 mr10" placeholder=""></textarea>
					   	  	</span>
					   	</li>
					   	<li class="topic-info clearfix content_look">
							<label class="label_name">摘要图:</label>
							<span class="info_data">
								<div class="verUpload">
								    <div class="sys-Required verUpload_files" sys-mode="files">							  	    
								    </div> 
								  </div>
							</span>
						</li>
						<li class="topic-info content_look sys-region" sys-mode="content">
					   	  	<label class="label_name">题目解答:</label>
					   	  	<span class="text_input info_data clearfix">
								<textarea sys-name="题目答案" data-prompt="text_content" data-reveal="value"sys-verify="verify"  sys-type="summary" data-key="answer" data-stint="Wordcount" size="1000" class="sys-Required form-textarea col-sm-12 textarea height100 mr10" placeholder=""></textarea>
					   	  	</span>
					   	</li>
					</ul>
				</div>
				<div class="sys-type-module  sys-edit-info" sys-module="edit" sys-id="#99" title="插件说明">
					<div class="Plugin_title">基础引用:</div>
					<div class="Plugin_content ptb15">
						<pre class="editor  mtb15 javascript" data-editor-lang="js" >
							//引用相关js文件后前端编辑js方法
							new SYSDrag({
								//这里配置参数,编辑方法
							});
						</pre>
					</div>
					<div class="Plugin_title">参数说明:</div>
					<div class="Plugin_content ptb15">
						<ul>
							<li class="mb10"><b class="font-size18">DragModule</b>-执行编辑的区域 传值可以为class或者id <b class="color2">必填</b></li>
							<li class="mb10"><b class="font-size18">DragWidth</b>-区域的宽度,传整数 int,不填写默认浏览器的宽度 <b class="color2">选填</b></li>
							<li class="mb10"><b class="font-size18">DragHeight</b>-区域的高度,传整数 int,不填写默认浏览器的高度 <b class="color2">选填</b></li>
							<li class="mb10"><b class="font-size18">SessionName</b>-Session存储名称,自定义名称,存储在本地浏览器中,浏览器关闭时该存储信息删除,主要保存用户自己编辑的html,及其栏目相关值,该值为<b class="color2">必填</b></li>
							<li class="mb10"><b class="font-size18">DragContent</b>-编辑需要操作的内容区显示区域,传值可以为class或者id<b class="color2">必填</b></li>
							<li class="mb10"><b class="font-size18">DragOperation</b>-提交编辑区域,传值可以为class或者id,事例如下:<b class="color2">必填</b>
								<pre class="editor  mtb15 javascript" data-editor-lang="html" >
									&lt;div class="sys-operation btn-operation" id="operation">
										&lt;button class="btn btn-blue sort-submit sort-btn" id="submit" sys-operate="submit" >提交&lt;/button>
										&lt;button class="btn btn-green sort-refactoring sort-btn" id="Refactoring" sys-operate="Refactoring" >从新编辑&lt;/button>
									&lt;/div>
								</pre>
							</li>
							<li class="mb10"><b class="font-size18">DrageditMethod</b>-编辑信息内容模块,该为编辑html内容的元素,传值可以为class或者id<b class="color2">必填</b>
								<pre class="editor  mtb15 javascript" data-editor-lang="html" >
									&lt;div id="DragSort">
										//具体的html,根据相应的属性标签,生成用户自己编辑的样式
									&lt;/div>
								</pre>
							</li>
							<li class="mb10"><b class="font-size18">DragModuleHeight</b>-自定义每个模块的默认高度,传整数 int,不填写默认高度为150 <b class="color2">选填</b></li>
							<li class="mb10"><b class="font-size18">SubmitName</b>-提交事件的元素,传值可以为class或者id<b class="color2">必填</b>
							<li class="mb10"><b class="font-size18">ResetName</b>-重置事件的元素,传值可以为class或者id<b class="color2">必填</b>
							<li class="mb10"><b class="font-size18">DragSlide</b>-是否允许拖拽栏目,false/true<b class="color2">选填</b>	
						</ul>
					</div>
					<div class="Plugin_title">方法说明:</div>
					<div class="Plugin_content ptb15">
<pre class="editor  mtb15 javascript" data-editor-lang="js" >
//自定义编辑模块的方法
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);//点击后用于调用各个相关类的样式方法
				}
			})
		});
	}
}]
</pre>
						</div>
						<div class="Plugin_title">方法说明:</div>
						<div class="Plugin_content ptb15">
<pre class="  mtb15 javascript"  >
	//提交后处理的方法
	SubmitEvent:function(sys,par,json){
		//sys集合,par初始值调用,json数据
		编辑处理方法
	}
</pre>
						</div>
						<div class="Plugin_title">方法说明:</div>
						<div class="Plugin_content ptb15">
<pre class="  mtb15 javascript">
//添加当前模块自定义处理事件
ModuleExtension:function(sys, par,obj){
	//sys集合,par初始值调用,obj当前事件
	编辑处理方法
}
</pre>
						</div>
						<div class="Plugin_title">方法说明:</div>
						<div class="Plugin_content ptb15">
<pre class=" mtb15 javascript"  >
	//上传控件处理的方法
	 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'] //支持的文件格式
			});
	}
</pre>
					</div>
					<div class="Plugin_title">html属性标签使用说明:</div>
					<div class="Plugin_content ptb15">
<pre  >
	//事例代码,该示例是获取列表展示的html代码。下面说明里面的属性标签    id值用于编辑模块
	&lt;ul class="topic-list" id="topiclist" sys-template='html' sys-structure="cycle">
		&lt;li class="topic-name sys-region" sys-key="id,type,amount,typeid">
			&lt;a href="javascript:;" class="topic-link sys-region" sys-key="id,type,amount,typeid,Level" >
				&lt;span class="sys-region" sys-key="type"  sys-type="text">&lt;/span>
			    &lt;span class="sys-region" sys-key="id,amount" sys-type="text">&lt;/span>
		    &lt;/a>
		&lt;/li>
	&lt;/ul>
</pre>
                        <ul>
							<li class="mb10"><b class="font-size18">sys-structure</b>-循环模式 cycle普通循环  menu多级栏目循环 <b class="color2">必填</b></li>
							<li class="mb10"><b class="font-size18">sys-template="html"</b>-内容为html形式编辑展示<b class="color2">必填</b></li>
							<li class="mb10"><b class="font-size18">sys-region</b>-class值,对需要进行操作的层添加该属性值用于编辑<b class="color2">选填</b></li>
							<li class="mb10"><b class="font-size18">sys-key</b>-key值,里面编辑数据名称,该数据名称和你数据库里的一样就行,用于处理数据值的获取和展示。需要结合class="sys-region"使用<b class="color2">必填</b></li>
							<li class="mb10"><b class="font-size18">sys-type</b>-显示模式  text文本模式,img图片模式,label标签模式,icon图标模式 需要结合class="sys-region"使用<b class="color2">必填</b></li>
                        </ul>
					</div>
					<div class="Plugin_content ptb15">
<pre>
	//事例代码
	&lt;div class="sys-type-module  sys-edit-info" sys-module="edit" sys-id="#4" title="复选题" >
		 &lt;ul class="sys-addinfo add_style sys-edit-content" sys-key="id,title,label,answer,checkbox-topics">
		   	&lt;a href="javascript:;" sys-name="button" class="iconfont delete-topics" sys-operate="delete-topics" sys-id="#4" title="复选题">&#xe6b4;&lt;/a>
		   	&lt;li class="content_look topic-title sys-region" sys-name="title" ></li>
		   	    &lt;li class="topic-info content_look sys-region" sys-mode="title">
			   	  	&lt;label class="label_name">题目:&lt;/label>
			   	  &lt;span class="text_input info_data clearfix">
			   	  		&lt;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">
			   	  	&lt;/span>
		   	    &lt;/li>
		   	  &lt;li class="topic-info content_look sys-region" sys-plus="input" sys-bout="5" sys-mode="select">
		   	  	 &lt;div class="mb10 sys-edit-condition clearfix">
		   	  		&lt;label class="label_name sys-region sys-Required" sys-name="label" data-key="label">&lt;/label>
		   	  	    &lt;span class="text_input info_data">
			   	  		&lt;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">
			   	  		&lt;button class="sys-region btn btn-green  sys-edit-button" sys-name="button" sys-operate="answer-select" sys-id="#4" title="复选题" sys-mode="checkbox" >选择&lt;/button>
			   	  		&lt;button class="sys-region btn btn-blue sys-edit-button" sys-name="button" sys-operate="add-select" sys-id="#4" title="复选题">&lt;i class="iconfont">&#xe61d;</i>添加&lt;/button>
			   	  		&lt;button class="sys-region btn btn-danger sys-edit-button" sys-name="button" sys-operate="delete-select" sys-id="#4" title="复选题" >&lt;i class="iconfont">&#xe6b4;&lt;/i>删除&lt;/button>	
			   	  	&lt;/span>
			   	&lt;/div>
		   	  &lt;/li>
		   &lt;/ul>
	&lt;/div>
</pre>
						    <ul>
						    	<li class="mb10"><b class="font-size18">sys-edit-info</b>-class值必填,每个单独的类添加该class <b class="color2">必填</b></li>
						    	<li class="mb10"><b class="font-size18">sys-edit-content</b>-class值必填,每个单独的类下内容添加该class <b class="color2">必填</b></li>
						    	<li class="mb10"><b class="font-size18">sys-edit-button</b>-class值必填,需要按钮时并需要处理时添加该class <b class="color2">必填</b></li>
						    	<li class="mb10"><b class="font-size18">sys-edit-condition</b>-class值必填,添加多个文本处理时添加该class <b class="color2">必填</b></li>
						    	<li class="mb10"><b class="font-size18">sys-name</b>-声明名称 <b class="color2">必填</b></li>
						    	<li class="mb10"><b class="font-size18">sys-mode</b>-声明模式名称 checkbox选择模式,title标题模式,select需要进行单选或复选添加 ,content操作普通内容是添加该值<b class="color2">必填</b></li>
						    	<li class="mb10"><b class="font-size18">sys-operate</b>-声明名称,delete-topics为需要拖拽添加该值,answer-select选择当前栏目是添加,add-select添加选择栏目时添加,delete-select删除当前栏时处理<b class="color2">必填</b></li>
							</ul>
					</div>
				</div>
				</div>
			</div>
			<div class="Section-type sys-section" id="type" >
			   	<div class="title-name sys-region" sys-keyset="title">栏目</div>
			   	 	<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>
			    </div>
			</div>
			<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>
	    </div>
	</body>
</html>
<script>
	new SYSDrag({
		DragModule:"#DragModule",
		DragWidth:null,//拖拽区域宽度 ,不填默认浏览器大小
		DragHeight:null,//拖拽区域高度,不填默认浏览器大小
		DragLevel:2,//拖拽模块层级
		SessionName:"DragSort",
		DragContent:'#Editarea',//编辑内容区显示区域
		DragOperation:'#operation',//提交编辑区域
		DrageditMethod:'#DragSort',//编辑信息内容模块
		Dragclass:null,//拖拽的类
		DragModuleHeight:150,//自定义每个模块的默认高度
		SubmitName:"#submit",//提交事件id
		ResetName:"#Refactoring",//重置id
		DragMethod:[{'module':'#topiclist',"title":"栏目",event:function(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);//调用栏目方法
			    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){
		   var jsondata= formatJson(json);
			new Mysysbox({
					ieventmask: false, //是否允许点击遮罩层关闭窗体
					mask: false, //是否允许显示遮罩层
					lock: false, //是否显示默认按钮事件
					btn: [], //按钮名称
					winbtn: [false, false, true],
					title: "数据格式", //栏目标题
					mode: 0, //输入的内容状态(0为文本输入,1为url地址界面传入)
					tm: 1, //提示状态设置(0为提示框,1为文本内容信息)
					width:600, //窗口宽度
					height:750, //窗口高度
					content:jsondata,
					confirm: function(mysysbox) {}, //回调处理事件
					closeExpand: function(mysysbox, obj) {
					}
			});
        },
        ModuleUpload:function(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'] //支持的文件格式
			});
      },
      ModuleExtension:function(sys, par,obj){
      	require(["orion/editor/edit"], function(edit) {
			edit({
				    className: "editor"
			    });
		    });
      }
	});
</script>
<script>
	function formatJson(msg) {
        var rep = "~";
        var jsonStr = JSON.stringify(msg, null, rep)
        var str = "";
        for (var i = 0; i < jsonStr.length; i++) {
            var text2 = jsonStr.charAt(i)
            if (i > 1) {
                var text = jsonStr.charAt(i - 1)
                if (rep != text && rep == text2) {
                    str += "<br/>"
                }
            }
            str += text2;
        }
        jsonStr = "";
        for (var i = 0; i < str.length; i++) {
            var text = str.charAt(i);
            if (rep == text)
                jsonStr += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
            else {
                jsonStr += text;
            }
            if (i == str.length - 2)
                jsonStr += "<br/>"
        }
        return jsonStr;
   }
</script>

相关推荐

发表评论

相关文章