웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] jquery Zebra_Dialog 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] jquery Zebra_Dialog

해피CGI윤실장 2018. 10. 4. 09:03

* jquery Zebra_Dialog 소개

   - jquery Zebra_Dialog 은 사용자가 응용 프로그램을 계속 사용하기 전에
     알림창을 보여줄 수 있도록 하는 기능을 제공합니다



* 사용조건

   - jQuery 1.7.0 이상에서 사용이 가능합니다



* 특징

   - 테마상자 알림창 상자 2개 제공
   - 5가지 대화상자 : 확인,정보,경고,오류,질문
   - css 파일을 편집하여 쉽게 사용자 정의 가능
   - 맞춤검색 버튼 쉽게 추가
   - 추가 사용자 정의를 위해 콜백함수 제공
   - 주요 브라우저 Firefox, Opera, Safari, Chrome, Internet Explorer 6 이상 에서 작동



* 사용법

   1. 다운로드 받은 압축파일을 해제하고 dist폴더에 있는 
      zebra_dialog.min 파일을 원하는 웹서버 경로에 업로드 합니다


   2. 기본적으로 제공되는 js, css 파일을 호출합니다
      


   
   3. js,css 파일을 호출하여 로드 하였다면 알림창을 띄워보도록 합니다

     1) 기본 대화상자 예제

     $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable ...');
        




   2) 5가지 유형 오류,경고,질문,정보,확인 타입 설정이 가능한 대화상자 예제
      (type 설정에 `error`, `warning` , question, `information, `confirmation` 으로 설정가능)
     
     $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and ...', {
      type: 'error',
      title: 'Error'
     });

     
     $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable ...', {
      type: 'question',
      title: 'Custom buttons',
      buttons: ['Yes', 'No', 'Help'],
      onClose: function(caption) {
        alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
      }
    });

     (위와 같이 콜백함수 실행이 가능합니다)


   



   
   이외에 다양한 기능이 제공되니 첨부된 압축파일을 해제하여
   README.md  API설명을 참조하시거나
   examples 폴더안에 있는 다양한 예제들을 활용하시면 도움이 될것 같습니다



홈페이지바로가기 소스다운로드

Comments