使用ts重构，解决若干bug

README.md

@@ -1,87 +1,78 @@
-kkpager v1.3
+
+
+kkpager v2.0
 =======
 
-js分页展示控件，传入简单参数就能使用的分页效果控件
+JS分页控件，独立版，无需依赖jquery等框架
 
-<b>在线测试链接：</b>
-http://pgkk.github.io/kkpager/example/pager_test.html
-http://pgkk.github.io/kkpager/example/pager_test_orange_color.html
-http://pgkk.github.io/kkpager/example/pager_test_clickmode.html
 ### 准备工作,引入js、css
 ```html
-<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
-<script type="text/javascript" src="../src/kkpager.min.js"></script>
-<link rel="stylesheet" type="text/css" href="../src/kkpager_blue.css" />
+<script type="text/javascript" src="../src/js/kkpager.min.js"></script>
+<link rel="stylesheet" type="text/css" href="../src/css/kkpager.css" />
 ```
 ### HTML DOM容器
 ```html
 <div id="kkpager"></div>
 ```
 ### 调用方法
 
-#### 1、使用link模式
+#### 1、使用自动模式（选择页码后，立即突出显示当前页码）
 ```html
-<script type="text/javascript">
-//生成分页控件  
-kkpager.generPageHtml({
-	pno : '${p.pageNo}',
-	mode : 'link', //可选，默认就是link
-	//总页码  
-	total : '${p.totalPage}',  
-	//总数据条数  
-	totalRecords : '${p.totalCount}',  
-	//链接前部  
-	hrefFormer : '${hrefFormer}',
-	//链接尾部  
-	hrefLatter : '${hrefLatter}',
-	//链接算法
-	getLink : function(n){
-		//这里是默认算法，算法适用于比如：
-		//hrefFormer=http://www.xx.com/news/20131212
-		//hrefLatter=.html
-		//那么首页（第1页）就是http://www.xx.com/news/20131212.html
-		//第2页就是http://www.xx.com/news/20131212_2.html
-		//第n页就是http://www.xx.com/news/20131212_n.html
-		if(n == 1){
-			return this.hrefFormer + this.hrefLatter;
+<script type="text/javascript">	
+	// 配置kkpager
+	var kkconfig = new KKConfig({
+		// HTML DOM ID
+		id:"kkpager",
+		// 当前页
+		pno:1,
+		// 总页数
+		total:17,
+		// 总记录条数
+		totalRecords:100,
+		// 样式颜色，默认为blue
+		style:"orange",
+		// 切换页码事件
+		click:function(n){
+			// 输出选择页码
+			console.log(n);
 		}
-		return this.hrefFormer + '_' + n + this.hrefLatter;
-	}
-
-});
+	});
+	// 创建KKPager
+	var kkpager = new KKPager(kkconfig);
 </script>
 ```
-getLink 参数需要按需要重写。
 
 
-#### 2、使用click模式（自定义跳转函数）
+#### 2、使用手动模式（选择页码后，不会立即突出显示当前页码，需手动调用selectPage()）
 ```html
 <script type="text/javascript">
-//生成分页控件  
-kkpager.generPageHtml({
-	pno : '${p.pageNo}',
-	mode : 'click', //设置为click模式
-	//总页码  
-	total : '${p.totalPage}',  
-	//总数据条数  
-	totalRecords : '${p.totalCount}',
-	//点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
-	//适用于不刷新页面，比如ajax
-	click : function(n){
-		//这里可以做自已的处理
-		//...
-		//处理完后可以手动条用selectPage进行页码选中切换
-		this.selectPage(n);
-	},
-	//getHref是在click模式下链接算法，一般不需要配置，默认代码如下
-	getHref : function(n){
-		return '#';
-	}
-
+// 配置kkpager
+	var kkconfig2 = new KKConfig({
+		// HTML DOM ID
+		id:"kkpager",
+		// 当前页
+		pno:1,
+		// 总页数
+		total:15,
+		// 总记录条数
+		totalRecords:100,
+		// 关闭自动响应
+		timelyResponse:false,
+		// 切换页码事件
+		click:function(n){
+			// 输出选择页码
+			console.log(n);
+			// 手动切换页码
+			this.selectPage(n);
+		}
+	});
+	// 创建KKPager
+	var kkpager2 = new KKPager(kkconfig1);
+	// 也可以在外部手动切换页码
+	kkpager2.selectPage(10);
 });
 </script>
 ```
-click 参数需要按需要重写,而getHref一般需要配置。
 
 
 ### 必选参数
@@ -92,15 +83,15 @@ click 参数需要按需要重写,而getHref一般需要配置。
 > `totalRecords` 总数据条数
 
 ### 可选参数
-> `pagerid` 分页展示控件容器ID `字符串` 默认值 'kkpager'
+> `id` 分页展示控件容器ID `字符串` 默认值 'kkpager'
 
-> `mode` 模式，click或link `字符串` 默认值 'link'
+> `timelyResponse` 是否自动响应切换页码 `布尔型` 默认值 true ，若为 false ，需手动调用 selectPage 函数
 
 > `isShowTotalPage` 是否显示总页数 `布尔型` 默认值 true 
 
 > `isShowCurrPage` 是否显示当前页 `布尔型` 默认值 true
 
-> `isShowTotalRecords` 是否显示总记录数 `布尔型` 默认值 false (当`isShowTotalPage`为`true`时，此设置无效)
+> `isShowTotalRecords` 是否显示总记录数 `布尔型` 默认值 false 
 
 > `isShowFirstPageBtn` 是否显示首页按钮 `布尔型` 默认值 true
 
@@ -112,13 +103,11 @@ click 参数需要按需要重写,而getHref一般需要配置。
 
 > `isGoPage` 是否显示页码跳转输入框 `布尔型` 默认值 true
 
-> `isWrapedPageBtns`  是否用span包裹住页码按钮 `布尔型` 默认值 true
-
-> `isWrapedInfoTextAndGoPageBtn` 是否用span包裹住分页信息和跳转按钮 `布尔型` 默认值 true
+> `click` 自定义事件处理函数 `函数类型`
 
-> `hrefFormer` 链接前部 `字符串` 默认值 ''
+> `style` 颜色样式 `字符串` 默认值 'blue' ,可选项：'blue','orange','red','green'
 
-> `hrefLatter` 链接尾部 `字符串` 默认值 ''
+> `align` 横向对齐方式 `字符串` 默认值 'right' ,可选项：'left','center','right'
 
 > `lang` 语言配置对象，属性配置列表：
 
@@ -162,18 +151,6 @@ click 参数需要按需要重写,而getHref一般需要配置。
 
 > - `buttonTipAfterText` 页码按钮提示信息后缀 `字符串` 默认值 '页'
 
-> `gopageWrapId`	页码跳转dom ID `字符串` 默认值 'kkpager_gopage_wrap'
-
-> `gopageButtonId` 页码跳转按钮dom ID `字符串` 默认值 'kkpager_btn_go'
-
-> `gopageTextboxId` 页码输入框dom ID `字符串` 默认值 'kkpager_btn_go_input'
-
-> `getLink` 链接算法函数（仅适用于mode为link） `函数类型`
-
-> `click` 自定义事件处理函数（仅适用于mode为click） `函数类型`
-
-> `getHref` 链接算法函数（仅适用于mode为click） `函数类型`
-
 ### 公开方法
 
 > `selectPage` 手动调用此函数选中某个页码
@@ -182,20 +159,4 @@ click 参数需要按需要重写,而getHref一般需要配置。
    kkpager.selectPage(2);
 ```
 
-### 默认链接算法，按需重写
-```javascript
-//默认链接算法函数，使用时需要按需要重写
-getLink : function(n){
-	//这里的算法适用于比如：
-	//hrefFormer=http://www.xx.com/news/20131212
-	//hrefLatter=.html
-	//那么首页（第1页）就是http://www.xx.com/news/20131212.html
-	//第2页就是http://www.xx.com/news/20131212_2.html
-	//第n页就是http://www.xx.com/news/20131212_n.html
-	if(n == 1){
-		return this.hrefFormer + this.hrefLatter;
-	}
-	return this.hrefFormer + '_' + n + this.hrefLatter;
-}
-```
 

example/pager_example.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Example</title>
+	<link rel="stylesheet" type="text/css" href="../src/css/kkpager.min.css" />
+	<style>
+		h1{
+			margin: 0;
+    		padding: 0;
+    		text-align: center;
+		}
+
+		.test-kkpager{
+			margin-top: 20px;
+		}
+	</style>
+</head>
+<body>
+	<h1>KKPager 示例</h1>
+	<div style="width:1400px;margin:0 auto;">
+		<div id="kkpager_test1" class="test-kkpager"></div>
+		<div id="kkpager_test2" class="test-kkpager"></div>
+		<div id="kkpager_test3" class="test-kkpager"></div>
+		<div id="kkpager_test4" class="test-kkpager"></div>
+	</div>
+	<script type="text/javascript" src="../src/js/kkpager.min.js"></script>
+	<script type="text/javascript">
+		// 第一个kkpager
+		var kkconfig1 = new KKConfig({
+			id:"kkpager_test1",
+			pno:1,
+			total:5,
+			align:'center',
+			style:"orange",
+			timelyResponse:false,
+			totalRecords:100,
+			click:function(n){
+				console.log("kkpager 1 :"+n);
+				this.selectPage(n);
+			}
+		});
+		var kkpager1 = new KKPager(kkconfig1);
+
+		// 第二个kkpager
+		var kkconfig2 = new KKConfig({
+			id:"kkpager_test2", 
+			pno:1,
+			total:10,
+			totalRecords:100,
+			align:'center',
+			click:function(n){
+				console.log("kkpager 2 :"+n);
+			}
+		});
+		var kkpager2 = new KKPager(kkconfig2);
+
+
+		// 第三个kkpager
+		var kkconfig3 = new KKConfig({
+			id:"kkpager_test3",
+			pno:7,
+			total:15,
+			style:"red",
+			align:'center',
+			isShowTotalRecords:true,
+			timelyResponse:false,
+			totalRecords:150,
+			click:function(n){
+				console.log("kkpager 3 :"+n);
+				this.selectPage(n);
+			}
+		});
+		var kkpager3 = new KKPager(kkconfig3);
+
+
+		// 第四个kkpager
+		var kkconfig4 = new KKConfig({
+			id:"kkpager_test4",
+			pno:1,
+			total:100,
+			style:"green",
+			align:'center',
+			timelyResponse:false,
+			totalRecords:100,
+			click:function(n){
+				console.log("kkpager 4 :"+n);
+				this.selectPage(n);
+			}
+		});
+		var kkpager4 = new KKPager(kkconfig4);
+	</script>
+</body>
+
+</html>