jQuery插件综合应用(三)发布文章页面

一、使用的插件

一个折叠的功能导航，由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')
    });
});

四、显示结果

演示地址：http://1100w.com/ref/newarticle/index.html