위키
포럼
도구
바뀐글
랜덤

"JQuery UI 버튼"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(사용자 3명의 중간 판 7개는 보이지 않습니다)
1번째 줄: 1번째 줄:
{{소문자}}
{{소문자}}
==개요==
;jQuery UI 버튼
;jQuery UI 버튼


==소스 코드==
<syntaxhighlight lang='html'>
<source lang='html5'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>jQuery UI Button - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/black-tie/jquery-ui.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
<style>
<style>
.button_60 { font-size: .6em }
.button_10em { font-size: 1.0em }
.button_80 { font-size: .8em }
.button_09em { font-size: 0.9em }
.button_07em { font-size: 0.7em }
</style>
</style>
<body>
 
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" value='1'>
<button id='btn1' class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text button_60">버튼 1</span>
<span class="ui-button-text">버튼 1</span>
</button>
</button>
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" value='2'>
<button id='btn2' class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all button_10em">
<span class="ui-button-text button_80">버튼 2</span>
<span class="ui-button-text">버튼 2</span>
</button>
</button>
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all" value='3'>
<button id='btn3' class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all button_09em">
<span class="ui-button-text">버튼 3</span>
<span class="ui-button-text">버튼 3</span>
</button>
</button>
<button id='btn4' class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all button_07em">
<span class="ui-button-text">버튼 4</span>
</button>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
<script>
$('button').click(function() {
$('button').click(function() {
alert(this.value+" 버튼을 누르셨습니다.");
alert(this.id+" 버튼을 누르셨습니다.");
});
});
</script>
</script>
</body>
</syntaxhighlight>
</html>
<jsfiddle>cue75ufn</jsfiddle>
</source>
*예제: http://jmnote.com/jqui/button.php


==같이 보기==
==같이 보기==
*[[jQuery UI 버튼셋]]
*[[jQuery 모바일 버튼]]
*[[jQuery 모바일 버튼]]


[[분류: jQuery UI]]
[[분류: jQuery UI]]
[[분류: button]]
[[분류: button]]

2020년 11월 2일 (월) 02:53 기준 최신판

1 개요[ | ]

jQuery UI 버튼
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
.button_10em { font-size: 1.0em }
.button_09em { font-size: 0.9em }
.button_07em { font-size: 0.7em }
</style>

<button id='btn1' class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
	<span class="ui-button-text">버튼 1</span>
</button>
<button id='btn2' class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all button_10em">
	<span class="ui-button-text">버튼 2</span>
</button>
<button id='btn3' class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all button_09em">
	<span class="ui-button-text">버튼 3</span>
</button>
<button id='btn4' class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all button_07em">
	<span class="ui-button-text">버튼 4</span>
</button>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
$('button').click(function() {
	alert(this.id+" 버튼을 누르셨습니다.");
});
</script>

2 같이 보기[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=JQuery_UI_버튼&oldid=607356"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}