「フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける：slideDown/slideUp版」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける：slideDown/slideUp版

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける：slideDown/slideUp版</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
<script type="text/javascript">
ko.bindingHandlers.slideVisible = {
update: function(element, valueAccessor, allBindingsAccessor)
{
// 現状の値と、サブプロパティ一覧の取得
var value = valueAccessor(), allBindings = allBindingsAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(value);
// サブプロパティ：slideDurationの値をセット
// 400ms is default duration unless otherwise specified
var duration = allBindings.slideDuration || 400;
// DOMをいじる
if (valueUnwrapped == true)
{
$(element).slideDown(duration);
}
else
{
$(element).slideUp(duration);
}
}
};
$(document).ready(function () {
ko.applyBindings(new ViewModel());
});
function ViewModel() {
var self = this;
self.focusInput = ko.observable(false);
self.inputData = ko.observable("");
self.activeDataArea = ko.observable(false);
self.addDataArea = ko.computed(function() {
if (self.focusInput() == true)
{
// フォーカスがあたったときactiveDataArea()とtrueにしておくフォーカスが外れても問題ないように。
self.activeDataArea(true);
return true;
}
else if (self.activeDataArea() == true)
{
// フォーカスが外れ、activeDataArea()がtrueのとき
return true;
}
return false;
}, self);
self.addData1 = function()
{
self.inputData("丸ごとしまうま");
self.activeDataArea(false);
}
self.addData2 = function()
{
self.inputData("ねぎま");
self.activeDataArea(false);
}
}
</script>
<style type="text/css">
.inData
{
position:absolute;
top:0;
left:20px;
width:200px;
padding:10px;
background:#f0f0f0;
border:1px solid #ccc;
cursor:pointer;
}
</style>
</head>
<body>
<h1>フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける：slideDown/slideUp版</h1>
<input type="text" data-bind="hasfocus: focusInput, value: inputData" /><br />
<div style="position:relative;top:0;left:0;background:red;" data-bind="slideVisible: addDataArea">
<button data-bind="event: {click: addData1}, clickBubble: false">「丸ごとしまうま」を追加</button>
<button data-bind="event: {click: addData2}, clickBubble: false">「ねぎま」を追加</button>
</div>
<input type="text" /><br />
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>