v1.0.0.0729

1. 更新文档显示问题

README.md

@@ -39,18 +39,24 @@ QQ群: 769620939
 	//搜索延迟 ms
 	delay: 500,
 	//搜索默认提示
-	searchTips: '请选择', //please search
+	searchTips: setting.searchTips,
 	//是否开始本地搜索
 	filterable: false,
-	//本地搜索过滤方法, 返回true表示显示, false不显示, val:当前输入框搜索值, item:选项数据, index: 数组坐标, porp: 自定义属性
+	//本地搜索过滤方法
 	filterMethod: function(val, item, index, prop){
 		if(!val) return true;
 		return item[prop.name].indexOf(val) != -1;
 	},
 	//下拉方向
-	direction: 'auto', //auto, down, up
+	direction: 'auto',
 	//自定义样式
 	style: {},
+	//是否开启单选模式
+	radio: false,
+	//是否开启重复选模式
+	repeat: false,
+	//是否点击选项后自动关闭下拉框
+	clickClose: false,
 	//自定义属性名称
 	prop: {
 		name: 'name',
@@ -77,22 +83,27 @@ QQ群: 769620939
 			},
 			count: {
 				template(data, sels){
-					return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
+					return '已选中 '+sels.length+' 项, 共 '+data.length+' 项'
 				}
 			},
 		},
 	},
-	// 展开下拉框, return false; 代表组件受控
+	
+	// 展开下拉框
 	show(){
 		
 	},
-	// 隐藏下拉框, return false; 代表组件受控
+	// 隐藏下拉框
 	hidn(){
 		
 	},
 	// 模板组成, 当前option数据, 已经选中的数据, name, value  
-	template(item, sels, name, value){
+	template({ item, sels, name, value }){
 		return name;
+	},
+	//监听选中事件
+	on({ arr, item, selected }){
+		
 	}
 }
 ```

docs/data.js

@@ -34,6 +34,10 @@ xmSelect.render({
 
 <h3>更新日志</h3>
 `, js: ``, comment: `
+[2019-07-29] v1.0.0.0729
+1. 更新文档显示问题
+
+
 [2019-07-27] v1.0.0.0727
 1. 新增单选模式, {radio: true|false}
 2. 新增重复选模式, {repeat: true|false}

docs/index.css

@@ -4,10 +4,15 @@
 .syntaxhighlighter .toolbar a{display: none!important;}
 .syntaxhighlighter .line.alt1,.syntaxhighlighter .line.alt2{background-color: #FAFAFA !important;}
 .syntaxhighlighter{background-color: #FAFAFA !important; padding: 10px; width: calc(100% - 20px) !important; border-radius: 5px;}
-div.slide{width: 90vw; overflow: auto;}
+/* div.slide{width: 90vw; overflow: auto;} */
 h3{font-size: 20px; font-weight: bold; margin-bottom: 20px;}
 .dcode{margin-top: 100px;}
 .mt10{margin-top: 10px;}
-#header{left: 5vw; right: 5vw; top: 20px; position: fixed;}
+
 p{font-size: 14px; color: #5e6d82; line-height: 1.5em;margin: 15px 0 10px;}
 a{color: #409eff; text-decoration: none;}
+#content{height: calc(100vh - 99px); overflow: auto; padding: 10px;}
+/* #header{left: 5vw; right: 5vw; top: 20px; position: fixed;} */
+#header{padding: 20px 50px; background-color: #0B0D10; top: 0; left: 0; right: 0; z-index: 99999; border-bottom: 1px solid #DCDFE5;}
+#header xm-select{background-color: #17191C; color: #FFF;}
+body{margin: 0;}

docs/index.js

@@ -1,8 +1,8 @@
 
 var htmls = [], js = [];
-data.forEach(function(item){
+data.forEach(function(item, index){
 	htmls.push([
-		'<div class="slide">',
+		'<div class="slide" id="XM'+index+'">',
 			item.html,
 			'<div class="dcode mt10"><script type="syntaxhighlighter" class="brush:html"><![CDATA[',
 				item.comment ? item.comment.replace(/</g, '&lt;') : item.html.replace(/</g, '&lt;'),
@@ -17,6 +17,8 @@ data.forEach(function(item){
 
 var box = $('#content');
 box.append($(htmls.join('')));
+// var box = document.getElementById('content');
+
 
 js.forEach(function(item){
 	eval(item);
@@ -26,7 +28,7 @@ SyntaxHighlighter.defaults["quick-code"] = false;
 SyntaxHighlighter.defaults["gutter"] = false;
 SyntaxHighlighter.all();
 
-var ele = new Fathom('#content')
+// var ele = new Fathom('#content')
 
 xmSelect.render({
 	el: '#header',
@@ -53,6 +55,10 @@ xmSelect.render({
 	radio: true,
 	clickClose: true,
 	on: function(data){
-		data.selected && ele.scrollToSlide($('.slide:nth-child('+(data.item.value + 1)+')'));
+		window.location.hash = '#XM' + data.item.value;
 	}
 });
+
+var hash = window.location.hash;
+window.location.hash = '';
+window.location.hash = hash;

index.html

@@ -6,19 +6,20 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 		<link rel="stylesheet" type="text/css" href="docs/highlighter/shCore.css"/>
 		<link rel="stylesheet" type="text/css" href="docs/highlighter/shThemeEclipse.css"/>
-		<link rel="stylesheet" type="text/css" href="docs/fathom/fathom.sample.css"/>
+		<!-- <link rel="stylesheet" type="text/css" href="docs/fathom/fathom.sample.css"/> -->
 		<link rel="stylesheet" type="text/css" href="docs/index.css"/>
 	</head>
 	<body>
-		<div id="content"></div>
+		
 		<div id="header"></div>
+		<div id="content"></div>
 		
 		
 		<script src="docs/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 		<script src="docs/highlighter/shCore.js" type="text/javascript" charset="utf-8"></script>
 		<script src="docs/highlighter/shBrushJScript.js" type="text/javascript" charset="utf-8"></script>
 		<script src="docs/highlighter/shBrushXml.js" type="text/javascript" charset="utf-8"></script>
-		<script src="docs/fathom/fathom.min.js" type="text/javascript" charset="utf-8"></script>
+		<!-- <script src="docs/fathom/fathom.min.js" type="text/javascript" charset="utf-8"></script> -->
 		
 		<script src="dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
 		<script src="docs/data.js" type="text/javascript" charset="utf-8"></script>

src/style/index.less

@@ -25,6 +25,7 @@ xm-select{
 		user-select: none;
 	}
 	
+	background-color: #FFF;
 	position: relative;
 	border: @border;
 	border-radius: 2px;