jQuery-gcxSpringside 插件使用文档

jQuery-gcxSpringside  侧边栏综合集成插件

插件描述：

侧边栏模块插件，主要集成选项卡内容展示，手风琴下拉菜单，导航栏模块展示，自动化生成内容等功能，还具备换肤，大小调节，自定义动画速度模式，窗口变换等个性化设置。

下面是关于 jQuery-gcxSpringside 的使用说明：

一、使用参数部分                                

size: '400'                                                           侧边栏大小，单位：px

transNum: '400'                                                 水平方向最小窗口（侧边栏转换为简化模式）         
minWin: 400,                                                      垂直方向最小窗口（侧边栏转换为简化模式）
fastAdjust: 1                                                       动画速度调整值，数值越小，速度越快
content: '#bg'                                                     网页内容部分总标签（即body下的第一级子标签），建议整体内容部份为侧边栏的兄弟标签

skin: 'initskin'                                                      皮肤

本插件自带以下皮肤：

initskin（默认），chineseStyle（中国风），greenleaf（绿意），pangold（淘金），sweetgirl（甜心少女）

配置示例代码如下：

/*=================   Plug configure   ====================*/$( '#tabpanel' ).gcxSpringside(defaults = {skin: 'initskin',size: '400',transNum: '400',minWin: 400,fastAdjust: 1,content: '#bg'});

二、HTML部分：

总父级标签：                          id：tabpanel

左侧列表标签：                       class：tablist

左侧列表行为标签：                class：tablist          

右侧菜单标签：                       class：tabmenu

右侧子菜单标签：                    class：site_tree

关闭按钮标签：                       class：tabclose

示例代码如下：

<div id="tabpanel"><div class="tabclose"><i class="animate250 iconfont icon-close"></i></div><div class="tablist"><ul><li><a id="tab_menu" href="#"><i class="iconfont icon-all1"></i>MENU</a></li><li><a href="#"><i class="iconfont icon-search"></i>SEARCH</a></li><li><a href="#"><i class="iconfont icon-text1"></i>NEWS & EVENTS</a></li></ul></div><div class="tabactions"><ul><li>APPLY</li><li>VISIT</li><li>SEE PROGRAMS</li></ul></div><div class="tabmenu"><div class="site_tree"><ul class="siteAll"><li class="sitelevel"><div class="droptit">About Us</div><a class="dropopen" href="#"><i class="iconfont icon-jia2"></i></a><ul class="dropmenu"><li><a href="#">University Leadership</a></li><li><a href="#">History & Mission</a></li><li><a href="#">Notable Alumni</a></li><li><a href="#">Hopkins in the Community</a></li><li><a href="#">Hopkins Around the World</a></li><li style="border: none"><a href="#">News from Johns Hopkins</a></li></ul></li><li class="sitelevel"><div class="droptit">Academics</div><a class="dropopen" href="#"><i class="iconfont icon-jia2"></i></a><ul class="dropmenu"><li><a href="#">Undergraduate Studies</a></li><li><a href="#">Graduate Studies</a></li><li><a href="#">Online Studies</a></li><li><a href="#">Part-Time & Non-Degree Programs</a></li><li><a href="#">Summer Programs</a></li><li style="border: none"><a href="#">Academic Calendars</a></li></ul></li></ul><ul class="tab_links"><li><a href="#">Maps & Directions</a></li></ul></div><div class="site_tree"><div class="tabsearch"><input class="tabipt" type="text" autofocus="autofocus"><i class="iconfont icon-wrong searchempty animate250"></i><button class="tabsub animate250" type="submit"><i class="iconfont icon-search"></i> SEARCH</button></div><h4 class="sidetit">Common Searches</h4></div><div class="site_tree"><div class="newsimg" style=""></div><h4 class="sidetit">Recent News</h4><h4 class="sidetit">Upcoming Events</h4></div></div></div>

其中搜索模块和行为模块可以需自行增删，下拉菜单，以及整体框架，请严格按照示例标签书写，若要变动，可再脚本中修改变量。

三、css部分

引入css即可

 <link href="dist/css/iconfont.min.css" rel="stylesheet"> <link rel="stylesheet" href="dist/css/gcxSpringsideStyle.min.css">

其中iconfont 为字体图标css

四、Js部分

直接引入脚本即可：

<script src="dist/js/jquery-1_8_3.min.js"></script><script src="dist/js/merge/jQuery-easing.min.js"></script><script src="dist/js/merge/jQuery-color.min.js"></script><script src="dist/js/gcxSpringside-1_1_0.min.js"></script>

其中 easing和color文件为脚本特定动画依赖

本插件只有一个公共拓展方法，用来给使用者ajax生成相应内容

/*** Expanding public methods （ ajax Create menu content ）* @param opts into object opts*/$.fn.gcxSpringside.gildthelily = function( opts ){}

在里面用ajax将你的要生成的内容生成到相应的子菜单目录中去。

五、展示

附上插件下载地址：

百度云链接:       链接: https://pan.baidu.com/s/1c3ZjSq     密码: dxky