计算机应用技术jQuery插件应用

第11章jQuery插件应用掌握jQuery插件的使用学会响应式网格瀑布流布局插件了解插件编写学习目标010304学会使用固定侧边栏插件02本章任务任务1：使用ss-Menu固定侧边栏插件任务2：PinterestGrid实现响应式网格瀑布流布局任务3：编写表格隔行变色插件jQuery插件（1）下载插件jQuery有大量第三方插件，可以从各大网站下载，也可以从jQuery官网下载网址：（2）使用方法插件实际上也是一个JS文件所有jQuery插件的使用方法均为：先引入jQuery，再引入插件任务1使用ss-Menu固定侧边栏插件任务描述使用ss-Menu固定侧边栏插件实现侧边栏效果，如图所示，选择颜色能更换侧边栏背景色，单击重置按钮，可以重置背景色。演示任务1：使用ss-Menu固定侧边栏插件任务分析侧边栏导航通常位于左侧，它位于F式布局的最左侧，作为信息主干，也符合用户的浏览习惯。在项目中要使用ss-Menu固定侧边栏插件，需要引入三个文件，一个jQuery库，一个ss-menu插件js文件和一个ss-menu的CSS文件，操作步骤如下：1.完成HTML结构设计，设计好侧边栏结构。2.在页面引入ss-menu插件的CSS文件。3.在页面引入jQuery框架和ss-menu插件文件，并应用下载ss-menu插件，在页面引入CSS文件和ss-menu插件文件ss-menu插件简介ssMenu是一款jQuery固定侧边栏插件。ssMenu侧边栏插件使用简单，内置多种颜色主题，也可以自定义侧边栏菜单的颜色，非常实用。ssMenu插件下载地址为：/CodeHimBlog/jquery.ssMenu任务实现关键代码（1）引入jquery核心库和ssMenu插件库<scriptsrc="js/jquery-1.12.4..js"type="text/javascript"></script><scriptsrc="js/jquery.ss.menu.js"></script>（2）添加样式表文件<linkrel="stylesheet"href="css/ss-menu.css">在案例中，使用了FontAwesome提供的矢量图标。在使用FontAwesome前已经将所需字体拷贝到fonts文件夹中，所需样式font-awesome.min.css拷贝到css文件夹中<linkrel="stylesheet"type="text/css"href="css/font-awesome.min.css"/>任务实现关键代码（3）设计HTML结构代码省略（4）使用ssMenu插件实现侧边栏效果$(document).ready(function(){ $(".ss-menu").ssMenu(); });任务实现关键代码（5）设置侧边栏不同背景色varssMenu=$(".ss-menu");vartheme=$(".theme-picker").find("span");$(theme).click(function(y){y=$(this).attr("class");$(ssMenu).removeClass().addClass("ss-menu"+y);});$(".set-default").click(function(){$(ssMenu).removeClass().addClass("ss-menudefault");});练一练使用layer插件实现多张图片同时上传效果，最多只允许上传6张图片，如果图片数量超出6张，则使用该插件弹击提示信息，单击“删除”按钮可以将上传图片删除，如下图所示效果。练习任务2PinterestGrid实现响应式网格瀑布流布局任务描述在网页中常常能看到瀑布流图片网页特效，本任务使用PinterestGrid插件实现响应式网格瀑布流布局，如图所示。演示任务2：PinterestGrid实现响应式网格瀑布流布局任务分析本案例使用PinterestGrid插件实现响应式网格瀑布流布局1.下载PinterestGrid插件2.需要引入三个文件：一个jQuery框架文件一个pinterest_grid插件页面添加瀑布流布局的CSS样式文件。PinterestGrid插件简介Pinterest采用的是瀑布流的形式展现图片内容，无需用户翻页，新的图片不断自动加载在页面底端，让用户不断的发现新的图片。PinterestGrid是一款仿Pinterest网站的响应式网格瀑布流布局jQuery插件。该瀑布流插件可以随父容器的大小自动调节网格布局，并且支持IE8+的IE浏览器。PinterestGrid参数no_columns：网格布局一行的列数。默认值为一行3个网格。padding_x：网格在X轴方向的padding值。默认值为10像素。padding_y：网格在Y轴方向的padding值。默认值为10像素。margin_bottom：网格底部的margin值。默认值为50像素。single_column_breakpoint：指定在视口多大时一行只显示一个网格。任务实现关键代码（1）引入jQuery和pinterest_grid.js文件<scriptsrc=“js/jquery-1.12.4.js”></script><scriptsrc="js/pinterest_grid.js"></script>（2）设计HTML结构代码省略任务实现关键代码（3）为瀑布流布局添加样式<linkrel="stylesheet"type="text/css"href="css/pinterestgrid.css"/>（4）初始化插件$("#gallery-wrapper").pinterest_grid({ no_columns:4, padding_x:10, padding_y:10, margin_bottom:50, single_column_breakpoint:700});练一练使用Validate插件和supersized插件实现适应手机的表单验证和背景切换效果，如下图所示。练习任务3编写表格隔行变色插件任务描述编写表格隔行变色插件，并应用插件实现表格隔行变色，如图所示。演示任务3：编写表格隔行变色插件任务分析使用自定义的插件实现表格隔行变色1.建立表格2.引入jQuery库文件3.编写插件4.应用插件插件的种类封装对象方法的插件封装全局函数的插件选择器插件jQuery插件的机制jQuery提供了两个用于扩展jQuery功能方法jQuery.fn.extend()方法jQuery.extend()方法命名空间我们习惯将一些方法封装到另一个自定义的命名空间。jQuery.myPlugin={ foo:function(){ alert('Thisisatest.Thisisonlyatest.'); }, bar:function(param){ alert('Thisfunctiontakesaparameter,whichis"'+param+'".'); }};采用命名空间的函数仍然是全局函数，调用时采用的方法：

$.myPlugin.foo();$.myPlugin.bar('baz');任务实现关键代码$.fn.extend({ "alterBgColor":function(options){ //设置默认值 options=$.extend({ odd:"odd", /*偶数行样式*/ even:"even",/*奇数行样式*/ selected:"selected"/*选中行样式*/ },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $('tbody>tr',this).click(function(){ //判断当前是否选中任务实现关键代码varhasSelected=$(this).hasClass(options.selected);//如果选中，则移出selected类，否则就加上selected类 $(this)[hasSelected?"removeClass":"addClass"](options.selected)//查找内部的checkbox,设置对应的属性。 find(':checkbox').attr('checked',!hasSelected);}); //如果单选框默认情况下是选择的，则高色. $('