jQuery UI Button 사용법

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. 아이콘 버튼 스타일