'Front-End/jQueryUI' 카테고리의 글 목록

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

Front-End/jQueryUI 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>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 범위 슬라이더 - spinner(orientation, range) (0)	2017.02.10
[jQueryUI] 슬라이더 구현 - slider() (0)	2017.02.10
[jQueryUI] 수치 입력박스 (0)	2017.02.10
[jQueryUI] 버튼으로 날짜 팝업 만들기 - datepicker(showOn) (0)	2017.02.02
[jQueryUI] 날짜 선택 팝업의 범위 지정 - datepicker(minDate/maxDate) (0)	2017.02.02

리딩리드

,

[jQueryUI] 범위 슬라이더 - spinner(orientation, range)

Front-End/jQueryUI 2017. 2. 10. 16:11

범위 슬라이더 - spinner(orientation, range)

1. 정의

- range, value 매개변수를 이용하여 범위 슬라이더 구현

2. 예

<!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> <input id="count_max" type="text" size="3" readonly/> ~ <input id="count_min" type="text" size="3" readonly/> <div id="slider"></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(){ $('#slider').slider({ orientation:'vertical', min:0, max:200, range:true, values:[80.150], change:function(e,ui){ $('#count_min').val(ui.values[0]); $('#count_max').val(ui.values[1]); }, create:function(e, ui){ var values = $(this).slider('option','values'); $('#count_min').val(values[0]); $('#count_max').val(values[1]); } }); }); </script>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] jQuery 버튼 위젯(체크박스, 라디오, 버튼) - button(), buttonset() (0)	2017.02.10
[jQueryUI] 슬라이더 구현 - slider() (0)	2017.02.10
[jQueryUI] 수치 입력박스 (0)	2017.02.10
[jQueryUI] 버튼으로 날짜 팝업 만들기 - datepicker(showOn) (0)	2017.02.02
[jQueryUI] 날짜 선택 팝업의 범위 지정 - datepicker(minDate/maxDate) (0)	2017.02.02

리딩리드

,

[jQueryUI] 슬라이더 구현 - slider()

Front-End/jQueryUI 2017. 2. 10. 15:41

슬라이더 구현 - slider()

1. 정의

-slider() 위젯을 사용하여 슬라이더 구현

2. 구문

- $(슬라이더).slider({매개변수: 값...})

1) 매개변수

매개변수	개요
max	최대값
min	최소값
step	증감 간격
value	슬라이더 초기값
values	슬라이더의 초기값(손잡이 두개)
animate	클릭시 그 장소에 손잡이 이동 속도(fast/slow)
orientation	슬라이더 방향(horizontal/vertical)
range	범위 슬라이더 생성
create	슬라이더 생성 시 이벤트 리스너
change	슬라이더 값을 변경 했을 때

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> <input id="count" type="text" size="3" readonly/> <div id="slider" style="width:200px;"></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(){ $('#slider').slider({ min:0, max:200, step:10, value:100, change:function(e, ui){ $('#count').val(ui.value); }, create:function(e, ui){ $('#count').val($(this).slider('option','value')); } }); }); </script>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] jQuery 버튼 위젯(체크박스, 라디오, 버튼) - button(), buttonset() (0)	2017.02.10
[jQueryUI] 범위 슬라이더 - spinner(orientation, range) (0)	2017.02.10
[jQueryUI] 수치 입력박스 (0)	2017.02.10
[jQueryUI] 버튼으로 날짜 팝업 만들기 - datepicker(showOn) (0)	2017.02.02
[jQueryUI] 날짜 선택 팝업의 범위 지정 - datepicker(minDate/maxDate) (0)	2017.02.02

리딩리드

,

[jQueryUI] 수치 입력박스

Front-End/jQueryUI 2017. 2. 10. 15:30

수치 입력박스 - spinner()

1. 정의

- jQueryUI 의 spinner 위젯을 이용하여 수치를 증감하는 업다운 버튼 구현

2. 구문

$(텍스트 상자).spinner({매개변수:값,...})

1) 매개변수

매개변수	개요
min	입력 최소값
max	입력 최대값
step	증감 버튼으로 증가/감소
incremental	스피너를 눌렀을 경우 증감량
icons	스피너에 표시하는 아이콘
culture	지정한 지역의 서식으로 수치
numberFormat	값의
numberFormat	값의

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> <label for="price">Price:</label> <input type="text" id="price" value="1000" size="5"/> </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(){ $('#price').spinner({ max:10000, min:1000, step:100 }) ; }); </script>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 범위 슬라이더 - spinner(orientation, range) (0)	2017.02.10
[jQueryUI] 슬라이더 구현 - slider() (0)	2017.02.10
[jQueryUI] 버튼으로 날짜 팝업 만들기 - datepicker(showOn) (0)	2017.02.02
[jQueryUI] 날짜 선택 팝업의 범위 지정 - datepicker(minDate/maxDate) (0)	2017.02.02
[jQueryUI] 간편한 날짜 선택 팝업의 형식 변경 - datepicker(format) (0)	2017.02.02

리딩리드

,

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

'Front-End/jQueryUI'에 해당되는 글 38건

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

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 범위 슬라이더 - spinner(orientation, range)

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 슬라이더 구현 - slider()

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 수치 입력박스

'Front-End > jQueryUI' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바