<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8">
<title>svg左右连线插件</title>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/svg-line.min.css">
<script type="text/javascript" src="static/js/svg-line.min.js"></script>
<link rel="stylesheet" href="static/css/font-awesome.4.7.0.css">
<script>
function htmlEncode(s){
return (typeof s != "string") ? s :
s.replace(/"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g,
function($0){
var c = $0.charCodeAt(0), r = ["&#"];
c = (c == 0x20) ? 0xA0 : c;
r.push(c); r.push(";");
return r.join("");
});
}
</script>
<style>
body{margin:0}
.p20{padding: 10px 20px;}
.a-btn{font-weight: bold;cursor: pointer;color: #337ab7;font-size: 18px;margin-left: 10px;}
em{color: red;font-style: normal}
.br-table{table-layout: fixed;width: 100%}
.br-table tr:first-child>td,th{
text-align: center;
}
.br-table td:first-child,th:first-child{
font-weight: bold;
}
.br-table td,th{
border-top: 1px solid #aaa;padding: 5px;
border-left: 1px solid #aaa;
font-size: 14px;line-height: 200%;
}
.br-table tr:last-child>td{
border-bottom: 1px solid #aaa;
}
.br-table tr>td:last-child{
border-right: 1px solid #aaa;
}
.br-table tr>th:last-child{
border-right: 1px solid #aaa;
}
.lt-tr.blue .list-box ul>li:not(.active):not(.disabled):hover{
background-color: #337ab7;color: white;border: none;box-shadow: 0 0 10px 0 #337ab7;
}
.lt-tr.blue .list-box ul>li.active:hover{
background-color: #337ac7;color: white;border: none;box-shadow: 0 0 10px 0 #337ac7;
}
.lt-tr.blue .list-tool .list-tool-indiv>div>i{
color:#337ab7!important;
}
.lt-tr.blue .list-box ul>li.active{
background-color: #337ab7;color: white;
}
</style>
</head>
<body class="full">
<div id="mainDiv" class="full" style="padding: 10px 50px;box-sizing: border-box;">
<h3 class="p20">预览效果</h3>
<div class="p20" style="width: 100%;">
点击连线可以删除连线；可以将线连接到连线之上
</div>
<div style="width: 100%;display: flex;flex-direction: row">
<div id="aaa1" style="width: 500px;border: 1px solid #aaa;box-shadow: darkgrey 0 0 10px 0;margin: 20px;">
</div>
<div id="aaa2" style="width: 600px;border: 1px solid #aaa;box-shadow: darkgrey 0 0 10px 0;margin: 20px;">
</div>
</div>
<div class="p20">
<button onclick="alert(JSON.stringify(obj1.getData()));">获得数据</button>
<button onclick="resize()">重置宽度</button>
<button onclick="obj2.setData({'sh':'hs','t':'f'});">设置连线</button>
<button onclick="addOptions('leftList')">动态插入选项</button>
<button onclick="deleteOptions()">动态删除选项</button>
</div>
<h3 class="p20">答题连线</h3>
<div style="width: 100%;display: flex;flex-direction: row">
<div id="aaa3" style="width: 500px;border: 1px solid #aaa;box-shadow: darkgrey 0 0 10px 0;margin: 20px;">
</div>
<div id="aaa4" style="width: 500px;border: 1px solid #aaa;box-shadow: darkgrey 0 0 10px 0;margin: 20px;">
</div>
</div>
<div class="p20" style="width: 100%;">
<button onclick="getResult()">提交答案</button>
</div>
<h3 class="p20">回调事件</h3>
<div class="p20" style="width: 100%;display: flex;flex-direction: row">
<textarea rows="10" id="msg" style="width: 600px;outline: none">回调事件</textarea>
</div>
<h3 class="p20">调用方式</h3>
<div class="p20">
<pre>
<script>
document.write(htmlEncode("var obj2 = $(\"#aaa2\").svgLine({\n" +
" //列表中选项的尺寸(支持sm、md、lg)\n" +
" size:'md',\n" +
" //皮肤，默认只支持green\n" +
" skin:'green',\n" +
" //左边列表标题\n" +
" headerLeft:'MODULE1',\n" +
" headerRight:'MODULE2',\n" +
" //选项中文名称的字段名\n" +
" name:'name',\n" +
" //选项的唯一标识的字段名,\n" +
" key:'key',\n" +
" //左边列表选项\n" +
" leftList:[\n" +
" {name:'天',key:'t',disable:true,icon:'fa fa-bandcamp'},{name:'雨',key:'y'},{name:'大陆',key:'dl'},{name:'山花',key:'sh'},{name:'赤日',key:'cr'}\n" +
" ],\n" +
" rightList: [\n" +
" {name:'地',key:'d'},{name:'风',key:'f'},{name:'长空',key:'ck'},{name:'苍穹',key:'cq'},{name:'海树',key:'hs'}\n" +
" ],\n" +
" //映射关系\n" +
" mapping:{'sh':'hs','cr':'cq','t':'d','y':'f','dl':'ck'},\n" +
" width:'600px',\n" +
" //选择映射时回调\n" +
" onSelect:function(l1,l2){\n" +
" appendMsg($(\"#msg\"),\"您连接了\"+l1+\"和\"+l2);\n" +
" },\n" +
" //删除映射时回调\n" +
" onCancle:function(l1,l2){\n" +
" appendMsg($(\"#msg\"),\"您取消了\"+l1+\"和\"+l2);\n" +
" },\n" +
" });\n" +
" //触发宽度重置\n" +
" obj2.resize(宽度);\n" +
" //获得数据\n" +
" alert(JSON.stringify(obj2.getData()));"));
</script>
</pre>
</div>
<h3 class="p20">svgLine方法的参数说明</h3>
<div class="p20">
<table class="br-table" cellspacing="0">
<tr><th width="160px">参数名</th><th>含义</th><th>取值范围</th></tr>
<tr><td>headerLeft</td>
<td>左边列表标题</td><td>任意值（支持html）</td>
</tr>
<tr><td>headerRight</td>
<td>右边列表标题</td><td>任意值（支持html）</td>
</tr>
<tr><td>leftList</td>
<td>左列表选项</td><td>数组，数组中的每个元素是一个选项，每个选项都需要定义key和name属性</td>
</tr>
<tr><td>rightList</td>
<td>右列表选项</td><td>数组</td>
</tr>
<tr><td>mapping</td>
<td>初始连线关系</td><td>左列表key值和右列表key值得关系</td>
</tr>
<tr><td>width</td>
<td>控件外部宽度</td><td>px或者%</td>
</tr>
<tr><td>size</td>
<td>控�
基于jQuery的左右列表连线插件.rar （10个子文件） 
hjiaoben126 
index.html 19KB static font 
fontawesome-webfont.eot 162KB fontawesome-webfont.woff 96KB fontawesome-webfont.woff2 75KB fontawesome-webfont.ttf 162KB js svg-line.min.js 8KB jquery.min.js 85KB css svg-line.min.css 3KB font-awesome.4.7.0.css 119B font-awesome.min.css 30KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5850
最新资源
- (源码)基于SimPy和贝叶斯优化的流程仿真系统.zip
- (源码)基于Java Web的个人信息管理系统.zip
- (源码)基于C++和OTL4的PostgreSQL数据库连接系统.zip
- (源码)基于ESP32和AWS IoT Core的室内温湿度监测系统.zip
- (源码)基于Arduino的I2C协议交通灯模拟系统.zip
- coco.names 文件
- (源码)基于Spring Boot和Vue的房屋租赁管理系统.zip
- (源码)基于Android的饭店点菜系统.zip
- (源码)基于Android平台的权限管理系统.zip
- (源码)基于CC++和wxWidgets框架的LEGO模型火车控制系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
