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') }); });
四、显示结果
