8

Author: hikki

test/index.html

@@ -124,11 +124,12 @@
     <rect fill='url(#g)' width='100%' height='100%'/>
 </svg>
 <div style="position: absolute;z-index: 1000;top:0;left: 0;right: 0;bottom: 0;">
-    <div style="height: 30px;text-align: center">Dot 多选择器</div>
-    <div id="test" style="width: 550px;height: 200px;margin: 0 auto"></div>
-    <div style="margin-top:30px;height: 30px;text-align: center">Dot 多选择器(下拉列表模式)</div>
-
-    <div id="test7" style="width:200px;margin: 0 auto"></div>
+    <div style="height: 30px;text-align: center">Dot 多选择器(三种模式dot menu switch)</div>
+    <div style="margin: 0 auto;display: flex;justify-content: space-around">
+        <div id="test" style="width: 450px;height: 200px;"></div>
+        <div id="test7" style="width:200px;"></div>
+        <div id="test11" style="width:350px;"></div>
+    </div>
 
     <div style="margin-top:30px;height: 30px;text-align: center">CascadeDot 级联多选择器</div>
     <div id="test4" style="width: 650px;height: 360px;margin: 0 auto"></div>
@@ -243,10 +244,18 @@
         console.log(select,insert,del)
     }).selected([2, 5, 10]).limitNum(3).make();
 
-    new ComponentDot('#test7', test_data).mod({mode:true,placeholder: '选择女优',height:'120px'}).trigger(function (select,insert,del) {
+    new ComponentDot('#test7', test_data).menuMod({placeholder: '选择女优',height:'120px'}).trigger(function (select,insert,del) {
         console.log(select,insert,del)
     }).selected([2]).limitNum(1).make();
 
+    new ComponentDot('#test11', {
+        "1": "青 龙",
+        "2": "白 虎",
+        "3": "朱 雀",
+        "4": "玄 武"}).switchMod().trigger(function (select,insert,del) {
+        console.log(select,insert,del)
+    }).selected([2]).limitNum(2).make();
+
     new ComponentLine("#test2", {
             "name": {"name": "名称", "type": "input"},
             "meta": {"name": "番号", "type": "text","insert_type":"hidden"},