>웹 프론트엔드 >JS 튜토리얼 >jQuery 플러그인은 여러 번 호출되는 동일한 페이지를 지원합니다_jquery

jQuery 플러그인은 여러 번 호출되는 동일한 페이지를 지원합니다_jquery

WBOY
WBOY원래의
2016-05-16 15:15:571757검색

버전 1.2로 업데이트되었습니다. IE6에는 플러그인 오류를 일으키고 빌드 기능을 완료하는 콘솔이 없기 때문에 콜백 함수의 콘솔 출력 디버깅을 삭제했습니다. 여러 프롬프트 정보 버튼이 지원되며 이 버전은 최신 안정 버전입니다.

더 자세한 데이터 작성 형식 지침, 빌드 중 html 형식 지침, 자세한 옵션 매개변수 지침은 가까운 시일 내에 제공될 예정입니다. 보충 콘텐츠 유형 전환 디스플레이 케이스.

소개:

jquery imageShown 플러그인은 다양한 형태의 콘텐츠 회전 전환을 완료할 수 있습니다. 제가 제공하는 데모는 모두 내비게이션 중심의 회전 이미지이지만, 콘텐츠 전환도 완료할 수 있습니다. 즉, Simply Picture 기능도 완성할 수 있습니다. 휠 표시 기능, 뉴스 정보 휠 표시. 즉, 이 플러그인은 합리적인 매개변수를 사용하여 모든 형태의 콘텐츠를 표시할 수 있습니다.

이 플러그인은 위, 아래, 왼쪽, 오른쪽의 네 방향으로 탐색을 표시할 수 있습니다. 배경 슬라이딩 애니메이션은 독립적으로 설정할 수 있고, 재생 영역 애니메이션은 독립적으로 설정할 수 있으며, 표시 영역의 탐색 수를 지정할 수 있습니다. 매번 독립적으로 설정됩니다. 설정이 잘못되었거나 불합리한 경우 플러그인 내부 재설정이 됩니다. 프롬프트 정보 표시 여부와 표시 애니메이션을 독립적으로 설정할 수 있습니다. 자세한 내용은 데모 관련 콘텐츠를 참조하세요.

참고: Tab 기능 사용 시 pContent를 content로 설정해야 하며, 표시 영역의 크기가 고정되어 있으므로 크기를 알 수 없는 콘텐츠는 콜백 함수에서 처리해 주시기 바랍니다.

요청한 리소스가 존재하는지 플러그인이 내부적으로 판단합니다. 예를 들어 오류가 발생하면 매개변수에 제공되는 기본 표시 정보를 직접 표시할 수 있으며, 동시에 오류 영역을 에서 처리할 수도 있습니다. 콜백 함수. 콜백 함수를 사용하면 반환된 매개변수를 받을 수 있습니다.

반환 매개변수 설명:

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 페이지에 표시해야 하는 콘텐츠를 고정된 형식으로 작성한 다음 빌드 명령을 사용하여 플러그인이 나머지 부분을 완료하도록 할 수 있습니다. 콘텐츠 그 자체

예:

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

콜백 기능에서 사용할 수 있도록 자동 재생을 일시 중지하고 다시 시작하기 위한 외부 인터페이스를 제공합니다. 추가 지침과 예시를 제공하세요.

기본 매개변수:

ID: null,
navSpace: 47,
p폭: 0 ,
pH:0 ,
navNum: 4,
navPlace: null,
자동 재생: 참,
자동시간: 4000,
이벤트: 'mouseenter',
tbgAnimate: 사실,
tbgSpeed: '빠름',
추가:false,
단계: 1,
스크롤 속도:'빠름',
불투명도:0.6,
데이터: null,
루프: true,
플레이어: 그렇죠,
애니메이션: '페이드',//왼쪽,오른쪽,위,아래,페이드,없음
//deepNav: 거짓,
showTips: 사실,
TipsAnimate: 'fade',//fade,slide
선택됨: 1,
콜백: null,
미리 로드: true,
대상: '_blank',
p속도:500,
pType: 거짓,
tContent:'이미지',//num,none,image,content
목록장소:널,
TipsBtn:false,
loadClass: 'img-player-loading',
pContent:'이미지'

사용법:

$('elem').imageShown({'options'}); 

세터:

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

게터

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

빌드 기능이 완료된 후에는 보다 안정적인 매개변수와 구성 지침이 제공될 예정입니다.

동시에 buid는 확장된 형태로 출시될 예정입니다. 즉, 빌드 기능을 사용해야 할 때 추가 파일을 도입해야 합니다. 이것의 목적은 파일 크기 문제를 해결하는 것입니다.

플러그인은 많은 남용을 겪었지만 아직 아무런 문제도 발견되지 않았습니다. 테스트 결과 성능이 매우 잘 처리되었으며 아직 메모리 누수 문제도 발견되지 않았습니다. 테스트 플랫폼: ie6, firefox3.6, windows2003

위는 동일한 페이지가 여러 번 호출되는 것을 지원하기 위해 편집기에서 도입한 jQuery 플러그인에 대한 전체 설명입니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.