[jQueryUI] jQuery 버튼 위젯(체크박스, 라디오, 버튼)

Front-End/jQueryUI

[jQueryUI] jQuery 버튼 위젯(체크박스, 라디오, 버튼) - button(), buttonset()

리딩리드 2017. 2. 10. 16:22

jQuery 버튼 위젯(체크박스, 라디오, 버튼) - button(), buttonset()

1. 정의

- button 위젯을 이용하여 버튼 디자인을 만든다

2. 구문

1) button()

- $(..).button({매개변수:값...})

2) buttonset()

- $(..).buttonset({매개변수:값...})

3) 라디오 버튼, 체크박스

- 라벨은 <label for=".."> 요소로 나타탬

- 분류하는 요소는 <div>로 묶는다

3. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> </head> <form> <div> <button>Button</button> <a href="#">Anchor</a> <input type="button" value="Input"/> <input type="submit" vlaue="Submit"/> <input id="cb" type="checkbox" class="one"/> <label for="cb">Check</label> </div> <hr/> <div class="set"> <input type="checkbox" id="cb1" name="c"/><label for="cb1">Check1</label> <input type="checkbox" id="cb2" name="c"/><label for="cb2">Check1</label> </div> <hr/> <div class="set"> <input type="radio" id="r1" name="r"/><label for="r1">Radio1</label> <input type="radio" id="r2" name="r"/><label for="r2">Radio1</label> </div> </form> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script> <script> $(function(){ $('button').button(); $('a').button(); $('input[type="button"]').button(); $('input[type="submit"]').button(); $('input.one').button(); $('.set').buttonset(); }); </script>