jQuery 창 구성 요소 학습 - 프로젝트 중 지식 맹점 보충 학습
5629 단어 실전 종목프런트엔드 지식jquerylayer 창 구성 요소
$.layer({
type : 1,
title :" " + title,
btns:btns,
btn: [' ', ' '],
offset:['' , ''],
bgcolor: '#fff',
border: [5, 0.3, '#888'],
closeBtn: [0, true],
maxmin: true,
area : ['410px','250px'],
page : {url : pageUrl},
})
학습 블로그 주소는 다음과 같습니다.http://blog.csdn.net/smartsmile2012/article/details/39339733
블로그 내용:
/*
먼저 홈페이지에 가서 최신 js를 다운로드하세요.http://sentsin.com/jquery/layer/
① jquery 인용② layer를 참조합니다.min.js
*/
탄층을 촉발하는 이벤트는 자유롭게 귀속할 수 있습니다. 예를 들어:$('#id').on('click', function(){
layer.msg('test');
});
다음은 주로 상술한 예의 호출 코드를 붙인다. 【정보상자】: layer.alert('배추급 전단공성사현심', 8);//스타일1layer.msg('전단공성사현심');//스타일2//물론 이 두 가지 스타일에 그치지 않는다.
【질문상자】: $.layer({
shade: [0],
area: ['auto','auto'],
dialog: {
msg:'전단 개발을 어떻게 생각하십니까?'
btns: 2,
type: 4,
btn: ['중요','진기한 꽃'], yes: function(){
layer.msg('중요', 1, 1);
}, no: function(){
layer.msg('진기한 꽃', 1, 13);
}
}
});
//layer도 사용할 수 있습니다.confirm () 단축 호출
【페이지층1】$.layer({
type: 1,
shade: [0],
area: ['auto', 'auto'],
title: false,
border: [0],
page: {dom : '.layer_notice'}
});
【페이지층2】var pageii = $.layer({
type: 1,
title: false,
area: ['auto', 'auto'],
border: [0],//기본 테두리 제거 shade:[0],//마스크 제거closeBtn: [0,false],//기본 닫기 단추를 제거shift:'left',//왼쪽 애니메이션에서 팝업 page: {
html:'왼쪽에서 왔어요. 스타일을 정했어요.닫기 }
});
//자체 설정 해제$('#pagebtn').on('click', function(){
layer.close(pageii);
});
【iframe 층 1】$.layer({
type: 2,
shadeClose: true,
title: false,
closeBtn: [0, false],
shade: [0.8, '#000'],
border: [0],
offset: ['20px',''],
area: ['1000px', ($(window).height() - 50) +'px'],
iframe: {src: 'http://f2e.sentsin.com/chat'}
});
【iframe 층 2】layer.tips('5초 후 오른쪽 하단 창이 자동으로 닫히고 새로운 iframe'생성,this, { time: 5,
maxWidth: 260
});
$.layer({
type: 2,
closeBtn: false,
shadeClose: true,
shade: [0.1, '#fff'],
border: [0],
time: 5,
iframe: {
src: 'test/guodu.html'
},
title: false,
area: ['300px','250px'],
shift: 'right-bottom',
end: function(){
$.layer({
type : 2,
title:'현심 블로그 - sentsin.com',
shadeClose: true,
maxmin: true,
fix : false,
area: ['1024px', 500],
iframe: {
src : 'http://sentsin.com/'
}
});
}
});
【가재층 1】layer.load(3);
【가재층 2】layer.load('테이프 텍스트 불러오기', 3);
【tips층 1】layer.tips ('tips의 스타일은 고정된 것이 아닙니다. 외관을 사용자 정의할 수 있습니다. ',this, { style: ['background-color:#78BA32; color:#fff', '#78BA32'],
maxWidth:185,
time: 3,
closeBtn:[0, true]
});
【tips층2】layer.tips('기본적으로 닫는 단추가 없음',this,{guide:1,time:2});
【입력/파일층】//일반 텍스트layer.prompt ({title: 당신의 이름?},function (name) { alert(name);
});
//암호 텍스트layer.prompt({title:'모든 암호를 입력하고 확인하기', type: 1},function(pass) { alert(pass);
});
//파일 업로드layer.prompt ({title: '아무거나 업로드하고 확인하기', type: 2},function (file) { alert(file);
});
//여러 줄 텍스트 layer.prompt({title:'뭐라도 쓰고 확인해', type: 3},function(val) { alert(val);
});
【tab층】layer.tab({
area: ['1000px', '500px'],
data: [
{title: 'Say', content:'Hi,Main'},
{title:'무제', 콘텐츠:'html 전송 지원'} ]
});
【앨범층】//이것은 비동기 요청 모드입니다. 구체적인 json 형식은 문서가 업데이트될 때까지 기다리십시오.아니면 직접 요청을 통해 포토를 보세요.json
var conf = {};
$.getJSON('ajax 주소', {}, function(json) { conf.photoJSON = json;//다음에 메모리 데이터를 직접 읽을 수 있도록 json을 저장합니다 layer.photos({
html:'이곳은 사용자 정의 html을 전송할 수도 있고 전송하지 않아도 된다(이것은 오른쪽 영역을 출력하지 않는다는 것을 의미한다).앨범은 좌우 방향키, Esc 닫기 지원, json: json
});
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery.Deferred() 메서드$.Deferred () 는 체인식 실용 대상 방법으로 여러 개의 리셋을 등록하고 리셋 대기열을 호출하여 동기화나 비동기화 기능이 성공하거나 실패한 상태를 전달하는 구조 함수입니다. Deferred 객체가 일시 중지...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.