단추
적절한 호버 및 활성 스타일을 갖춘 테마 지정 가능 버튼을 사용하여 표준 양식 요소(예: 버튼, 입력 필드, 앵커)의 기능을 향상하세요.
버튼 위젯에 대한 자세한 내용은 API 문서 버튼 위젯을 참조하세요.
기본 기능
버튼 마크업 인스턴스에 사용 가능: 버튼 요소, 제출 유형의 입력 요소 및 앵커.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按钮（Button） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
</head>
<body>
<button>一个 button 元素</button>
<input type="submit" value="一个提交按钮">
<a href="#">一个锚</a>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Checkbox
버튼 구성 요소를 통해 체크박스를 토글 버튼 스타일로 표시합니다. 확인란과 연결된 레이블 요소는 버튼 텍스트 역할을 합니다.
이 예는 공용 컨테이너에서 .buttonset()를 호출하여 버튼 스타일로 표시되는 세 개의 확인란을 보여줍니다.
인스턴스
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按钮（Button） - 复选框</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#check" ).button();
$( "#format" ).buttonset();
});
</script>
<style>
#format { margin-top: 2em; }
</style>
</head>
<body>
<input type="checkbox" id="check"><label for="check">切换</label>
<div id="format">
<input type="checkbox" id="check1"><label for="check1">B</label>
<input type="checkbox" id="check2"><label for="check2">I</label>
<input type="checkbox" id="check3"><label for="check3">U</label>
</div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
아이콘
텍스트와 아이콘의 다양한 조합이 있는 일부 버튼
인스턴스
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按钮（Button） - 图标</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "button:first" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-locked"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
</script>
</head>
<body>
<button>只带有图标的按钮</button>
<button>图标在左侧的按钮</button>
<button>带有两个图标的按钮</button>
<button>带有两个图标且不带文本的按钮</button>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
라디오 선택
세 개의 라디오 버튼이 버튼 세트로 변환됩니다.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按钮（Button） - 单选</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">选择 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">选择 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">选择 3</label>
</div>
</form>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
분할 버튼
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按钮（Button） - 分割按钮</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-menu { position: absolute; width: 100px; }
</style>
<script>
$(function() {
$( "#rerun" )
.button()
.click(function() {
alert( "Running the last action" );
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click(function() {
var menu = $( this ).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$( document ).one( "click", function() {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});
</script>
</head>
<body>
<div>
<div>
<button id="rerun">运行最后的动作</button>
<button id="select">选择一个动作</button>
</div>
<ul>
<li><a href="#">打开...</a></li>
<li><a href="#">保存</a></li>
<li><a href="#">删除</a></li>
</ul>
</div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
Toolbar
멀티미디어 플레이어용 도구 모음입니다. 기본 마크업을 살펴보세요. 일부 버튼 요소, 셔플 버튼은 체크박스 유형의 입력이고 반복 옵션은 라디오 유형의 세 가지 입력입니다.
인스턴스
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 按钮（Button） - 工具栏</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
*+html #toolbar {
display: inline;
}
</style>
<script>
$(function() {
$( "#beginning" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#rewind" ).button({
text: false,
icons: {
primary: "ui-icon-seek-prev"
}
});
$( "#play" ).button({
text: false,
icons: {
primary: "ui-icon-play"
}
})
.click(function() {
var options;
if ( $( this ).text() === "play" ) {
options = {
label: "pause",
icons: {
primary: "ui-icon-pause"
}
};
} else {
options = {
label: "play",
icons: {
primary: "ui-icon-play"
}
};
}
$( this ).button( "option", options );
});
$( "#stop" ).button({
text: false,
icons: {
primary: "ui-icon-stop"
}
})
.click(function() {
$( "#play" ).button( "option", {
label: "play",
icons: {
primary: "ui-icon-play"
}
});
});
$( "#forward" ).button({
text: false,
icons: {
primary: "ui-icon-seek-next"
}
});
$( "#end" ).button({
text: false,
icons: {
primary: "ui-icon-seek-end"
}
});
$( "#shuffle" ).button();
$( "#repeat" ).buttonset();
});
</script>
</head>
<body>
<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="beginning">开头</button>
<button id="rewind">快退</button>
<button id="play">播放</button>
<button id="stop">停止</button>
<button id="forward">快进</button>
<button id="end">结尾</button>
<input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label>
<span id="repeat">
<input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label>
<input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label>
<input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label>
</span>
</div>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
