一、使用的插件
一个折叠的功能导航，由Akordeon插件实现。Nanoscroller插件与Tagit插件主要用于美化页面。
这里只是测试，其实还可以综合使用其它的插件，例如将Akordeon插件换成菜单插件，而且也可以使用jquery ui，之所以没有使用jquery ui，是因为修改jquery ui 的style对我来说比较复杂，所以没用。还有用户添加分类信息时如果需要弹出一个层，可以使用Lightbox_me插件实现。如用户输入的内容比较多，浏览器可能会有滚动条显示，我们可以使用scrolltofixed插件固定”导航”。因为在以前的文章中测试过Lightbox_me和scrolltofixed，所以这里没有使用。scrolltofixed和Lightbox_me的使用可以看下面的文章：
jQuery插件综合应用(一)注册
jQuery插件综合应用(二)文字为主的页面
介绍Tagit插件的文章可以看 网站开发常用jQuery插件总结(八)标签编辑插件Tagit
介绍Akordeon插件的文章可以看 网站开发常用jQuery插件总结(11)折叠插件Akordeon
二、本次测试解决的问题
1.jquery插件的综合应用，这是本次测试最主要的目的。涉及到的jquery插件有：
1)Akordeon插件：用来实现功能导航，如下图
2)Tagit插件：对输入的关键词进行标签显示。
3)Nanoscroller插件：对分类目录使用滚动条。主要因为如果分类目录太多，相关的div就会过长，使用Nanoscroller插件可以实现在固定高度的同时滚动显示分类目录。
2.页面的样式。如页面的颜色搭配、布局、字体大小等。我始终不知道颜色该如何搭配，本文测试的方案也是从网上寻找到的，大体模仿了一下。页面样式主要分为左右两栏，设置了背景色、字体格式和最大宽度等。
3.button,text,radio,checkbox样式。
1)button样式。在添加button样式时，使用的是一个国外网站自动生成的样式，网址：http://www.bestcssbuttongenerator.com/，在这个网站上，我们可以动态的调节button的外观，然后复制自动生成的css就可以用了。我在使用时，去掉了默认字体。
2)text样式。Text的样式以前就做过，所以使用的以前的。
3)radio和checkbox样式。Radio和checkbox的样式使用到css3,用图片来替换。Ie8下显示不正常。Ie9,chrome,firefox显示正常。如下：
Checkbox
Radio
4.jquery插件样式。
jquery插件拿来就可以用，但是需要配合网站的颜色搭配。所以在测试中对Akordeon插件, Nanoscroller插件的样式做了修改。Tagit插件使用了默认样式。
三、代码实现
1.引用的文件。因为使用了jquery插件，所以需要引用插件本身需要的文件。如下
<!--必须的文件-->
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<!--akordeon插件使用的js与css-->
<script src="jquery.akordeon.js" type="text/javascript"></script>
<link href="jquery.akordeon.css" rel="stylesheet" type="text/css" />
<!--滚动条nanoscroller使用的文件-->
<script src="jquery.nanoscroller.js"></script>
<link rel="stylesheet" href="nanoscroller.css">
<!--tagit使用的文件，因为tagit使用了jquery ui,所以需要引用jquery ui 文件-->
<script src="jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">
<!--radio,checkbox样式文件-->
<link href="stylesheet-image-based.css" rel="stylesheet" type="text/css" />
<!--text,button样式文件-->
<link href="input-style.css" rel="stylesheet" type="text/css" />
2.使用的css
1).页面布局。在这里就不贴出来了，有兴趣的可以看下面的“测试页面”
2).button,text,radio,checkbox
button的实现可以看这个网站：http://www.bestcssbuttongenerator.com/
text,textarea 样式
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border:1px solid #dfdfdf;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
radio和checkbox样式
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
width : 28px;
margin :;
padding :;
opacity :;
} input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -28px;
padding-left : 28px;
background : url('checks.png') no-repeat 0 0;
line-height : 24px;
} input[type=checkbox]:not(old):checked + label{
background-position : 0 -24px;
} input[type=radio]:not(old):checked + label{
background-position : 0 -48px;
}
3).jquery插件样式
滚动条Nanoscroller插件的样式
.nano {
width: 100%;
height: 200px;
}
.nano .pane {
background: #42433d;
width: 8px;
right: 1px;
margin: 5px;
display:inherit;
}
.nano .pane .slider {
background: #60a123;
display:inherit;
}
4).Akordeon插件，主要修改了jquery.akordeon.css。代码有点多，在这里不贴出来了，有兴趣的可以看下面的“测试页面”
3.Js代码。jquery插件使用非常简单，只需要几句话就可以实现我们需要的功能
$(function(){
$('#buttons').akordeon({buttons: false});
$("#dirbox").nanoScroller({alwaysVisible: true,disableResize: true,alwaysVisible: true});
$('#ulkeywords').tagit({
singleField: true,
singleFieldNode: $('#hkeywords')
});
});
四、显示结果
