学习从实践开始之jQuery插件开发 菜单插件开发

虽然这不是多么高深的技术,但对于新手来说还是颇有难度。如果你是一个新手,我希望你能从本文中学到东西;如果你是高手,我希望你能留下你宝贵的意见和建议

一.要做什么插件?
  我想要实现一个可以在网站或WEB应用系统中使用,可以灵活的定制外观、简单、易于使用、方便扩展、稳定的菜单插件。它可以被用在网站主导航条上,亦可以用在管理后台。

二.想要的效果是什么?
  平时菜单处于收起状态,当鼠标移入显示其下级菜单,以此类推;可以方便的使用html标签设置菜单的结构,也可以使用数组动态生成。

三.设计一下功能

学习从实践开始之jQuery插件开发 菜单插件开发

对图片的说明
菜单项默认的状态。
拥有下级菜单且鼠标移入时的状态。
间隔(起到分组的效果)
拥有下级菜单,鼠标未移入时的状态。
竖排拥有下级菜单且鼠标移入时的状态。
获得焦点时的状态。
其他功能
菜单所有状态的样式均通过CSS控制,可以根据需要灵活修改。
通过HTML和javascript两种方式生成菜单。
为菜单项指定点击回调函数和跳转地址(当指定回调函数时,不设置URL地址,而是将URL地址传入回调函数)。
四.如何实现功能?
   1.使用CSS样式控制外观。
     *为了避免CSS命名冲突,我们需要为插件确定一个名字空间,其下所有样式都在该命名空间下。
  2.菜单标签的选择
    *一般来说实现菜单的标签多数会选择列表标签<ul><li></li></ul>来实现,我们也不例外。
    菜单项:<li><a href="https://www.jb51.net/链接地址"><span>菜单项显示名称</span></a></li>
  3.控制UL标签的显示方式
    *使用CSS去掉符号和缩进
    *使用CSS横向排列,横向排列有两种方法:
      (1).用的比较多的是浮动排列(float:left;);但是这种方式有个最大的问题是会破坏页面结构,我不是很喜欢这种方式。
      (2).使用内联(display:inline-block)的方式;目前已知的问题是低版本浏览器可能支持的不太好,这个问题网络上有专门的文章讨论,这里我就不再赘述了。
    *当我在使用这种方式是出现了一个小问题,就是块与块之间有大概10px的空隙。我删除掉HTML代码里标签之间的空隙(换行)后,这些空隙消失了;这虽然可以解决问题,但是缺破坏了代码的结构,可读性差;如果是动态生成的还能接受。所以我想到了另一种解决办法,那就是设置每一个块(<li>标签)的的左边距为-10px;同时设置<ul>的左内距为10px,perfect!!!
五.浏览器兼容
  未在IE6和IE7下进行相关测试。
六.功能实现和调用
样式控制

复制代码 代码如下:


View Code
/*为了避免命名冲突,我们将该插件所有样式都放在该类之下*/
.ctcx-menu
{
    font-size:14px;
}
.ctcx-menu ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
/*设置偏移量*/
.ctcx-menu ul.offset
{
    position:relative;
    top:-32px;
    left:100px;
}
.ctcx-menu ul li /*菜单项样式*/
{
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    vertical-align:top;
    margin:0;
    padding:0;
}
/*菜单项样式*/
.ctcx-menu a
{
    display:block;
    height:100%;
    border:1px solid #999;
    background-color:#FFF;
    text-decoration:none;
    color:#000;
}
.ctcx-menu a:hover
{
    background-color:#999;
    color:#FFF;
}
.ctcx-menu a:active{}
/*横向菜单*/
.ctcx-menu .horizontal
{
    padding-left:7px;
}
.ctcx-menu .horizontal li
{
    display:inline-block;
    margin-left:-7px;
}
.ctcx-menu .horizontal li.item-has-children > a /*拥有子菜单的菜单项样式*/
{
}
.ctcx-menu .horizontal li.spacing /*横向间隔*/
{
    height:30px;
    width:10px;
    background-color:#000;
}
/*竖向菜单*/
.ctcx-menu .vertical
{
}
.ctcx-menu .vertical li
{
    margin-left:0px;
}
.ctcx-menu .vertical li.item-has-children > a /*拥有子菜单的菜单项样式*/
{
}
.ctcx-menu .vertical li.spacing /*纵向间隔*/
{
    height:10px;
    width:100px;
    background-color:#000;
}


插件代码

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjzwz.html