jQuery 창 구성 요소 학습 - 프로젝트 중 지식 맹점 보충 학습

실제 개발 프로젝트를 하는 과정에서 jQuery 창 구성 요소를 만났는데 이해가 전면적이지 않기 때문에 관련 블로그를 찾아보고 본 프로젝트의 창 구성 요소를 다시 보면 매우 간단하다.
$.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  
    });  
});  
 

 

좋은 웹페이지 즐겨찾기