"JQuery 플러그인 toast 실습"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-== 참고 자료 == +==참고==))
 
(사용자 5명의 중간 판 7개는 보이지 않습니다)
4번째 줄: 4번째 줄:


==소스 코드==
==소스 코드==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<link rel="stylesheet" href="//rawgit.com/Soldier-B/jquery.toast/master/jquery.toast/jquery.toast.min.css" />
<link rel="stylesheet" href="//rawgit.com/Soldier-B/jquery.toast/master/jquery.toast/jquery.toast.min.css" />
<script src="//code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="//code.jquery.com/jquery-1.6.3.min.js"></script>
36번째 줄: 36번째 줄:


   $(document).ready(function() {
   $(document).ready(function() {
     $.toast.config.align = 'right';
     $.toast.config.align = 'center';
     $.toast.config.width = 400;
     $.toast.config.width = 400;


51번째 줄: 51번째 줄:
<br><button class="success">성공 토스트</button>
<br><button class="success">성공 토스트</button>


</source>
</syntaxhighlight>
<jsfiddle height='200'>pfr42oh1</jsfiddle>
<jsfiddle height='200'>pfr42oh1</jsfiddle>



2024년 1월 31일 (수) 14:15 기준 최신판

jQuery 플러그인 toast 실습
jQuery 플러그인 토스트 간단예제
jquery.toast 튜토리얼

1 소스 코드[ | ]

<link rel="stylesheet" href="//rawgit.com/Soldier-B/jquery.toast/master/jquery.toast/jquery.toast.min.css" />
<script src="//code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="//rawgit.com/Soldier-B/jquery.toast/master/jquery.toast/jquery.toast.min.js"></script>
<script>
  function createToast(t) {
    switch (t) {
      case 'danger':
        $.toast('<h4>경고!</h4> 위험을 알리는 토스트. 닫아야 없어집니다.', {
          sticky: true,
          type: 'danger'
        });
        return;
      case 'info':
        $.toast('<h4>알림!</h4> 2초간 알려드립니다.', {
          duration: 2000,
          type: 'info'
        });
        return;
      case 'success':
        $.toast('<h4>성공!</h4> 토스트 생성에 성공했습니다. 닫아야 없어집니다.', {
          sticky: true,
          type: 'success'
        });
        return;
    }
    $.toast('일반적인 토스트. 2초 후 사라집니다.', {
      duration: 2000
    });
  }

  $(document).ready(function() {
    $.toast.config.align = 'center';
    $.toast.config.width = 400;

    $('button').click(function() {
      createToast($(this).attr('class'));
    });
  });

</script>

<br><button class="">기본 토스트</button>
<br><button class="danger">경고 토스트</button>
<br><button class="info">정보 토스트</button>
<br><button class="success">성공 토스트</button>

2 같이 보기[ | ]

3 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}