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  : 0;

  padding : 0;

  opacity : 0;

}



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