MVC3、Jquery 1.7、および CSS3 を使用した EditorTemplates のブール型の例
EditorTemplates Boolean.cshtml
@model bool
@{
string propertyName = Html.ViewData.ModelMetadata.PropertyName;
}
<div class="field switch">
@if (@Model == true)
{
<label class="cb-enable selected">
<span>Yes</span></label>
<label class="cb-disable">
<span>No</span></label>
<input type="checkbox" id="@propertyName" class="checkbox" name="@propertyName" value="true" checked=checked />
}
else
{
<label class="cb-enable">
<span>Yes</span></label>
<label class="cb-disable selected">
<span>No</span></label>
<input type="checkbox" id="@propertyName" class="checkbox" name="@propertyName" value="false" />
}
</div>
<script>
$(document).ready(function () {
$(".cb-enable").click(function () {
var parent = $(this).parents('.switch');
$('.cb-disable', parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox', parent).attr('checked', true);
$('.checkbox', parent).attr('value', true);
});
$(".cb-disable").click(function () {
var parent = $(this).parents('.switch');
$('.cb-enable', parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox', parent).attr('checked', false);
$('.checkbox', parent).attr('value', false);
});
});
</script>
CSS
.cb-enable, .cb-disable, .cb-enable span, .cb-disable span
{
display: block; float: left;
}
.cb-enable {
display: block;
float: left;
border: 1px solid #EEE;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 5px;
}
.cb-disable
{
display: block; float: left; border: 1px solid #EEE;
.roundedCorners(0px,5px,0px,5px);
}
.cb-enable span, .cb-disable span
{
line-height: 30px; display: block; background-repeat: no-repeat;
}
.cb-enable span { padding: 0 10px; }
.cb-disable span { padding: 0 10px; }
.cb-disable.selected
{
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.25))),#D5D5D5;
background: -webkit-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
background: -moz-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
background: -o-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
background: -ms-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
background: linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#D5D5D5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 5px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 1px;
color: white;
}
.cb-disable.selected span { color: #fff; }
.cb-enable.selected
{
background: #129EE8;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.25))),#129EE8;
background: -webkit-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
background: -moz-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
background: -o-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
background: -ms-linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
background: linear-gradient(top, transparent,rgba(0, 0, 0, 0.25)),#129EE8;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 5px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 1px;
}
.cb-enable.selected span { color: #fff; }
.switch label { cursor: pointer; }
.switch input { display: none; }