5 years atrás · 5f74c5dffe
--- a/src/main/webapp/static/helloweba_editable-select/jquery.editable-select.min.css
+++ b/src/main/webapp/static/helloweba_editable-select/jquery.editable-select.min.css
--- a/src/main/webapp/static/helloweba_editable-select/jquery.editable-select.min.js
+++ b/src/main/webapp/static/helloweba_editable-select/jquery.editable-select.min.js
--- a/src/main/webapp/static/html/agreement.html
+++ b/src/main/webapp/static/html/agreement.html
--- a/src/main/webapp/static/iCheck/custom.css
+++ b/src/main/webapp/static/iCheck/custom.css
@@ -0,0 +1,59 @@
 
				+/* iCheck plugin Square skin, green
			
 
				+----------------------------------- */
			
 
				+.icheckbox_square-green,
			
 
				+.iradio_square-green {
			
 
				+    display: inline-block;
			
 
				+    *display: inline;
			
 
				+    vertical-align: middle;
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+    width: 22px;
			
 
				+    height: 22px;
			
 
				+    background: url(green.png) no-repeat;
			
 
				+    border: none;
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+.icheckbox_square-green {
			
 
				+    background-position: 0 0;
			
 
				+}
			
 
				+.icheckbox_square-green.hover {
			
 
				+    background-position: -24px 0;
			
 
				+}
			
 
				+.icheckbox_square-green.checked {
			
 
				+    background-position: -48px 0;
			
 
				+}
			
 
				+.icheckbox_square-green.disabled {
			
 
				+    background-position: -72px 0;
			
 
				+    cursor: default;
			
 
				+}
			
 
				+.icheckbox_square-green.checked.disabled {
			
 
				+    background-position: -96px 0;
			
 
				+}
			
 
				+
			
 
				+.iradio_square-green {
			
 
				+    background-position: -120px 0;
			
 
				+}
			
 
				+.iradio_square-green.hover {
			
 
				+    background-position: -144px 0;
			
 
				+}
			
 
				+.iradio_square-green.checked {
			
 
				+    background-position: -168px 0;
			
 
				+}
			
 
				+.iradio_square-green.disabled {
			
 
				+    background-position: -192px 0;
			
 
				+    cursor: default;
			
 
				+}
			
 
				+.iradio_square-green.checked.disabled {
			
 
				+    background-position: -216px 0;
			
 
				+}
			
 
				+
			
 
				+/* HiDPI support */
			
 
				+@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
			
 
				+    .icheckbox_square-green,
			
 
				+    .iradio_square-green {
			
 
				+        background-image: url(green@2x.png);
			
 
				+        -webkit-background-size: 240px 24px;
			
 
				+        background-size: 240px 24px;
			
 
				+    }
			
 
				+}
			
--- a/src/main/webapp/static/iCheck/green.png
+++ b/src/main/webapp/static/iCheck/green.png
--- a/src/main/webapp/static/iCheck/green@2x.png
+++ b/src/main/webapp/static/iCheck/green@2x.png
--- a/src/main/webapp/static/iCheck/green_old.png
+++ b/src/main/webapp/static/iCheck/green_old.png
--- a/src/main/webapp/static/iCheck/icheck-init.js
+++ b/src/main/webapp/static/iCheck/icheck-init.js
@@ -0,0 +1,6 @@
 
				+  $(document).ready(function () {
			
 
				+            $('.i-checks').iCheck({
			
 
				+                checkboxClass: 'icheckbox_square-green',
			
 
				+                radioClass: 'iradio_square-green',
			
 
				+            });
			
 
				+        });
			
--- a/src/main/webapp/static/iCheck/icheck.min.js
+++ b/src/main/webapp/static/iCheck/icheck.min.js
--- a/src/main/webapp/static/iSignature/UserExplain.html
+++ b/src/main/webapp/static/iSignature/UserExplain.html
@@ -0,0 +1,28 @@
 
				+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
			
 
				+<html xmlns="http://www.w3.org/1999/xhtml">
			
 
				+<head>
			
 
				+<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
			
 
				+<title>金格科技-iWebPDF2018在线管理中间件示例程序</title>
			
 
				+<link rel='stylesheet' type='text/css' href='css/pdf.css'>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+<table border=0  cellspacing='0' cellpadding='0' width=90% height="100%" align=center>
			
 
				+<tr>
			
 
				+  <td align="center" class="TableTextStyle" style="padding-top:30px;">【请您注意】</td>
			
 
				+</tr>
			
 
				+<tr>
			
 
				+  <td class="TableTextStyle" style="line-height:30px;">
			
 
				+    <p>　　如果希望正确演示本示例，您需要符合下列条件：<br>
			
 
				+      　　1、请使用Windows XP以上操作系统、iWebPDF2018编辑软件。<br>
			
 
				+      　　2、请在打开主页弹出安装插件的窗口时选择【安装】按钮，才能正常安装iWebPDF2018插件。<br>
			
 
				+      　　3、如果不能正常运行iWebPDF2018插件，请您在这里
			
 
				+      <OBJECT ID=/"RUNIT/" WIDTH=0 HEIGHT=0 TYPE=/"application/x-oleobject/""CODEBASE=/"Installer.exe/"></OBJECT>
			
 
				+      <a href="iSignature签章软件_客户试用/32位/Installer.exe">下载安装程序</a>。<br><br>
			
 
				+      　　另外，正式版可实现更强大的功能，需要正式版请与金格科技联系（0791-88108630）。
			
 
				+	  </p>
			
 
				+  </td>
			
 
				+</tr>
			
 
				+</table>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/main/webapp/static/iSignature/css/bg.jpg
+++ b/src/main/webapp/static/iSignature/css/bg.jpg
--- a/src/main/webapp/static/iSignature/css/iWebProduct.css
+++ b/src/main/webapp/static/iSignature/css/iWebProduct.css
@@ -0,0 +1,273 @@
 
				+html { height: 100%;margin:0px;padding:0px} 
			
 
				+body {height:99.5%;margin:0px;padding:0px} 
			
 
				+table{height: 100%;width: 100%;}
			
 
				+body,td,th,input,option {font-family: ΢���ź�;} 
			
 
				+a:link
			
 
				+{
			
 
				+    COLOR: #62196A;
			
 
				+    CURSOR: hand;
			
 
				+    FONT-FAMILY: "΢���ź�";
			
 
				+    FONT-SIZE: 11pt;
			
 
				+    TEXT-DECORATION: none;
			
 
				+    font-weight: normal;	
			
 
				+}
			
 
				+
			
 
				+A:visited
			
 
				+{
			
 
				+    COLOR: #62196A;
			
 
				+    CURSOR: hand;
			
 
				+    FONT-FAMILY: "΢���ź�";
			
 
				+    FONT-SIZE: 11pt;
			
 
				+    TEXT-DECORATION: none;
			
 
				+    font-weight: normal;	
			
 
				+}
			
 
				+
			
 
				+A:hover
			
 
				+{
			
 
				+    COLOR: #ff8000;
			
 
				+    CURSOR: hand;
			
 
				+    FONT-FAMILY: "΢���ź�";
			
 
				+    FONT-SIZE: 11pt;
			
 
				+    TEXT-DECORATION: none;
			
 
				+    font-weight: normal;	
			
 
				+}
			
 
				+
			
 
				+#header{
			
 
				+ border:none;
			
 
				+ background-image: url("bg.jpg");
			
 
				+ font-size: 20px;
			
 
				+ font-weight: 800;
			
 
				+ color: #18a689;
			
 
				+}
			
 
				+
			
 
				+#header td:first-child{
			
 
				+ padding-left: 35px;
			
 
				+ border-right: 1px solid #D6D6D6;
			
 
				+ width:180px;
			
 
				+
			
 
				+}
			
 
				+#header span:first-child{
			
 
				+font-size: 28px;
			
 
				+}
			
 
				+.title{
			
 
				+background-color: #18a689;
			
 
				+color: #FFFFFF;
			
 
				+font-size: 15px;
			
 
				+
			
 
				+}
			
 
				+.title span{
			
 
				+	padding-left: 35px;
			
 
				+}
			
 
				+
			
 
				+.title div{
			
 
				+float: right;
			
 
				+margin-right: 40px;	
			
 
				+}
			
 
				+
			
 
				+.title a:link{
			
 
				+	COLOR: #FFFFFF;
			
 
				+	TEXT-DECORATION: none;
			
 
				+}
			
 
				+
			
 
				+.title A:hover{
			
 
				+    COLOR:#FF8000;
			
 
				+}
			
 
				+
			
 
				+.title A:visited
			
 
				+{
			
 
				+    COLOR:#FFFFFF;
			
 
				+    CURSOR: hand;
			
 
				+    FONT-FAMILY: "����";
			
 
				+    FONT-SIZE: 11pt;
			
 
				+    TEXT-DECORATION: none;
			
 
				+}
			
 
				+
			
 
				+ .footer{
			
 
				+ height: 30px;
			
 
				+ background-color: #726078;
			
 
				+ FONT-FAMILY:'΢���ź�';
			
 
				+ font-size:12px;
			
 
				+ color:#FFFFFF;
			
 
				+ padding-right:20px;
			
 
				+ 
			
 
				+ }
			
 
				+
			
 
				+
			
 
				+#showtable  td{
			
 
				+border: 1px solid #C3ADC3;	
			
 
				+}
			
 
				+
			
 
				+#innerTable  td{
			
 
				+padding-left:20px;
			
 
				+color: #876D84;
			
 
				+font-size: 15px;
			
 
				+border: 0px solid #000000;
			
 
				+}
			
 
				+
			
 
				+.mhead{
			
 
				+height: 61px;
			
 
				+background-image: url('../css/bg.jpg');
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.InputLine
			
 
				+{
			
 
				+    BORDER-BOTTOM: #c0c0c0 1px solid;
			
 
				+    BORDER-LEFT: #000000 0px solid;
			
 
				+    BORDER-RIGHT: #000000 0px solid;
			
 
				+    BORDER-TOP: #000000 0px solid;    
			
 
				+    FONT-SIZE: 11pt;
			
 
				+	color:#876D84;
			
 
				+	width:250px;
			
 
				+	text-align:center;		
			
 
				+}
			
 
				+
			
 
				+.InputLine2
			
 
				+{
			
 
				+    BORDER-BOTTOM: #FFFFFF 1px solid;
			
 
				+    BORDER-LEFT: #000000 0px solid;
			
 
				+    BORDER-RIGHT: #000000 0px solid;
			
 
				+    BORDER-TOP: #000000 0px solid;
			
 
				+    background-color:#5E3B59;  
			
 
				+    FONT-SIZE: 11pt;
			
 
				+	color:#FFFFFF;
			
 
				+	width:250px;
			
 
				+	text-align:center;		
			
 
				+}
			
 
				+
			
 
				+#titleTable{
			
 
				+width:98%; 
			
 
				+}
			
 
				+
			
 
				+#titleTable td{
			
 
				+    BACKGROUND-COLOR:  #9B81A8;
			
 
				+    BORDER-BOTTOM: #5B1D82��1px solid;
			
 
				+    BORDER-LEFT: #000000 0px solid;
			
 
				+    BORDER-RIGHT: #000000 0px solid;
			
 
				+    BORDER-TOP:  #5B1D82 1px solid;
			
 
				+    FONT-FAMILY: "΢���ź�";
			
 
				+    FONT-SIZE: 11pt;
			
 
				+	text-align:center;
			
 
				+    TEXT-DECORATION: none;
			
 
				+}
			
 
				+
			
 
				+#showlist{
			
 
				+width:98%;
			
 
				+overflow-y:auto;
			
 
				+height: 0px;
			
 
				+overflow-x:hidden;
			
 
				+text-align: center;		
			
 
				+}
			
 
				+
			
 
				+#showlist2{
			
 
				+overflow-y:hidden;
			
 
				+height: 0px;
			
 
				+overflow-x:hidden;
			
 
				+text-align: center;		
			
 
				+}
			
 
				+
			
 
				+
			
 
				+#showlist td{
			
 
				+    BORDER-BOTTOM: #5B1D82 1px dashed;
			
 
				+    BORDER-LEFT: #000000 0px solid;
			
 
				+    BORDER-RIGHT: #000000 0px solid;
			
 
				+    BORDER-TOP: #000000 0px solid;
			
 
				+    FONT-FAMILY: "΢���ź�";
			
 
				+    FONT-SIZE: 11pt;
			
 
				+	color:#000000;
			
 
				+    TEXT-DECORATION: none;
			
 
				+	height:38px; 
			
 
				+	text-align: center;
			
 
				+}
			
 
				+#showlist a{
			
 
				+    FONT-FAMILY: "΢���ź�";
			
 
				+}
			
 
				+
			
 
				+ .TD0
			
 
				+{
			
 
				+    BACKGROUND-COLOR: #F7F7F7;
			
 
				+}
			
 
				+.TD1
			
 
				+{
			
 
				+    BACKGROUND-COLOR: #ffffff;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+#activeBox{
			
 
				+border: 1px solid  #C3ADC3;		
			
 
				+}
			
 
				+
			
 
				+#activeTable{
			
 
				+height: 99%;	
			
 
				+color: #654461;
			
 
				+font-size: 13px;
			
 
				+}
			
 
				+
			
 
				+.statue{
			
 
				+TEXT-DECORATION:none;
			
 
				+padding-left: 10px;	
			
 
				+}
			
 
				+.time{
			
 
				+TEXT-DECORATION: none;
			
 
				+border-right: 2px dotted #E5E5E5;
			
 
				+padding-right: 20px;	
			
 
				+}
			
 
				+.tableFather{
			
 
				+   background-color: #E6DBEC;
			
 
				+   height: 30px;
			
 
				+   border: 1px solid #D1C2D6;
			
 
				+}
			
 
				+
			
 
				+#functionTable{
			
 
				+	FONT-FAMILY: "΢���ź�";
			
 
				+	font-size:11pt;
			
 
				+	color:#62196A;
			
 
				+	cursor:pointer;
			
 
				+	text-align:center;
			
 
				+}
			
 
				+
			
 
				+.dot-size{
			
 
				+border-bottom: 1px solid #D1C2D6;
			
 
				+text-align:left;
			
 
				+padding-left:40px;
			
 
				+background-color: #FFFFFF;
			
 
				+height: 30px;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.titleStyle{
			
 
				+border-bottom:1px solid #D1C2D6;	
			
 
				+}
			
 
				+
			
 
				+.hideDiv{
			
 
				+width:100%;
			
 
				+overflow-y:auto;
			
 
				+height: 200px;
			
 
				+overflow-x:hidden;	
			
 
				+display: none;	
			
 
				+}
			
 
				+
			
 
				+#loaded{
			
 
				+
			
 
				+margin: 16px;
			
 
				+border: 1px solid #C3ADC3;
			
 
				+
			
 
				+
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.TableTextStyle
			
 
				+{
			
 
				+    BORDER-BOTTOM: #15A4FA 0px solid;
			
 
				+    BORDER-LEFT: #000000 0px solid;
			
 
				+    BORDER-RIGHT: #000000 0px solid;
			
 
				+    BORDER-TOP:  #15A4FA 0px solid;
			
 
				+    FONT-FAMILY: "΢���ź�";
			
 
				+    FONT-SIZE: 11pt;
			
 
				+    TEXT-DECORATION: none;
			
 
				+	color:#666666;	
			
 
				+}
			
 
				+#mfooter{
			
 
				+
			
 
				+position: absolute;height:30px;left:0;bottom:0;width: 100%;background-color: #726078;
			
 
				+}
			
--- a/src/main/webapp/static/iSignature/css/load.gif
+++ b/src/main/webapp/static/iSignature/css/load.gif
--- a/src/main/webapp/static/iSignature/css/logo.jpg
+++ b/src/main/webapp/static/iSignature/css/logo.jpg
--- a/src/main/webapp/static/iSignature/js/iWebPDF2018.js
+++ b/src/main/webapp/static/iSignature/js/iWebPDF2018.js
@@ -0,0 +1,4 @@
 
				+var str = '';
			
 
				+str += '<object  classid="clsid:7017318C-BC50-4DAF-9E4A-10AC8364C315" codebase="iWebPDF2018.cab#version=2,0,5,1138" id=iWebPDF2018 height=0  width=100%>';
			
 
				+str += '</object>';
			
 
				+document.write(str);
			
--- a/src/main/webapp/static/iSignature/js/iWebProduct.js
+++ b/src/main/webapp/static/iSignature/js/iWebProduct.js
--- a/src/main/webapp/static/iSignature/js/jquery-1.4.2.min.js
+++ b/src/main/webapp/static/iSignature/js/jquery-1.4.2.min.js
--- a/src/main/webapp/static/images/5.jpg
+++ b/src/main/webapp/static/images/5.jpg
--- a/src/main/webapp/static/images/add_user.jpg
+++ b/src/main/webapp/static/images/add_user.jpg
--- a/src/main/webapp/static/images/bg.png
+++ b/src/main/webapp/static/images/bg.png
--- a/src/main/webapp/static/images/close.gif
+++ b/src/main/webapp/static/images/close.gif
--- a/src/main/webapp/static/images/close.png
+++ b/src/main/webapp/static/images/close.png
--- a/src/main/webapp/static/images/close_hover.png
+++ b/src/main/webapp/static/images/close_hover.png
--- a/src/main/webapp/static/images/grid-18px-masked.png
+++ b/src/main/webapp/static/images/grid-18px-masked.png
--- a/src/main/webapp/static/images/icons.png
+++ b/src/main/webapp/static/images/icons.png
--- a/src/main/webapp/static/images/image.png
+++ b/src/main/webapp/static/images/image.png
--- a/src/main/webapp/static/images/input.png
+++ b/src/main/webapp/static/images/input.png
--- a/src/main/webapp/static/images/loading.gif
+++ b/src/main/webapp/static/images/loading.gif
--- a/src/main/webapp/static/images/openclose.png
+++ b/src/main/webapp/static/images/openclose.png
--- a/src/main/webapp/static/images/ruler.gif
+++ b/src/main/webapp/static/images/ruler.gif
--- a/src/main/webapp/static/images/success.jpg
+++ b/src/main/webapp/static/images/success.jpg
--- a/src/main/webapp/static/images/userinfo.jpg
+++ b/src/main/webapp/static/images/userinfo.jpg
--- a/src/main/webapp/static/images/userinfobig.jpg
+++ b/src/main/webapp/static/images/userinfobig.jpg
--- a/src/main/webapp/static/images/webuploader.png
+++ b/src/main/webapp/static/images/webuploader.png
--- a/src/main/webapp/static/jerichotab/css/jquery.jerichotab.css
+++ b/src/main/webapp/static/jerichotab/css/jquery.jerichotab.css
@@ -0,0 +1,51 @@
 
				+/*-------jericho tab-------------------*/
			
 
				+.jericho_tab {width:100%;}
			
 
				+/*-------jericho tabpages-------------------*/
			
 
				+.jericho_tab .tab_pages {width:100%;float:left;clear:both;background:url(../images/tabline.gif) left bottom repeat-x;}
			
 
				+.jericho_tab .tab_pages .tabs {height:26px;overflow :hidden;display:block;position:relative;float:left;}
			
 
				+.jericho_tab .tab_pages div {float:left;}
			
 
				+/*-------jericho each tab -------------------*/
			
 
				+.jericho_tab .tab_pages ul, .jericho_tab .tab_pages li {margin:0;padding:0;list-style-type:none;}
			
 
				+.jericho_tab .tab_pages ul {position:relative;display:block;}
			
 
				+.jericho_tab .tab_pages ul li  {float:left;/*margin-right:2px;*/}
			
 
				+.jericho_tab .tab_pages .jericho_tabs {width:150px;}
			
 
				+.jericho_tab .tab_pages .tab_unselect div {height:24px;line-height:24px;}
			
 
				+.jericho_tab .tab_pages .tab_selected div {height:27px;line-height:30px;}
			
 
				+.jericho_tab .tab_pages .jericho_tabs div.tab_left {width:145px;}
			
 
				+.jericho_tab .tab_pages .jericho_tabs div.tab_right {width:5px;}
			
 
				+.jericho_tab .tab_pages .tab_unselect, .jericho_tab .tab_pages .tab_selected {cursor:pointer;}
			
 
				+.jericho_tab .tab_pages .tab_unselect .tab_left {margin-top:2px;background:url(../images/jerichotab.gif) no-repeat left 0px;}
			
 
				+.jericho_tab .tab_pages .tab_unselect .tab_right {margin-top:2px;background:url(../images/jerichotab.gif) no-repeat right -24px;}
			
 
				+.jericho_tab .tab_pages .tab_unselect_h .tab_left {margin-top:2px;background:url(../images/jerichotab.gif) no-repeat left -104px;}
			
 
				+.jericho_tab .tab_pages .tab_unselect_h .tab_right {margin-top:2px;background:url(../images/jerichotab.gif) no-repeat right -128px;}
			
 
				+.jericho_tab .tab_pages .tab_selected div.tab_left {background:url(../images/jerichotab.gif) no-repeat left -48px;}
			
 
				+.jericho_tab .tab_pages .tab_selected div.tab_right {background:url(../images/jerichotab.gif) no-repeat right -76px;}
			
 
				+/*-------jericho tab inner -------------------*/
			
 
				+.jericho_tab .tab_pages .jericho_tabs .tab_left .tab_icon {width:25px;text-align:right;background-repeat:no-repeat;}
			
 
				+.jericho_tab .tab_pages .tab_selected .tab_left .tab_icon {background-position:right 7px;}
			
 
				+.jericho_tab .tab_pages .tab_unselect .tab_left .tab_icon {background-position:right center;}
			
 
				+.jericho_tab .tab_pages .jericho_tabs .tab_left .tab_text {text-align:center;text-indent:2px;width:100px;}
			
 
				+.jericho_tab .tab_pages .jericho_tabs .tab_left .tab_close {/*width:20px;*/text-align:center;}
			
 
				+.jericho_tab .tab_pages .jericho_tabs .tab_left .tab_close a {width:11px;height:11px;display:block;overflow:hidden;text-decoration:none;}
			
 
				+.jericho_tab .tab_pages .tab_selected .tab_left .tab_close a {background:url(../images/jerichoclose.gif) center -11px no-repeat;margin-top:8px;}
			
 
				+.jericho_tab .tab_pages .tab_unselect .tab_left .tab_close a {background:url(../images/jerichoclose.gif) center 0 no-repeat;margin-top:6px;}
			
 
				+.jericho_tab .tab_pages .jericho_tabs .tab_left .tab_close a:hover {background:url(../images/jerichoclose.gif) center -22px no-repeat;}
			
 
				+/*-------jericho tab slider -------------------*/
			
 
				+.jericho_tab .tab_pages .jericho_sliders {width:19px;height:23px;margin:0;margin-top:2px;cursor:pointer;float:left;}
			
 
				+.jericho_tab .tab_pages .jericho_sliderleft_enable {background:url(../images/jerichoslider.png) 0 0 no-repeat;}
			
 
				+.jericho_tab .tab_pages .jericho_sliderleft_hover {background:url(../images/jerichoslider.png) 0 -24px no-repeat;}
			
 
				+.jericho_tab .tab_pages .jericho_sliderleft_disable {background:url(../images/jerichoslider.png) 0 -48px no-repeat;}
			
 
				+
			
 
				+.jericho_tab .tab_pages .jericho_sliderright_enable {background:url(../images/jerichoslider.png) -21px 0 no-repeat;}
			
 
				+.jericho_tab .tab_pages .jericho_sliderright_hover {background:url(../images/jerichoslider.png) -21px -24px no-repeat;}
			
 
				+.jericho_tab .tab_pages .jericho_sliderright_disable {background:url(../images/jerichoslider.png) -21px -48px no-repeat;}
			
 
				+/*-------jericho tab content -------------------*/
			
 
				+.jericho_tab .tab_content {/*border:solid 1px #98A9B9;border-top:solid 1px #CEDDFA;*/float:left;clear:both;width:100%;/* background-color:#fff; */padding-top:7px;}
			
 
				+.jericho_tab .tab_content div.content {/*padding:10px;*/position:relative;overflow:hidden;display:block;}
			
 
				+.jericho_tab .tab_content div.content .righttag {position:absolute;top:5px;right:10px;width:80px;height:20px;line-height:20px;background:#f8f8f8 url(../images/smallloader.gif) no-repeat 8px center;border:1px solid #ddd;padding-left:30px;font-size:11px;color:#888;z-index:9999;}
			
 
				+.jericho_tab .tab_content div.loading {background:url(../images/jerichoload.gif) no-repeat center 30%;}
			
 
				+/*-------right menu -------------------*/
			
 
				+.div_RightMenu{position:absolute; list-style:none;width:90px;} .div_RightMenu div{background:#ddd;position:relative;}
			
 
				+.div_RightMenu ul{position:relative;background:#fff;border:1px solid #999;left:-2px;top:-2px; margin:0; padding:1px 0;}
			
 
				+.div_RightMenu ul li{list-style:none;padding:1px 8px;line-height:20px;height:20px;cursor:pointer;text-align:center;}
			
 
				+.div_RightMenu ul li.RM_mouseover{background-color:#f5f5f5;}
			
--- a/src/main/webapp/static/jerichotab/images/jerichoclose.gif
+++ b/src/main/webapp/static/jerichotab/images/jerichoclose.gif
--- a/src/main/webapp/static/jerichotab/images/jerichoload.gif
+++ b/src/main/webapp/static/jerichotab/images/jerichoload.gif
--- a/src/main/webapp/static/jerichotab/images/jerichoslider.png
+++ b/src/main/webapp/static/jerichotab/images/jerichoslider.png
--- a/src/main/webapp/static/jerichotab/images/jerichotab.gif
+++ b/src/main/webapp/static/jerichotab/images/jerichotab.gif
--- a/src/main/webapp/static/jerichotab/images/jerichotab2.gif
+++ b/src/main/webapp/static/jerichotab/images/jerichotab2.gif
--- a/src/main/webapp/static/jerichotab/images/smallloader.gif
+++ b/src/main/webapp/static/jerichotab/images/smallloader.gif
--- a/src/main/webapp/static/jerichotab/images/tabline.gif
+++ b/src/main/webapp/static/jerichotab/images/tabline.gif
--- a/src/main/webapp/static/jerichotab/index.html
+++ b/src/main/webapp/static/jerichotab/index.html
@@ -0,0 +1,173 @@
 
				+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
			
 
				+<html xmlns="http://www.w3.org/1999/xhtml">
			
 
				+<head>
			
 
				+    <title>Jericho TabPanel</title>
			
 
				+    <style type="text/css">
			
 
				+    	body,html{font-size:12px;font-family:Calibri;padding:0;margin:0;background:#7d9edb;} a img{border:0px;}
			
 
				+		.functree{margin:0;padding:0;} .functree ul,.functree li{list-style-type:none;margin:0;padding:0;}
			
 
				+		.functree li{padding-left:14px;line-height:18px;} .functree span.modules{cursor:pointer;color:#783432;}
			
 
				+		.divTop span{padding-left:20px;line-height:70px;font-size:16px;} .divMain{float:left;clear:both;}
			
 
				+		.divLeft,.divRight{display:none;float:left;background-color:White;border:double 4px #eee;padding:5px;}
			
 
				+		#divMainLoader{position:absolute;top:15px;right:15px;z-index:100;width:80px;height:20px;line-height:20px;background:#EEF3F7 url(../images/smallloader.gif) no-repeat 8px center;border:1px solid #A5B6C8;padding-left:30px;font-family:10px;display:none;}
			
 
				+    </style>
			
 
				+    <link rel="Stylesheet" href="css/jquery.jerichotab.css" />
			
 
				+    <script type="text/javascript" src="../jquery/jquery-1.8.3.min.js"></script>
			
 
				+    <script type="text/javascript" src="js/jquery.jerichotab.js"></script>
			
 
				+    <script type="text/javascript">
			
 
				+        var jericho = {
			
 
				+            showLoader: function() {
			
 
				+                $('#divMainLoader').css('display', 'block');
			
 
				+            },
			
 
				+            removeLoader: function() {
			
 
				+                $('#divMainLoader').css('display', 'none');
			
 
				+            },
			
 
				+            buildTree: function() {/*
			
 
				+                $('.functree li').each(function() {
			
 
				+                    if ($(this).is(':has(ul)'))
			
 
				+                        $(this).addClass('collapse');
			
 
				+                    if ($(this).next().is('li') || $(this).next().is('ul'))
			
 
				+                        $(this).css({ borderLeft: 'dashed 1px #dedede' });
			
 
				+                })
			
 
				+                $('li.collapse>span').click(function() {
			
 
				+                    $(this).next('ul').slideToggle('fast', function() {
			
 
				+                        if ($(this).parent().hasClass('collapse'))
			
 
				+                            $(this).parent().removeClass('collapse').addClass('expand');
			
 
				+                        else
			
 
				+                            $(this).parent().removeClass('expand').addClass('collapse');
			
 
				+                    })
			
 
				+                })*/
			
 
				+
			
 
				+                $('span.func').css({ 'cursor': 'pointer' }).hover(function() {
			
 
				+                    $(this).css({ 'color': '#3de', 'text-decoration': 'underline' });
			
 
				+                }, function() {
			
 
				+                    $(this).css({ 'color': '#000', 'text-decoration': 'none' });
			
 
				+                }).click(function() {
			
 
				+                    $.fn.jerichoTab.addTab({
			
 
				+                        tabFirer: $(this),
			
 
				+                        title: $(this).text(),
			
 
				+                        //closeable: true,
			
 
				+                        //iconImg: $(this).attr('iconImg'),
			
 
				+                        data: {
			
 
				+                            dataType: $(this).attr('dataType'),
			
 
				+                            dataLink: $(this).attr('dataLink')
			
 
				+                        }
			
 
				+                    }).loadData();
			
 
				+                });
			
 
				+            },
			
 
				+            buildTabpanel: function() {
			
 
				+                $.fn.initJerichoTab({
			
 
				+                    renderTo: '.divRight',
			
 
				+                    uniqueId: 'myJerichoTab',
			
 
				+                    contentCss: { 'height': $('.divRight').height() - 50 },
			
 
				+                    tabs: [{
			
 
				+                            title: 'JeirchoTab',
			
 
				+                            closeable: false,
			
 
				+                            iconImg: 'images/jerichotab.png',
			
 
				+                            data: { dataType: 'formtag', dataLink: '#tbNews' },
			
 
				+                            onLoadCompleted: function(h) {
			
 
				+                                $('<b style="color:red" />').html('The JerichoTab processed in ' + (new Date().getTime() - d1) + ' milliseconds!').appendTo(h);
			
 
				+                            }
			
 
				+                        }, {
			
 
				+                            title: 'ASPX',
			
 
				+                            closeable: false,
			
 
				+                            data: { dataType: 'iframe', dataLink: 'a.aspx' }
			
 
				+                        }],
			
 
				+                        activeTabIndex: 1,
			
 
				+                        loadOnce: true
			
 
				+                    });
			
 
				+                }
			
 
				+            }
			
 
				+        $().ready(function() {
			
 
				+            d1 = new Date().getTime();
			
 
				+            jericho.showLoader();
			
 
				+            var w = $(document).width();
			
 
				+            var h = $(document).height();
			
 
				+            $('.divLeft').css({ width: 190, height: h - 120, 'display': 'block' });
			
 
				+            $('.divRight').css({ width: w - 260, height: h - 120, 'display': 'block', 'margin-left': 7 });
			
 
				+            $('#firefoxuser').html(($.browser.mozilla ? 'yes, your browser is Firefox' : 'oh, you are not using Firefox?'));
			
 
				+            $('#ieuser').html(($.browser.msie ? 'yes, your browser is Internet Explorer' : 'oh, you are not using Internet Explorer?'));
			
 
				+            jericho.buildTree();
			
 
				+            jericho.buildTabpanel();
			
 
				+            jericho.removeLoader();
			
 
				+        })
			
 
				+        $(window).resize(function() {
			
 
				+            var w = $(document).width();
			
 
				+            $('.divRight').css({ width: w - 250 });
			
 
				+        })
			
 
				+    </script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div class="divTop">
			
 
				+    <span>Jericho TabPanel</span>
			
 
				+</div>
			
 
				+<div class="divMain">
			
 
				+    <div class="divLeft">
			
 
				+        <ul class="functree">
			
 
				+		    <li><span class="modules">About</span>
			
 
				+			    <ul>
			
 
				+				    <li><span class="func" jerichotabindex="0">JerichoTab</span></li>
			
 
				+			    </ul>
			
 
				+		    </li>
			
 
				+		    <li><span class="modules">Products</span>
			
 
				+			    <ul>
			
 
				+				    <li><span class="modules">IM</span>
			
 
				+					    <ul>
			
 
				+						    <li><span class="func" dataType='html' dataLink='template/msn.htm' iconImg='images/msn.gif'>MSN</span></li>
			
 
				+						    <li><span class="func" dataType='html' dataLink='template/skype.htm' iconImg='images/skype.png'>Skype</span></li>
			
 
				+					    </ul>
			
 
				+				    </li>
			
 
				+				    <li><span class="modules" >Browsers</span>
			
 
				+				        <ul>
			
 
				+						    <li><span class="func" iconImg='images/firefox.png' dataType='formtag' dataLink='#firefoxuser'>Firefox</span></li>
			
 
				+						    <li><span class="func" iconImg='images/ie.png' dataType='formtag' dataLink='#ieuser'>Internet Explorer</span></li>
			
 
				+					    </ul>
			
 
				+				    </li>				
			
 
				+			    </ul>
			
 
				+		    </li>
			
 
				+		    <li><span class="modules">Corporations</span>
			
 
				+			    <ul>
			
 
				+				    <li><span class="func" dataType='iframe' dataLink='http://www.g.cn'>Google</span></li>
			
 
				+				    <li><span class="func" iconImg="images/yahoo.png" dataType="iframe" dataLink="http://www.yahoo.com">Yahoo</span></li>
			
 
				+				    <li><span class="func" dataType="iframe" dataLink="handler/dataexchange.ashx?action=microsoft">Microsoft</span></li>
			
 
				+			    </ul>
			
 
				+		    </li>
			
 
				+		    <li><span class="modules">News</span>
			
 
				+		        <ul>
			
 
				+				    <li><span class="func" iconImg="images/chess.png" dataType="ajax" dataLink="handler/dataexchange.ashx?action=chess">I-go</span></li>
			
 
				+				    <li><span class="func" iconImg="images/ent.png" dataType="ajax" dataLink="handler/dataexchange.ashx?action=ent">Entertainment</span></li>
			
 
				+				    <li><span class="func" iconImg="images/whether.png" dataType="ajax" dataLink="handler/dataexchange.ashx?action=whether">Whether</span></li>
			
 
				+			    </ul>
			
 
				+		    </li>
			
 
				+		    <li><span class="modules">Testing...</span>
			
 
				+		        <ul>
			
 
				+				    <li><span class="func" iconImg="images/clock.png" dataType='ajax' dataLink='handler/dataexchange.ashx?action=getdatetime'>Get Ticks(AJAX)</span></li>
			
 
				+			    </ul>
			
 
				+		    </li>;
			
 
				+	    </ul>
			
 
				+    </div>
			
 
				+    <div class="divRight"></div>
			
 
				+</div>
			
 
				+<div id="divMainLoader">Loading...</div>
			
 
				+<b id="firefoxuser" style="display:none"></b>
			
 
				+<b id="ieuser" style="display:none"></b>
			
 
				+<div id="tbNews" style="display:none">
			
 
				+    <h4>Wow...just wow!!!</h4>
			
 
				+    <p>This plugin is really amazing!</p>
			
 
				+    <p>it's light-weight but powerful and perfect</p>
			
 
				+    <p>It's easy to use, all the API was opened, you can get them from the remarks that in the head of js file.</p>
			
 
				+    <p>JeirchoTab has supported four types of data:</p>
			
 
				+    <p>
			
 
				+        <ol>
			
 
				+            <li>formtag</li>
			
 
				+            <li>html</li>
			
 
				+            <li>iframe</li>
			
 
				+            <li>ajax</li>
			
 
				+        </ol>
			
 
				+    </p>
			
 
				+    <p>You wanna known '<b>How to use it</b>'?</p>
			
 
				+    <p>See the demo by yourself!</p>
			
 
				+    <p><strong style="color:#7623ee">--jericho</strong><img src="images/china.gif" alt="China" title="China" /></p>
			
 
				+    <p><a href="http://www.ajaxplaza.net" target="_blank">http://www.ajaxplaza.net</a></p>
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/main/webapp/static/jerichotab/js/jquery.jerichotab.js
+++ b/src/main/webapp/static/jerichotab/js/jquery.jerichotab.js
@@ -0,0 +1,692 @@
 
				+/// <reference path="jquery.js"/>
			
 
				+/*
			
 
				+ * jerichotab
			
 
				+ * version: release-2.0.1 (05/13/2009) 
			
 
				+ * @ jQuery v1.3.*
			
 
				+ *
			
 
				+ * Licensed under the GPL:
			
 
				+ *   http://gplv3.fsf.org
			
 
				+ *
			
 
				+ * Copyright 2008, 2009 Jericho [ thisnamemeansnothing[at]gmail.com ] 
			
 
				+	========================================
			
 
				+	#example:
			
 
				+		
			
 
				+	========================================
			
 
				+	========================================
			
 
				+	#API:
			
 
				+		#$.fn.initJerichoTab(Function):
			
 
				+				*renderTo(String): the tab render to('#sample')
			
 
				+				*uniqueId(String): the tab's id(It must be unique)
			
 
				+				*tabs(Array): the tabs will be initialized, whose items will be formated as follows:
			
 
				+					{
			
 
				+					**title(String): the tab title text
			
 
				+					**iconImg(String): the tab icon that displayed from title text,
			
 
				+					**closeable(Boolean): the switch that controls whether the tab can be closed (true as default)
			
 
				+					}
			
 
				+				*activeTabIndex(Int): the tab you'd like to select after loading(0 as default)
			
 
				+				*contentHeight(Int): height of the content div tag
			
 
				+				*contentCss(Object): the same as style sheet
			
 
				+				*loadOnce(Boolean): the switch controls if load tab content at the first time(true as default)
			
 
				+				*tabWidth(Int): width of each tab(150 as default)
			
 
				+		#$.fn.jerichoTab.addTab(Function):
			
 
				+				*tabId(String); the unique tab Id(Unused, private)
			
 
				+				*tabFirer(JQuery Object): the object that makes tab shown in a special way
			
 
				+				*title(String): the tab title text
			
 
				+				*data(Object): the tab data to load,including:
			
 
				+							**dataType:type of data,
			
 
				+							**dataLink:data link
			
 
				+								#example(must use as suited):
			
 
				+								##formtag:
			
 
				+									*dataType:'formtag', 
			
 
				+									//***use the html tags in this page
			
 
				+									*dataLink:'#example' 
			
 
				+									//***id of the tag you'd like to display in this tab
			
 
				+								##iframe:
			
 
				+									*dataType:'iframe', 
			
 
				+									//***use the iframe to load another page
			
 
				+									*dataLink:''
			
 
				+									//***such as 'iframetemplates/iframe.htm' 
			
 
				+									//***the relative url of the page you'd like to display in this tab,
			
 
				+									//***and jerichoTab will use an iframe to load it
			
 
				+								###html:
			
 
				+									*dataType:'html',
			
 
				+									//*** load data from html url
			
 
				+									*dataLink:''
			
 
				+									// *** the relative url of your html page
			
 
				+								##ajax:
			
 
				+								*dataType:'ajax',
			
 
				+								//***use ajax to load data with asynchronous operations
			
 
				+								*dataLink:''
			
 
				+								//*** yes,u can write down your ajax handler url and then jerichotab'll make a callback,
			
 
				+								//*** so the responseText will be displayed in the content holder(u can use html tags in your server callback datas)
			
 
				+				*onLoadCompleted(Function): fired after the data has been loaded
			
 
				+				*iconImg(String): the tab icon that displayed below title text(relative to...),
			
 
				+				*closeable(Boolean): set whether the tab can be closed(true as default)
			
 
				+	========================================
			
 
				+*/
			
 
				+
			
 
				+//; (function($) {
			
 
				+$.extend($.fn, {
			
 
				+    initJerichoTab: function(setting) {
			
 
				+        var opts = $.fn.extend({
			
 
				+            //the container of jerichotab(is required,  a jQuery format selector String as '.container' or '#container')
			
 
				+            renderTo: null,
			
 
				+            //the unique id of jerichotab(is required and unique, not null)
			
 
				+            uniqueId: null,
			
 
				+            //format your tab data like this: [{title:'',iconImg:'',closeable:true},{title:'',iconImg:'',closeable:true}]
			
 
				+            //it's an Array...
			
 
				+            tabs: [],
			
 
				+            //when the jerichotab has been loaded, the tab you'ld like to display first(start at 0, and 0 as default)
			
 
				+            activeTabIndex: 0,
			
 
				+            //the style sheet of tab content
			
 
				+            contentCss: {
			
 
				+                'height': '500px'
			
 
				+            },
			
 
				+            //if you set this property as true, the data'll be loaded only at the first time when users click the tab
			
 
				+            //in other times jerichotab only swich it's css(display property) from 'none' to 'block'
			
 
				+            loadOnce: true,
			
 
				+            //the tab width (150 as default)
			
 
				+            tabWidth: 110,
			
 
				+            //set an ajaxload effect, jerichotab has provided two choices: 'usebg' | 'righttag'
			
 
				+            //'usebg': control if set a big loading gif in the contentholder
			
 
				+            //'righttag': this will set a small loading gif in the right top of contentholder
			
 
				+            loader: 'righttag',
			
 
				+            //两边滑块宽度
			
 
				+            slidersWidth: 19,
			
 
				+            //标题高度
			
 
				+            titleHeight: 26
			
 
				+        }, setting);
			
 
				+        //initialize the jerichotab
			
 
				+        function createJerichoTab() {
			
 
				+            //make sure that a container and uniqueId were provided
			
 
				+            if (opts.renderTo == null) { alert('you must set the \'renderTo\' property\r\t--JeirchoTab'); return; }
			
 
				+            if (opts.uniqueId == null) { alert('you must set the \'uniqueId\' property\r\t--JeirchoTab'); return; }
			
 
				+            if ($('#' + opts.uniqueId).length > 0) { alert('you must set the \'uniqueId\' property as unique\r\t--JeirchoTab'); return; }
			
 
				+            //the jerichotab html tree:
			
 
				+            /* <div class="jericho_tab">
			
 
				+            <div class="tab_pages" >
			
 
				+            <div class="tabs">
			
 
				+            <ul /> ###tabpages here
			
 
				+            </div>
			
 
				+            </div>
			
 
				+            <div class="tab_content">
			
 
				+            <div id="jerichotab_contentholder" class="content" /> ###tabcontents here
			
 
				+            </div>
			
 
				+            </div>
			
 
				+            */
			
 
				+            var jerichotab = $('<div id="'+opts.uniqueId+'" class="jericho_tab"><div class="tab_pages" ><div class="tabs"><ul /></div></div><div class="tab_content"><div id="jerichotab_contentholder" class="content" /></div></div>')
			
 
				+                                            .appendTo($(opts.renderTo));
			
 
				+            
			
 
				+            //apply contentcss to the contentholder
			
 
				+            $('.tab_content>.content', jerichotab).css(opts.contentCss);
			
 
				+            
			
 
				+            //fill data
			
 
				+            $.fn.jerichoTab = {
			
 
				+                master: jerichotab,
			
 
				+                tabWidth: opts.tabWidth,
			
 
				+                tabPageWidth: $('.tab_pages', jerichotab).width(),
			
 
				+                slidersWidth: opts.slidersWidth,
			
 
				+                loader: opts.loader,
			
 
				+                loadOnce: opts.loadOnce,
			
 
				+                tabpage: $('.tab_pages>.tabs>ul', jerichotab),
			
 
				+                addTab: function(tabsetting) {
			
 
				+                    //set as the unique tab id and tabFirer tag
			
 
				+                    tagGuid = (typeof tagGuid == 'undefined' ? 0 : tagGuid + 1);
			
 
				+                    var curIndex = tagGuid;
			
 
				+                    //this function will be open to all users for them to add tab at any time
			
 
				+                    var ps = $.fn.extend({
			
 
				+                        //if there is a DOM that cause the tab to be added to tabpages,
			
 
				+                        //you should pass it to jerichotab, in which way tab'll only be activated when
			
 
				+                        //user click the DOM next time
			
 
				+                        tabFirer: null,
			
 
				+                        title: '新增页签'+(curIndex+1),
			
 
				+                        //the dataType and dataLink were suited as:
			
 
				+                        //1.formtag:
			
 
				+                        //   dataType:'formtag', 
			
 
				+                        //                  --use the html tags in this page
			
 
				+                        //   dataLink:'#example' 
			
 
				+                        //                  --id of the tag you'ld like to display in this tab
			
 
				+                        //2.iframe:
			
 
				+                        //   dataType:'iframe', 
			
 
				+                        //                  --use the iframe to load another page
			
 
				+                        //   dataLink:''
			
 
				+                        //                  --such as 'iframetemplates/iframe.htm', set 
			
 
				+                        //                  --the relative url of the page u'ld like to display in this tab,
			
 
				+                        //                  --and jerichoTab will use an iframe to load it
			
 
				+                        //3.html:
			
 
				+                        //   dataType:'html',
			
 
				+                        //                  --load html tags from a url
			
 
				+                        //   dataLink:''
			
 
				+                        //                  --the relative url of your html page
			
 
				+                        //4.ajax:
			
 
				+                        //   dataType:'ajax',
			
 
				+                        //                  --use the ajax to load datas with asynchronous operations
			
 
				+                        //    dataLink:''
			
 
				+                        //                  --yes,u can write down your ajax handler url and jerichotab'll make a callback,
			
 
				+                        //                  --so the responseText will be displayed in the content holder(u can use html tags in your server callback datas)
			
 
				+                        data: { dataType: '', dataLink: '' },
			
 
				+                        //set the tab icon of each(relative to...)
			
 
				+                        iconImg: '',
			
 
				+                        //whether this tab can be closed(ture as default)
			
 
				+                        closeable: true,
			
 
				+                        //this function will be fired after all data has been loaded
			
 
				+                        onLoadCompleted: null,
			
 
				+                        // the tab's name
			
 
				+                        name:''
			
 
				+                    }, tabsetting);
			
 
				+                    //window.console && console.log('%o', tabsetting);
			
 
				+                    //check whether the tabFirer exists or not, and that it has an attribute['jerichotabindex'], then set the tab that tabFirer was connected activated
			
 
				+                    //otherwise attach the jerichotabindex' attribute
			
 
				+                    if (ps.tabFirer != null) {
			
 
				+                        var jerichotabindex = ps.tabFirer.attr('jerichotabindex');
			
 
				+                        if (typeof jerichotabindex != 'undefined' && $('#jerichotab_' + jerichotabindex).length > 0)
			
 
				+                            return $.fn.setTabActive(jerichotabindex).adaptSlider().loadData();
			
 
				+                        ps.tabFirer.attr('jerichotabindex', curIndex);
			
 
				+                    }
			
 
				+                    // set name
			
 
				+                    if(ps.name == ''){
			
 
				+                    	ps.name = ps.title;
			
 
				+                    }
			
 
				+                    //newTab html tree:
			
 
				+                    /*
			
 
				+                    <li>
			
 
				+                    <div class="tab_left" >
			
 
				+                    <div class="tab_icon" />
			
 
				+                    <div class="tab_text" >JerichoTab</div>
			
 
				+                    <div class="tab_close">
			
 
				+                    <a href="javascript:void(0)" title="Close">&nbsp;</a>
			
 
				+                    </div>
			
 
				+                    </div>
			
 
				+                    <div class="tab_right">&nbsp;</div>
			
 
				+                    </li>
			
 
				+                    */
			
 
				+                    /*var newTab = $('<li class="jericho_tabs tab_selected" style="width:0px"  id="jerichotab_' + curIndex + '" dataType="' + ps.data.dataType + '" dataLink="' + ps.data.dataLink + '">' +
			
 
				+	                                    '<div class="tab_left"  style="width:' + (opts.tabWidth - 5) + 'px"  >' +
			
 
				+	                                        (ps.iconImg == '' ? '' : '<div class="tab_icon" style="' + 'background-image:url(' + ps.iconImg + ')' + '">&nbsp;</div>') +
			
 
				+	                                        '<div class="tab_text" title="' + ps.title + '"  style="width:' + (opts.tabWidth - 45 + (ps.iconImg == '' ? 25 : 0)) + 'px"  >' + ps.title.cut(opts.tabWidth / 10 - 1) + '</div>  ' +
			
 
				+	                                        '<div class="tab_close">' + (ps.closeable ? '<a href="javascript:" title="关闭">&nbsp;</a>' : '') + '</div>' +
			
 
				+	                                    '</div>' +
			
 
				+	                                    '<div class="tab_right">&nbsp;</div>' +
			
 
				+	                                '</li>')*/
			
 
				+                    var newTab = $('<li name="'+ps.name+'" class="jericho_tabs tab_selected" style="width:0px"  id="jerichotab_' + curIndex + '" dataType="' + ps.data.dataType + '" dataLink="' + ps.data.dataLink + '">' +
			
 
				+                            '<div class="tab_left"  style="width:' + (opts.tabWidth - 5) + 'px"  >' +
			
 
				+                                (ps.iconImg == '' ? '' : '<div class="tab_icon" style="' + 'background-image:url(' + ps.iconImg + ')' + '">&nbsp;</div>') +
			
 
				+                                '<div class="tab_text" title="' + ps.title + '"  style="width:' + (opts.tabWidth - 45 + (ps.iconImg == '' ? 25 : 0)) + 'px"  >' + ps.title.cut(opts.tabWidth / 10 - 1) + '</div>  ' +
			
 
				+                                '<div class="tab_close">' + (ps.closeable ? '<a href="javascript:" title="关闭">&nbsp;</a>' : '') + '</div>' +
			
 
				+                            '</div>' +
			
 
				+                            '<div class="tab_right">&nbsp;</div>' +
			
 
				+                        '</li>').appendTo($.fn.jerichoTab.tabpage).css('opacity', '0').applyHover()
			
 
				+	                          .applyCloseEvent().animate({ 'opacity': '1', width: opts.tabWidth }, 100, function() {
			
 
				+	                    $.fn.setTabActive(curIndex);
			
 
				+	                });
			
 
				+                    //use an Array named "tabHash" to restore the tab information
			
 
				+                    tabHash = (typeof tabHash == 'undefined' ? [] : tabHash);
			
 
				+                    tabHash.push({
			
 
				+                        index: curIndex,
			
 
				+                        tabFirer: ps.tabFirer,
			
 
				+                        tabId: 'jerichotab_' + curIndex,
			
 
				+                        holderId: 'jerichotabholder_' + curIndex,
			
 
				+                        iframeId: 'jerichotabiframe_' + curIndex,
			
 
				+                        onCompleted: ps.onLoadCompleted
			
 
				+                    });
			
 
				+                    return newTab.applySlider();
			
 
				+                },
			
 
				+                closeCurrentTab: function(tabsetting) {
			
 
				+                	$('.tab_selected .tab_close>a').click();
			
 
				+                    /*var ps = $.fn.extend({
			
 
				+                        name:'',
			
 
				+                        activeTabName:'',
			
 
				+                        isReaload: false
			
 
				+                    }, tabsetting);
			
 
				+                    
			
 
				+                    $.fn.jerichoTab.tabpage.children('li[name='+ps.name+']').remove();
			
 
				+                    
			
 
				+                    var isLoad = 0;
			
 
				+                    if(ps.activeTabName != ''){
			
 
				+                    	var lis = $.fn.jerichoTab.tabpage.children('li');
			
 
				+                    	for(var i=0;i<lis.size();i++){
			
 
				+                    		if(lis.eq(i).attr('name')==ps.activeTabName){
			
 
				+                    			$.fn.setTabActive(i).loadData(ps.isReaload);
			
 
				+                    			isLoad = 1;
			
 
				+                    			break;
			
 
				+                    		}
			
 
				+                    	}
			
 
				+                    }
			
 
				+                    if(isLoad==0){
			
 
				+                    	$.fn.setTabActive(0).loadData(ps.isReaload);
			
 
				+                    }*/
			
 
				+                    
			
 
				+                },
			
 
				+            };
			
 
				+            $.each(opts.tabs, function(i, n) {
			
 
				+                $.fn.jerichoTab.addTab(n);
			
 
				+            });
			
 
				+            try{
			
 
				+                if (tabHash.length == 0)
			
 
				+                    jerichotab.css({ 'display': 'none' });
			
 
				+            }catch(e){ }
			
 
				+        }
			
 
				+        createJerichoTab();
			
 
				+        $.fn.setTabActive(opts.activeTabIndex).loadData();
			
 
				+        $.fn.jerichoTab.resize = function() {
			
 
				+        	$.fn.jerichoTab.tabPageWidth = $(".tab_pages", $.fn.jerichoTab.master).width() - (($(".jericho_slider").length > 0) ? ($.fn.jerichoTab.slidersWidth * 2) : 0);
			
 
				+            $(".tabs", $.fn.jerichoTab.master).width($.fn.jerichoTab.tabPageWidth).applySlider().adaptSlider();
			
 
				+            var fixHeight = -2;
			
 
				+            //if (Metronic.isIE8()){
			
 
				+            //	fixHeight = 25;
			
 
				+            //}
			
 
				+            $('#jerichotab_contentholder').height($(opts.renderTo).height() - opts.titleHeight - 5 - fixHeight);
			
 
				+            $(".jericho_tab iframe").height($(".jericho_tab").parent().height() - opts.titleHeight - fixHeight);
			
 
				+        };
			
 
				+        $(window).resize(function() {
			
 
				+            $.fn.jerichoTab.resize();
			
 
				+        })
			
 
				+        //window.console && console.log('width :' + $.fn.jerichoTab.tabpage.width());
			
 
				+    },
			
 
				+    //activate the tag(orderkey is the tab order, start at 1)
			
 
				+    setTabActiveByOrder: function(orderKey) {
			
 
				+        var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
			
 
				+        if (lastTab.length > 0) lastTab.swapTabEnable();
			
 
				+        return $('#jericho_tabs').filter(':nth-child(' + orderKey + ')').swapTabEnable();
			
 
				+    },
			
 
				+    //activate the tag(orderKey is the tagGuid of each tab)
			
 
				+    setTabActive: function(orderKey) {
			
 
				+        var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
			
 
				+        if (lastTab.length > 0) lastTab.swapTabEnable();
			
 
				+        return $('#jerichotab_' + orderKey).swapTabEnable();
			
 
				+    },
			
 
				+    addEvent: function(e, h) {
			
 
				+        var target = this.get(0);
			
 
				+        if (target.addEventListener) {
			
 
				+            target.addEventListener(e, h, false);
			
 
				+        } else if (target.attachEvent) {
			
 
				+            target.attachEvent('on' + e, h);
			
 
				+        }
			
 
				+    },
			
 
				+    //create an iframe in the contentholder to load pages
			
 
				+    buildIFrame: function(src) {
			
 
				+        return this.each(function() {
			
 
				+            var onComleted = null, jerichotabiframe = '';
			
 
				+            for (var tab in tabHash) {
			
 
				+                if (tabHash[tab].holderId == $(this).attr('id')) {
			
 
				+                    onComleted = tabHash[tab].onCompleted;
			
 
				+                    jerichotabiframe = tabHash[tab].iframeId;
			
 
				+                    break;
			
 
				+                }
			
 
				+            }
			
 
				+            src += (src.indexOf('?') == -1 ? '?' : '&') + 'tabPageId=' + jerichotabiframe;
			
 
				+            var iframe = $('<iframe id="' + jerichotabiframe + '" name="' + jerichotabiframe + '" src="' + src + '" frameborder="0" scrolling="auto" />')
			
 
				+							.css({ width: '100%', height: $(this).parent().height(), border: 0 }).appendTo($(this));
			
 
				+            //add a listener to the load event
			
 
				+            $('#' + jerichotabiframe).addEvent('load', function() {
			
 
				+                //if onComlete(Function) is not null, then release it
			
 
				+                !!onComleted ? onComleted(arguments[1]) : true;
			
 
				+                $.fn.removeLoader();
			
 
				+            });
			
 
				+        });
			
 
				+    },
			
 
				+    //load data from dataLink
			
 
				+    //use the following function after each tab was activated
			
 
				+    loadData: function(flag) {
			
 
				+        return this.each(function() {
			
 
				+        	$('.jericho_tab .tab_selected').css('background-color', $('body').css('background-color'));
			
 
				+            //show ajaxloader first
			
 
				+            $('#jerichotab_contentholder').showLoader();
			
 
				+            var onComleted = null, holderId = '', tabId = '';
			
 
				+            //search information in tabHash
			
 
				+            for (var tab in tabHash) {
			
 
				+                if (tabHash[tab].tabId == $(this).attr('id')) {
			
 
				+                    onComleted = tabHash[tab].onCompleted;
			
 
				+                    holderId = '#' + tabHash[tab].holderId;
			
 
				+                    tabId = '#' + tabHash[tab].tabId;
			
 
				+                    break;
			
 
				+                }
			
 
				+            }
			
 
				+            var dataType = $(this).attr('dataType');
			
 
				+            var dataLink = $(this).attr('dataLink');
			
 
				+            //if dataType was undefined, nothing will be done
			
 
				+            if (typeof dataType == 'undefined' || dataType == '' || dataType == 'undefined') { removeLoading(); return; }
			
 
				+            //hide the rest contentholders
			
 
				+            $('#jerichotab_contentholder').children('div[class=curholder]').attr('class', 'holder').css({ 'display': 'none' });
			
 
				+            var holder = $(holderId);
			
 
				+            if (holder.length == 0) {
			
 
				+                //if contentholder DOM hasn't been created, create it immediately
			
 
				+                holder = $('<div class="curholder" id="' + holderId.replace('#', '') + '" />').appendTo($('#jerichotab_contentholder'));
			
 
				+                //load data into holder
			
 
				+                load(holder);
			
 
				+            }
			
 
				+            else {
			
 
				+                holder.attr('class', 'curholder').css({ 'display': 'block' });
			
 
				+                if ($.fn.jerichoTab.loadOnce && !flag){
			
 
				+                    removeLoading();
			
 
				+                } else {
			
 
				+                    holder.html('');
			
 
				+                    load(holder);
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            function load(c) {
			
 
				+                switch (dataType) {
			
 
				+                    case 'formtag':
			
 
				+                        //clone html DOM elements in the page
			
 
				+                        $(dataLink).css('display', 'none');
			
 
				+                        var clone = $(dataLink).clone(true).appendTo(c).css('display', 'block');
			
 
				+                        removeLoading(holder);
			
 
				+                        break;
			
 
				+                    case 'html':
			
 
				+                        //load HTML from page
			
 
				+                        holder.load(dataLink + '?t=' + Math.floor(Math.random()), function() {
			
 
				+                            removeLoading(holder);
			
 
				+                        });
			
 
				+                        break;
			
 
				+                    case 'iframe':
			
 
				+                        //use iframe to load a website
			
 
				+                        holder.buildIFrame(dataLink, holder);
			
 
				+                        break;
			
 
				+                    case 'ajax':
			
 
				+                        //load a remote page using an HTTP request
			
 
				+                        $.ajax({
			
 
				+                            url: dataLink,
			
 
				+                            data: { t: Math.floor(Math.random()) },
			
 
				+                            error: function(r) {
			
 
				+                                holder.html('数据加载失败！');
			
 
				+                                removeLoading(holder);
			
 
				+                            },
			
 
				+                            success: function(r) {
			
 
				+                                holder.html(r);
			
 
				+                                removeLoading(holder);
			
 
				+                            }
			
 
				+                        });
			
 
				+                        break;
			
 
				+                }
			
 
				+            }
			
 
				+            function removeLoading(h) {
			
 
				+                !!onComleted ? onComleted(h) : true;
			
 
				+                $.fn.removeLoader();
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    //attach the slider event to every tab,
			
 
				+    //so users can slide the tabs when there are too much tabs
			
 
				+    attachSliderEvent: function() {
			
 
				+        return this.each(function() {
			
 
				+            var me = this;
			
 
				+            $(me).hover(function() {
			
 
				+                $(me).swapClass('jericho_slider' + $(me).attr('pos') + '_enable', 'jericho_slider' + $(me).attr('pos') + '_hover');
			
 
				+            }, function() {
			
 
				+                $(me).swapClass('jericho_slider' + $(me).attr('pos') + '_hover', 'jericho_slider' + $(me).attr('pos') + '_enable');
			
 
				+            }).mouseup(function() {
			
 
				+                //filter the sliders in order to prevent users from sliding`
			
 
				+                if ($(me).is('[slide=no]')) return;
			
 
				+                //get the css(left) of tabpage(ul elements)
			
 
				+                var offLeft = parseInt($.fn.jerichoTab.tabpage.css('left'));
			
 
				+                //the max css(left) of tabpage
			
 
				+                var maxLeft = tabHash.length * $.fn.jerichoTab.tabWidth - $.fn.jerichoTab.tabPageWidth + ($.fn.jerichoTab.slidersWidth * 2);
			
 
				+                switch ($(me).attr('pos')) {
			
 
				+                    case 'left':
			
 
				+                        //slide to the left side
			
 
				+                        if (offLeft + $.fn.jerichoTab.tabWidth < 0)
			
 
				+                            $.fn.jerichoTab.tabpage.animate({ left: offLeft + $.fn.jerichoTab.tabWidth }, 100);
			
 
				+                        else
			
 
				+                            $.fn.jerichoTab.tabpage.animate({ left: 0 }, 100, function() {
			
 
				+                                $(me).attr({ 'slide': 'no', 'class': 'jericho_sliders jericho_sliderleft_disable' });
			
 
				+                            });
			
 
				+                        $('.jericho_sliders[pos=right]').attr({ 'slide': 'yes', 'class': 'jericho_sliders jericho_sliderright_enable' });
			
 
				+                        break;
			
 
				+                    case 'right':
			
 
				+                        //slide to the right side
			
 
				+                        if (offLeft - $.fn.jerichoTab.tabWidth > -maxLeft)
			
 
				+                            $.fn.jerichoTab.tabpage.animate({ left: offLeft - $.fn.jerichoTab.tabWidth }, 100);
			
 
				+                        else
			
 
				+                            $.fn.jerichoTab.tabpage.animate({ left: -maxLeft }, 100, function() {
			
 
				+                                $(me).attr({ 'slide': 'no', 'class': 'jericho_sliders jericho_sliderright_disable' });
			
 
				+                            });
			
 
				+                        $('.jericho_sliders[pos=left]').attr({ 'slide': 'yes', 'class': 'jericho_sliders jericho_sliderleft_enable' });
			
 
				+                        break;
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    },
			
 
				+    //create or activate the slider to tabpage
			
 
				+    applySlider: function() {
			
 
				+        return this.each(function() {
			
 
				+            if (typeof tabHash == 'undefined' || tabHash.length == 0) return;
			
 
				+            //get the offwidth of tabpage
			
 
				+            var offWidth = tabHash.length * $.fn.jerichoTab.tabWidth - $.fn.jerichoTab.tabPageWidth + ($.fn.jerichoTab.slidersWidth * 2);
			
 
				+            if (tabHash.length > 0 && offWidth > 0) {
			
 
				+                //make sure that the parent Div of tabpage was fixed(position:relative)
			
 
				+                //so jerichotab can control the display position of tabpage by using 'left'
			
 
				+                $.fn.jerichoTab.tabpage.parent().css({ width: $.fn.jerichoTab.tabPageWidth - ($.fn.jerichoTab.slidersWidth * 2) });
			
 
				+                //auto grow the tabpage(ul) width and reset 'left'
			
 
				+                $.fn.jerichoTab.tabpage.css({ width: offWidth + $.fn.jerichoTab.tabPageWidth - ($.fn.jerichoTab.slidersWidth * 2) })
			
 
				+                		.animate({ left: -offWidth }, 0, function() {
			
 
				+                    //append 'jerichosliders' to the tabpageholder if 'jerichoslider' has't been added
			
 
				+                    if ($('.jericho_sliders').length <= 0) {
			
 
				+                    	var s = 'onclick="if(document.selection && document.selection.empty) {document.selection.empty();}else if(window.getSelection) {var sel = window.getSelection();sel.removeAllRanges();}"';
			
 
				+                        $.fn.jerichoTab.tabpage.parent()
			
 
				+                            .before($('<div class="jericho_sliders jericho_sliderleft_enable" slide="yes" pos="left" '+s+'></div>'));
			
 
				+                        $.fn.jerichoTab.tabpage.parent()
			
 
				+                            .after($('<div class="jericho_sliders jericho_sliderright_disable" pos="right" slide="yes" '+s+'></div>'));
			
 
				+                        $('.jericho_sliders').attachSliderEvent();
			
 
				+                    }
			
 
				+                    //$('.jericho_sliders').adaptSlider();
			
 
				+                });
			
 
				+            }
			
 
				+            else if (tabHash.length > 0 && offWidth <= 0) {
			
 
				+                //remove 'jerichosliders' whether the tabs were not go beyond the capacity of tabpageholder
			
 
				+                $('.jericho_sliders').remove();
			
 
				+                $.fn.jerichoTab.tabpage.parent().css({ width: $.fn.jerichoTab.tabPageWidth });
			
 
				+                $.fn.jerichoTab.tabpage.css({ width: -offWidth + $.fn.jerichoTab.tabPageWidth })
			
 
				+                	.animate({ left: 0 }, 0);
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    //make sure that the slider will be adjusted quickly to the tabpage after tab 'clicking' or tab 'initializing'
			
 
				+    adaptSlider: function() {
			
 
				+        return this.each(function() {
			
 
				+            if ($('.jericho_sliders').length > 0) {
			
 
				+                var offLeft = parseInt($.fn.jerichoTab.tabpage.css('left'));
			
 
				+                var curtag = '#', index = 0;
			
 
				+                for (var t in tabHash) {
			
 
				+                    if (tabHash[t].tabId == $(this).attr('id')) {
			
 
				+                        curtag += tabHash[t].tabId;
			
 
				+                        index = parseInt(t);
			
 
				+                        break;
			
 
				+                    }
			
 
				+                }
			
 
				+                //set the tabpage width
			
 
				+                var tabWidth = $.fn.jerichoTab.tabPageWidth - ($.fn.jerichoTab.slidersWidth * 2);
			
 
				+                //calculate the distance from the left side of tabpage
			
 
				+                var space_l = $.fn.jerichoTab.tabWidth * index + offLeft;
			
 
				+                //calculate the distance from the right side of tabpage
			
 
				+                var space_r = $.fn.jerichoTab.tabWidth * (index + 1) + offLeft;
			
 
				+                //window.console && console.log(space_l + '||' + space_r);
			
 
				+                function setSlider(pos, enable) {
			
 
				+                    $('.jericho_sliders[pos=' + pos + ']').attr({ 'slide': (enable ? 'yes' : 'no'), 'class': 'jericho_sliders jericho_slider' + pos + '_' + (enable ? 'enable' : 'disable') });
			
 
				+                }
			
 
				+                //slider to right to check whether it's a tab nearby left slider
			
 
				+                if ((space_l < 0 && space_l > -$.fn.jerichoTab.tabWidth) && (space_r > 0 && space_r < $.fn.jerichoTab.tabWidth)) {
			
 
				+                    //left
			
 
				+                    $.fn.jerichoTab.tabpage.animate({ left: -$.fn.jerichoTab.tabWidth * index }, 0, function() {
			
 
				+                        if (index == 0) setSlider('left', false);
			
 
				+                        else setSlider('left', true);
			
 
				+                        setSlider('right', true);
			
 
				+                    });
			
 
				+                }
			
 
				+                //slider to left to check whether it's a tab nearby right slider
			
 
				+                if ((space_l < tabWidth && space_l > tabWidth - $.fn.jerichoTab.tabWidth) && (space_r > tabWidth && space_r < tabWidth + $.fn.jerichoTab.tabWidth)) {
			
 
				+                    //right
			
 
				+                    $.fn.jerichoTab.tabpage.animate({ left: -$.fn.jerichoTab.tabWidth * (index + 1) + tabWidth }, 0, function() {
			
 
				+                        if (index == tabHash.length - 1) setSlider('right', false);
			
 
				+                        else setSlider('left', true);
			
 
				+                        setSlider('left', true);
			
 
				+                    });
			
 
				+                }
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    //apply event to the close anchor
			
 
				+    applyCloseEvent: function() {
			
 
				+        return this.each(function() {
			
 
				+            var me = this;
			
 
				+            $('.tab_close>a', this).click(function(e) {
			
 
				+                //prevents further propagation of the current event. 
			
 
				+                e.stopPropagation();
			
 
				+                if ($(this).length == 0) return;
			
 
				+                //remove tab from tabpageholder
			
 
				+                $(me).animate({ 'opacity': '0', width: '0px' }, 100, function() {
			
 
				+                    //make the previous tab selected whether the removed tab was selected
			
 
				+                    var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
			
 
				+                    if (lastTab.attr('id') == $(this).attr('id')) {
			
 
				+                    	if($(this).prev().text() != ''){
			
 
				+                            $(this).prev().swapTabEnable().loadData();
			
 
				+                    	}else{
			
 
				+                    		$(this).next().swapTabEnable().loadData();
			
 
				+                    	}
			
 
				+                    }
			
 
				+                    //clear the information of the removed tab from tabHash
			
 
				+                    for (var t in tabHash) {
			
 
				+                        if (tabHash[t].tabId == $(me).attr('id')) {
			
 
				+                            if (tabHash[t].tabFirer != null)
			
 
				+                                tabHash[t].tabFirer.removeAttr('jerichotabindex');
			
 
				+                            tabHash.splice(t, 1);
			
 
				+                        }
			
 
				+                    }
			
 
				+                    //adapt slider
			
 
				+                    $(me).applySlider().remove();
			
 
				+                    //remove contentholder
			
 
				+                    $('#jerichotabholder_' + $(me).attr('id').replace('jerichotab_', '')).remove();
			
 
				+                })
			
 
				+            });
			
 
				+            $(this).RightMenu('jerichotabmenu',{menuList:[
			
 
				+                {menuName:"刷新当前",clickEvent:"$('.tab_selected').loadData(true);"},
			
 
				+                {menuName:"关闭其它",clickEvent:"$('.tab_unselect .tab_close>a').click();"
			
 
				+                	+"setTimeout('$.fn.jerichoTab.resize();setTimeout(\\\'$.fn.jerichoTab.resize();"
			
 
				+                	+"setTimeout(\\\\\\'$.fn.jerichoTab.resize();\\\\\\',1000);\\\',500);',500);"}
			
 
				+        	]});
			
 
				+        });
			
 
				+    },
			
 
				+    //apply the "hover" effect and "onSelect" event
			
 
				+    applyHover: function() {
			
 
				+        return this.each(function() {
			
 
				+            $(this).hover(function() {
			
 
				+                if ($(this).hasClass('tab_unselect')) $(this).addClass('tab_unselect_h');
			
 
				+            }, function() {
			
 
				+                if ($(this).hasClass('tab_unselect_h')) $(this).removeClass('tab_unselect_h');
			
 
				+            }).mouseup(function() {
			
 
				+                if ($(this).hasClass('tab_selected')) return;
			
 
				+                //select this tab and hide the last selected tab
			
 
				+                var lastTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
			
 
				+                lastTab.attr('class', 'jericho_tabs tab_unselect');
			
 
				+                $('#jerichotabholder_' + lastTab.attr('id').replace('jerichotab_', '')).css({ 'display': 'none' });
			
 
				+                $(this).attr('class', 'jericho_tabs tab_selected').loadData().adaptSlider();
			
 
				+            });
			
 
				+        });
			
 
				+    },
			
 
				+    //switch the tab between the selected mode and the unselected mode, or v.v...
			
 
				+    swapTabEnable: function() {
			
 
				+        return this.each(function() {
			
 
				+            if ($(this).hasClass('tab_selected'))
			
 
				+                $(this).swapClass('tab_selected', 'tab_unselect');
			
 
				+            else if ($(this).hasClass('tab_unselect'))
			
 
				+                $(this).swapClass('tab_unselect', 'tab_selected');
			
 
				+        });
			
 
				+    },
			
 
				+    //change class from css1 to css2 of DOM
			
 
				+    swapClass: function(css1, css2) {
			
 
				+        return this.each(function() {
			
 
				+            $(this).removeClass(css1).addClass(css2);
			
 
				+        })
			
 
				+    },
			
 
				+    //if it takes a long time to load the data, show a loader to ui
			
 
				+    showLoader: function() {
			
 
				+        return this.each(function() {
			
 
				+            switch ($.fn.jerichoTab.loader) {
			
 
				+                case 'usebg':
			
 
				+                    //add a circular loading gif picture to the background of contentholder
			
 
				+                    $(this).addClass('loading');
			
 
				+                    break;
			
 
				+                case 'righttag':
			
 
				+                    //add a small loading gif picture and a banner to the right top corner of contentholder
			
 
				+                    if ($('#jerichotab_contentholder>.righttag').length == 0)
			
 
				+                        $('<div class="righttag">正在加载...</div>').appendTo($(this));
			
 
				+                    else
			
 
				+                        $('#jerichotab_contentholder>.righttag').css({ display: 'block' });
			
 
				+                    break;
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    //remove the loader
			
 
				+    removeLoader: function() {
			
 
				+        switch ($.fn.jerichoTab.loader) {
			
 
				+            case 'usebg':
			
 
				+                $('#jerichotab_contentholder').removeClass('loading');
			
 
				+                break;
			
 
				+            case 'righttag':
			
 
				+                $('#jerichotab_contentholder>.righttag').css({ display: 'none' });
			
 
				+                break;
			
 
				+        }
			
 
				+    }
			
 
				+});
			
 
				+//})(jQuery);
			
 
				+
			
 
				+String.prototype.cut = function(len) {
			
 
				+    var position = 0;
			
 
				+    var result = [];
			
 
				+    var tale = '';
			
 
				+    for (var i = 0; i < this.length; i++) {
			
 
				+        if (position >= len) {
			
 
				+            tale = '...';
			
 
				+            break;
			
 
				+        }
			
 
				+        if (this.charCodeAt(i) > 255) {
			
 
				+            position += 2;
			
 
				+            result.push(this.substr(i, 1));
			
 
				+        }
			
 
				+        else {
			
 
				+            position++;
			
 
				+            result.push(this.substr(i, 1));
			
 
				+        }
			
 
				+    }
			
 
				+    return result.join("") + tale;
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * 右键菜单，示例：$(this).RightMenu('myMenu2',{menuList:[{menuName:"菜单1",menuclass:"1",clickEvent:"divClick(1)"}]});
			
 
				+ */
			
 
				+$(function(){
			
 
				+	document.oncontextmenu=function(){return false;}//屏蔽右键
			
 
				+	document.onmousemove=mouseMove;//记录鼠标位置
			
 
				+});
			
 
				+var mx=0,my=0;
			
 
				+function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;} 
			
 
				+function mouseCoords(ev){
			
 
				+	if(ev.pageX||ev.pageY){return{x:ev.pageX,y:ev.pageY};}
			
 
				+	return{x:ev.clientX,y:ev.clientY+$(document).scrollTop()};
			
 
				+}
			
 
				+$.fn.extend({RightMenu: function(id,options){
			
 
				+	options = $.extend({menuList:[]},options);
			
 
				+	var menuCount=options.menuList.length;
			
 
				+	if (!$("#"+id)[0]){
			
 
				+		var divMenuList="<div id=\""+id+"\" class=\"div_RightMenu\"><div><ul class='ico'>";
			
 
				+		for(var i=0;i<menuCount;i++){
			
 
				+			divMenuList+="<li class=\""+options.menuList[i].menuclass+"\" onclick=\""+options.menuList[i].clickEvent+"\">"+options.menuList[i].menuName+"</li>";
			
 
				+		}
			
 
				+		divMenuList += "</ul></div><div>";
			
 
				+		$("body").append(divMenuList).find("#"+id).hide().find("li")
			
 
				+				.bind("mouseover",function(){$(this).addClass("RM_mouseover");})
			
 
				+				.bind("mouseout",function(){$(this).removeClass("RM_mouseover");});
			
 
				+		$(document).click(function(){$("#"+id).hide();});
			
 
				+	}
			
 
				+	return this.each(function(){
			
 
				+		this.oncontextmenu=function(){
			
 
				+			var mw=$('body').width(),mhh=$('html').height(),mbh=$('body').height(),
			
 
				+				w=$('#'+id).width(),h=$('#'+id).height(),
			
 
				+				mh=(mhh>mbh)?mhh:mbh;//最大高度 比较html与body的高度
			
 
				+			if(mh<h+my){my=mh-h;}//超 高
			
 
				+			if(mw<w+mx){mx=mw-w;}//超 宽
			
 
				+			$("#"+id).hide().css({top:my,left:mx}).show();
			
 
				+			$.fn.jerichoTab.resize(); // 修正弹出菜单时tab滚动被挤下去的问题
			
 
				+		}
			
 
				+	});
			
 
				+}});
			
--- a/src/main/webapp/static/jingle/css/Jingle.css
+++ b/src/main/webapp/static/jingle/css/Jingle.css
--- a/src/main/webapp/static/jingle/css/app.css
+++ b/src/main/webapp/static/jingle/css/app.css
@@ -0,0 +1,191 @@
 
				+.indented > * {
			
 
				+    margin: 5px 10px;
			
 
				+}
			
 
				+.demo-list li{
			
 
				+    display: -webkit-box;
			
 
				+}
			
 
				+.demo-list span.icon{
			
 
				+    position: inherit;
			
 
				+/*     font-size: 40px; */
			
 
				+    color: #524d4b;
			
 
				+    padding: 0 10px;
			
 
				+}
			
 
				+.demo-list a{
			
 
				+    -webkit-box-flex:1;
			
 
				+}
			
 
				+.demo-btn-group{
			
 
				+    width: auto;
			
 
				+    height: auto;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+.demo-btn-group > *{
			
 
				+    margin: 5px 0;
			
 
				+}
			
 
				+
			
 
				+.icon-container{
			
 
				+    width:100%;
			
 
				+}
			
 
				+.icon-container > *{
			
 
				+    margin:10px;
			
 
				+    padding-top: 50px;
			
 
				+    float: left;
			
 
				+    width: 7em;
			
 
				+    height: 85px;
			
 
				+    background-color: #eee;
			
 
				+    border-radius: 5px;
			
 
				+    font-weight: bold;
			
 
				+    text-align: center;
			
 
				+    position: relative;
			
 
				+}
			
 
				+
			
 
				+.icon-container .icon{
			
 
				+    font-size: 2em;
			
 
				+    width:100%;
			
 
				+    text-align: center;
			
 
				+    padding:5px;
			
 
				+    position: absolute;
			
 
				+    left: 0;
			
 
				+    top:15px;
			
 
				+}
			
 
				+
			
 
				+@-webkit-keyframes flipIn {
			
 
				+    0% { -webkit-transform: perspective(1000px) rotateY(90deg);opacity: 0;}
			
 
				+    100% {-webkit-transform: perspective(1000px) rotateY(0deg); opacity: 1;}
			
 
				+}
			
 
				+.flipIn {
			
 
				+    -webkit-backface-visibility: visible !important;
			
 
				+    -webkit-animation-name: flipIn;
			
 
				+    -webkit-transform-origin: top left;
			
 
				+}
			
 
				+@-webkit-keyframes flipOut {
			
 
				+    0% { -webkit-transform: perspective(1000px) rotateY(90deg);opacity: 0;}
			
 
				+    100% {-webkit-transform: perspective(1000px) rotateY(0deg); opacity: 1;}
			
 
				+}
			
 
				+.flipOut {
			
 
				+    -webkit-animation-name: flipOut;
			
 
				+    -webkit-backface-visibility: visible !important;
			
 
				+    -webkit-transform-origin: top right;
			
 
				+}
			
 
				+
			
 
				+.chartTitle{
			
 
				+    text-align: center;
			
 
				+    font-weight: 600;
			
 
				+    font-size: 1.1em;
			
 
				+    margin:10px;
			
 
				+}
			
 
				+.legend{
			
 
				+    border: 1px solid #b9b4b6;
			
 
				+    margin:0 auto;
			
 
				+    width: 150px;
			
 
				+    border-radius:4px;
			
 
				+    padding:5px;
			
 
				+    display: -webkit-box;
			
 
				+}
			
 
				+.legend>div{
			
 
				+    -webkit-box-flex : 1;
			
 
				+    box-flex : 1;
			
 
				+}
			
 
				+.arrow_container{
			
 
				+    color: #fff;
			
 
				+    display: none;
			
 
				+    border-radius: 4px;
			
 
				+    border: 1px solid #E64816;
			
 
				+    background: #E64816;
			
 
				+    padding: 5px;
			
 
				+    text-align: center;
			
 
				+    position: relative;
			
 
				+    width:60%;
			
 
				+    margin:10px auto;
			
 
				+}
			
 
				+.arrow_container:after{
			
 
				+    bottom: 100%;
			
 
				+    left: 50%;
			
 
				+    margin-left: -20px;
			
 
				+    border: solid transparent;
			
 
				+    content: " ";
			
 
				+    height: 0;
			
 
				+    width: 0;
			
 
				+    position: absolute;
			
 
				+    pointer-events: none;
			
 
				+    border-width: 20px;
			
 
				+    border-bottom-color: #E64816;
			
 
				+}
			
 
				+.demo-grid{
			
 
				+    padding: 5px;
			
 
				+}
			
 
				+.demo-grid>div{
			
 
				+    margin:1px;
			
 
				+    border: 1px solid #666;
			
 
				+    color: #C0392B;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+
			
 
				+/*welcome robots*/
			
 
				+@-webkit-keyframes r_head {
			
 
				+    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
			
 
				+	100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
			
 
				+}
			
 
				+@-webkit-keyframes r_hand_l {
			
 
				+    0% {-webkit-transform: translateX(-100%);}
			
 
				+    100% {-webkit-transform: translateX(0) rotate(45deg);}
			
 
				+}
			
 
				+@-webkit-keyframes r_hand_r {
			
 
				+    0% {-webkit-transform: translateX(100%);}
			
 
				+    100% {-webkit-transform: translateX(0) rotate(315deg);}
			
 
				+}
			
 
				+@-webkit-keyframes r_body {
			
 
				+    0% {-webkit-transform: scale(.1) rotate(0);}
			
 
				+    10% {-webkit-transform: scale(.2) rotate(360deg);}
			
 
				+    40% {-webkit-transform: scale(.5) rotate(0);}
			
 
				+    50% {-webkit-transform: scale(.6) rotate(360deg);}
			
 
				+    80% {-webkit-transform: scale(.9) rotate(0);}
			
 
				+    100% {-webkit-transform: scale(1.1) rotate(360deg);}
			
 
				+}
			
 
				+@-webkit-keyframes r_foot_l {
			
 
				+     0% {-webkit-transform: translateX(250%) translateY(-300%) rotate(145deg);}
			
 
				+     100% {-webkit-transform: translateX(0) translateY(0) rotate(30deg);}
			
 
				+}
			
 
				+@-webkit-keyframes r_foot_r {
			
 
				+    0% {-webkit-transform: translateX(-300%) translateY(300%) rotate(270deg);}
			
 
				+    100% {-webkit-transform: translateX(0) translateY(0) rotate(0);}
			
 
				+}
			
 
				+@-webkit-keyframes  welcome_robot{
			
 
				+    0%{-webkit-transform: scale(.8)}
			
 
				+    20%{-webkit-transform: scale(1)}
			
 
				+    40%{-webkit-transform: scale(.9)}
			
 
				+    60%{-webkit-transform: scale(1)}
			
 
				+    80%{-webkit-transform: scale(.8)}
			
 
				+    100%{-webkit-transform: scale(1)}
			
 
				+}
			
 
				+@-webkit-keyframes  welcome_jinlge{
			
 
				+    0%{-webkit-transform: scale(.6); border-color : #E74C3C;color:#E74C3C}
			
 
				+    20%{-webkit-transform: scale(1); border-color : #E67E22;color:#E67E22}
			
 
				+    40%{-webkit-transform: scale(.7); border-color : #9f00a7;color:#9f00a7}
			
 
				+    60%{-webkit-transform: scale(1) ;border-color : #2980B9;color:#2980B9}
			
 
				+    80%{-webkit-transform: scale(.8); border-color : #C0392B;color:#C0392B}
			
 
				+    100%{-webkit-transform: scale(1) ;border-color : #fff;color:#fff}
			
 
				+}
			
 
				+@-webkit-keyframes shake {
			
 
				+    0% {-webkit-transform:rotate(-5deg);}
			
 
				+    100% {-webkit-transform:rotate(5deg);}
			
 
				+}
			
 
				+#welcome_btn{
			
 
				+    position: absolute;bottom: 100px;right: 80px;
			
 
				+    -webkit-animation-name: shake;
			
 
				+    -webkit-animation-duration: 0.10s;
			
 
				+    -webkit-animation-timing-function: linear;
			
 
				+    -webkit-animation-direction: alternate;
			
 
				+    -webkit-animation-iteration-count: infinite;
			
 
				+}
			
 
				+@-webkit-keyframes box_l {
			
 
				+	0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
			
 
				+	60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
			
 
				+	80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
			
 
				+	100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
			
 
				+}
			
 
				+@-webkit-keyframes box_r {
			
 
				+	0% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; }
			
 
				+	60% { -webkit-transform: translateX(20%) skewX(-30deg); opacity: 1; }
			
 
				+	80% { -webkit-transform: translateX(0%) skewX(15deg); opacity: 1; }
			
 
				+	100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
			
 
				+}
			
--- a/src/main/webapp/static/jingle/html/button_section.html
+++ b/src/main/webapp/static/jingle/html/button_section.html
@@ -0,0 +1,56 @@
 
				+<section id="button_section"  data-transition="popup">
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" class="button" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Buttons</h1>
			
 
				+    </header>
			
 
				+    <article class="active" id="button_article" data-scroll="true">
			
 
				+
			
 
				+        <div class="indented">
			
 
				+            <div>
			
 
				+                <a href="#" class="button" data-icon="home">button</a>
			
 
				+                <a href="#" class="button" data-icon="home right">button</a>
			
 
				+                <a href="#" class="button small alizarin">small button</a>
			
 
				+                <a href="#" class="button light small">light button</a>
			
 
				+                <a href="#" class="button disabled">button</a>
			
 
				+            </div>
			
 
				+            <div>
			
 
				+                <a href="#" class="button" data-icon="checkmark" data-count="7" data-orient="left">count left</a>
			
 
				+                <a href="#" class="button" data-icon="checkmark" data-count="7">icon+count</a>
			
 
				+            </div>
			
 
				+            <div class="demo-btn-group">
			
 
				+                <a href="#" class="button block">block button</a>
			
 
				+                <a href="#" class="button block nephritis">button</a>
			
 
				+                <a href="#" class="button block alizarin">button</a>
			
 
				+            </div>
			
 
				+            <div class="demo-btn-group">
			
 
				+                <div style="text-align: left">默认(只有文字)：</div>
			
 
				+                <ul class="control-group">
			
 
				+                    <li class="active"><a href="#">Hello</a></li>
			
 
				+                    <li><a href="#">Jingle</a></li>
			
 
				+                    <li><a href="#" >html5</a></li>
			
 
				+                </ul>
			
 
				+                <div style="text-align: left">只有图标：</div>
			
 
				+                <ul class="control-group">
			
 
				+                    <li data-icon="home"></li>
			
 
				+                    <li class="active" data-icon="bell"></li>
			
 
				+                    <li data-icon="spinner"></li>
			
 
				+                </ul>
			
 
				+                <div style="text-align: left">文字+图标(左右)：</div>
			
 
				+                <ul class="control-group">
			
 
				+                    <li class="active"><a href="#" data-icon="home">Hello</a></li>
			
 
				+                    <li><a href="#" data-icon="bell">Jingle</a></li>
			
 
				+                    <li><a href="#" data-icon="spinner">html5</a></li>
			
 
				+                </ul>
			
 
				+                <div style="text-align: left">文字+图标(上下)：</div>
			
 
				+                <ul class="control-group">
			
 
				+                    <li class="active" data-icon="home"><a href="#">Hello</a></li>
			
 
				+                    <li data-icon="bell"><a href="#">Jingle</a></li>
			
 
				+                    <li data-icon="spinner"><a href="#" >html5</a></li>
			
 
				+                </ul>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/calendar_section.html
+++ b/src/main/webapp/static/jingle/html/calendar_section.html
@@ -0,0 +1,13 @@
 
				+<section id="calendar_section" data-transition="cover">
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="undo" data-target="back">返回</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">日历</h1>
			
 
				+    </header>
			
 
				+    <article class="active" id="menu_article"  data-scroll="true">
			
 
				+        <button class="button" id="btn_popup_calendar" style="margin: 20px;">点击弹出日历</button>
			
 
				+        <div id="calendar_demo" style="margin:10px;">
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/chart_bar_section.html
+++ b/src/main/webapp/static/jingle/html/chart_bar_section.html
@@ -0,0 +1,16 @@
 
				+<section id="chart_bar_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Bar</h1>
			
 
				+    </header>
			
 
				+    <article class="active">
			
 
				+        <div class="chartTitle">公司产品销售汇总</div>
			
 
				+        <canvas id="bar_canvas"></canvas>
			
 
				+        <div class="legend">
			
 
				+            <div data-icon="stop" style="color: #72caed">A产品</div>
			
 
				+            <div data-icon="stop" style="color: #a6d854">B产品</div>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/chart_drag_section.html
+++ b/src/main/webapp/static/jingle/html/chart_drag_section.html
@@ -0,0 +1,21 @@
 
				+<section id="chart_drag_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">可拖动图表</h1>
			
 
				+    </header>
			
 
				+    <article class="active">
			
 
				+        <ul class="control-group" id="changeDragChartType" style="margin:10px 30px;">
			
 
				+            <li class="active" data-type="line">折线图</li>
			
 
				+            <li data-type="bar">柱状图</li>
			
 
				+        </ul>
			
 
				+        <div class="chartTitle">公司产品销售数据</div>
			
 
				+        <canvas id="chart_drag_line_canvas"></canvas>
			
 
				+        <canvas id="chart_drag_bar_canvas" style="display: none;"></canvas>
			
 
				+        <div class="legend">
			
 
				+            <div data-icon="stop" style="color: #72caed">A产品</div>
			
 
				+            <div data-icon="stop" style="color: #a6d854">B产品</div>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/chart_dynamic_section.html
+++ b/src/main/webapp/static/jingle/html/chart_dynamic_section.html
@@ -0,0 +1,19 @@
 
				+<section id="chart_dynamic_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">实时图</h1>
			
 
				+        <nav class="right">
			
 
				+            <a href="#" class="button" id="pause_dynamic_chart">暂停</a>
			
 
				+        </nav>
			
 
				+    </header>
			
 
				+    <article class="active">
			
 
				+        <div class="chartTitle">公司产品销售数据</div>
			
 
				+        <canvas id="dynamic_line_canvas" width="400" height="400"></canvas>
			
 
				+        <div class="legend">
			
 
				+            <div data-icon="stop" style="color: #72caed">A产品</div>
			
 
				+            <div data-icon="stop" style="color: #a6d854">B产品</div>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/chart_line_section.html
+++ b/src/main/webapp/static/jingle/html/chart_line_section.html
@@ -0,0 +1,23 @@
 
				+<section id="chart_line_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Line</h1>
			
 
				+    </header>
			
 
				+    <article class="active">
			
 
				+        <ul class="control-group" id="changeLineType" style="margin:10px 30px;">
			
 
				+            <li class="active" data-type="normal">折线图</li>
			
 
				+            <li data-type="smooth">平滑线图</li>
			
 
				+            <li data-type="area">面积图</li>
			
 
				+        </ul>
			
 
				+        <div>
			
 
				+            <div class="chartTitle">公司产品销售数据</div>
			
 
				+            <canvas id="line_canvas"></canvas>
			
 
				+            <div class="legend">
			
 
				+                <div data-icon="stop" style="color: #72caed">A产品</div>
			
 
				+                <div data-icon="stop" style="color: #a6d854">B产品</div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/chart_pie_section.html
+++ b/src/main/webapp/static/jingle/html/chart_pie_section.html
@@ -0,0 +1,18 @@
 
				+ <section id="chart_pie_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Pie</h1>
			
 
				+    </header>
			
 
				+    <article class="active">
			
 
				+        <ul class="control-group" id="changePieType" style="margin:10px 30px;">
			
 
				+            <li class="active" data-type="pie">饼图</li>
			
 
				+            <li data-type="dount">环形图</li>
			
 
				+        </ul>
			
 
				+        <div class="chartTitle">网站访问来源</div>
			
 
				+        <canvas id="pie_canvas"></canvas>
			
 
				+        <div id="pie_segment_info" class="arrow_container">
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/chart_section.html
+++ b/src/main/webapp/static/jingle/html/chart_section.html
@@ -0,0 +1,50 @@
 
				+<section id="chart_section" data-transition="flip">
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#"  data-icon="arrow-down-left-2" data-target="back">返回</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Jingle Chart</h1>
			
 
				+    </header>
			
 
				+    <article class="active indented">
			
 
				+        <div style="line-height: 2em;margin-bottom: 20px;">
			
 
				+            Jingle Chart是一个移动端专属图表组件(开发中...)，详见https://github.com/shixy/JChart
			
 
				+        </div>
			
 
				+        <ul class="list inset demo-list">
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <span class="icon stats"></span>
			
 
				+                <a href="#chart_line_section"   data-target="section">
			
 
				+                    <strong>折线图</strong>
			
 
				+                    <p>折线图、平滑曲线图、面积图</p>
			
 
				+                </a>
			
 
				+            </li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <span class="icon bars-2"></span>
			
 
				+                <a href="#chart_bar_section"data-target="section">
			
 
				+                    <strong>柱状图</strong>
			
 
				+                    <p>最基本的柱状图(未来会增加条形图，堆积图)</p>
			
 
				+                </a>
			
 
				+            </li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <span class="icon pie"></span>
			
 
				+                <a href="#chart_pie_section"data-target="section">
			
 
				+                    <strong>饼图</strong>
			
 
				+                    <p>饼图、环形图</p>
			
 
				+                </a>
			
 
				+            </li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <span class="icon stats"></span>
			
 
				+                <a href="#chart_drag_section"data-target="section">
			
 
				+                    <strong>可左右拖动的折线图</strong>
			
 
				+                    <p>折线图、柱状图均支持</p>
			
 
				+                </a>
			
 
				+            </li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <span class="icon bars-2"></span>
			
 
				+                <a href="#chart_dynamic_section"data-target="section">
			
 
				+                    <strong>动态(实时)图表</strong>
			
 
				+                    <p>折线图、柱状图均支持</p>
			
 
				+                </a>
			
 
				+            </li>
			
 
				+        </ul>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/color_section.html
+++ b/src/main/webapp/static/jingle/html/color_section.html
@@ -0,0 +1,34 @@
 
				+<section id="color_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Colors</h1>
			
 
				+    </header>
			
 
				+    <article class="active indented">
			
 
				+        <div class="demo-btn-group">
			
 
				+            <a href="#menu_section" data-target="section" class="button turquoise">#1ABC9C</a>
			
 
				+            <a href="#" class="button green-sea">#16A085</a>
			
 
				+            <a href="#" class="button emerland">#78ba00</a>
			
 
				+            <a href="#" class="button nephritis">#27AE60</a>
			
 
				+            <a href="#" class="button peter-river">#3498DB</a>
			
 
				+            <a href="#" class="button belize-hole">#2980B9</a>
			
 
				+            <a href="#" class="button amethyst">#9B59B6</a>
			
 
				+            <a href="#" class="button wisteria">#8E44AD</a>
			
 
				+            <a href="#" class="button wet-asphalt">#2C3E50</a>
			
 
				+            <a href="#" class="button midnight-blue">#2C3E50</a>
			
 
				+            <a href="#" class="button concrete">#95A5A6</a>
			
 
				+            <a href="#" class="button asbestos ">#7F8C8D</a>
			
 
				+            <a href="#" class="button clouds">#ECF0F1</a>
			
 
				+            <a href="#" class="button sliver">#BDC3C7</a>
			
 
				+            <a href="#" class="button alizarin">#E74C3C</a>
			
 
				+            <a href="#" class="button pomegranate">#C0392B</a>
			
 
				+            <a href="#" class="button carrot">#E67E22</a>
			
 
				+            <a href="#" class="button pumpkin">#D35400</a>
			
 
				+            <a href="#" class="button sun-flower">#F1C40F</a>
			
 
				+            <a href="#" class="button orange">#F39C12</a>
			
 
				+            <a href="#" class="button violet">#9f00a7</a>
			
 
				+        </div>
			
 
				+
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/custom_aside.html
+++ b/src/main/webapp/static/jingle/html/custom_aside.html
@@ -0,0 +1,90 @@
 
				+<aside id="left_push_aside" data-position="left" data-transition="push">
			
 
				+    <div class="header">左侧菜单</div>
			
 
				+    <div class="center">
			
 
				+        <ul class="menu">
			
 
				+            <li><a href="#">data-position="left"</a></li>
			
 
				+            <li><a href="#">data-transition="push"</a></li>
			
 
				+            <li><a href="#">左划关闭</a></li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</aside>
			
 
				+<aside id="left_overlay_aside" data-position="left" data-transition="overlay">
			
 
				+    <div class="header">左侧菜单</div>
			
 
				+    <div class="center">
			
 
				+        <ul class="menu">
			
 
				+            <li><a href="#">data-position="left"</a></li>
			
 
				+            <li><a href="#">data-transition="overlay"</a></li>
			
 
				+            <li><a href="#">左划关闭</a></li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</aside>
			
 
				+<aside id="left_reveal_aside" data-position="left" data-transition="reveal">
			
 
				+    <div class="header">左侧菜单</div>
			
 
				+    <div class="center">
			
 
				+        <ul class="menu">
			
 
				+            <li><a href="#">data-position="left"</a></li>
			
 
				+            <li><a href="#">data-transition="reveal"</a></li>
			
 
				+            <li><a href="#">左划关闭</a></li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</aside>
			
 
				+<aside id="show_close_aside" data-position="left" data-transition="push" data-show-close="true">
			
 
				+    <div class="header">左侧菜单</div>
			
 
				+    <div class="center">
			
 
				+        <ul class="menu">
			
 
				+            <li><a href="#">data-show-close="true"</a></li>
			
 
				+            <li><a href="#">左划关闭</a></li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</aside>
			
 
				+
			
 
				+<aside id="right_push_aside" data-position="right" data-transition="push">
			
 
				+    <div class="header">右侧菜单</div>
			
 
				+    <div class="center">
			
 
				+        <ul class="menu">
			
 
				+            <li><a href="#">data-position="right"</a></li>
			
 
				+            <li><a href="#">data-transition="push"</a></li>
			
 
				+            <li><a href="#">右划关闭</a></li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</aside>
			
 
				+<aside id="right_overlay_aside" data-position="right" data-transition="overlay">
			
 
				+    <div class="header">右侧菜单</div>
			
 
				+    <div class="center">
			
 
				+        <ul class="menu">
			
 
				+            <li><a href="#">data-position="right"</a></li>
			
 
				+            <li><a href="#">data-transition="overlay"</a></li>
			
 
				+            <li><a href="#">右划关闭</a></li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</aside>
			
 
				+<aside id="right_reveal_aside" data-position="right" data-transition="reveal">
			
 
				+    <div class="header">右侧菜单</div>
			
 
				+    <div class="center">
			
 
				+        <ul class="menu">
			
 
				+            <li><a href="#">data-position="right"</a></li>
			
 
				+            <li><a href="#">data-transition="reveal"</a></li>
			
 
				+            <li><a href="#">右划关闭</a></li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</aside>
			
 
				+<aside id="custom_width_aside" data-position="right" data-transition="push" style="width:80px;">
			
 
				+    <div class="center">
			
 
				+        <ul class="menu" style="text-align: center;font-size: 2em;">
			
 
				+            <li style="padding: 10px 0;">
			
 
				+                <i class="icon connection"></i>
			
 
				+            </li>
			
 
				+            <li style="padding: 10px 0;">
			
 
				+                <i class="icon camera"></i>
			
 
				+            </li>
			
 
				+            <li style="padding: 10px 0;">
			
 
				+                <i class="icon podcast"></i>
			
 
				+            </li>
			
 
				+            <li style="padding: 10px 0;">
			
 
				+            <i class="icon target"></i>
			
 
				+        </li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</aside>
			
 
				+
			
 
				+
			
--- a/src/main/webapp/static/jingle/html/form_section.html
+++ b/src/main/webapp/static/jingle/html/form_section.html
@@ -0,0 +1,108 @@
 
				+<section id="form_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Form</h1>
			
 
				+    </header>
			
 
				+    <footer>
			
 
				+        <a  href="#form_module_article" class="active" data-target="article" data-icon="stack">组件</a>
			
 
				+        <a  href="#form_article" data-target="article" data-icon="list" >表单</a>
			
 
				+    </footer>
			
 
				+    <article data-scroll="true" id="form_article" >
			
 
				+        <div class="indented">
			
 
				+            <!-- Input -->
			
 
				+            <form>
			
 
				+                <input type="date">
			
 
				+                <input type="time">
			
 
				+                <input type="month">
			
 
				+                <input type="week">
			
 
				+                <a class="button block" data-icon="cogs">保存</a>
			
 
				+            </form>
			
 
				+
			
 
				+            <!-- Input group -->
			
 
				+            <form class="input-group">
			
 
				+                <input type="text" placeholder="真实姓名">
			
 
				+                <input type="email" placeholder="电子邮箱">
			
 
				+                <input type="text" placeholder="用户名">
			
 
				+            </form>
			
 
				+
			
 
				+            <!-- Input group with labels-->
			
 
				+            <form class="input-group">
			
 
				+                <div class="input-row">
			
 
				+                    <label>姓名</label>
			
 
				+                    <input type="text" placeholder="张三">
			
 
				+                </div>
			
 
				+                <div class="input-row">
			
 
				+                    <label>邮箱</label>
			
 
				+                    <input type="email" placeholder="example@gmail.com">
			
 
				+                </div>
			
 
				+                <div class="input-row">
			
 
				+                    <label>用户名</label>
			
 
				+                    <input id="username_form" type="text" placeholder="字母、数字、下划线">
			
 
				+                </div>
			
 
				+                <div class="input-row">
			
 
				+                    <label>性别</label>
			
 
				+                    <div class="toggle active" data-on="男" data-off="女" name="sex"></div>
			
 
				+                </div>
			
 
				+            </form>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+    <article data-scroll="true" class="active " id="form_module_article" >
			
 
				+        <div>
			
 
				+        <ul class="list">
			
 
				+            <li class="divider">checkbox</li>
			
 
				+            <li>
			
 
				+                <div data-checkbox="unchecked" id="checkbox_1">爱我你就勾勾我</div>
			
 
				+                <div data-checkbox="checked" id="checkbox_2">爱我你就勾勾我</div>
			
 
				+            </li>
			
 
				+            <li class="divider">toggle</li>
			
 
				+            <li>
			
 
				+                <div class="demo-btn-group">
			
 
				+                    <div style="text-align: left">默认：</div>
			
 
				+                    <div class="toggle active" >
			
 
				+                    </div>
			
 
				+                    <div class="toggle" >
			
 
				+                    </div>
			
 
				+                    <div style="text-align: left">自定义文字 data-on="开启" data-off="关闭"</div>
			
 
				+                    <div style="text-align: left">
			
 
				+                        <label>测试：</label>
			
 
				+                        <div class="toggle active" data-on="开启" data-off="关闭"></div>
			
 
				+                    </div>
			
 
				+                    <div style="text-align: left">
			
 
				+                        <label>测试：</label>
			
 
				+                        <div class="toggle" data-on="是" data-off="否"></div>
			
 
				+                    </div>
			
 
				+
			
 
				+                </div>
			
 
				+            </li>
			
 
				+            <li class="divider">range</li>
			
 
				+            <li>
			
 
				+                <div class="demo-btn-group">
			
 
				+                    <div style="text-align: left">默认：</div>
			
 
				+                    <div>
			
 
				+                        <input type="range" min=4 max=10 value="7"/>
			
 
				+                    </div>
			
 
				+                    <div style="text-align: left">右侧显示值：</div>
			
 
				+                    <div  data-rangeinput="right">
			
 
				+                        <input type="range" min=4 max=10 value="7"/>
			
 
				+                    </div>
			
 
				+                    <div style="text-align: left">左侧显示值：</div>
			
 
				+                    <div  data-rangeinput="left">
			
 
				+                        <input type="range" min=4 max=10 value="8"/>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </li>
			
 
				+            <li class="divider">progress</li>
			
 
				+            <li>
			
 
				+                <div class="demo-btn-group">
			
 
				+                    <div style="text-align: left">默认：</div>
			
 
				+                    <div data-progress="40"></div>
			
 
				+                    <div style="text-align: left">自定义文字：</div>
			
 
				+                    <div data-progress="80" data-title="已完成"></div>
			
 
				+                </div>
			
 
				+            </li>
			
 
				+        </ul>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/grid_section.html
+++ b/src/main/webapp/static/jingle/html/grid_section.html
@@ -0,0 +1,59 @@
 
				+<section id="grid_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">栅格系统</h1>
			
 
				+    </header>
			
 
				+    <article class="active" data-scroll="true">
			
 
				+        <div style="padding: 20px;">
			
 
				+            <p>栅格系统采用的是css3的flex-box来实现的，展示更自由。内置了col-1 - 5,等比例分配div,可随意使用margin与padding</p>
			
 
				+            <h3>横向</h3>
			
 
				+            <h4>1:1</h4>
			
 
				+            <div class="grid demo-grid">
			
 
				+                <div class="col-1">col-1</div>
			
 
				+                <div class="col-1">col-1</div>
			
 
				+            </div>
			
 
				+            <h4>1:1:1</h4>
			
 
				+            <div class="grid demo-grid">
			
 
				+                <div class="col-1">col-1</div>
			
 
				+                <div class="col-1">col-1</div>
			
 
				+                <div class="col-1">col-1</div>
			
 
				+            </div>
			
 
				+            <h4>1:2:3</h4>
			
 
				+            <div class="grid demo-grid">
			
 
				+                <div class="col-1">col-1</div>
			
 
				+                <div class="col-2">col-2</div>
			
 
				+                <div class="col-3">col-3</div>
			
 
				+            </div>
			
 
				+            <h4>第一个为100px,第二个填充剩余部分</h4>
			
 
				+            <div class="grid demo-grid">
			
 
				+                <div class="col-0" style="width: 100px;">col-1</div>
			
 
				+                <div class="col-1">col-1</div>
			
 
				+            </div>
			
 
				+            <h3>纵向</h3>
			
 
				+            <h4>高度200px  1:2:3</h4>
			
 
				+            <div class="grid vertical demo-grid" style="height: 200px;">
			
 
				+                <div class="col-1">col-1</div>
			
 
				+                <div class="col-2">col-2</div>
			
 
				+                <div class="col-3">col-3</div>
			
 
				+            </div>
			
 
				+            <h4>任意高度宽度div水平垂直居中</h4>
			
 
				+            <div class="grid middle" style="height: 100px;border:1px solid #ee3207">
			
 
				+                <div style="margin: auto;border: 1px solid #00364d;padding: 5px;">看我如何居中</div>
			
 
				+            </div>
			
 
				+            <h4>综合布局</h4>
			
 
				+
			
 
				+            <div class="grid middle demo-grid" style="height: 200px">
			
 
				+                <div class="col-1">
			
 
				+                    <div class="col-1">col-1</div>
			
 
				+                </div>
			
 
				+                <div class="col-2 grid vertical demo-grid">
			
 
				+                    <div class="col-1">col-1</div>
			
 
				+                    <div class="col-2">col-2</div>
			
 
				+                    <div class="col-3">col-3</div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/icon_section.html
+++ b/src/main/webapp/static/jingle/html/icon_section.html
@@ -0,0 +1,705 @@
 
				+<section id="icon_section">
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-target="back" data-icon="undo">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">ICONS</h1>
			
 
				+    </header>
			
 
				+    <article class="active" data-scroll="true">
			
 
				+    <div class="icon-container clearfix">
			
 
				+        <div >
			
 
				+            <div class="icon previous"></div>
			
 
				+            previous
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon next"></div>
			
 
				+            next
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-down"></div>
			
 
				+            arrow-down
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-up"></div>
			
 
				+            arrow-up
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon home"></div>
			
 
				+            home
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon home-2"></div>
			
 
				+            home-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon office"></div>
			
 
				+            office
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon newspaper"></div>
			
 
				+            newspaper
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon pencil"></div>
			
 
				+            pencil
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon pencil-2"></div>
			
 
				+            pencil-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon quill"></div>
			
 
				+            quill
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon image"></div>
			
 
				+            image
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon camera"></div>
			
 
				+            camera
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon music"></div>
			
 
				+            music
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon headphones"></div>
			
 
				+            headphones
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon camera-2"></div>
			
 
				+            camera-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon pacman"></div>
			
 
				+            pacman
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon connection"></div>
			
 
				+            connection
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon podcast"></div>
			
 
				+            podcast
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon book"></div>
			
 
				+            book
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon books"></div>
			
 
				+            books
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon stack"></div>
			
 
				+            stack
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon folder"></div>
			
 
				+            folder
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon folder-open"></div>
			
 
				+            folder-open
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon tag"></div>
			
 
				+            tag
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon tags"></div>
			
 
				+            tags
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon barcode"></div>
			
 
				+            barcode
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon qrcode"></div>
			
 
				+            qrcode
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon cart"></div>
			
 
				+            cart
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon phone"></div>
			
 
				+            phone
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon phone-hang-up"></div>
			
 
				+            phone-hang-up
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon address-book"></div>
			
 
				+            address-book
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon envelop"></div>
			
 
				+            envelop
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon pushpin"></div>
			
 
				+            pushpin
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon location"></div>
			
 
				+            location
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon map"></div>
			
 
				+            map
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon alarm"></div>
			
 
				+            alarm
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon bell"></div>
			
 
				+            bell
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon calendar"></div>
			
 
				+            calendar
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon mobile"></div>
			
 
				+            mobile
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon cabinet"></div>
			
 
				+            cabinet
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon drawer"></div>
			
 
				+            drawer
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon drawer-2"></div>
			
 
				+            drawer-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon drawer-3"></div>
			
 
				+            drawer-3
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon undo"></div>
			
 
				+            undo
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon redo"></div>
			
 
				+            redo
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon forward"></div>
			
 
				+            forward
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon reply"></div>
			
 
				+            reply
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon bubble"></div>
			
 
				+            bubble
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon bubbles"></div>
			
 
				+            bubbles
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon user"></div>
			
 
				+            user
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon users"></div>
			
 
				+            users
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon spinner"></div>
			
 
				+            spinner
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon search"></div>
			
 
				+            search
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon expand"></div>
			
 
				+            expand
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon contract"></div>
			
 
				+            contract
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon expand-2"></div>
			
 
				+            expand-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon contract-2"></div>
			
 
				+            contract-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon key"></div>
			
 
				+            key
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon lock"></div>
			
 
				+            lock
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon unlocked"></div>
			
 
				+            unlocked
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon wrench"></div>
			
 
				+            wrench
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon cogs"></div>
			
 
				+            cogs
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon cog"></div>
			
 
				+            cog
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon wand"></div>
			
 
				+            wand
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon pie"></div>
			
 
				+            pie
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon stats"></div>
			
 
				+            stats
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon bars"></div>
			
 
				+            bars
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon bars-2"></div>
			
 
				+            bars-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon gift"></div>
			
 
				+            gift
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon meter"></div>
			
 
				+            meter
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon remove"></div>
			
 
				+            remove
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon airplane"></div>
			
 
				+            airplane
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon truck"></div>
			
 
				+            truck
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon road"></div>
			
 
				+            road
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon accessibility"></div>
			
 
				+            accessibility
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon target"></div>
			
 
				+            target
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon lightning"></div>
			
 
				+            lightning
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon switch"></div>
			
 
				+            switch
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon power-cord"></div>
			
 
				+            power-cord
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon signup"></div>
			
 
				+            signup
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon menu"></div>
			
 
				+            menu
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon tree"></div>
			
 
				+            tree
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon cloud"></div>
			
 
				+            cloud
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon cloud-download"></div>
			
 
				+            cloud-download
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon cloud-upload"></div>
			
 
				+            cloud-upload
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon earth"></div>
			
 
				+            earth
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon attachment"></div>
			
 
				+            attachment
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon brightness-medium"></div>
			
 
				+            brightness-medium
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon brightness-contrast"></div>
			
 
				+            brightness-contrast
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon contrast"></div>
			
 
				+            contrast
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon thumbs-up"></div>
			
 
				+            thumbs-up
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon thumbs-up-2"></div>
			
 
				+            thumbs-up-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon notification"></div>
			
 
				+            notification
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon question"></div>
			
 
				+            question
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon info"></div>
			
 
				+            info
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon info-2"></div>
			
 
				+            info-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon blocked"></div>
			
 
				+            blocked
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon cancel-circle"></div>
			
 
				+            cancel-circle
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon checkmark-circle"></div>
			
 
				+            checkmark-circle
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon close"></div>
			
 
				+            close
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon checkmark"></div>
			
 
				+            checkmark
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon minus"></div>
			
 
				+            minus
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon plus"></div>
			
 
				+            plus
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon enter"></div>
			
 
				+            enter
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon exit"></div>
			
 
				+            exit
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon play"></div>
			
 
				+            play
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon pause"></div>
			
 
				+            pause
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon stop"></div>
			
 
				+            stop
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon backward"></div>
			
 
				+            backward
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon forward-2"></div>
			
 
				+            forward-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon first"></div>
			
 
				+            first
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon last"></div>
			
 
				+            last
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon previous"></div>
			
 
				+            previous
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon next"></div>
			
 
				+            next
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon eject"></div>
			
 
				+            eject
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon volume-high"></div>
			
 
				+            volume-high
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon volume-medium"></div>
			
 
				+            volume-medium
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon volume-low"></div>
			
 
				+            volume-low
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon volume-mute"></div>
			
 
				+            volume-mute
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon tab"></div>
			
 
				+            tab
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon checkbox-checked"></div>
			
 
				+            checkbox-checked
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon checkbox-unchecked"></div>
			
 
				+            checkbox-unchecked
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon checkbox-partial"></div>
			
 
				+            checkbox-partial
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon radio-checked"></div>
			
 
				+            radio-checked
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon radio-unchecked"></div>
			
 
				+            radio-unchecked
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon crop"></div>
			
 
				+            crop
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon scissors"></div>
			
 
				+            scissors
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon share"></div>
			
 
				+            share
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon html5"></div>
			
 
				+            html5
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon html5-2"></div>
			
 
				+            html5-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon chrome"></div>
			
 
				+            chrome
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon libreoffice"></div>
			
 
				+            libreoffice
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon IE"></div>
			
 
				+            IE
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon firefox"></div>
			
 
				+            firefox
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon volume-mute-2"></div>
			
 
				+            volume-mute-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon volume-increase"></div>
			
 
				+            volume-increase
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon volume-decrease"></div>
			
 
				+            volume-decrease
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon loop"></div>
			
 
				+            loop
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon shuffle"></div>
			
 
				+            shuffle
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-left-2"></div>
			
 
				+            arrow-left-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-up-left"></div>
			
 
				+            arrow-up-left
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-up-2"></div>
			
 
				+            arrow-up-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-up-right"></div>
			
 
				+            arrow-up-right
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-right-2"></div>
			
 
				+            arrow-right-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-down-right"></div>
			
 
				+            arrow-down-right
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-down-2"></div>
			
 
				+            arrow-down-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-down-left"></div>
			
 
				+            arrow-down-left
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon images"></div>
			
 
				+            images
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon file"></div>
			
 
				+            file
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon file-2"></div>
			
 
				+            file-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon rocket"></div>
			
 
				+            rocket
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon flag"></div>
			
 
				+            flag
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-up-left-2"></div>
			
 
				+            arrow-up-left-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-up-3"></div>
			
 
				+            arrow-up-3
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-up-right-2"></div>
			
 
				+            arrow-up-right-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-down-right-2"></div>
			
 
				+            arrow-down-right-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-down-3"></div>
			
 
				+            arrow-down-3
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon arrow-down-left-2"></div>
			
 
				+            arrow-down-left-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon area"></div>
			
 
				+            area
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon sina-weibo"></div>
			
 
				+            sina-weibo
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon renren"></div>
			
 
				+            renren
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon qq"></div>
			
 
				+            qq
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon target-2"></div>
			
 
				+            target-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon signal"></div>
			
 
				+            signal
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon database"></div>
			
 
				+            database
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon options"></div>
			
 
				+            options
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon list"></div>
			
 
				+            list
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon grid"></div>
			
 
				+            grid
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon ellipsis"></div>
			
 
				+            ellipsis
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon star"></div>
			
 
				+            star
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon star-2"></div>
			
 
				+            star-2
			
 
				+        </div>
			
 
				+        <div >
			
 
				+            <div class="icon star-3"></div>
			
 
				+            star-3
			
 
				+        </div>
			
 
				+    </div>
			
 
				+    </article>
			
 
				+
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/layout_section.html
+++ b/src/main/webapp/static/jingle/html/layout_section.html
@@ -0,0 +1,37 @@
 
				+<section id="layout_section" data-transition="slideUp">
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#"  data-icon="previous" data-target="back">返回</a>
			
 
				+        </nav>
			
 
				+        <ul class="control-group" id="layout_header_ctrl">
			
 
				+            <li class="active">A</li>
			
 
				+            <li>B</li>
			
 
				+        </ul>
			
 
				+    </header>
			
 
				+    <nav class="header-secondary">这是一个工具栏，可随心设计</nav>
			
 
				+    <footer>
			
 
				+        <a  href="#layout_book_article" data-target="article" data-icon="book" class="active">book</a>
			
 
				+        <a  href="#layout_pencil_article" data-target="article" data-icon="pencil">pencil</a>
			
 
				+        <a  href="#" id="layout-btn-getmore"  data-icon="ellipsis">more</a>
			
 
				+    </footer>
			
 
				+    <article class="active" id="layout_book_article">
			
 
				+        <ul class="list">
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <a href="#about_section" data-target="section">about</a>
			
 
				+            </li>
			
 
				+            <li data-icon="next" data-selected="selected">book</li>
			
 
				+            <li data-icon="next" data-selected="selected">book</li>
			
 
				+            <li data-icon="next" data-selected="selected">book</li>
			
 
				+            <li data-icon="next" data-selected="selected">book</li>
			
 
				+        </ul>
			
 
				+    </article>
			
 
				+    <article id="layout_pencil_article">
			
 
				+        <ul class="list">
			
 
				+            <li data-icon="pencil" data-selected="selected">pencil</li>
			
 
				+            <li data-icon="pencil" data-selected="selected">pencil</li>
			
 
				+            <li data-icon="pencil" data-selected="selected">pencil</li>
			
 
				+            <li data-icon="pencil" data-selected="selected">pencil</li>
			
 
				+            <li data-icon="pencil" data-selected="selected">pencil</li>
			
 
				+        </ul>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/list_section.html
+++ b/src/main/webapp/static/jingle/html/list_section.html
@@ -0,0 +1,79 @@
 
				+<section id="list_section" data-transition="slideUp">
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="undo" data-target="back">返回</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">list</h1>
			
 
				+    </header>
			
 
				+    <footer>
			
 
				+        <a  href="#list_article" data-target="article" data-icon="list" class="active">list</a>
			
 
				+        <a  href="#inset_list_article" data-target="article" data-icon="stack">inset list</a>
			
 
				+    </footer>
			
 
				+    <article class="active" id="list_article"  data-scroll="true">
			
 
				+        <ul class="list">
			
 
				+            <li class="divider">list</li>
			
 
				+            <li>
			
 
				+                <strong>Title</strong>
			
 
				+                <p>description</p>
			
 
				+            </li>
			
 
				+            <li class="divider">带icon的 list</li>
			
 
				+            <li data-icon="next">我有箭头</li>
			
 
				+            <li data-icon="airplane">我有飞机</li>
			
 
				+            <li data-icon="checkbox-checked" class="active">yes</li>
			
 
				+            <li data-icon="checkbox-unchecked">no</li>
			
 
				+            <li class="divider">selected list</li>
			
 
				+            <li data-icon="checkbox-checked" data-selected="selected">点我</li>
			
 
				+            <li class="divider">tag list</li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <div class="grid">
			
 
				+                    <div class="col-1">
			
 
				+                        text
			
 
				+                    </div>
			
 
				+                    <div  class="label" >
			
 
				+                        100
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+
			
 
				+            </li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <div class="tag">2013-05-22</div>
			
 
				+                <strong>Title</strong>
			
 
				+                <p>description</p>
			
 
				+            </li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <div class="tag">2013-07-22</div>
			
 
				+                <strong>Title</strong>
			
 
				+                <p>description</p>
			
 
				+                <p><span class="label">java</span><span class="label">python</span></p>
			
 
				+            </li>
			
 
				+        </ul>
			
 
				+    </article>
			
 
				+    <article id="inset_list_article" data-scroll="true" style="padding: 10px;">
			
 
				+        <ul class="list inset">
			
 
				+            <li class="divider">list</li>
			
 
				+            <li>
			
 
				+                <strong>Title</strong>
			
 
				+                <p>description</p>
			
 
				+            </li>
			
 
				+            <li class="divider">带icon的 list</li>
			
 
				+            <li data-icon="next">我有箭头</li>
			
 
				+            <li data-icon="airplane">我有飞机</li>
			
 
				+            <li data-icon="checkbox-checked" class="active">yes</li>
			
 
				+            <li data-icon="checkbox-unchecked">no</li>
			
 
				+            <li class="divider">selected list</li>
			
 
				+            <li data-icon="checkbox-checked" data-selected="selected">点我</li>
			
 
				+            <li class="divider">tag list</li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <div class="tag">2013-05-22</div>
			
 
				+                <strong>Title</strong>
			
 
				+                <p>description</p>
			
 
				+            </li>
			
 
				+            <li data-icon="next" data-selected="selected">
			
 
				+                <div class="tag">2013-07-22</div>
			
 
				+                <strong>Title</strong>
			
 
				+                <p>description</p>
			
 
				+                <p><span class="label">java</span><span class="label">python</span></p>
			
 
				+            </li>
			
 
				+        </ul>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/menu_section.html
+++ b/src/main/webapp/static/jingle/html/menu_section.html
@@ -0,0 +1,42 @@
 
				+<section id="menu_section">
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="undo" data-target="back">返回</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">侧边菜单栏</h1>
			
 
				+    </header>
			
 
				+    <article class="active" id="menu_article"  data-scroll="true">
			
 
				+        <div class="scrollWrapper">
			
 
				+            <h1> 左侧菜单栏</h1>
			
 
				+            <div>
			
 
				+                <a class="button" href="#left_push_aside" data-target="menu">push</a>
			
 
				+                <a class="button" href="#left_overlay_aside" data-target="menu">overlay</a>
			
 
				+                <a class="button" href="#left_reveal_aside" data-target="menu">reveal</a>
			
 
				+                <a class="button" href="#show_close_aside" data-target="menu">show close</a>
			
 
				+            </div>
			
 
				+            <h1> 右侧菜单栏</h1>
			
 
				+            <div>
			
 
				+                <a class="button" href="#right_push_aside" data-target="menu">push</a>
			
 
				+                <a class="button" href="#right_overlay_aside" data-target="menu">overlay</a>
			
 
				+                <a class="button" href="#right_reveal_aside" data-target="menu">reveal</a>
			
 
				+                <a class="button" href="#custom_width_aside" data-target="menu">自定义宽度</a>
			
 
				+            </div>
			
 
				+
			
 
				+            <div>
			
 
				+                <ul class="list inset">
			
 
				+                    <li class="divider">aside上的配置</li>
			
 
				+                    <li>默认宽度为264px</li>
			
 
				+                    <li>data-position="left | right"</li>
			
 
				+                    <li>data-transition="push | overlay | reveal"</li>
			
 
				+                    <li>data-show-close="true | false"</li>
			
 
				+                    <li class="divider">push</li>
			
 
				+                    <li>侧边栏与页面同时滑动</li>
			
 
				+                    <li class="divider">overlay</li>
			
 
				+                    <li>侧边栏从页面上层划出</li>
			
 
				+                    <li class="divider">reveal</li>
			
 
				+                    <li>侧边栏在底部，页面其上方划出</li>
			
 
				+                </ul>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/popup_section.html
+++ b/src/main/webapp/static/jingle/html/popup_section.html
@@ -0,0 +1,31 @@
 
				+<section id="popup_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Popup</h1>
			
 
				+    </header>
			
 
				+    <article class="active " data-scroll=true>
			
 
				+        <div class="demo-btn-group" style="padding: 10px;">
			
 
				+            <a href="#" class="button block" id="btn_alert">alert</a>
			
 
				+            <a href="#" class="button block sun-flower" id="btn_confirm">confirm</a>
			
 
				+            <a href="#" class="button block wet-asphalt" id="btn_loading">loading</a>
			
 
				+            <a href="#" class="button block sliver" id="btn_center">center</a>
			
 
				+            <a href="#" class="button block" id="btn_from_tpl">center(来自模板)</a>
			
 
				+            <a href="#" class="button block nephritis" id="btn_p_top">top</a>
			
 
				+            <a href="#" class="button block concrete" id="btn_t_ts">top-second</a>
			
 
				+            <a href="#" class="button block sun-flower" id="btn_t_bottom">bottom</a>
			
 
				+            <a href="#" class="button block asbestos" id="btn_t_bs">botton-second</a>
			
 
				+            <a href="#" class="button block alizarin" id="btn_popover">popover</a>
			
 
				+            <a href="#" class="button block carrot" id="btn_actionsheet">actionsheet</a>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+    <script type="text/html" id="tpl_popup_login">
			
 
				+        <div style="padding:10px 20px;">
			
 
				+            <div style="text-align:center;font-size:20px;color:#3498DB;font-weight:600;margin:5px 0;">登录</div>
			
 
				+            <input type="text" name="name" placeholder="用户名">
			
 
				+            <input type="password" name="password" placeholder="密码">
			
 
				+            <button class="block" data-icon="checkmark" data-target="closePopup">登录</button>
			
 
				+        </div>
			
 
				+    </script>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/refresh_section.html
+++ b/src/main/webapp/static/jingle/html/refresh_section.html
@@ -0,0 +1,110 @@
 
				+<section id="refresh_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">pull2refresh</h1>
			
 
				+    </header>
			
 
				+    <footer>
			
 
				+        <a href="#down_refresh_article" class="active" data-target="article" data-icon="arrow-down-3">下拉</a>
			
 
				+        <a href="#up_refresh_article" data-target="article" data-icon="arrow-up-2">上拉</a>
			
 
				+    </footer>
			
 
				+    <article class="active" id="down_refresh_article" data-scroll="true">
			
 
				+        <div class="scrollWrapper">
			
 
				+            <ul class="list">
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+                <li>下拉刷新</li>
			
 
				+            </ul>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+    <article id="up_refresh_article" data-scroll="true">
			
 
				+        <div class="scrollWrapper">
			
 
				+            <ul class="list">
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+                <li>上拉加载更多</li>
			
 
				+            </ul>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/scroll_section.html
+++ b/src/main/webapp/static/jingle/html/scroll_section.html
@@ -0,0 +1,77 @@
 
				+<section id="scroll_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">scroll</h1>
			
 
				+    </header>
			
 
				+    <footer>
			
 
				+        <a href="#v_scroll_article" class="active" data-target="article" data-icon="arrow-up-2">纵向滚动</a>
			
 
				+        <a href="#h_scroll_article" data-target="article" data-icon="arrow-left-2">横向滚动</a>
			
 
				+    </footer>
			
 
				+    <article class="active" id="v_scroll_article" data-scroll="true">
			
 
				+        <div class="scrollWrapper">
			
 
				+            <ul class="list">
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+                <li>好多内容</li>
			
 
				+            </ul>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+    <article id="h_scroll_article">
			
 
				+        <div style="margin:20px 10px;">
			
 
				+            <h1 style="margin:10px 0;">左右滑动试试</h1>
			
 
				+            <div style="overflow: hidden;" id="h_scroll_demo">
			
 
				+                <ul class="control-group" style="width: 700px;border-radius: 0;">
			
 
				+                    <li class="active"><a href="#">Hello</a></li>
			
 
				+                    <li><a href="#">Jingle</a></li>
			
 
				+                    <li><a href="#" >html5</a></li>
			
 
				+                    <li><a href="#" >html5</a></li>
			
 
				+                    <li><a href="#" >html5</a></li>
			
 
				+                    <li><a href="#" >html5</a></li>
			
 
				+                    <li><a href="#" >html5</a></li>
			
 
				+                </ul>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/slider_section.html
+++ b/src/main/webapp/static/jingle/html/slider_section.html
@@ -0,0 +1,22 @@
 
				+<section id="slider_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">slider</h1>
			
 
				+        <nav class="right">
			
 
				+            <a href="#" class="button" data-icon="previous" id="slider_prev"></a>
			
 
				+            <a href="#" class="button" data-icon="next" id="slider_next"></a>
			
 
				+        </nav>
			
 
				+    </header>
			
 
				+    <article class="active">
			
 
				+        <div id="slider_test" class="slider">
			
 
				+            <div>
			
 
				+                <div style="text-align: center"><img src="image/1.jpg"></div>
			
 
				+                <div style="text-align: center"><img src="image/2.jpg"></div>
			
 
				+                <div style="text-align: center"><img src="image/3.jpg"></div>
			
 
				+                <div style="text-align: center;"><img src="image/4.jpg"></div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/toast_section.html
+++ b/src/main/webapp/static/jingle/html/toast_section.html
@@ -0,0 +1,17 @@
 
				+<section id="toast_section" >
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#" data-icon="previous" data-target="back">Back</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">Toast</h1>
			
 
				+    </header>
			
 
				+    <article class="active indented">
			
 
				+        <div class="demo-btn-group">
			
 
				+            <a href="#" class="button block" id="btn_t_default">default</a>
			
 
				+            <a href="#" class="button block nephritis" id="btn_t_success">success</a>
			
 
				+            <a href="#" class="button block pomegranate" id="btn_t_error">error</a>
			
 
				+            <a href="#" class="button block sun-flower" id="btn_t_info">info</a>
			
 
				+            <a href="#" class="button block peter-river" id="btn_t_top">顶部显示 toast top</a>
			
 
				+        </div>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jingle/html/welcome.html
+++ b/src/main/webapp/static/jingle/html/welcome.html
@@ -0,0 +1,76 @@
 
				+<style type="text/css">
			
 
				+    #welcome_robot{
			
 
				+        width: 300px;height: 100%;margin:0 auto;margin-top: 80px;position: relative;
			
 
				+    }
			
 
				+    #welcome_robot>div{
			
 
				+        position: absolute;
			
 
				+        border: 5px solid #fff;
			
 
				+        font-size: 20px;
			
 
				+        font-weight: bold;
			
 
				+        color: #fff;
			
 
				+        border-radius: 40%;
			
 
				+    }
			
 
				+    #r_head{
			
 
				+        left: 100px;top:0;
			
 
				+        width: 100px;height: 100px;line-height: 100px;display: none;
			
 
				+    }
			
 
				+    #r_hand_left{
			
 
				+        left: 10px;top:110px;
			
 
				+        width: 40px;-webkit-transform:rotate(45deg);height: 120px;display: none;
			
 
				+    }
			
 
				+    #r_hand_right{
			
 
				+        right: 10px;top:110px;
			
 
				+        width: 40px;-webkit-transform:rotate(315deg);height: 120px;display: none;
			
 
				+    }
			
 
				+    #r_body{
			
 
				+        left: 75px;top:110px;
			
 
				+        width:150px;height: 150px;padding: 10px 5px;display: none;
			
 
				+    }
			
 
				+    #r_foot_left{
			
 
				+        left: 75px;top:260px;-webkit-transform:rotate(30deg);
			
 
				+        width: 40px;height: 120px;display: none;
			
 
				+    }
			
 
				+    #r_foot_right{
			
 
				+        right: 95px;top:260px;
			
 
				+        width:40px;height: 120px;display: none;
			
 
				+    }
			
 
				+    .w_box{
			
 
				+        font-weight: bold;
			
 
				+        font-size: 20px;
			
 
				+        border-radius: 5px;
			
 
				+        padding: 13px 8px;
			
 
				+        margin:30px 40px;
			
 
				+        background-color: #e4eefc;
			
 
				+    }
			
 
				+
			
 
				+</style>
			
 
				+<div id="jingle_welcome" class="slide">
			
 
				+    <div class="slideWrapper" style="color: #fff;font-size: 1.5em;text-shadow: 1px 2px 1px rgba(0,0,0,0.5)">
			
 
				+        <div style="text-align: center; height: 100%;background-color: rgb(97, 179, 81)">
			
 
				+            <div id="welcome_jingle" style="height: 140px;width: 140px;border-radius: 50%;border: 8px solid #fff;font-size: 40px;font-weight:bold;line-height: 124px;margin: 40px auto">
			
 
				+                Jingle
			
 
				+            </div>
			
 
				+            <div style="margin-top: 100px;font-weight: 900;">移动Web开发框架</div>
			
 
				+        </div>
			
 
				+        <div style="text-align: center;height: 100%;background-color: #9B59B6;">
			
 
				+            <div id="welcome_robot">
			
 
				+                <div id="r_head">Jinlge</div>
			
 
				+                <div id="r_hand_left">欢迎界面</div>
			
 
				+                <div id="r_body" style="border-radius: 25%;">欢迎界面内容为html,肆意发挥吧！</div>
			
 
				+                <div id="r_hand_right">欢迎界面</div>
			
 
				+                <div id="r_foot_left">狂拽酷炫</div>
			
 
				+                <div id="r_foot_right">叼炸天哦</div>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div style="text-align: center;height: 100%;background-color: #95A5A6">
			
 
				+            <div id="w_box_1" class="w_box alizarin" style="margin-top: 80px;">WebApp框架</div>
			
 
				+            <div id="w_box_2" class="w_box violet">最适合用来开发Hybrid Mobile App</div>
			
 
				+            <div id="w_box_3" class="w_box peter-river">最常用的Mobile组件</div>
			
 
				+            <div id="w_box_4" class="w_box emerland">苦逼作者还在努力学习+开发ing</div>
			
 
				+        </div>
			
 
				+        <div style="text-align: center;height: 100%;background-color: #E67E22;position:relative;">
			
 
				+            <div style="margin-top: 100px;font-weight: 900;">小盆友们，有块肥皂<br/>快抢！<br/>抢到了肥皂才能深入 <span style="font-size: 2px;color: rgb(233, 153, 83)">app</span></div>
			
 
				+            <button id="welcome_btn" onclick="Jingle.Welcome.hide()">我是肥皂</button>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</div>
			
--- a/src/main/webapp/static/jingle/image/1.jpg
+++ b/src/main/webapp/static/jingle/image/1.jpg
--- a/src/main/webapp/static/jingle/image/2.jpg
+++ b/src/main/webapp/static/jingle/image/2.jpg
--- a/src/main/webapp/static/jingle/image/3.jpg
+++ b/src/main/webapp/static/jingle/image/3.jpg
--- a/src/main/webapp/static/jingle/image/4.jpg
+++ b/src/main/webapp/static/jingle/image/4.jpg
--- a/src/main/webapp/static/jingle/index.html
+++ b/src/main/webapp/static/jingle/index.html
@@ -0,0 +1,157 @@
 
				+<!DOCTYPE >
			
 
				+<html>
			
 
				+<head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <title>Jingle V0.4</title>
			
 
				+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
			
 
				+    <meta name="apple-mobile-web-app-capable" content="yes">
			
 
				+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
			
 
				+
			
 
				+    <link rel="stylesheet" href="css/Jingle.css">
			
 
				+    <link rel="stylesheet" href="css/app.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="aside_container">
			
 
				+</div>
			
 
				+
			
 
				+<div id="section_container">
			
 
				+    <section id="index_section" class="active">
			
 
				+        <header>
			
 
				+            <!--<nav class="left">
			
 
				+                <a id="btn_scan_barcode" data-icon="qrcode" href=""></a>
			
 
				+            </nav>-->
			
 
				+            <h1 class="title">Jingle V0.4</h1>
			
 
				+            <nav class="right">
			
 
				+                <a data-target="section" data-icon="info" href="#about_section"></a>
			
 
				+            </nav>
			
 
				+        </header>
			
 
				+        <article class="active" data-scroll="true">
			
 
				+            <div style="padding: 10px 0 20px;">
			
 
				+            <ul class="list inset demo-list">
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon newspaper"></span>
			
 
				+                    <a href="#layout_section?a=1&b=2"  data-target="section">
			
 
				+                        <strong>layout</strong>
			
 
				+                        <p>基本布局</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon bars-2"></span>
			
 
				+                    <a href="#button_section"data-target="section">
			
 
				+                        <strong>buttons</strong>
			
 
				+                        <p>按钮</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon list"></span>
			
 
				+                    <a href="#list_section"data-target="section">
			
 
				+                        <strong>lists</strong>
			
 
				+                        <p>基本列表</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon bars"></span>
			
 
				+                    <div class="tag alizarin">new</div>
			
 
				+                    <a href="#chart_section"data-target="section">
			
 
				+                        <strong>chart</strong>
			
 
				+                        <p>Jingle Chart，独立的移动端图表组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon stack"></span>
			
 
				+                    <a href="#form_section"data-target="section">
			
 
				+                        <strong>form</strong>
			
 
				+                        <p>表单基本组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon grid"></span>
			
 
				+                    <div class="tag alizarin">new</div>
			
 
				+                    <a href="#grid_section"data-target="section">
			
 
				+                        <strong>grid</strong>
			
 
				+                        <p>栅格组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon bell"></span>
			
 
				+                    <a href="#toast_section"data-target="section">
			
 
				+                        <strong>toast</strong>
			
 
				+                        <p>通知组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon rocket"></span>
			
 
				+                    <a href="#popup_section"data-target="section">
			
 
				+                        <strong>popup</strong>
			
 
				+                        <p>弹出框组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon ellipsis"></span>
			
 
				+                    <a href="#slider_section"data-target="section">
			
 
				+                        <strong>slider</strong>
			
 
				+                        <p>页面轮换组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon arrow-down-3"></span>
			
 
				+                    <a href="#scroll_section"data-target="section">
			
 
				+                        <strong>scroll</strong>
			
 
				+                        <p>滚动条插件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon arrow-up-2"></span>
			
 
				+                    <a href="#refresh_section"data-target="section">
			
 
				+                        <strong>pull2refresh</strong>
			
 
				+                        <p>上拉/下拉刷新组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon menu"></span>
			
 
				+                    <a href="#menu_section"data-target="section">
			
 
				+                        <strong>menu</strong>
			
 
				+                        <p>抽屉菜单组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon calendar"></span>
			
 
				+                    <a href="#calendar_section"data-target="section">
			
 
				+                        <strong>calendar</strong>
			
 
				+                        <p>日历组件</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon bubble"></span>
			
 
				+                    <a href="#icon_section"data-target="section">
			
 
				+                        <strong>icons</strong>
			
 
				+                        <p>用到的字体图标</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li data-icon="next" data-selected="selected">
			
 
				+                    <span class="icon brightness-contrast"></span>
			
 
				+                    <a href="#color_section"data-target="section">
			
 
				+                        <strong>color</strong>
			
 
				+                        <p>常用的一些颜色色值</p>
			
 
				+                    </a>
			
 
				+                </li>
			
 
				+                <li class="divider">其他</li>
			
 
				+                <li data-icon="next" data-selected="selected"><a href="#" data-icon="exit" id="btn_show_welcome"><strong>欢迎页</strong></a></li>
			
 
				+            </ul>
			
 
				+            </div>
			
 
				+        </article>
			
 
				+    </section>
			
 
				+</div>
			
 
				+<!--<script type="text/javascript" src="js/lib/cordova.js"></script>-->
			
 
				+<!-- lib -->
			
 
				+<script type="text/javascript" src="js/lib/zepto.js"></script>
			
 
				+<script type="text/javascript" src="js/lib/iscroll.js"></script>
			
 
				+<script type="text/javascript" src="js/lib/template.min.js"></script>
			
 
				+<script type="text/javascript" src="js/lib/Jingle.debug.js"></script>
			
 
				+<script type="text/javascript" src="js/lib/zepto.touch2mouse.js"></script>
			
 
				+<script type="text/javascript" src="js/lib/JChart.debug.js"></script>
			
 
				+<!--- app --->
			
 
				+<script type="text/javascript" src="js/app/app.js"></script>
			
 
				+<!--<script src="http://192.168.2.153:8080/target/target-script-min.js#anonymous"></script>-->
			
 
				+</body>
			
 
				+</html>
			
--- a/src/main/webapp/static/jingle/js/app/app.js
+++ b/src/main/webapp/static/jingle/js/app/app.js
@@ -0,0 +1,552 @@
 
				+document.addEventListener('deviceready', onDeviceReady, false);
			
 
				+function onDeviceReady(){
			
 
				+    navigator.splashscreen.hide();
			
 
				+    //注册后退按钮
			
 
				+    document.addEventListener("backbutton", function (e) {
			
 
				+        if(J.hasMenuOpen){
			
 
				+            J.Menu.hide();
			
 
				+        }else if(J.hasPopupOpen){
			
 
				+            J.closePopup();
			
 
				+        }else{
			
 
				+            var sectionId = $('section.active').attr('id');
			
 
				+            if(sectionId == 'index_section'){
			
 
				+                J.confirm('提示','是否退出程序？',function(){
			
 
				+                    navigator.app.exitApp();
			
 
				+                });
			
 
				+            }else{
			
 
				+                window.history.go(-1);
			
 
				+            }
			
 
				+        }
			
 
				+    }, false);
			
 
				+}
			
 
				+var App = (function(){
			
 
				+    var pages = {};
			
 
				+    var run = function(){
			
 
				+        $.each(pages,function(k,v){
			
 
				+            var sectionId = '#'+k+'_section';
			
 
				+            $('body').delegate(sectionId,'pageinit',function(){
			
 
				+                v.init && v.init.call(v);
			
 
				+            });
			
 
				+            $('body').delegate(sectionId,'pageshow',function(e,isBack){
			
 
				+                //页面加载的时候都会执行
			
 
				+                v.show && v.show.call(v);
			
 
				+                //后退时不执行
			
 
				+                if(!isBack && v.load){
			
 
				+                    v.load.call(v);
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+		J.Transition.add('flip','slideLeftOut','flipOut','slideRightOut','flipIn');
			
 
				+        Jingle.launch({
			
 
				+            showWelcome : false,
			
 
				+            showPageLoading : true,
			
 
				+            remotePage : {
			
 
				+            	'#index_section': ctx,
			
 
				+            	'#user_section': ctx + '/sys/user'
			
 
				+            }
			
 
				+        });
			
 
				+       
			
 
				+    };
			
 
				+    var page = function(id,factory){
			
 
				+        return ((id && factory)?_addPage:_getPage).call(this,id,factory);
			
 
				+    }
			
 
				+    var _addPage = function(id,factory){
			
 
				+        pages[id] = new factory();
			
 
				+    };
			
 
				+    var _getPage = function(id){
			
 
				+        return pages[id];
			
 
				+    }
			
 
				+    //动态计算chart canvas的高度，宽度，以适配终端界面
			
 
				+    var calcChartOffset = function(){
			
 
				+        return {
			
 
				+            height : $(document).height() - 44 - 30 -60,
			
 
				+            width : $(document).width()
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+    return {
			
 
				+        run : run,
			
 
				+        page : page,
			
 
				+        calcChartOffset : calcChartOffset
			
 
				+    }
			
 
				+}());/*
			
 
				+App.page('index',function(){
			
 
				+    this.init = function(){
			
 
				+        $('#btn_show_welcome').on('tap', J.Welcome.show);
			
 
				+    }
			
 
				+})
			
 
				+App.page('calendar',function(){
			
 
				+    this.init = function(){
			
 
				+        new J.Calendar('#calendar_demo',{
			
 
				+            onRenderDay : function(day,date){
			
 
				+                if(day == 5){
			
 
				+                    return '<div>'+day+'</div><div style="font-size: .8em;color: red">威武</div>'
			
 
				+                }
			
 
				+                return day;
			
 
				+            },
			
 
				+            onSelect:function(date){
			
 
				+                alert(date);
			
 
				+            }
			
 
				+        });
			
 
				+        $('#btn_popup_calendar').tap(function(){
			
 
				+            J.popup({
			
 
				+                html : '<div id="popup_calendar"></div>',
			
 
				+                pos : 'center',
			
 
				+                backgroundOpacity : 0.4,
			
 
				+                showCloseBtn : false,
			
 
				+                onShow : function(){
			
 
				+                    new J.Calendar('#popup_calendar',{
			
 
				+                        date : new Date(2013,7,1),
			
 
				+                        onSelect:function(date){
			
 
				+                            $('#btn_popup_calendar').text(date);
			
 
				+                            J.closePopup();
			
 
				+                        }
			
 
				+                    });
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+    }
			
 
				+});
			
 
				+App.page('refresh',function(){
			
 
				+    this.init = function(){
			
 
				+        J.Refresh({
			
 
				+            selector : '#down_refresh_article',
			
 
				+            type : 'pullDown',
			
 
				+            pullText : '你敢往下拉么...',
			
 
				+            releaseText : '什么时候你才愿意放手？',
			
 
				+            refreshTip : '最后一次拉的人：<span style="color:#e222a5">骚年</span>',
			
 
				+            callback : function(){
			
 
				+                var scroll = this;
			
 
				+                setTimeout(function () {
			
 
				+                    $('#down_refresh_article ul.list li').text('嗯哈，长大后我就成了你~');
			
 
				+                    scroll.refresh();
			
 
				+                    J.showToast('更新成功','success');
			
 
				+                }, 2000);
			
 
				+            }
			
 
				+        });
			
 
				+//    最简约的调用方式
			
 
				+        J.Refresh( '#up_refresh_article','pullUp', function(){
			
 
				+            var scroll = this;
			
 
				+            setTimeout(function () {
			
 
				+                var html = '';
			
 
				+                for(var i=0;i<10;i++){
			
 
				+                    html += '<li style="color:#E74C3C">我是被拉出来的...</li>'
			
 
				+                }
			
 
				+                $('#up_refresh_article ul.list').append(html);
			
 
				+                scroll.refresh();
			
 
				+                J.showToast('加载成功','success');
			
 
				+            }, 2000);
			
 
				+        })
			
 
				+    }
			
 
				+});
			
 
				+App.page('scroll',function(){
			
 
				+    this.init = function(){
			
 
				+        $('#h_scroll_article').on('articleshow',function(){
			
 
				+            J.Scroll('#h_scroll_demo',{hScroll:true,hScrollbar : false});
			
 
				+        })
			
 
				+    }
			
 
				+});
			
 
				+App.page('menu',function(){
			
 
				+    this.init = function(){
			
 
				+        $.get('html/custom_aside.html',function(aside){
			
 
				+            $('#aside_container').append(aside);
			
 
				+        })
			
 
				+    }
			
 
				+});
			
 
				+App.page('layout',function(){
			
 
				+    this.init = function(){
			
 
				+        $('#layout_header_ctrl').on('change',function(event,el){
			
 
				+            J.alert('提示','你点了'+$(el).text());
			
 
				+        })
			
 
				+        $('#layout-btn-getmore').tap(function(){
			
 
				+            J.popup({
			
 
				+                html: '<div style="height: 100px;line-height: 100px;font-size: 20px;font-weight: 600;text-align: center;">这里展示更多功能</div>',
			
 
				+                pos : 'bottom-second',
			
 
				+                showCloseBtn : false
			
 
				+            });
			
 
				+        })
			
 
				+    }
			
 
				+});
			
 
				+App.page('popup',function(){
			
 
				+    this.init = function(){
			
 
				+        $('#btn_alert').tap(function(){
			
 
				+            J.alert('提示','这是一个Alert');
			
 
				+        })
			
 
				+        $('#btn_confirm').tap(function(){
			
 
				+            J.confirm('提示','这是一个Confirm！',function(){J.showToast('你选择了“确定”')},function(){J.showToast('你选择了“取消”')});
			
 
				+        })
			
 
				+        $('#btn_loading').tap(function(){
			
 
				+            J.showMask();
			
 
				+        })
			
 
				+        $('#btn_center').tap(function(){
			
 
				+            J.popup({
			
 
				+                html: '<div style="height: 100px;text-align: center;font-size: 20px;font-weight: 600;margin-top: 10px;color:#E74C3C ">随意设计你的弹出框吧</div>',
			
 
				+                pos : 'center'
			
 
				+            })
			
 
				+        })
			
 
				+        $('#btn_from_tpl').tap(function(){
			
 
				+            J.popup({
			
 
				+                tplId : 'tpl_popup_login',
			
 
				+                pos : 'center'
			
 
				+            })
			
 
				+        })
			
 
				+        $('#btn_t_top').tap(function(){
			
 
				+            J.popup({
			
 
				+                html: '这是一个来自顶部的弹出框',
			
 
				+                pos : 'top',
			
 
				+                showCloseBtn : false
			
 
				+            })
			
 
				+        })
			
 
				+        $('#btn_t_ts').tap(function(){
			
 
				+            J.popup({
			
 
				+                html: '这是一个在header之下的弹出框',
			
 
				+                pos : 'top-second',
			
 
				+                showCloseBtn : false
			
 
				+            })
			
 
				+        })
			
 
				+        $('#btn_t_bottom').tap(function(){
			
 
				+            J.popup({
			
 
				+                html: '这是一个来自底部弹出框',
			
 
				+                pos : 'bottom',
			
 
				+                showCloseBtn : false
			
 
				+            })
			
 
				+        })
			
 
				+        $('#btn_t_bs').tap(function(){
			
 
				+            J.popup({
			
 
				+                html: '这是一个在footer之上的弹出框',
			
 
				+                pos : 'bottom-second',
			
 
				+                showCloseBtn : false
			
 
				+            })
			
 
				+        })
			
 
				+        $('#btn_popover').tap(function(){
			
 
				+            J.popover('<ul class="list"><li style="color:#000;">Hello Jingle</li><li style="color:#000;">你好，Jingle</li></ul>',{top:'50px',left:'10%',right:'10%'},'top');
			
 
				+        });
			
 
				+        $('#btn_actionsheet').tap(function(){
			
 
				+            J.Popup.actionsheet([{
			
 
				+                text : '告诉QQ好友',
			
 
				+                handler : function(){
			
 
				+                    J.showToast('告诉QQ好友！');
			
 
				+                }
			
 
				+            },{
			
 
				+                text : '告诉MSN好友',
			
 
				+                handler : function(){
			
 
				+                    J.showToast('告诉MSN好友！');
			
 
				+                }
			
 
				+            }
			
 
				+            ]);
			
 
				+        });
			
 
				+    }
			
 
				+});
			
 
				+App.page('slider',function(){
			
 
				+    this.init = function(){
			
 
				+        var slider;
			
 
				+        $('#slider_section article').on('articleshow',function(){
			
 
				+            slider = new J.Slider({
			
 
				+                selector : '#slider_test',
			
 
				+                onBeforeSlide : function(){
			
 
				+                    return true;
			
 
				+                },
			
 
				+                onAfterSlide : function(i){
			
 
				+                    //alert(i);
			
 
				+                }
			
 
				+            });
			
 
				+        });
			
 
				+        $('#slider_prev').tap(function(){slider.prev()});
			
 
				+        $('#slider_next').tap(function(){slider.next()});
			
 
				+    }
			
 
				+});
			
 
				+App.page('toast',function(){
			
 
				+    this.init = function(){
			
 
				+        $('#btn_t_default').tap(function(){
			
 
				+            J.showToast('这是默认的Toast,默认3s后小时');
			
 
				+        })
			
 
				+        $('#btn_t_success').tap(function(){
			
 
				+            J.showToast('恭喜，success,5s后消失','success',5000);
			
 
				+        })
			
 
				+        $('#btn_t_error').tap(function(){
			
 
				+            J.showToast('抱歉，error','error');
			
 
				+        })
			
 
				+        $('#btn_t_info').tap(function(){
			
 
				+            J.showToast('提示，info','info');
			
 
				+        })
			
 
				+        $('#btn_t_top').tap(function(){
			
 
				+            J.showToast('更新了50条数据','toast top');
			
 
				+        })
			
 
				+    }
			
 
				+});
			
 
				+App.page('chart_line',function(){
			
 
				+    var line,$chart;
			
 
				+    this.init = function(){
			
 
				+        //重新设置canvas大小
			
 
				+        $chart = $('#line_canvas');
			
 
				+        var wh = App.calcChartOffset();
			
 
				+        $chart.attr('width',wh.width).attr('height',wh.height-30);
			
 
				+
			
 
				+        renderLine();
			
 
				+        $('#changeLineType').on('change',function(e,el){
			
 
				+            updateChart(el.data('type'));
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    function renderLine(){
			
 
				+        var data = {
			
 
				+            labels : ["一月","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月'],
			
 
				+            datasets : [
			
 
				+                {
			
 
				+                    name : 'A产品',
			
 
				+                    color : "#72caed",
			
 
				+                    pointColor : "#95A5A6",
			
 
				+                    pointBorderColor : "#fff",
			
 
				+                    data : [65,59,90,81,56,55,40,20,13,20,11,60]
			
 
				+                },
			
 
				+                {
			
 
				+                    name : 'B产品',
			
 
				+                    color : "#a6d854",
			
 
				+                    pointColor : "#95A5A6",
			
 
				+                    pointBorderColor : "#fff",
			
 
				+                    data : [28,48,40,19,96,27,100,40,40,70,11,89]
			
 
				+                }
			
 
				+            ]
			
 
				+        }
			
 
				+        line = new JChart.Line(data,{
			
 
				+            id : 'line_canvas',
			
 
				+            smooth : false,
			
 
				+            fill : false
			
 
				+        });
			
 
				+        line.on('tap.point',function(d,i,j){
			
 
				+            J.alert(data.labels[i],d);
			
 
				+        });
			
 
				+        line.draw();
			
 
				+    }
			
 
				+    function updateChart(type){
			
 
				+        if(type == 'smooth'){
			
 
				+            line.refresh({
			
 
				+                smooth : true,
			
 
				+                fill : false
			
 
				+            });
			
 
				+        }else if(type == 'area'){
			
 
				+            line.refresh({
			
 
				+                smooth : true,
			
 
				+                fill : true
			
 
				+            });
			
 
				+        }else{
			
 
				+            line.refresh({
			
 
				+                smooth : false,
			
 
				+                fill : false
			
 
				+            });
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+});
			
 
				+App.page('chart_bar',function(){
			
 
				+    var $chart;
			
 
				+    this.init = function(){
			
 
				+        //重新设置canvas大小
			
 
				+        $chart = $('#bar_canvas');
			
 
				+        var wh = App.calcChartOffset();
			
 
				+        $chart.attr('width',wh.width).attr('height',wh.height);
			
 
				+
			
 
				+        var data = {
			
 
				+            labels : ["一月","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月'],
			
 
				+            datasets : [
			
 
				+                {
			
 
				+                    name : 'A产品',
			
 
				+                    color : "#72caed",
			
 
				+                    pointColor : "#95A5A6",
			
 
				+                    pointBorderColor : "#fff",
			
 
				+                    data : [65,59,90,81,56,55,40,20,13,20,11,60]
			
 
				+                },
			
 
				+                {
			
 
				+                    name : 'B产品',
			
 
				+                    color : "#a6d854",
			
 
				+                    pointColor : "#95A5A6",
			
 
				+                    pointBorderColor : "#fff",
			
 
				+                    data : [28,48,40,19,96,27,100,40,40,70,11,89]
			
 
				+                }
			
 
				+            ]
			
 
				+        }
			
 
				+        var bar = new JChart.Bar(data,{
			
 
				+            id : 'bar_canvas'
			
 
				+        });
			
 
				+        bar.on('tap.bar',function(d,i,j){
			
 
				+            J.alert(data.labels[i],d);
			
 
				+        });
			
 
				+        bar.on('longTap.bar',function(d,i,j){
			
 
				+            J.alert('提示',d+' = 按住750ms会出现此提示');
			
 
				+        });
			
 
				+        bar.draw();
			
 
				+    }
			
 
				+});
			
 
				+App.page('chart_pie',function(){
			
 
				+    var pie,$chart;
			
 
				+    this.init = function(){
			
 
				+        //重新设置canvas大小
			
 
				+        $chart = $('#pie_canvas');
			
 
				+        var wh = App.calcChartOffset();
			
 
				+        $chart.attr('width',wh.width).attr('height',wh.height-100);
			
 
				+        renderPie();
			
 
				+        $('#changePieType').on('change',function(e,el){
			
 
				+            updateChart(el.data('type'));
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    function renderPie(){
			
 
				+        var pie_data = [
			
 
				+            {
			
 
				+                name : '直接访问',
			
 
				+                value: 335,
			
 
				+                color:"#F38630"
			
 
				+            },{
			
 
				+                name : '联盟广告',
			
 
				+                value : 234,
			
 
				+                color : "#E0E4CC"
			
 
				+            },{
			
 
				+                name : '视频广告',
			
 
				+                value : 135,
			
 
				+                color : "#72caed"
			
 
				+            },{
			
 
				+                name : '搜索引擎',
			
 
				+                value : 1400,
			
 
				+                color : "#a6d854"
			
 
				+            }
			
 
				+        ];
			
 
				+        pie = new JChart.Pie(pie_data,{
			
 
				+            id : 'pie_canvas',
			
 
				+            clickType : 'rotate'
			
 
				+        });
			
 
				+        pie.on('rotate',function(d,i,j){
			
 
				+            $('#pie_segment_info').html(d.name + '    '+ d.value).show();
			
 
				+        });
			
 
				+        pie.draw();
			
 
				+    }
			
 
				+    function updateChart(type){
			
 
				+        $('#pie_segment_info').hide();
			
 
				+        if(type == 'pie'){
			
 
				+            pie.refresh({
			
 
				+                isDount : false
			
 
				+            });
			
 
				+        }else if(type == 'dount'){
			
 
				+            pie.refresh({
			
 
				+                isDount : true,
			
 
				+                dountText : '访问来源'
			
 
				+            });
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+});
			
 
				+App.page('chart_drag',function(){
			
 
				+    var $lineChart,$barChart;
			
 
				+    this.init = function(){
			
 
				+        //重新设置canvas大小
			
 
				+        $lineChart = $('#chart_drag_line_canvas');
			
 
				+        $barChart = $('#chart_drag_bar_canvas');
			
 
				+        var wh = App.calcChartOffset();
			
 
				+        $lineChart.attr('width',wh.width).attr('height',wh.height-30);
			
 
				+        $barChart.attr('width',wh.width).attr('height',wh.height-30);
			
 
				+        var data = {
			
 
				+            labels : ["2012","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月','2013',"二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月','2014','一月','二月'],
			
 
				+            datasets : [
			
 
				+                {
			
 
				+                    name : 'A产品',
			
 
				+                    color : "#72caed",
			
 
				+                    pointColor : "#95A5A6",
			
 
				+                    pointBorderColor : "#fff",
			
 
				+                    data : [65,59,90,81,56,55,40,20,13,20,11,60,65,59,90,81,56,55,40,20,11,20,10,60,11,60,65]
			
 
				+                },
			
 
				+                {
			
 
				+                    name : 'B产品',
			
 
				+                    color : "#a6d854",
			
 
				+                    pointColor : "#95A5A6",
			
 
				+                    pointBorderColor : "#fff",
			
 
				+                    data : [28,48,40,19,96,27,100,40,40,70,11,89,28,48,40,19,96,27,100,40,40,70,10,89,28,48,40]
			
 
				+                }
			
 
				+            ]
			
 
				+        }
			
 
				+        $('#changeDragChartType').on('change',function(e,el){
			
 
				+            renderChart(el.data('type'),data);
			
 
				+        })
			
 
				+        renderChart('line',data);
			
 
				+    }
			
 
				+    var renderChart = function(type,data){
			
 
				+        if(type == 'line'){
			
 
				+            $lineChart.show();
			
 
				+            $barChart.hide();
			
 
				+            new JChart.Line(data,{
			
 
				+                id : 'chart_drag_line_canvas',
			
 
				+                datasetGesture : true,
			
 
				+                datasetOffsetNumber : 10
			
 
				+            }).draw(true);
			
 
				+        }else{
			
 
				+            $lineChart.hide();
			
 
				+            $barChart.show();
			
 
				+            new JChart.Bar(data,{
			
 
				+                id : 'chart_drag_bar_canvas',
			
 
				+                datasetGesture : true,
			
 
				+                datasetOffsetNumber : 10
			
 
				+            }).draw(true);
			
 
				+        }
			
 
				+    }
			
 
				+});
			
 
				+App.page('chart_dynamic',function(){
			
 
				+    var pause = false,$chart;
			
 
				+    var datasets = [[65,59,90,81,56,55,40,20,3,20,10,60],[28,48,40,19,96,27,100,40,40,70,10,89]];
			
 
				+    var data = {
			
 
				+        labels : ["一月","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月'],
			
 
				+        datasets : [
			
 
				+            {
			
 
				+                name : 'A产品',
			
 
				+                color : "#72caed",
			
 
				+                pointColor : "#95A5A6",
			
 
				+                pointBorderColor : "#fff",
			
 
				+                data : datasets[0]
			
 
				+            },
			
 
				+            {
			
 
				+                name : 'B产品',
			
 
				+                color : "#a6d854",
			
 
				+                pointColor : "#95A5A6",
			
 
				+                pointBorderColor : "#fff",
			
 
				+                data : datasets[1]
			
 
				+            }
			
 
				+        ]
			
 
				+    }
			
 
				+
			
 
				+    this.init = function(){
			
 
				+        //重新设置canvas大小
			
 
				+        $chart = $('#dynamic_line_canvas');
			
 
				+        var wh = App.calcChartOffset();
			
 
				+        $chart.attr('width',wh.width).attr('height',wh.height-30);
			
 
				+        var line = new JChart.Line(data,{
			
 
				+            id : 'dynamic_line_canvas'
			
 
				+        });
			
 
				+        line.draw();
			
 
				+        refreshChart(line);
			
 
				+        $('#pause_dynamic_chart').on('tap',function(){
			
 
				+            pause = !pause;
			
 
				+            $(this).text(pause?'继续':'暂停');
			
 
				+        })
			
 
				+    }
			
 
				+
			
 
				+    function refreshChart(chart){
			
 
				+        setTimeout(function(){
			
 
				+            if(!pause){
			
 
				+                datasets[0].shift();
			
 
				+                datasets[0].push(Math.floor(Math.random()*100));
			
 
				+                datasets[1].shift();
			
 
				+                datasets[1].push(Math.floor(Math.random()*100));
			
 
				+                chart.load(data);
			
 
				+            }
			
 
				+            refreshChart(chart);
			
 
				+        },1000);
			
 
				+    }
			
 
				+});
			
 
				+App.page('form',function(){
			
 
				+    this.init = function(){
			
 
				+        alert('init');
			
 
				+        $('#checkbox_1').on('change',function(){
			
 
				+            alert($(this).data('checkbox'));
			
 
				+        })
			
 
				+    }
			
 
				+})*/
			
 
				+$(function(){
			
 
				+    App.run();
			
 
				+})
			
--- a/src/main/webapp/static/jingle/js/lib/JChart.debug.js
+++ b/src/main/webapp/static/jingle/js/lib/JChart.debug.js
--- a/src/main/webapp/static/jingle/js/lib/Jingle.debug.js
+++ b/src/main/webapp/static/jingle/js/lib/Jingle.debug.js
--- a/src/main/webapp/static/jingle/js/lib/barcodescanner.js
+++ b/src/main/webapp/static/jingle/js/lib/barcodescanner.js
@@ -0,0 +1,15 @@
 
				+(function(){
			
 
				+	function BarcodeScanner() {};
			
 
				+
			
 
				+	BarcodeScanner.prototype.scan = function(mode,win,err){
			
 
				+		cordova.exec(win, err, "BarcodeScanner", "scan", [mode]);
			
 
				+	};
			
 
				+
			
 
				+
			
 
				+	if(!window.plugins) {
			
 
				+	    window.plugins = {};
			
 
				+	}
			
 
				+	if (!window.plugins.barcodeScanner) {
			
 
				+	    window.plugins.barcodeScanner = new BarcodeScanner();
			
 
				+	}	
			
 
				+})();
			
--- a/src/main/webapp/static/jingle/js/lib/cordova.js
+++ b/src/main/webapp/static/jingle/js/lib/cordova.js
--- a/src/main/webapp/static/jingle/js/lib/iscroll.js
+++ b/src/main/webapp/static/jingle/js/lib/iscroll.js
--- a/src/main/webapp/static/jingle/js/lib/template.min.js
+++ b/src/main/webapp/static/jingle/js/lib/template.min.js
--- a/src/main/webapp/static/jingle/js/lib/zepto.js
+++ b/src/main/webapp/static/jingle/js/lib/zepto.js
--- a/src/main/webapp/static/jingle/js/lib/zepto.touch2mouse.js
+++ b/src/main/webapp/static/jingle/js/lib/zepto.touch2mouse.js
@@ -0,0 +1,89 @@
 
				+(function ($) {
			
 
				+    /**
			
 
				+     * If no touch events are available map touch events to corresponding mouse events.
			
 
				+     **/
			
 
				+    if(!('ontouchstart' in window)){
			
 
				+        var _fakeCallbacks = {}; // store the faked callbacks so that they can be unbound
			
 
				+        function touch2mouse(context,args){
			
 
				+            var type = args[0],//事件类型
			
 
				+                t = type ,matched = false;
			
 
				+            if ((typeof type) == "object") {
			
 
				+                return args;
			
 
				+            }
			
 
				+            if(type.indexOf('touchstart')>-1){
			
 
				+                matched = true;
			
 
				+                t = t.replace('touchstart','mousedown');
			
 
				+            }else if(t.indexOf('touchend')>-1){
			
 
				+                matched = true;
			
 
				+                t = t.replace('touchend','mouseup');
			
 
				+            }else if(t.indexOf('touchmove')>-1){
			
 
				+                matched = true;
			
 
				+                t = t.replace('touchmove','mousemove');
			
 
				+            }
			
 
				+            if(matched){//匹配到touch事件
			
 
				+                var ci = -1;
			
 
				+                //找出callback，需要更换里面的event对象的属性
			
 
				+                for(var i =1;i<args.length;i++){
			
 
				+                    if(typeof args[i] == 'function'){
			
 
				+                        ci = i;
			
 
				+                        break;
			
 
				+                    }
			
 
				+                }
			
 
				+                args[0] = t;
			
 
				+                if(ci > -1){
			
 
				+                    args[ci] = fakeTouches(type, args[ci] , context);
			
 
				+                }
			
 
				+            }
			
 
				+            return args;
			
 
				+        }
			
 
				+
			
 
				+        function fakeTouches(type, callback, context) {
			
 
				+            // wrap the callback with a function that adds a fake
			
 
				+            // touches property to the event.
			
 
				+            return _fakeCallbacks[callback] = function (event) {
			
 
				+                if(event.liveFired)context = this;//if it is delegate event,change context to target element
			
 
				+                if (event.button) {
			
 
				+                    return false;
			
 
				+                }
			
 
				+                event.touches = [{
			
 
				+                    length: 1,// 1 mouse (finger)
			
 
				+                    clientX: event.clientX,
			
 
				+                    clientY: event.clientY,
			
 
				+                    pageX: event.pageX,
			
 
				+                    pageY: event.pageY,
			
 
				+                    screenX: event.screenX,
			
 
				+                    screenY: event.screenY,
			
 
				+                    target: event.target
			
 
				+                }];
			
 
				+                event.touchType = type;
			
 
				+                return callback.apply(context, [event]);
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        var _trigger = $.fn.trigger;
			
 
				+        $.fn.trigger = function(event, data){
			
 
				+            var args = Array.prototype.slice.call(arguments,0);
			
 
				+            return _trigger.apply(this,touch2mouse(this,args));
			
 
				+        };
			
 
				+        var _triggerHandler = $.fn.triggerHandler;
			
 
				+        $.fn.triggerHandler = function(event, data){
			
 
				+            var args = Array.prototype.slice.call(arguments,0);
			
 
				+            return _triggerHandler.apply(this, touch2mouse(this,args));
			
 
				+        };
			
 
				+        var _on = $.fn.on;
			
 
				+        $.fn.on = function(event, selector, data, callback, one){
			
 
				+            var args = Array.prototype.slice.call(arguments,0);
			
 
				+            return _on.apply(this,touch2mouse(this,args));
			
 
				+        }
			
 
				+        var _off = $.fn.off;
			
 
				+        $.fn.off = function(event, selector, callback){
			
 
				+            var args = [event];
			
 
				+            if(typeof selector == 'string'){
			
 
				+                args.push(selector);
			
 
				+            }
			
 
				+            var result = touch2mouse(this,args).concat([_fakeCallbacks[callback]||callback]);
			
 
				+            delete(_fakeCallbacks[callback]);
			
 
				+            return _off.apply(this,result);
			
 
				+        }
			
 
				+    }
			
 
				+})(Zepto);
			
--- a/src/main/webapp/static/jingle/remote/about_section.html
+++ b/src/main/webapp/static/jingle/remote/about_section.html
@@ -0,0 +1,38 @@
 
				+<section id="about_section" data-transition="flip">
			
 
				+    <header>
			
 
				+        <nav class="left">
			
 
				+            <a href="#"  data-icon="arrow-down-left-2" data-target="back">返回</a>
			
 
				+        </nav>
			
 
				+        <h1 class="title">About Jingle</h1>
			
 
				+    </header>
			
 
				+    <article class="active indented">
			
 
				+        <div style="line-height: 2em;margin-bottom: 20px;">
			
 
				+                Jingle UI是一个基于html5、css3开发轻量级的移动webapp 框架，提供一些基本交互方式，常用的组件(scroll,actionsheet,sidemenu,toggle,push2refresh......)，帮助您更方便的开发移动应用。
			
 
				+        </div>
			
 
				+        <div class="grid">
			
 
				+            <a href="javascript:window.open('https://github.com/shixy/Jingle','_system')"
			
 
				+                class="button col-1">
			
 
				+                在Github上查看源码
			
 
				+            </a>
			
 
				+            <a href="javascript:window.open('https://github.com/shixy/Jingle/zipball/master','_system')"
			
 
				+               class="button col-1" >
			
 
				+                下载源码
			
 
				+            </a>
			
 
				+        </div>
			
 
				+        <ul class="list inset" style="margin: 10px 0;">
			
 
				+            <li data-icon="envelop">
			
 
				+                <a href="mailto:walker.shixy@gmail.com" data-target="link">
			
 
				+                    walker.shixy # gmail.com
			
 
				+                </a>
			
 
				+            </li>
			
 
				+            <li data-icon="sina-weibo">
			
 
				+                <a href="javascript:window.open('http://weibo.com/walkershixy','_system')">
			
 
				+                    @问题石
			
 
				+                </a>
			
 
				+            </li>
			
 
				+            <li data-icon="qq">
			
 
				+                35518781
			
 
				+            </li>
			
 
				+        </ul>
			
 
				+    </article>
			
 
				+</section>
			
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-anim_basic_16x16.gif
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-anim_basic_16x16.gif
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_flat_0_aaaaaa_40x100.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_flat_0_aaaaaa_40x100.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_flat_55_fbec88_40x100.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_flat_55_fbec88_40x100.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_glass_75_d0e5f5_1x400.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_glass_75_d0e5f5_1x400.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_glass_85_dfeffc_1x400.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_glass_85_dfeffc_1x400.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_glass_95_fef1ec_1x400.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_glass_95_fef1ec_1x400.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_inset-hard_100_f5f8f9_1x100.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_inset-hard_100_f5f8f9_1x100.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_inset-hard_100_fcfdfd_1x100.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-bg_inset-hard_100_fcfdfd_1x100.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_217bc0_256x240.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_217bc0_256x240.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_2e83ff_256x240.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_2e83ff_256x240.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_469bdd_256x240.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_469bdd_256x240.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_6da8d5_256x240.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_6da8d5_256x240.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_cd0a0a_256x240.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_cd0a0a_256x240.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_d8e7f3_256x240.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_d8e7f3_256x240.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_f9bd01_256x240.png
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/images/ui-icons_f9bd01_256x240.png
--- a/src/main/webapp/static/jqGrid/4.6/css/default/jquery-ui-1.8.2.custom.css
+++ b/src/main/webapp/static/jqGrid/4.6/css/default/jquery-ui-1.8.2.custom.css