ITPub博客

首页 > 大数据 > Hadoop > 怎样自己动手开发JQuery插件

怎样自己动手开发JQuery插件

Hadoop 作者:xunvxia 时间:2013-02-01 15:10:00 0 删除 编辑

JQuery从诞生之初就秉性着“One less, Do more”(用最少的代码表达最丰富的内容)思想,充分合理的使用JQuery可以实现丰富的网页效果,同时从代码重用性的角度出去,设计各种各样满足不同需求的JQuery插件已是形势所需要,通过JQuery插件,我们可以随心所欲的使用JQuery插件到网页的任何部分,实现任意的效果。说到这里,大家一定心动了吧,下面就跟随小编一起来探究一下JQuery插件的开发方法。

工具/原料

  • Dreamweaver 8

  • 脚本运行库JQuery

方法/步骤

  1. 1

    下载相关的脚步运行库:由于采用JQuery脚本来实现网页的动态效果,因此需要在网上搜索并下载相应的JQuery运动库,下载完成后进行解压缩,将解压后的文件拷贝到网站的根目录下。

  2. 2

    创建内容页面:为了更好的展示JQuery实现的效果,在此小编特意制作了一个导航菜单。该导航菜单包括四个子菜单, 分别是“主页”、  “博客推荐”、  “讨论专区”、  “分享经验”以及“热点搜索”。具体代码和内容如下:

  3. 3

    接下来需要对该网页进入美化:在当前目录下新建一名称为"MyStyle.css"的层叠样式表文件,利用该文件实现网页的美化。当然利用CSS进行美化操作的另一目地是实现网页的内容与其表现形式的分离,这样就可以使我们专注于网页的美化,实现了更高效的分工合作理念。当前重要利用CSS实现了将网页内容字体颜色设置为红色,添加了列表样式,样式表文件的源码及对应的网页效果如图所示。

  4. 4

    创建JQuery插件:首先在网站的根目录下新建一名称为“MyJQueryAddIn.js”文件,然后在文件中输入如图所示内容。在此特别需要说明的一点是JQuery插件的基本结构是:(function($){代码})(jquery);本插件的重要功能是实现当鼠标停留在导航栏上时,对应菜单选项向右移动60像素,当鼠标离开时又恢复原样。JQuery插件对应内容如图所示:

  5. 5

    最后在网页文件“index.html”中添加对“MyStyle.css”和”MyJQueryAddIn.js“文件的引用:

    <!--引入JQuery运行库-->
     

    设计完成后,网站根目录结构及页面效果如果所示。

  6. 6

    调试运行: 将鼠标停留在导航栏上时,观看对应菜单选项向右移动的情况。当鼠标离开时再观察菜单恢复原样情况。以下为效果展示:

    END

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/21778738/viewspace-1111995/,如需转载,请注明出处,否则将追究法律责任。

上一篇: 没有了~
下一篇: 没有了~
请登录后发表评论 登录
全部评论

注册时间:2009-05-30