v1.0.0.0727

1. 新增单选模式, {radio: true|false} 2. 新增重复选模式, {repeat: true|false} 3. 新增配置, 可以控制是否自动关闭下拉框, {clickClose: true|false} 4. 新增on方法, 可以监听已选择数据, data: {arr, item, selected}
2019-07-27 16:26:05 +08:00 · 2019-07-27 16:26:05 +08:00 · d54aa08565
commit d54aa08565
parent ba563c67c4
22 changed files with 1706 additions and 354 deletions
--- a/dist/xm-select.js
+++ b/dist/xm-select.js
--- a/docs/data.js
+++ b/docs/data.js
@ -0,0 +1,643 @@
+window.data = [
+{ html: `
+<a href='https://gitee.com/maplemei/xm-select'><img src='https://gitee.com/maplemei/xm-select/widgets/widget_6.svg' alt='Fork me on Gitee'></img></a>
+<p>xm-select始于layui, 前身formSelects, 此版本引入第三方preact库, 利用jsx渲染页面结构</p>
+<p>作者: 热爱前端的Java程序猿</p>
+<p>QQ号: 707200833</p>
+<p>QQ群: 769620939</p>
+<a target="_blank" class="qqicon" href="https://shang.qq.com/wpa/qunwpa?idkey=9f9d4de074f2cb4d13afb3f04b874742a5f400eac2c0648fcfd20afb5413fb0a"><img border="0" src="docs/group.png" alt="技术交流群" title="技术交流群"></a>
+<div class="example">
+	<p>↓↓↓ 捐赠作者 ↓↓↓</p>
+	<p>
+		<img src="docs/wx.jpg" width="230px" style="border: 1px solid #009688">
+	</p>
+	<p>你们的支持, 是我们坚持的动力</p>
+</div>
+<div id="test01"></div>
+`, js: `
+xmSelect.render({
+	// 这里是指定渲染的地方
+	el: '#test01', 
+	// 这里是渲染的数据
+	data: [{name: '水果', value: 1}, {name: '蔬菜', value: 2}]
+})
+`, comment: `
+简单的使用方法:
+1. 引入xm-select.js文件
+2. <div id="test01"></div>
+3. 使用js渲染指定元素
+`, brush: 'html', title: '简介'}, 
+	
+	
+{ html: `
+<p>如果有bug欢迎提issues, 或者在群内@群主进行反馈</p>
+
+<h3>更新日志</h3>
+`, js: ``, comment: `
+[2019-07-27] v1.0.0.0727
+1. 新增单选模式, {radio: true|false}
+2. 新增重复选模式, {repeat: true|false}
+3. 新增配置, 可以控制是否自动关闭下拉框, {clickClose: true|false}
+4. 新增on方法, 可以监听已选择数据, data: {arr, item, selected}
+
+更新文档演示
+
+[---] v1.0.0
+很久很久以前...
+
+`, brush: 'html', title: '更新日志'}, 
+
+
+{ html: `
+<h3>默认配置项options</h3>
+`, comment: `
+{
+	//多选数据
+	data: [],
+	//默认选中数据, 优先级大于selected
+	initValue: null,
+	//默认提示
+	tips: '请选择', //please selected
+	//空数据提示
+	empty: '暂无数据', //no data
+	//搜索延迟 ms
+	delay: 500,
+	//搜索默认提示
+	searchTips: setting.searchTips,
+	//是否开始本地搜索
+	filterable: false,
+	//本地搜索过滤方法
+	filterMethod: function(val, item, index, prop){
+		if(!val) return true;
+		return item[prop.name].indexOf(val) != -1;
+	},
+	//下拉方向
+	direction: 'auto',
+	//自定义样式
+	style: {},
+	//是否开启单选模式
+	radio: false,
+	//是否开启重复选模式
+	repeat: false,
+	//是否点击选项后自动关闭下拉框
+	clickClose: false,
+	//自定义属性名称
+	prop: {
+		name: 'name',
+		value: 'value',
+		selected: 'selected',
+		disabled: 'disabled',
+	},
+	//主题配置
+	theme: {
+		color: '#009688',
+	},
+	//模型
+	model: {
+		label: {
+			type: 'block',
+			text: {
+				left: '',
+				right: '',
+				separator: ', ',
+			},
+			block: {
+				showCount: 0,
+				showIcon: true,
+			},
+			count: {
+				template(data, sels){
+					return '已选中 '+sels.length+' 项, 共 '+data.length+' 项'
+				}
+			},
+		},
+	},
+	
+	// 展开下拉框
+	show(){
+		
+	},
+	// 隐藏下拉框
+	hidn(){
+		
+	},
+	// 模板组成, 当前option数据, 已经选中的数据, name, value  
+	template({ item, sels, name, value }){
+		return name;
+	},
+	//监听选中事件
+	on({ arr, item, selected }){
+		
+	}
+}
+`, brush: 'js', title: '默认配置项'}, 
+
+
+{ html: `
+<h3>所有的方法</h3>
+`, comment: `
+//更新组件
+xmSelect: update(options)
+
+//重置组件
+xmSelect: reset()
+
+//重新渲染
+xmSelect: render(options)
+
+//主动关闭
+xmSelect: opened()
+
+//主动关闭
+xmSelect: closed()
+
+//获取已选中数据
+xmSelect: getValue()
+
+//设置选中数据, array: 选中数据, show: 是否展开下拉框
+xmSelect: setValue(array, show)
+`, brush: 'js', title: '所有的方法method'}, 
+
+
+{ html: `
+<h3>这是一个国语版</h3>
+<div id="demo1"></div>
+`, js: `
+var demo1 = xmSelect.render({
+	el: '#demo1', 
+	language: 'zn',
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+})
+`, brush: 'js', title: '这是一个国语版'}, 
+
+
+{ html: `
+<h3>这是一个国际版(English)</h3>
+<div id="demo2"></div>
+`, js: `
+var demo02 = xmSelect.render({
+	el: '#demo2', 
+	language: 'en',
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+})
+`, brush: 'js', title: '这是一个国际版(English)'}, 
+
+
+{ html: `
+<h3>有基础数据</h3>
+<div id="demo3"></div>
+`, js: `
+var demo3 = xmSelect.render({
+	el: '#demo3', 
+	data: [
+		{name: '水果', value: 1},
+		{name: '蔬菜', value: 2},
+		{name: '桌子', value: 3},
+	]
+})
+`, brush: 'js', title: '有基础数据'},
+
+
+{ html: `
+<h3>有选中, 禁用的</h3>
+<div id="demo4"></div>
+`, js: `
+var demo4 = xmSelect.render({
+	el: '#demo4', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	]
+})
+`, brush: 'js', title: '有选中, 禁用的'},
+
+
+{ html: `
+<h3>自定义key</h3>
+<div id="demo5"></div>
+`, js: `
+var demo5 = xmSelect.render({
+	el: '#demo5', 
+	data: [
+		{label: '水果', val: 1, sel: true, dis: true},
+		{label: '蔬菜', val: 2, sel: true},
+		{label: '桌子', val: 3, dis: true},
+		{label: '北京', val: 4},
+	],
+	prop: {
+		name: 'label',
+		value: 'val',
+		selected: 'sel',
+		disabled: 'dis'
+	}
+})
+`, brush: 'js', title: '自定义key'},
+
+
+{ html: `
+<h3>使用template自己构建选项1</h3>
+<div id="demo6"></div>
+`, js: `
+var demo6 = xmSelect.render({
+	el: '#demo6', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	template: function({item, arr, name, value}){
+		return name  + '<span style="color: red; margin-left: 20px;">'+value+'</span>' 
+	}
+})
+`, brush: 'js', title: '使用template自己构建选项1'},
+
+
+{ html: `
+<h3>使用template自己构建选项2</h3>
+<div id="demo7"></div>
+`, js: `
+var demo7 = xmSelect.render({
+	el: '#demo7', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	template: function({item, arr, name, value}){
+		return name  + '<span style="position: absolute; right: 10px; color: red">'+value+'</span>' 
+	}
+})
+`, brush: 'js', title: '使用template自己构建选项2'},
+
+
+{ html: `
+<h3>简单的展示形式1</h3>
+<div id="demo8"></div>
+`, js: `
+var demo8 = xmSelect.render({
+	el: '#demo8', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	model: {
+		label: {
+			type: 'text',
+			text: {
+				left: '<',
+				right: '>',
+				separator: ', ',
+			},
+		}
+	}
+})
+`, brush: 'js', title: '简单的展示形式1'},
+
+
+{ html: `
+<h3>简单的展示形式2</h3>
+<div id="demo9"></div>
+`, js: `
+var demo9 = xmSelect.render({
+	el: '#demo9', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	model: {
+		label: {
+			type: 'count',
+			count: {
+				template: function({data, arr}){
+					return "已选中 " + arr.length + " 项, 共 " + data.length + " 项"
+				}
+			}
+		}
+	}
+})
+`, brush: 'js', title: '简单的展示形式2'},
+
+
+{ html: `
+<h3>自定义展示</h3>
+<div id="demo10"></div>
+`, js: `
+var demo10 = xmSelect.render({
+	el: '#demo10', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	model: {
+		label: {
+			type: 'count',
+			count: {
+				template: function({data, arr}){
+					return "我是自定义的... 已选中 " + arr.length + " 项, 共 " + data.length + " 项"
+				}
+			}
+		}
+	}
+})
+`, brush: 'js', title: '自定义展示'},
+
+
+{ html: `
+<h3>多余的用 +隐藏</h3>
+<div id="demo11"></div>
+`, js: `
+var demo11 = xmSelect.render({
+	el: '#demo11', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	model: {
+		label: {
+			type: 'block',
+			block: {
+				showCount: 1,
+				showIcon: true,
+			}
+		}
+	}
+})
+`, brush: 'js', title: '多余的用 +隐藏'},
+
+
+{ html: `
+<h3>不显示删除图标</h3>
+<div id="demo12"></div>
+`, js: `
+var demo12 = xmSelect.render({
+	el: '#demo12', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	model: {
+		label: {
+			type: 'block',
+			block: {
+				showCount: 1,
+				showIcon: false,
+			}
+		}
+	}
+})
+`, brush: 'js', title: '不显示删除图标'},
+
+
+{ html: `
+<h3>换一个主题</h3>
+<div id="demo13"></div>
+`, js: `
+var demo13 = xmSelect.render({
+	el: '#demo13', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	theme: {
+		color: 'red',
+	},
+})
+`, brush: 'js', title: '换一个主题'},
+
+
+{ html: `
+<h3>开启搜索模式</h3>
+<div id="demo14"></div>
+`, js: `
+var demo14 = xmSelect.render({
+	el: '#demo14', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	filterable: true, //开启搜索
+})
+`, brush: 'js', title: '开启搜索模式'},
+
+
+{ html: `
+<h3>自定义搜索方法</h3>
+<div id="demo15"></div>
+`, js: `
+var demo15 = xmSelect.render({
+	el: '#demo15', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	filterable: true, //开启搜索
+	filterMethod: function(val, item, index, prop){
+		if(!val) return true;
+		return item[prop.name].indexOf(val) != -1;
+	},
+})
+`, brush: 'js', title: '自定义搜索方法'},
+
+
+{ html: `
+<h3>自定义搜索延迟 和 提示</h3>
+<div id="demo16"></div>
+`, js: `
+var demo16 = xmSelect.render({
+	el: '#demo16', 
+	data: [
+		{name: '水果', value: 1, selected: true, disabled: true},
+		{name: '蔬菜', value: 2, selected: true},
+		{name: '桌子', value: 3, disabled: true},
+		{name: '北京', value: 4},
+	],
+	filterable: true, //开启搜索
+	delay: 2000,
+	searchTips: '搜索呀 搜索呀...',
+})
+`, brush: 'js', title: '自定义搜索延迟 和 提示'},
+
+
+{ html: `
+<h3>1000条数据测试</h3>
+<div id="demo17"></div>
+`, js: `
+var startTime = Date.now();
+var demo17 = xmSelect.render({
+	el: '#demo17', 
+	data: ''.padEnd(1000, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	filterable: true, //开启搜索
+})
+console.log('1000条数据渲染耗时: ' + (Date.now() - startTime) + 'ms');
+`, brush: 'js', title: '1000条数据测试'},
+
+
+{ html: `
+<h3>自动判断下拉方向</h3>
+<div id="demo18"></div>
+`, js: `
+var demo18 = xmSelect.render({
+	el: '#demo18', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	filterable: true, //开启搜索
+	direction: 'auto',
+})
+`, brush: 'js', title: '自动判断下拉方向'},
+
+
+{ html: `
+<h3>只会往下</h3>
+<div id="demo19"></div>
+`, js: `
+var demo19 = xmSelect.render({
+	el: '#demo19', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	filterable: true, //开启搜索
+	direction: 'down',
+})
+`, brush: 'js', title: '只会往下'},
+
+
+{ html: `
+<h3>只会往上</h3>
+<div id="demo20"></div>
+`, js: `
+var demo20 = xmSelect.render({
+	el: '#demo20', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	filterable: true, //开启搜索
+	direction: 'up',
+})
+`, brush: 'js', title: '只会往上'},
+
+
+{ html: `
+<h3>自定义style样式</h3>
+<div id="demo21"></div>
+`, js: `
+var demo21 = xmSelect.render({
+	el: '#demo21', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	filterable: true, //开启搜索
+	style: {
+		width: '200px',
+		marginLeft: '20px',
+	}
+})
+`, brush: 'js', title: '自定义style样式'},
+
+
+{ html: `
+<h3>单选模式</h3>
+<div id="demo22"></div>
+`, js: `
+var demo22 = xmSelect.render({
+	el: '#demo22', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	radio: true,
+	clickClose: true,
+})
+`, brush: 'js', title: '单选模式'},
+
+
+{ html: `
+<h3>重复选模式</h3>
+<div id="demo23"></div>
+`, js: `
+var demo23 = xmSelect.render({
+	el: '#demo23', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	repeat: true,
+})
+`, brush: 'js', title: '重复选模式'},
+
+
+{ html: `
+<h3>多选选完即关闭下拉选</h3>
+<div id="demo24"></div>
+`, js: `
+var demo24 = xmSelect.render({
+	el: '#demo24', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	clickClose: true,
+})
+`, brush: 'js', title: '多选选完即关闭下拉选'},
+
+
+{ html: `
+<h3>监听已选择数据</h3>
+<div id="demo25"></div>
+`, js: `
+var demo25 = xmSelect.render({
+	el: '#demo25', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	on: function({ arr, item, selected }){
+		console.log('已选择: ', arr);
+		console.log('点击选项: ', item);
+		console.log('点击状态: ', selected);
+		alert('选择: ' + JSON.stringify(item) + ', 状态: ' + selected);
+	}
+})
+`, brush: 'js', title: '监听已选择数据on'},
+
+
+{ html: `
+<h3>监听下拉框的打开与关闭</h3>
+<div id="demo26"></div>
+`, js: `
+var demo26 = xmSelect.render({
+	el: '#demo26', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	show: function(){
+		alert('打开了');
+	},
+	hidn: function(){
+		alert('关闭了');
+	}
+})
+`, brush: 'js', title: '监听下拉框的打开与关闭'},
+
+
+{ html: `
+<h3>控制下拉框的打开与关闭</h3>
+<div id="demo27"></div>
+`, js: `
+var demo27 = xmSelect.render({
+	el: '#demo27', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	show: function(){
+		//这里也可以组件受控
+		//return false;
+	},
+	hidn: function(){
+		var arr = demo27.getValue();
+		//如果已选择数据小于1, 则不会关闭下拉框
+		if(arr.length < 1){
+			return false;//组件受控
+		}
+	}
+})
+`, brush: 'js', title: '控制下拉框的打开与关闭'},
+
+
+];
--- a/docs/fathom/fathom.min.js
+++ b/docs/fathom/fathom.min.js
@ -0,0 +1,315 @@
+(function($, window, undefined) {
+	var Fathom = function(container, options) {
+			this.container = container;
+			this.options = options;
+			return this.init()
+		},
+		$window = $(window),
+		$document = $(document);
+	Fathom.prototype = {
+		defaults: {
+			portable: undefined,
+			portableTagName: "div",
+			portableClass: "fathom-container",
+			displayMode: "single",
+			slideTagName: "div",
+			slideClass: "slide",
+			activeClass: "activeslide",
+			inactiveClass: "inactiveslide",
+			margin: 100,
+			onScrollInterval: 300,
+			scrollLength: 600,
+			easing: "swing",
+			timeline: undefined,
+			video: undefined,
+			onActivateSlide: undefined,
+			onDeactivateSlide: undefined
+		},
+		init: function() {
+			this.config = $.extend({}, this.defaults, this.options);
+			this.$container = $(this.container);
+			this.$slides = this.$container.find(this.config.slideTagName + (this.config.slideClass ? "." + this.config.slideClass :
+				""));
+			this.$firstSlide = this.$slides.filter(":first");
+			this.$lastSlide = this.$slides.filter(":last");
+			this.$activeSlide = this.activateSlide(this.$firstSlide);
+			return this._detectPortable()._setStyles()._setClasses()._setMargins()._setupEvents()._setupTimeline()._setupVideo()
+				._setupScrollHandler()
+		},
+		nextSlide: function() {
+			return this.scrollToSlide(this.$activeSlide.next())
+		},
+		prevSlide: function() {
+			return this.scrollToSlide(this.$activeSlide.prev())
+		},
+		scrollToSlide: function($elem) {
+			var self = this,
+				$scrollingElement = this.config.portable ? this.$portableContainer : $("html,body"),
+				$container = this.config.portable ? this.$portableContainer : $window,
+				portableScrollLeft = this.config.portable ? this.$portableContainer.scrollLeft() : 0;
+			if ($elem.length !== 1) {
+				return $elem
+			}
+			this.isAutoScrolling = true;
+			$scrollingElement.stop().animate({
+				scrollLeft: $elem.position().left + portableScrollLeft - ($container.width() - $elem.innerWidth()) / 2
+			}, self.config.scrollLength, self.config.easing, function() {
+				self.isAutoScrolling = false
+			});
+			return this.activateSlide($elem)
+		},
+		activateSlide: function($elem) {
+			var elem = $elem.get(0),
+				activeSlide;
+			if (this.$activeSlide !== undefined) {
+				activeSlide = this.$activeSlide.get(0);
+				if (activeSlide === elem) {
+					return $elem
+				}
+				this.$activeSlide.removeClass(this.config.activeClass).addClass(this.config.inactiveClass).trigger(
+					"deactivateslide.fathom");
+				if (typeof this.config.onDeactivateSlide === "function") {
+					this.config.onDeactivateSlide.call(activeSlide)
+				}
+			}
+			$elem.removeClass(this.config.inactiveClass).addClass(this.config.activeClass);
+			this.$activeSlide = $elem;
+			$elem.trigger("activateslide.fathom");
+			if (typeof this.config.onActivateSlide === "function") {
+				this.config.onActivateSlide.call(elem)
+			}
+			return $elem
+		},
+		setTime: function(t) {
+			var times = this._timeline || [];
+			for (var i = 0; i < times.length; i++) {
+				if (times[i].time <= t && times[i + 1].time > t) {
+					if (this.$activeSlide[0] !== times[i].slide[0]) {
+						this.scrollToSlide(times[i].slide)
+					}
+					break
+				}
+			}
+		},
+		_detectPortable: function() {
+			if (this.config.portable === undefined) {
+				if (this.$container.parent().is("body")) {
+					this.config.portable = false
+				} else {
+					this.config.portable = true
+				}
+			}
+			return this
+		},
+		_setupEvents: function() {
+			var self = this;
+			this.$container.delegate(this.config.slideTagName + "." + this.config.inactiveClass, "click", function(event) {
+				event.preventDefault();
+				self.scrollToSlide($(this))
+			});
+			$document.keydown(function(event) {
+				var key = event.which;
+				if (key === 39 || key === 32) {
+					event.preventDefault();
+					self.nextSlide()
+				} else if (key === 37) {
+					event.preventDefault();
+					self.prevSlide()
+				}
+			});
+			$window.resize(function() {
+				self._setMargins()
+			});
+			return this
+		},
+		_setStyles: function() {
+			this.$container.css("white-space", "nowrap");
+			this.$slides.css({
+				"white-space": "normal",
+				display: "inline-block",
+				"vertical-align": "top"
+			});
+			if (this.config.portable) {
+				this.$portableContainer = $("<" + this.config.portableTagName + ' class="' + this.config.portableClass + '" />');
+				this.$container.before(this.$portableContainer).appendTo(this.$portableContainer)
+			}
+			return this
+		},
+		_setClasses: function() {
+			this.$slides.addClass(this.config.inactiveClass);
+			this.$activeSlide.removeClass(this.config.inactiveClass).addClass(this.config.activeClass);
+			return this
+		},
+		_setMargins: function() {
+			var displayMode = this.config.displayMode,
+				$container = this.config.portable ? this.$portableContainer : $window,
+				containerWidth = $container.width(),
+				verticalSpacing = Math.ceil(($container.height() - this.$firstSlide.innerHeight()) / 2),
+				firstSlideSpacing = Math.ceil((containerWidth - this.$firstSlide.innerWidth()) / 2),
+				lastSlideSpacing = Math.ceil((containerWidth - this.$lastSlide.innerWidth()) / 2),
+				peekabooWidth = Math.ceil(containerWidth / 25);
+			this.$container.css("margin-top", verticalSpacing);
+			if (displayMode === "single") {
+				this.$slides.css("margin-right", firstSlideSpacing)
+			} else if (displayMode === "multi") {
+				this.$slides.css("margin-right", this.config.margin)
+			}
+			this.$firstSlide.css("margin-left", firstSlideSpacing);
+			this.$lastSlide.css("margin-right", lastSlideSpacing);
+			if (this.config.portable) {
+				var slidesWidth = parseInt(this.$container.css("padding-left")) + parseInt(this.$container.css("padding-right"));
+				this.$slides.each(function() {
+					slidesWidth += $(this).outerWidth(true)
+				});
+				this.$container.width(slidesWidth)
+			}
+			return this
+		},
+		_setupTimeline: function() {
+			var slides = this.$slides;
+
+			function parseTime(point) {
+				for (var m = (point.time || point).toString().match(/(((\d+):)?(\d+):)?(\d+)/), a = 0, i = 3; i <= 5; i++) {
+					a = a * 60 + parseInt(m[i] || 0)
+				}
+				return a
+			}
+			var currentSlide = -1;
+
+			function parseSlide(point) {
+				if (point.slide == null) {
+					currentSlide++
+				} else if ($.type(point.slide) === "number") {
+					currentSlide = point.slide
+				} else {
+					for (var match = slides.filter(point.slide)[0], i = 0; i < slides.length; i++) {
+						if (slides[i] === match) {
+							currentSlide = i;
+							break
+						}
+					}
+				}
+				return slides.eq(currentSlide)
+			}
+			if (!this.config.timeline) return this;
+			this._timeline = [];
+			for (var t = this.config.timeline, i = 0; i < t.length; i++) {
+				this._timeline.push({
+					time: parseTime(t[i]),
+					slide: parseSlide(t[i])
+				})
+			}
+			this._timeline.push({
+				time: 99999,
+				slide: t[0].slide
+			});
+			return this
+		},
+		_setupVideo: function() {
+			if (!this.config.video) {
+				this._setupDefaultTimeSource()
+			} else if (this.config.video.source === "vimeo") {
+				this._setupVimeoVideo(this.config.video)
+			} else {
+				throw "unknown video source, not supported"
+			}
+			return this
+		},
+		_setupDefaultTimeSource: function() {
+			var self = this,
+				t0 = (new Date).getTime();
+			setInterval(function() {
+				var t1 = (new Date).getTime();
+				self.setTime((t1 - t0) / 1e3)
+			}, 250)
+		},
+		_setupVimeoVideo: function(vid) {
+			var self = this,
+				vid = this.config.video,
+				downgrade = false;
+			if (window.location.protocol === "file:") {
+				"console" in window && console.log(
+					"vimeo video player api does not work with local files. Downgrading video support\nsee http://vimeo.com/api/docs/player-js"
+				);
+				downgrade = true
+			}
+
+			function loadFrame() {
+				var id = "p" + vid.id;
+				var frameSrc = '<iframe id="' + id + '"	width="' + (vid.width || 360) + '" height="' + (vid.height || 203) +
+					'" frameborder="0" src="http://player.vimeo.com/video/' + vid.id + "?api=1&player_id=" + id + '">';
+				return $(frameSrc).appendTo(vid.parent || "body")[0]
+			}
+			if (downgrade) {
+				$(loadFrame()).bind("load", function() {
+					self._setupDefaultTimeSource()
+				})
+			} else {
+				$.getScript("http://a.vimeocdn.com/js/froogaloop2.min.js?", function() {
+					$f(loadFrame()).addEvent("ready", function(player_id) {
+						var vimeo = $f(player_id),
+							timer = false;
+						vimeo.addEvent("play", function(data) {
+							if (timer === false) {
+								timer = setInterval(function() {
+									vimeo.api("getCurrentTime", function(value, player_id) {
+										self.setTime(value)
+									})
+								}, 250)
+							}
+						});
+						vimeo.addEvent("pause", function(data) {
+							clearInterval(timer);
+							timer = false
+						});
+						vid.autoplay && vimeo.api("play")
+					})
+				})
+			}
+		},
+		_setupScrollHandler: function() {
+			var self = this,
+				slideSelector = self.config.slideTagName + (self.config.slideClass ? "." + self.config.slideClass : ""),
+				$scrollContainer = this.config.portable ? this.$portableContainer : $window,
+				isIOS = navigator.userAgent.match(/like Mac OS X/i) === null ? false : true,
+				$elem;
+			self.scrolling = false;
+			setInterval(function() {
+				if (self.scrolling && (self.isAutoScrolling === false || self.isAutoScrolling === undefined)) {
+					self.scrolling = false;
+					if ($scrollContainer.scrollLeft() === 0) {
+						self.activateSlide(self.$firstSlide)
+					} else {
+						var offsetX = self.config.portable ? $scrollContainer.position().left : 0,
+							offsetY = self.config.portable ? $scrollContainer.position().top : 0,
+							midpoint = {
+								x: offsetX + $scrollContainer.width() / 2 + (isIOS ? $window.scrollLeft() : 0),
+								y: offsetY + $scrollContainer.height() / 2 + (isIOS ? $window.scrollTop() : 0)
+							};
+						$elem = $(document.elementFromPoint(midpoint.x, midpoint.y));
+						if ($elem.is(slideSelector)) {
+							self.activateSlide($elem)
+						} else {
+							$elem = $elem.parents(slideSelector + ":first").each(function() {
+								self.activateSlide($(this))
+							})
+						}
+					}
+				}
+			}, self.config.onScrollInterval);
+			$scrollContainer.scroll(function() {
+				self.scrolling = true
+			});
+			return this
+		}
+	};
+	$.fn.fathom = function(options) {
+		new Fathom(this, options);
+		return this
+	};
+	Fathom.defaults = Fathom.prototype.defaults;
+	Fathom.setDefaults = function(options) {
+		$.extend(Fathom.defaults, options)
+	};
+	window.Fathom = Fathom
+})(jQuery, window);
--- a/docs/fathom/fathom.sample.css
+++ b/docs/fathom/fathom.sample.css
@ -0,0 +1,95 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+input:focus {
+	outline: 0;
+}
+
+#presentation {
+	vertical-align: top;
+	white-space: nowrap;
+}
+
+div.slide {
+	-webkit-box-shadow: 0 0 50px #c0c0c0;
+	-moz-box-shadow: 0 0 50px #c0c0c0;
+	box-shadow: 0 0 50px #c0c0c0;
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	border-radius: 20px;
+	-moz-background-clip: padding;
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
+	display: inline-block;
+	height: 700px;
+	padding: 20px;
+	position: relative;
+	vertical-align: top;
+	width: 900px;
+}
+	div.inactiveslide {
+		opacity: 0.4;
+	}
+	div.activeslide {
+		opacity: 1;
+	}
+
+/* iPad */
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	div.inactiveslide {
+		opacity: 1;
+	}
+}
+
+/* iPhone */
+@media only screen and (max-device-width: 480px) {
+	div.inactiveslide {
+		opacity: 1;
+	}
+}
--- a/docs/group.png
+++ b/docs/group.png
--- a/docs/highlighter/shBrushBash.js
+++ b/docs/highlighter/shBrushBash.js
@ -0,0 +1,43 @@
+;(function()
+{
+	// CommonJS
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+
+	function Brush()
+	{
+		var keywords =	'if fi then elif else for do done until while break continue case function return in eq ne ge le';
+		var commands =  'alias apropos awk basename bash bc bg builtin bzip2 cal cat cd cfdisk chgrp chmod chown chroot' +
+						'cksum clear cmp comm command cp cron crontab csplit cut date dc dd ddrescue declare df ' +
+						'diff diff3 dig dir dircolors dirname dirs du echo egrep eject enable env ethtool eval ' +
+						'exec exit expand export expr false fdformat fdisk fg fgrep file find fmt fold format ' +
+						'free fsck ftp gawk getopts grep groups gzip hash head history hostname id ifconfig ' +
+						'import install join kill less let ln local locate logname logout look lpc lpr lprint ' +
+						'lprintd lprintq lprm ls lsof make man mkdir mkfifo mkisofs mknod more mount mtools ' +
+						'mv netstat nice nl nohup nslookup open op passwd paste pathchk ping popd pr printcap ' +
+						'printenv printf ps pushd pwd quota quotacheck quotactl ram rcp read readonly renice ' +
+						'remsync rm rmdir rsync screen scp sdiff sed select seq set sftp shift shopt shutdown ' +
+						'sleep sort source split ssh strace su sudo sum symlink sync tail tar tee test time ' +
+						'times touch top traceroute trap tr true tsort tty type ulimit umask umount unalias ' +
+						'uname unexpand uniq units unset unshar useradd usermod users uuencode uudecode v vdir ' +
+						'vi watch wc whereis which who whoami Wget xargs yes'
+						;
+
+		this.regexList = [
+			{ regex: /^#!.*$/gm,											css: 'preprocessor bold' },
+			{ regex: /\/[\w-\/]+/gm,										css: 'plain' },
+			{ regex: SyntaxHighlighter.regexLib.singleLinePerlComments,		css: 'comments' },		// one line comments
+			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,			css: 'string' },		// double quoted strings
+			{ regex: SyntaxHighlighter.regexLib.singleQuotedString,			css: 'string' },		// single quoted strings
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),			css: 'keyword' },		// keywords
+			{ regex: new RegExp(this.getKeywords(commands), 'gm'),			css: 'functions' }		// commands
+			];
+	}
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['bash', 'shell'];
+
+	SyntaxHighlighter.brushes.Bash = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
--- a/docs/highlighter/shBrushJScript.js
+++ b/docs/highlighter/shBrushJScript.js
@ -0,0 +1,52 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+;(function()
+{
+	// CommonJS
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+
+	function Brush()
+	{
+		var keywords =	'break case catch continue ' +
+						'default delete do else false  ' +
+						'for function if in instanceof ' +
+						'new null return super switch ' +
+						'this throw true try typeof var while with'
+						;
+
+		var r = SyntaxHighlighter.regexLib;
+		
+		this.regexList = [
+			{ regex: r.multiLineDoubleQuotedString,					css: 'string' },			// double quoted strings
+			{ regex: r.multiLineSingleQuotedString,					css: 'string' },			// single quoted strings
+			{ regex: r.singleLineCComments,							css: 'comments' },			// one line comments
+			{ regex: r.multiLineCComments,							css: 'comments' },			// multiline comments
+			{ regex: /\s*#.*/gm,									css: 'preprocessor' },		// preprocessor tags like #region and #endregion
+			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),	css: 'keyword' }			// keywords
+			];
+	
+		this.forHtmlScript(r.scriptScriptTags);
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['js', 'jscript', 'javascript'];
+
+	SyntaxHighlighter.brushes.JScript = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
--- a/docs/highlighter/shBrushXml.js
+++ b/docs/highlighter/shBrushXml.js
@ -0,0 +1,54 @@
+;(function()
+{
+	// CommonJS
+	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
+
+	function Brush()
+	{
+		function process(match, regexInfo)
+		{
+			var constructor = SyntaxHighlighter.Match,
+				code = match[0],
+				tag = new XRegExp('(&lt;|<)[\\s\\/\\?]*(?<name>[:\\w-\\.]+)', 'xg').exec(code),
+				result = []
+				;
+		
+			if (match.attributes != null) 
+			{
+				var attributes,
+					regex = new XRegExp('(?<name> [\\w:\\-\\.]+)' +
+										'\\s*=\\s*' +
+										'(?<value> ".*?"|\'.*?\'|\\w+)',
+										'xg');
+
+				while ((attributes = regex.exec(code)) != null) 
+				{
+					result.push(new constructor(attributes.name, match.index + attributes.index, 'color1'));
+					result.push(new constructor(attributes.value, match.index + attributes.index + attributes[0].indexOf(attributes.value), 'string'));
+				}
+			}
+
+			if (tag != null)
+				result.push(
+					new constructor(tag.name, match.index + tag[0].indexOf(tag.name), 'keyword')
+				);
+
+			return result;
+		}
+	
+		this.regexList = [
+			{ regex: new XRegExp('(\\&lt;|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\&gt;|>)', 'gm'),			css: 'color2' },	// <![ ... [ ... ]]>
+			{ regex: SyntaxHighlighter.regexLib.xmlComments,												css: 'comments' },	// <!-- ... -->
+			{ regex: new XRegExp('(&lt;|<)[\\s\\/\\?]*(\\w+)(?<attributes>.*?)[\\s\\/\\?]*(&gt;|>)', 'sg'), func: process },
+			{ regex: /^\[[0-9-]+\] [vV0-9\.]+$/gm,															css: 'keyword value' }
+		];
+	};
+
+	Brush.prototype	= new SyntaxHighlighter.Highlighter();
+	Brush.aliases	= ['xml', 'xhtml', 'xslt', 'html'];
+
+	SyntaxHighlighter.brushes.Xml = Brush;
+
+	// CommonJS
+	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
+})();
--- a/docs/highlighter/shCore.css
+++ b/docs/highlighter/shCore.css
@ -0,0 +1,226 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+.syntaxhighlighter a,
+.syntaxhighlighter div,
+.syntaxhighlighter code,
+.syntaxhighlighter table,
+.syntaxhighlighter table td,
+.syntaxhighlighter table tr,
+.syntaxhighlighter table tbody,
+.syntaxhighlighter table thead,
+.syntaxhighlighter table caption,
+.syntaxhighlighter textarea {
+  -moz-border-radius: 0 0 0 0 !important;
+  -webkit-border-radius: 0 0 0 0 !important;
+  background: none !important;
+  border: 0 !important;
+  bottom: auto !important;
+  float: none !important;
+  height: auto !important;
+  left: auto !important;
+  line-height: 1.1em !important;
+  margin: 0 !important;
+  outline: 0 !important;
+  overflow: visible !important;
+  padding: 0 !important;
+  position: static !important;
+  right: auto !important;
+  text-align: left !important;
+  top: auto !important;
+  vertical-align: baseline !important;
+  width: auto !important;
+  box-sizing: content-box !important;
+  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  font-size: 1em !important;
+  min-height: inherit !important;
+  min-height: auto !important;
+}
+
+.syntaxhighlighter {
+  width: 100% !important;
+  margin: 1em 0 1em 0 !important;
+  position: relative !important;
+  overflow: auto !important;
+  font-size: 1em !important;
+}
+.syntaxhighlighter.source {
+  overflow: hidden !important;
+}
+.syntaxhighlighter .bold {
+  font-weight: bold !important;
+}
+.syntaxhighlighter .italic {
+  font-style: italic !important;
+}
+.syntaxhighlighter .line {
+  white-space: pre !important;
+}
+.syntaxhighlighter table {
+  width: 100% !important;
+}
+.syntaxhighlighter table caption {
+  text-align: left !important;
+  padding: .5em 0 0.5em 1em !important;
+}
+.syntaxhighlighter table td.code {
+  width: 100% !important;
+}
+.syntaxhighlighter table td.code .container {
+  position: relative !important;
+}
+.syntaxhighlighter table td.code .container textarea {
+  box-sizing: border-box !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  background: white !important;
+  padding-left: 1em !important;
+  overflow: hidden !important;
+  white-space: pre !important;
+}
+.syntaxhighlighter table td.gutter .line {
+  text-align: right !important;
+  padding: 0 0.5em 0 1em !important;
+}
+.syntaxhighlighter table td.code .line {
+  padding: 0 1em !important;
+}
+.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
+  padding-left: 0em !important;
+}
+.syntaxhighlighter.show {
+  display: block !important;
+}
+.syntaxhighlighter.collapsed table {
+  display: none !important;
+}
+.syntaxhighlighter.collapsed .toolbar {
+  padding: 0.1em 0.8em 0em 0.8em !important;
+  font-size: 1em !important;
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+}
+.syntaxhighlighter.collapsed .toolbar span {
+  display: inline !important;
+  margin-right: 1em !important;
+}
+.syntaxhighlighter.collapsed .toolbar span a {
+  padding: 0 !important;
+  display: none !important;
+}
+.syntaxhighlighter.collapsed .toolbar span a.expandSource {
+  display: inline !important;
+}
+.syntaxhighlighter .toolbar {
+  position: absolute !important;
+  right: 1px !important;
+  top: 1px !important;
+  width: 11px !important;
+  height: 11px !important;
+  font-size: 10px !important;
+  z-index: 10 !important;
+}
+.syntaxhighlighter .toolbar span.title {
+  display: inline !important;
+}
+.syntaxhighlighter .toolbar a {
+  display: block !important;
+  text-align: center !important;
+  text-decoration: none !important;
+  padding-top: 1px !important;
+}
+.syntaxhighlighter .toolbar a.expandSource {
+  display: none !important;
+}
+.syntaxhighlighter.ie {
+  font-size: .9em !important;
+  padding: 1px 0 1px 0 !important;
+}
+.syntaxhighlighter.ie .toolbar {
+  line-height: 8px !important;
+}
+.syntaxhighlighter.ie .toolbar a {
+  padding-top: 0px !important;
+}
+.syntaxhighlighter.printing .line.alt1 .content,
+.syntaxhighlighter.printing .line.alt2 .content,
+.syntaxhighlighter.printing .line.highlighted .number,
+.syntaxhighlighter.printing .line.highlighted.alt1 .content,
+.syntaxhighlighter.printing .line.highlighted.alt2 .content {
+  background: none !important;
+}
+.syntaxhighlighter.printing .line .number {
+  color: #bbbbbb !important;
+}
+.syntaxhighlighter.printing .line .content {
+  color: black !important;
+}
+.syntaxhighlighter.printing .toolbar {
+  display: none !important;
+}
+.syntaxhighlighter.printing a {
+  text-decoration: none !important;
+}
+.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
+  color: black !important;
+}
+.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
+  color: #008200 !important;
+}
+.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
+  color: blue !important;
+}
+.syntaxhighlighter.printing .keyword {
+  color: #006699 !important;
+  font-weight: bold !important;
+}
+.syntaxhighlighter.printing .preprocessor {
+  color: gray !important;
+}
+.syntaxhighlighter.printing .variable {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter.printing .value {
+  color: #009900 !important;
+}
+.syntaxhighlighter.printing .functions {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter.printing .constants {
+  color: #0066cc !important;
+}
+.syntaxhighlighter.printing .script {
+  font-weight: bold !important;
+}
+.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
+  color: gray !important;
+}
+.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
+  color: red !important;
+}
+.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
+  color: black !important;
+}
--- a/docs/highlighter/shCore.js
+++ b/docs/highlighter/shCore.js
--- a/docs/highlighter/shThemeEclipse.css
+++ b/docs/highlighter/shThemeEclipse.css
@ -0,0 +1,128 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+.syntaxhighlighter {
+  background-color: white !important;
+}
+.syntaxhighlighter .line.alt1 {
+  background-color: white !important;
+}
+.syntaxhighlighter .line.alt2 {
+  background-color: white !important;
+}
+.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
+  background-color: #c3defe !important;
+}
+.syntaxhighlighter .line.highlighted.number {
+  color: white !important;
+}
+.syntaxhighlighter table caption {
+  color: black !important;
+}
+.syntaxhighlighter .gutter {
+  color: #787878 !important;
+}
+.syntaxhighlighter .gutter .line {
+  border-right: 3px solid #d4d0c8 !important;
+}
+.syntaxhighlighter .gutter .line.highlighted {
+  background-color: #d4d0c8 !important;
+  color: white !important;
+}
+.syntaxhighlighter.printing .line .content {
+  border: none !important;
+}
+.syntaxhighlighter.collapsed {
+  overflow: visible !important;
+}
+.syntaxhighlighter.collapsed .toolbar {
+  color: #3f5fbf !important;
+  background: white !important;
+  border: 1px solid #d4d0c8 !important;
+}
+.syntaxhighlighter.collapsed .toolbar a {
+  color: #3f5fbf !important;
+}
+.syntaxhighlighter.collapsed .toolbar a:hover {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter .toolbar {
+  color: #a0a0a0 !important;
+  background: #d4d0c8 !important;
+  border: none !important;
+}
+.syntaxhighlighter .toolbar a {
+  color: #a0a0a0 !important;
+}
+.syntaxhighlighter .toolbar a:hover {
+  color: red !important;
+}
+.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
+  color: black !important;
+}
+.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
+  color: #3f5fbf !important;
+}
+.syntaxhighlighter .string, .syntaxhighlighter .string a {
+  color: #2a00ff !important;
+}
+.syntaxhighlighter .keyword {
+  color: #7f0055 !important;
+}
+.syntaxhighlighter .preprocessor {
+  color: #646464 !important;
+}
+.syntaxhighlighter .variable {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter .value {
+  color: #009900 !important;
+}
+.syntaxhighlighter .functions {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter .constants {
+  color: #0066cc !important;
+}
+.syntaxhighlighter .script {
+  font-weight: bold !important;
+  color: #7f0055 !important;
+  background-color: none !important;
+}
+.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
+  color: gray !important;
+}
+.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
+  color: red !important;
+}
+
+.syntaxhighlighter .keyword {
+  font-weight: bold !important;
+}
+.syntaxhighlighter .xml .keyword {
+  color: #3f7f7f !important;
+  font-weight: normal !important;
+}
+.syntaxhighlighter .xml .color1, .syntaxhighlighter .xml .color1 a {
+  color: #7f007f !important;
+}
+.syntaxhighlighter .xml .string {
+  font-style: italic !important;
+  color: #2a00ff !important;
+}
--- a/docs/index.css
+++ b/docs/index.css
@ -0,0 +1,13 @@
+.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea{line-height: 1.3em !important;}
+.syntaxhighlighter {overflow-y: hidden !important;}
+.syntaxhighlighter .toolbar{background: none!important;}
+.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;}
+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;}
--- a/docs/index.js
+++ b/docs/index.js
@ -0,0 +1,58 @@
+
+var htmls = [], js = [];
+data.forEach(function(item){
+	htmls.push([
+		'<div class="slide">',
+			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;'),
+			']]></script></div>',
+			item.js && ['<div class="dcode mt10"><script type="syntaxhighlighter" class="brush:js"><![CDATA[',
+				item.js.replace(/</g, '&lt;'),
+			']]></script></div>'].join(''),
+		'</div>',
+	].join(''));
+	js.push(item.js);
+});
+
+var box = $('#content');
+box.append($(htmls.join('')));
+
+js.forEach(function(item){
+	eval(item);
+});
+
+SyntaxHighlighter.defaults["quick-code"] = false;
+SyntaxHighlighter.defaults["gutter"] = false;
+SyntaxHighlighter.all();
+
+var ele = new Fathom('#content')
+
+xmSelect.render({
+	el: '#header',
+	data: data.map(function(item, index){
+		return {
+			name: (index + 1) + '. ' + item.title,
+			value: index,
+			empty: !!item.title
+		}
+	}).filter(function(item){
+		return item.empty;
+	}),
+	filterable: true,
+	model: {
+		label: {
+			type: 'text',
+			text: {
+				left: '',
+				right: '',
+				separator: ', ',
+			},
+		},
+	},
+	radio: true,
+	clickClose: true,
+	on: function(data){
+		data.selected && ele.scrollToSlide($('.slide:nth-child('+(data.item.value + 1)+')'));
+	}
+});
--- a/docs/jquery.min.js
+++ b/docs/jquery.min.js
--- a/docs/vue.min.js
+++ b/docs/vue.min.js
--- a/docs/wx.jpg
+++ b/docs/wx.jpg
--- a/index.html
+++ b/index.html
@ -2,347 +2,26 @@
 <html>
 	<head>
 		<meta charset="utf-8">
-		<title></title>
+		<title>xm-select</title>
 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-		<style>
-			body{padding-bottom: 300px;}
-		</style>
+		<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/index.css"/>
 	</head>
 	<body>
+		<div id="content"></div>
+		<div id="header"></div>
 		
-		<h1>
-			源码地址
-			<a href="https://gitee.com/maplemei/xm-select">https://gitee.com/maplemei/xm-select</a>
-		</h1>
 		
-		<h3>这是一个多选</h3>
-		<div id="demo1"></div>
-
-		<h3>这是一个国际版多选</h3>
-		<div id="demo2"></div>
-
-		<h3>有基础数据</h3>
-		<div id="demo3"></div>
-
-		<h3>有选中, 禁用的</h3>
-		<div id="demo4"></div>
-
-		<h3>自定义key</h3>
-		<div id="demo5"></div>
-
-		<h3>使用template自己构建选项1</h3>
-		<div id="demo6"></div>
-
-		<h3>使用template自己构建选项2</h3>
-		<div id="demo7"></div>
-
-		<h3>简单的展示形式1</h3>
-		<div id="demo8"></div>
-
-		<h3>简单的展示形式2</h3>
-		<div id="demo9"></div>
-
-		<h3>自定义展示</h3>
-		<div id="demo10"></div>
-
-		<h3>多余的用 +隐藏</h3>
-		<div id="demo11"></div>
-
-		<h3>不显示删除图标</h3>
-		<div id="demo12"></div>
-
-		<h3>换一个主题</h3>
-		<div id="demo13"></div>
-		
-		<h3>开启搜索模式</h3>
-		<div id="demo14"></div>
-		
-		<h3>自定义搜索方法</h3>
-		<div id="demo15"></div>
-		
-		<h3>自定义搜索延迟 和 提示</h3>
-		<div id="demo16"></div>
-		
-		<h3>1000条数据测试</h3>
-		<div id="demo17"></div>
-		
-		<h3>自动判断下拉方向</h3>
-		<div id="demo18"></div>
-		
-		<h3>只会往下</h3>
-		<div id="demo19"></div>
-		
-		<h3>只会往上</h3>
-		<div id="demo20"></div>
-		
-		<h3>自定义style样式</h3>
-		<div id="demo21"></div>
-		
-		<script src="./dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
-		<script type="text/javascript">
-			
-			var demo1 = xmSelect.render({
-				el: '#demo1', 
-				language: 'zn',
-				isShow: true,
-			})
-
-			var demo2 = xmSelect.render({
-				el: '#demo2', 
-				language: 'en'
-			})
-
-			var demo3 = xmSelect.render({
-				el: '#demo3', 
-				data: [
-					{name: '水果', value: 1},
-					{name: '蔬菜', value: 2},
-					{name: '桌子', value: 3},
-				]
-			})
-
-			var demo4 = xmSelect.render({
-				el: '#demo4', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				]
-			})
-
-			var demo5 = xmSelect.render({
-				el: '#demo5', 
-				data: [
-					{label: '水果', val: 1, sel: true, dis: true},
-					{label: '蔬菜', val: 2, sel: true},
-					{label: '桌子', val: 3, dis: true},
-					{label: '北京', val: 4},
-				],
-				prop: {
-					name: 'label',
-					value: 'val',
-					selected: 'sel',
-					disabled: 'dis'
-				}
-			})
-
-			var demo6 = xmSelect.render({
-				el: '#demo6', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				template: function(item, sels, name, value){
-					return name  + '<span style="color: red; margin-left: 20px;">'+value+'</span>' 
-				}
-			})
-
-			var demo7 = xmSelect.render({
-				el: '#demo7', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				template: function(item, sels, name, value){
-					return name  + '<span style="position: absolute; right: 10px; color: red">'+value+'</span>' 
-				}
-			})
-
-			var demo8 = xmSelect.render({
-				el: '#demo8', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				model: {
-					label: {
-						type: 'text',
-						text: {
-							left: '<',
-							right: '>',
-							separator: ', ',
-						},
-					}
-				}
-			})
-
-			var demo9 = xmSelect.render({
-				el: '#demo9', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				model: {
-					label: {
-						type: 'count',
-						count: {
-							template: function(data, sels){
-								return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
-							}
-						}
-					}
-				}
-			})
-
-			var demo10 = xmSelect.render({
-				el: '#demo10', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				model: {
-					label: {
-						type: 'count',
-						count: {
-							template: function(data, sels){
-								return "我是自定义的... 已选中 " + sels.length + " 项, 共 " + data.length + " 项"
-							}
-						}
-					}
-				}
-			})
-
-			var demo11 = xmSelect.render({
-				el: '#demo11', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				model: {
-					label: {
-						type: 'block',
-						block: {
-							showCount: 1,
-							showIcon: true,
-						}
-					}
-				}
-			})
-
-			var demo12 = xmSelect.render({
-				el: '#demo12', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				model: {
-					label: {
-						type: 'block',
-						block: {
-							showCount: 1,
-							showIcon: false,
-						}
-					}
-				}
-			})
-
-			var demo13 = xmSelect.render({
-				el: '#demo13', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				theme: {
-					color: 'red',
-				},
-			})
-			
-			var demo14 = xmSelect.render({
-				el: '#demo14', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				filterable: true, //开启搜索
-			})
-			
-			var demo15 = xmSelect.render({
-				el: '#demo15', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				filterable: true, //开启搜索
-				filterMethod: function(val, item, index, prop){
-					if(!val) return true;
-					return item[prop.name].indexOf(val) != -1;
-				},
-			})
-			
-			var demo16 = xmSelect.render({
-				el: '#demo16', 
-				data: [
-					{name: '水果', value: 1, selected: true, disabled: true},
-					{name: '蔬菜', value: 2, selected: true},
-					{name: '桌子', value: 3, disabled: true},
-					{name: '北京', value: 4},
-				],
-				filterable: true, //开启搜索
-				delay: 2000,
-				searchTips: '搜索呀 搜索呀...',
-			})
-			
-			var startTime = Date.now();
-			var demo17 = xmSelect.render({
-				el: '#demo17', 
-				data: ''.padEnd(1000, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
-				filterable: true, //开启搜索
-			})
-			console.log('1000条数据渲染耗时: ' + (Date.now() - startTime) + 'ms');
-			
-			var demo18 = xmSelect.render({
-				el: '#demo18', 
-				data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
-				filterable: true, //开启搜索
-				direction: 'auto',
-			})
-			
-			var demo19 = xmSelect.render({
-				el: '#demo19', 
-				data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
-				filterable: true, //开启搜索
-				direction: 'down',
-			})
-			
-			var demo20 = xmSelect.render({
-				el: '#demo20', 
-				data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
-				filterable: true, //开启搜索
-				direction: 'up',
-			})
-			
-			var demo21 = xmSelect.render({
-				el: '#demo21', 
-				data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
-				filterable: true, //开启搜索
-				style: {
-					width: '200px',
-					marginLeft: '20px',
-				}
-			})
-			
-		</script>
+		<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="dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
+		<script src="docs/data.js" type="text/javascript" charset="utf-8"></script>
+		<script src="docs/index.js" type="text/javascript" charset="utf-8"></script>
 	</body>
 </html>
--- a/src/components/config/options.js
+++ b/src/components/config/options.js
@ -30,6 +30,12 @@ export default function (lan = 'zn') {
 		direction: 'auto',
 		//自定义样式
 		style: {},
+		//是否开启单选模式
+		radio: false,
+		//是否开启重复选模式
+		repeat: false,
+		//是否点击选项后自动关闭下拉框
+		clickClose: false,
 		//自定义属性名称
 		prop: {
 			name: 'name',
@ -71,8 +77,12 @@ export default function (lan = 'zn') {
 			
 		},
 		// 模板组成, 当前option数据, 已经选中的数据, name, value  
-		template(item, sels, name, value){
+		template({ item, sels, name, value }){
 			return name;
+		},
+		//监听选中事件
+		on({ arr, item, selected }){
+			
 		}
 	}
 }
--- a/src/components/core/index.js
+++ b/src/components/core/index.js
@ -38,7 +38,7 @@ class xmOptions {
 	 */
 	update(options = {}, isNew){
 		//记录最新的配置项
-		this.options = {...this.options, ...options};
+		this.options = Object.assign(this.options, options);
 		
 		//如果dom不存在, 则不进行渲染事项
 		let dom = selector(this.options.el);
--- a/src/components/element/framework.js
+++ b/src/components/element/framework.js
@ -76,7 +76,7 @@ class Framework extends Component{
 	}
 	
 	render(config, { sels, show }) {
-		const { tips, theme, data, prop, template, model, empty, style } = config;
+		const { tips, theme, data, prop, template, model, empty, style, radio, repeat, clickClose, on } = config;
 		const borderStyle = { borderColor: theme.color };
 		//最外层边框的属性
 		const xmSelectProps = {
@ -97,22 +97,31 @@ class Framework extends Component{
 		//普通多选数据
 		const valueProp = prop.value;
 		
-		const ck = (item, selected, disabled) => {
+		//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
+		const ck = (item, selected, disabled, mandatoryDelete) => {
 			//如果是禁用状态, 不能进行操作
 			if(disabled) return;
 			
 			//如果现在是选中状态
-			if(selected){
+			if(selected && (!repeat || mandatoryDelete)){
 				let index = sels.findIndex(sel => sel[valueProp] == item[valueProp])
 				if(index != -1){
 					sels.splice(index, 1);
 					this.setState(sels);
 				}
 			}else{
-				this.setState({
-					sels: [...sels, item]
-				})
+				//如果是单选模式
+				if(radio){
+					this.setState({ sels: [item] });
+				}else{
+					this.setState({ sels: [...sels, item] });
 				}
+			}
+			
+			on && on({ arr: sels, item, selected: !selected });
+
+			//检查是否为选择即关闭状态, 强制删除情况下不做处理
+			clickClose && !mandatoryDelete && this.onClick();
 		};
 		
 		const labelProps = {  ...config, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
--- a/src/components/element/label.js
+++ b/src/components/element/label.js
@ -10,7 +10,7 @@ class Label extends Component{
 	}
 	
 	iconClick(item, selected, disabled, e){
-		this.props.ck(item, selected, disabled);
+		this.props.ck(item, selected, disabled, true);
 		//阻止父组件上的事件冒泡
 		e.stopPropagation();
 	}
@ -58,7 +58,7 @@ class Label extends Component{
 			}
 		}else{
 			if(sels.length && conf && conf.template){
-				html = conf.template(data, sels);
+				html = conf.template({data, arr: sels});
 			}else{
 				html = sels.map(sel => sel[name]).join(',')
 			}
--- a/src/components/element/model/general.js
+++ b/src/components/element/model/general.js
@ -49,7 +49,7 @@ class General extends Component{
 					<div class="xm-option-icon" style={ { borderColor: theme.color, } }>
 						<i class="xm-iconfont xm-icon-duox" style={ iconStyle }></i>
 					</div>
-					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template(item, sels, item[name], item[value]) }}></div>
+					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
 				</div>
 			)
 		})