メモ用サンプルです。
ちょっとだけ色の変更や、JQueryを用いた角丸の追加などを行っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>JQuery UI Button</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
.buttons{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="buttons">
<button>click</button>
</div>
<div class="buttons">
<input type="checkbox" id="check"><label for="check">click click!</label>
</div>
<div class="buttons">
<input type="radio" name="radio" id="radio1"><label for="radio1">1</label>
<input type="radio" name="radio" id="radio2"><label for="radio2">2</label>
<input type="radio" name="radio" id="radio3"><label for="radio3">3</label>
</div>
<div id="set">
<input type="radio" name="radioset" id="radio4"><label for="radio4">4</label>
<input type="radio" name="radioset" id="radio5"><label for="radio5">5</label>
<input type="radio" name="radioset" id="radio6"><label for="radio6">6</label>
</div>
<script>
$(function () {
$('button').button().click(function () {
console.log($(this).css("background-color"));
if ($(this).css("background-color") === "rgb(255, 0, 0)") {
$(this).css("background", "none").css("background-color", "rgba(0, 50, 20, 0.6)");
} else {
$(this).css("background", "none").css("background-color", "rgb(255, 0, 0)");
}
});
$('#check').button();
$('input[name=radio]').button();
//make some buttons as a set
$('#set').buttonset();
$('.buttons .ui-button').css("border-radius", "50px");
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿