計(jì)算機(jī)應(yīng)用技術(shù)jQuery插件應(yīng)用

第11章jQuery插件應(yīng)用掌握jQuery插件的使用學(xué)會(huì)響應(yīng)式網(wǎng)格瀑布流布局插件了解插件編寫學(xué)習(xí)目標(biāo)010304學(xué)會(huì)使用固定側(cè)邊欄插件02本章任務(wù)任務(wù)1：使用ss-Menu固定側(cè)邊欄插件任務(wù)2：PinterestGrid實(shí)現(xiàn)響應(yīng)式網(wǎng)格瀑布流布局任務(wù)3：編寫表格隔行變色插件jQuery插件（1）下載插件jQuery有大量第三方插件，可以從各大網(wǎng)站下載，也可以從jQuery官網(wǎng)下載網(wǎng)址：（2）使用方法插件實(shí)際上也是一個(gè)JS文件所有jQuery插件的使用方法均為：先引入jQuery，再引入插件任務(wù)1使用ss-Menu固定側(cè)邊欄插件任務(wù)描述使用ss-Menu固定側(cè)邊欄插件實(shí)現(xiàn)側(cè)邊欄效果，如圖所示，選擇顏色能更換側(cè)邊欄背景色，單擊重置按鈕，可以重置背景色。演示任務(wù)1：使用ss-Menu固定側(cè)邊欄插件任務(wù)分析側(cè)邊欄導(dǎo)航通常位于左側(cè)，它位于F式布局的最左側(cè)，作為信息主干，也符合用戶的瀏覽習(xí)慣。在項(xiàng)目中要使用ss-Menu固定側(cè)邊欄插件，需要引入三個(gè)文件，一個(gè)jQuery庫，一個(gè)ss-menu插件js文件和一個(gè)ss-menu的CSS文件，操作步驟如下：1.完成HTML結(jié)構(gòu)設(shè)計(jì)，設(shè)計(jì)好側(cè)邊欄結(jié)構(gòu)。2.在頁面引入ss-menu插件的CSS文件。3.在頁面引入jQuery框架和ss-menu插件文件，并應(yīng)用下載ss-menu插件，在頁面引入CSS文件和ss-menu插件文件ss-menu插件簡(jiǎn)介ssMenu是一款jQuery固定側(cè)邊欄插件。ssMenu側(cè)邊欄插件使用簡(jiǎn)單，內(nèi)置多種顏色主題，也可以自定義側(cè)邊欄菜單的顏色，非常實(shí)用。ssMenu插件下載地址為：/CodeHimBlog/jquery.ssMenu任務(wù)實(shí)現(xiàn)關(guān)鍵代碼（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提供的矢量圖標(biāo)。在使用FontAwesome前已經(jīng)將所需字體拷貝到fonts文件夾中，所需樣式font-awesome.min.css拷貝到css文件夾中<linkrel="stylesheet"type="text/css"href="css/font-awesome.min.css"/>任務(wù)實(shí)現(xiàn)關(guān)鍵代碼（3）設(shè)計(jì)HTML結(jié)構(gòu)代碼省略（4）使用ssMenu插件實(shí)現(xiàn)側(cè)邊欄效果$(document).ready(function(){ $(".ss-menu").ssMenu(); });任務(wù)實(shí)現(xiàn)關(guān)鍵代碼（5）設(shè)置側(cè)邊欄不同背景色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插件實(shí)現(xiàn)多張圖片同時(shí)上傳效果，最多只允許上傳6張圖片，如果圖片數(shù)量超出6張，則使用該插件彈擊提示信息，單擊“刪除”按鈕可以將上傳圖片刪除，如下圖所示效果。練習(xí)任務(wù)2PinterestGrid實(shí)現(xiàn)響應(yīng)式網(wǎng)格瀑布流布局任務(wù)描述在網(wǎng)頁中常常能看到瀑布流圖片網(wǎng)頁特效，本任務(wù)使用PinterestGrid插件實(shí)現(xiàn)響應(yīng)式網(wǎng)格瀑布流布局，如圖所示。演示任務(wù)2：PinterestGrid實(shí)現(xiàn)響應(yīng)式網(wǎng)格瀑布流布局任務(wù)分析本案例使用PinterestGrid插件實(shí)現(xiàn)響應(yīng)式網(wǎng)格瀑布流布局1.下載PinterestGrid插件2.需要引入三個(gè)文件：一個(gè)jQuery框架文件一個(gè)pinterest_grid插件頁面添加瀑布流布局的CSS樣式文件。PinterestGrid插件簡(jiǎn)介Pinterest采用的是瀑布流的形式展現(xiàn)圖片內(nèi)容，無需用戶翻頁，新的圖片不斷自動(dòng)加載在頁面底端，讓用戶不斷的發(fā)現(xiàn)新的圖片。PinterestGrid是一款仿Pinterest網(wǎng)站的響應(yīng)式網(wǎng)格瀑布流布局jQuery插件。該瀑布流插件可以隨父容器的大小自動(dòng)調(diào)節(jié)網(wǎng)格布局，并且支持IE8+的IE瀏覽器。PinterestGrid參數(shù)no_columns：網(wǎng)格布局一行的列數(shù)。默認(rèn)值為一行3個(gè)網(wǎng)格。padding_x：網(wǎng)格在X軸方向的padding值。默認(rèn)值為10像素。padding_y：網(wǎng)格在Y軸方向的padding值。默認(rèn)值為10像素。margin_bottom：網(wǎng)格底部的margin值。默認(rèn)值為50像素。single_column_breakpoint：指定在視口多大時(shí)一行只顯示一個(gè)網(wǎng)格。任務(wù)實(shí)現(xiàn)關(guān)鍵代碼（1）引入jQuery和pinterest_grid.js文件<scriptsrc=“js/jquery-1.12.4.js”></script><scriptsrc="js/pinterest_grid.js"></script>（2）設(shè)計(jì)HTML結(jié)構(gòu)代碼省略任務(wù)實(shí)現(xiàn)關(guān)鍵代碼（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插件實(shí)現(xiàn)適應(yīng)手機(jī)的表單驗(yàn)證和背景切換效果，如下圖所示。練習(xí)任務(wù)3編寫表格隔行變色插件任務(wù)描述編寫表格隔行變色插件，并應(yīng)用插件實(shí)現(xiàn)表格隔行變色，如圖所示。演示任務(wù)3：編寫表格隔行變色插件任務(wù)分析使用自定義的插件實(shí)現(xiàn)表格隔行變色1.建立表格2.引入jQuery庫文件3.編寫插件4.應(yīng)用插件插件的種類封裝對(duì)象方法的插件封裝全局函數(shù)的插件選擇器插件jQuery插件的機(jī)制jQuery提供了兩個(gè)用于擴(kuò)展jQuery功能方法jQuery.fn.extend()方法jQuery.extend()方法命名空間我們習(xí)慣將一些方法封裝到另一個(gè)自定義的命名空間。jQuery.myPlugin={ foo:function(){ alert('Thisisatest.Thisisonlyatest.'); }, bar:function(param){ alert('Thisfunctiontakesaparameter,whichis"'+param+'".'); }};采用命名空間的函數(shù)仍然是全局函數(shù)，調(diào)用時(shí)采用的方法：

$.myPlugin.foo();$.myPlugin.bar('baz');任務(wù)實(shí)現(xiàn)關(guān)鍵代碼$.fn.extend({ "alterBgColor":function(options){ //設(shè)置默認(rèn)值 options=$.extend({ odd:"odd", /*偶數(shù)行樣式*/ even:"even",/*奇數(shù)行樣式*/ selected:"selected"/*選中行樣式*/ },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $('tbody>tr',this).click(function(){ //判斷當(dāng)前是否選中任務(wù)實(shí)現(xiàn)關(guān)鍵代碼varhasSelected=$(this).hasClass(options.selected);//如果選中，則移出selected類，否則就加上selected類 $(this)[hasSelected?"removeClass":"addClass"](options.selected)//查找內(nèi)部的checkbox,設(shè)置對(duì)應(yīng)的屬性。 find(':checkbox').attr('checked',!hasSelected);}); //如果單選框默認(rèn)情況下是選擇的，則高色. $('