Jquery.nicescroll()插件：頁面初始化滾動(dòng)條不顯示問題

鏈接： jquery的niceScroll沒顯示滾動(dòng)條 - 小白小菜 - 博客園

10年的武穴網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整武穴建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“武穴網(wǎng)站設(shè)計(jì)”,“武穴網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

? ? 本地?cái)?shù)據(jù)使用niceScroll插件沒有出現(xiàn)上述問題，首次進(jìn)入頁面可以正常顯示出來。但是當(dāng)使用滾動(dòng)條的標(biāo)簽有ajax請求的數(shù)據(jù)填充時(shí)，就會(huì)出現(xiàn)頁面刷新后不顯示滾動(dòng)條，必須將頁面縮放才能正常展示。

將$(selector).niceScroll()放在ajax返回成功的函數(shù)里，即在ajax完成時(shí)填充數(shù)據(jù)完成后，在給標(biāo)簽綁定滾動(dòng)條。

? ? ? ? 為使用戶體驗(yàn)好，可以在ajax數(shù)據(jù)填充后延時(shí)1s再綁定滾動(dòng)條。

$.ajax({

? ? type: 'GET',

? ? .........

? ? success: function(data){

? ? ? ? ? ? ? ? ? ? data數(shù)據(jù)邏輯處理...

? ? ? ? ? ? ? ? ? ? $(document).ready(function(){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setTimeout(function(){ ??$(selector).niceScroll();??} ,1000);

? ? ? ? ? ? ? ? ? ? ? });

}

});

40款經(jīng)典前端特效插件---分享

1.flavr—超級漂亮的jQuery扁平彈出對話框 ? ??

2.輕量級觸摸響應(yīng)滑塊插件JQuery lightSlider ? ? ?

3.帶37種3D動(dòng)畫特效的跨瀏覽器CSS3動(dòng)畫框架 ? ? ??

4.jquery整屏滾動(dòng)插件Scrollify ? ? ? ?

5.jquery旋轉(zhuǎn)木馬插件SLICK ? ? ? ??

6.jquery文字動(dòng)畫插件LetterFX ? ? ? ? ?

7.jquery文本翻轉(zhuǎn)插件Wodry.js ? ? ??

8.jquery通知插件toastr ? ? ??

9.jQuery滾動(dòng)執(zhí)行動(dòng)畫插件FadeThis ? ? ?

10.jquery表單驗(yàn)證插件Bootstrap Validator ? ? ??

11.jCountdown倒計(jì)時(shí)插件jQuery ? ? ? ? ??

12.iCheck不一樣的checkbok ? ? ? ??

13.Owl Carousel強(qiáng)大的響應(yīng)式j(luò)Query焦點(diǎn)圖輪播插件 ??

14.magic-帶64種動(dòng)畫效果的CSS3動(dòng)畫庫 ? ??

15.jQuery實(shí)時(shí)搜索插件-HideSeek ? ? ??

16.bootstrap modal對話框 ? ? ? ? ? ??

17.一款模擬CSS3動(dòng)畫的js插件-move.js ? ? ? ? ? ???

18.可替代CSS3 transition和transform的jQuery插件 ? ? ? ? ?

19.基于bootstrap的jQuery多功能模態(tài)對話框插件

20.帶CSS3過渡效果的js模態(tài)窗口插件 ? ? ???

21.支持移動(dòng)觸摸設(shè)備的簡潔js幻燈片插件

22.jQuery輕量級響應(yīng)式扁平風(fēng)格tabs選項(xiàng)卡插件

23.jQuery輕量級響應(yīng)式Tooltip插件

24.jQuery簡單且功能強(qiáng)大的圖片剪裁插件

25.帶CSS3動(dòng)畫過渡效果的jQuery模態(tài)窗口插件

26.中國省市區(qū)地址三級聯(lián)動(dòng)jQuery插件

27.移動(dòng)端優(yōu)先且支持jQuery和Zepto的模態(tài)對話框插件

28.jQuery簡單實(shí)用的tooltip插件

29.帶CSS3過渡動(dòng)畫效果的jQuery Tabs選項(xiàng)卡插件

30.x0popup-純js彈出對話框插件

31.WOW.js-元素在頁面滾動(dòng)時(shí)展示CSS3動(dòng)畫JS插件

32.Windows8樣式的消息提示框jQuery插件

33.jQuery星級評分插件

34.fsBanner-實(shí)用的網(wǎng)站響應(yīng)式Banner手風(fēng)琴插件

35.draggabilly-功能強(qiáng)大的拖動(dòng)拖拽元素插件

36.驗(yàn)證插件vali.js

37.響應(yīng)式j(luò)Query圖片放大鏡插件magnificent.js

38.可快速生成各種陰影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.純文本Loading加載指示器特效

jquery插件怎樣使用和修改?

jQuery插件 要使用它的話 通常插件中都有demo或者api可以查閱\x0d\x0a通常jQuery插件為了減小體積 會(huì)發(fā)布兩個(gè)版本 XXX.js和XXX.min.js\x0d\x0a\x0d\x0a如果你要修改插件需要使用XXX.js文件\x0d\x0a\x0d\x0a首先 你要知道它怎么用,先有一個(gè)可用的demo(沒有demo就自己寫一個(gè)),然后用webkit內(nèi)核或firefox進(jìn)行斷點(diǎn)查看,這主要是為了找插件入口點(diǎn),當(dāng)然 你也可以直接查看js代碼 這需要一定的底子\x0d\x0a最后 就是慢慢查看他的代碼的實(shí)現(xiàn)功能了,先得看懂他是怎么實(shí)現(xiàn)的,然后你才會(huì)知道怎么改.\x0d\x0a\x0d\x0ajQuery插件我也寫的不少 像 模擬alert/confirm/prompt 錯(cuò)誤信息提示框 模擬彈出窗體 無縫marquee滾動(dòng) 分頁控件 拖拽控件等等\x0d\x0a\x0d\x0ajQuery插件的框架寫法通常是\x0d\x0a\x0d\x0a(function($){\x0d\x0a $.fn.extend({\x0d\x0a fnKey:function(){}\x0d\x0a })\x0d\x0a //或者\(yùn)x0d\x0a $.fn.fnKey=function(){}\x0d\x0a})(jQuery)\x0d\x0a\x0d\x0a上面的兩種寫法的調(diào)用 方式 是\x0d\x0a\x0d\x0a$("XXX").fnKey()進(jìn)行調(diào)用的\x0d\x0a\x0d\x0a還有一種寫法:\x0d\x0avar fnClass = function(){\x0d\x0a this.fnKey=function(){\x0d\x0a }\x0d\x0a this.props="";\x0d\x0a}\x0d\x0a\x0d\x0a這種寫法是的調(diào)用 方式是\x0d\x0afnClass obj = new fnClass();\x0d\x0aobj.fnKey();\x0d\x0a\x0d\x0a第二種寫法是js的面向?qū)ο缶幊?得自己慢慢的理解哈

jquery插件infinite scroll怎么用

無限滾動(dòng)插件，給個(gè)demo，參考一下：

%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%

!DOCTYPE html

html

head

meta charset="utf-8"

title無限翻頁效果/title

script src="css/infinite-scroll/jquery-1.6.4.js"/script

script src="css/infinite-scroll/jquery.infinitescroll.js"/script

script src="css/infinite-scroll/test/debug.js"/script

script

$(document).ready(function (){ //別忘了加這句，除非你沒學(xué)Jquery

$("#container").infinitescroll({

navSelector: "#navigation", //頁面分頁元素--成功后自動(dòng)隱藏

nextSelector: "#navigation a",

itemSelector: ".scroll " ,

animate: true,

maxPage: 3,

});

});

/script

/head