首頁 > web前端 > js教程 > jQuery外掛程式支援同一頁面被多次呼叫_jquery

jQuery外掛程式支援同一頁面被多次呼叫_jquery

WBOY
發布: 2016-05-16 15:15:57
原創
1753 人瀏覽過

更新 1.2版本 刪除回呼函數的控制台輸出調試,因為在IE6下沒有控制台會造成插件出錯, 完成build功能。 提示資訊按鈕支援多個,此版本為最新的穩定版。

近期將會提供更詳細的data書寫格式說明,build時html格式說明,詳細的options參數說明。補充內容類型的切換展示案例。

Introduction:

jquery imageShown 插件可以完成多種形式的內容輪顯切換, 所有我提供的Demo中雖然都是導航帶動的輪顯圖片,但是它還能完成內容的切換,即可以完成Tab功能,單純的圖片輪顯功能,新聞訊息的輪顯。 也就是說這個插件在使用合理參數的配合下可以顯示任何形式的內容。

此插件可以在上下左右四個方向上顯示導航,背景滑動動畫可以獨立設置,播放區域動畫可以獨立設置,每次進入顯示區域導航數量可以獨立設置,如果設置錯誤或者設置不合理會被插件內部重置。提示訊息是否顯示,以及顯示動畫可以獨立設定。具體請參考Demo相關內容。

附註:在使用Tab功能時需要設定 pContent為 content 且由於由於顯示區域已經固定大小,所以針對未知大小的內容請在callback函數中處理。

插件內部已經對請求的資源是否存在做了判斷,例如出現錯誤你可以直接顯示參數中你提供默認顯示信息,同時你也可以在callback函數中對這個錯誤區域進行處理。 callback函數你可以接收回傳的參數。

回傳參數的說明:

id //当前Dom的ID,在你页面未设置ID的情况下这个ID会是插件自动生成的唯一值。 
total //轮显内容的数量 
/* 
当前选择的第一个内容区域,当你loop设置为false时此内容就是页面Dom中的index值,当loop为true时导航区域需要根据 attr('data-index')来获取当前的index。player区域不受loop限制,永远为当前内容的index值 
*/ 
selected 
curNav//当前导航,可以通过 attr('data-missing')来确认内容是否正常加载。 
curPlay//当前显示的主要内容,可以通过 attr('data-missing')来确认内容是否正常加载。 
curData//你传入数据data的当前值。 
登入後複製

下一個開發計畫:

當你不願意或不會使用data參數時,你可以講需要顯示的內容按照固定格式寫入html頁面,然後使用 build指令由插件自行完成餘下內容

例如:

$('elem').imageShown('bulid'); 
$('elem').imageShown('bulid',{'options'}); 
$('elem').imageShown('bulid','option','value'); 
登入後複製

提供外部暫停和重啟自動播放的接口,方便你能夠在回調函數中進行使用。 提供更多的說明和範例。

預設參數:

id: null,
navSpace: 47,
pWidth: 0 ,
pHeight:0 ,
navNum: 4,
navPlace: null,
autoPlay: true,
autoTime: 4000,
events: 'mouseenter',
tbgAnimate: true,
tbgSpeed: 'fast',
addtional:false,
step: 1,
scrollSpeed:'fast',
opacity:0.6,
data: null,
loop: true,
player: true,
animate: 'fade',//left,right,top,bottom,fade,none
//deepNav: false,
showTips: true,
tipsAnimate: 'fade',//fade,slide
selected: 1,
callback: null,
preload: true,
target: '_blank',
pSpeed:500,
pType: false,
tContent:'image',//num,none,image,content
listPlace:null,
tipsBtn:false,
loadClass: 'img-player-loading',
pContent:'image'

使用方法:

$('elem').imageShown({'options'}); 
登入後複製

setter:

$('elem').imageShown('option',{'options'}); 
$('elem').imageShown('option','option','value'); 
登入後複製

getter

var option = $('elem').imageShown('option','option name'); 
登入後複製

在build功能完成之後將提供更相信的參數以及配置的說明。

同時buid將會以擴充的形式發布,即需要使用build功能時,需要引入另外的文件。這樣做的目的是為了解決檔案大小問題。

插件經過非常多的暴虐暫時沒發現問題,性能上已經處理的很好,經過測試暫時未發現內存洩漏問題。測試平台:ie6,firefox3.6, windows2003

以上所述是小編給大家介紹的jQuery插件支援同一頁被多次呼叫的全部敘述,希望對大家有幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板