본문 바로가기
프로그래밍/자바스크립트

jQuery UI Button 사용법

by pentode 2018. 12. 13.

jQuery UI의 버튼 기능을 사용해 봅니다.



1. 필요한 라이브러리를 추가합니다.

<link rel="stylesheet" type="text/css" href="../js/jquery-ui-1.12.1/jquery-ui.min.css" />

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="../js/jquery-ui-1.12.1/jquery-ui.min.js"></script>


2. 기본적인 사용법

<!-- HTML -->

<button id="btn1">버튼1</button>

<a id="btn2">버튼2</button>


<!-- script -->

$(document).ready(function() {

    $("#btn1").button();

    $("#btn2").button();

});


기본 버튼 만들기



2. 버튼 클릭 이벤트 처리

$(document).ready(function() {

    // 버튼을 생성함과 동시에 이벤트 핸들러를 추가합니다.

    $("#btn1").button().on("click", function(event) {

        alert("버튼1이 눌러졌습니다.");

    });


    // 버튼 생성과 이벤트 핸들러 추가를 분리합니다.

    $("#btn2").button();

    $("#btn2").click(function(event) {

        alert("버튼2가 눌러졌습니다.");

    });

});


3. 아이콘 버튼 만들기

$(document).ready(function() {

    $("#btn2").button({

        icon:"ui-icon-trash"

    });

});

아이콘 버튼



4. 아이콘 버튼 스타일


버튼 스타일


반응형