Home > Web Front-end > JS Tutorial > The jQuery plug-in supports the same page being called multiple times_jquery

The jQuery plug-in supports the same page being called multiple times_jquery

WBOY
Release: 2016-05-16 15:15:57
Original
1754 people have browsed it

Updated to version 1.2. Delete the console output debugging of the callback function, because there is no console under IE6 which will cause plug-in errors and complete the build function. Multiple prompt information buttons are supported, and this version is the latest stable version.

More detailed data writing format instructions, html format instructions during build, and detailed options parameter instructions will be provided in the near future. Supplementary content type switching display case.

Introduction:

The jquery imageShown plug-in can complete various forms of content rotation switching. Although all the demos I provide are navigation-driven rotation images, it can also complete content switching, that is, it can complete the Tab function. Simply Picture wheel display function, news information wheel display. In other words, this plug-in can display any form of content with reasonable parameters.

This plug-in can display navigation in four directions, up, down, left and right. The background sliding animation can be set independently, the playback area animation can be set independently, and the number of navigations in the display area can be set independently each time. If the setting is wrong or unreasonable, it will be Plugin internal reset. Whether the prompt information is displayed and the display animation can be set independently. Please refer to Demo related content for details.

Note: When using the Tab function, you need to set pContent to content and because the display area has been fixed in size, please handle content of unknown size in the callback function.

The plug-in has internally determined whether the requested resource exists. For example, if an error occurs, you can directly display the default display information provided in the parameters. At the same time, you can also handle the error area in the callback function. The callback function allows you to receive returned parameters.

Description of return parameters:

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的当前值。 
Copy after login

Next development plan:

When you are unwilling or unable to use the data parameter, you can write the content that needs to be displayed into the html page in a fixed format, and then use the build command to let the plug-in complete the rest of the content by itself

For example:

$('elem').imageShown('bulid'); 
$('elem').imageShown('bulid',{'options'}); 
$('elem').imageShown('bulid','option','value'); 
Copy after login

Provides an external interface for pausing and restarting automatic playback, so that you can use it in the callback function. Provide additional instructions and examples.

Default parameters:

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'

Usage:

$('elem').imageShown({'options'}); 
Copy after login

setter:

$('elem').imageShown('option',{'options'}); 
$('elem').imageShown('option','option','value'); 
Copy after login

getter

var option = $('elem').imageShown('option','option name'); 
Copy after login

After the build function is completed, more reliable parameters and configuration instructions will be provided.

At the same time, buid will be released in an extended form, that is, when you need to use the build function, you need to introduce additional files. The purpose of this is to solve the file size problem.

The plug-in has been through a lot of abuse and no problem has been found yet. The performance has been handled very well. After testing, no memory leak problem has been found yet. Test platform: ie6, firefox3.6, windows2003

The above is the entire description of the jQuery plug-in introduced by the editor to support the same page being called multiple times. I hope it will be helpful to everyone.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template