「スイッチブロック」が左右(オンとオフ)にシフトするたびに状態を保存するための基本的なチェックボックスを備えた単純なアニメーションの「オン」と「オフ」のスイッチコントロールを作成しようとしています。私は使用する必要があります、私が得る値は常に真です、私が間違っていることをアドバイスしてください。ありがとう。:
ASCX:
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"> </script>
</head>
<body>
<div class="switchcontainer">
<div id="on">On</div>
<div id="off">Off</div>
<div class="block"></div>
</div>
<asp:CheckBox ID="chkSwitch" runat="server" Style="display:none"/>
<script>
$(".block").click(function () {
var $button = $(".block");
if ($button.data("lastMove") == "+=46") {
$('#<%= chkSwitch.ClientID %>').removeAttr('checked'); // --> change check state
$button.animate({
left: '-=46'
});
$button.data("lastMove", '-=46');
} else {
$('#<%= chkSwitch.ClientID %>').attr('checked', 'checked'); // --> change check state
$button.animate({
left: '+=46'
});
$button.data("lastMove", '+=46');
}
});
</script>
</body>
</html>
ASCX.CS
public partial class BoolSwitch : System.Web.UI.UserControl
{
public bool On
{
get { return chkSwitch.Checked; }
}
}
usercontrolを使用するいくつかのページ:
<%@ Register TagPrefix="BoolSwitch" TagName="BoolSwitch" Src="/UserControls/BoolSwitch.ascx" %>
<BoolSwitch:BoolSwitch runat="server" ID="boolSwitch_1" />
コードビハインド:
protected void Page_Load(object sender, EventArgs e)
{
var x = boolSwitch_1.On; // --> This value is always true;
}