我几乎完成了我的文档管理器的项目，但我被要求添加切换按钮。我已经链接了 javascript 和 css 代码，但我坚持使用 html 代码。我知道把
<input type = 'checkbox' .... />
任何人都可以帮助填写其余部分吗？我真的被困住了。
非常感谢提前
user1703470
问问题
777 次
3 回答
1
<input type="checkbox" id="clickme" name="Notifications"> Notifications<br />
<div id="notifications">Notifications</div>
$('#clickme').click(function() {
$('#notifications').toggle('slow', function() {
// some code after completion
});
});
如果您想要一些其他效果，例如 CSS 更改或其他一些事件，可以用一些代码替换问号。这不是必需的，因此您可以改用它来删除它。
$('#clickme').click(function(){
$('#notifications').toggle('slow');
});
使用上面的代码，您将有一个复选框，旁边是文本通知，当有人单击复选框时将执行 .click 函数，当发生这种情况时，将执行 .toggle 函数。.toggle 函数的作用是切换 #notifications 元素上的显示属性（因此您的 div 包含通知）。因此，当您单击复选框时，它将在隐藏和可见之间切换通知。
至于代码，“//完成后的一些代码”这是您可以放置更多您想要执行的代码的地方，如果您不确定那是什么，因为您可能不需要该部分所以你可以使用我放的第二个示例代码。您应该在您的 init 函数中的页面上的 javascript 标记中添加此代码，例如：
$(document).ready(function(){
//the code I showed above
});
于 2012-10-02T13:21:08.953 回答
0
在不超出您对这个项目的教育范围的情况下，我建议从以下基础开始。您想要的确切按钮包含在 iOS 框架类UISwitch中，但在这里我们不要太过分了 :)
从创建前端 html 结构开始，在标签中包含 css 和 javascript 链接，创建一个 javascript 文件夹，并在其中创建一个 .js 文件。
在触发按钮单击事件的任何类型的表单中使用的按钮/复选框很常见，您需要确定选择了哪些按钮：
<head>
<link href="yourstylesheet.css" rel="stylesheet" type="text/css">
<link href="~/javascript/mobilejavascript.js" type="text/javascript" />
</head>
<input type="radio" name="radio1" class="radio_form" value="male"/>
<input type="radio" name="radio2" class="radio_form" value="female"/>
on submit of form...
var isMale = false;
$('.radio_form').each(function(){
//perform some check or store information
if($(this).val('male') == true)
{
isMale = true;
}
//and so on...
});
现在在您的样式表 (.css) 中：
.radio_form {
//style properties will go here, such as radius, border, width, height, etc..
}
如果这是您的标准，这应该可以帮助您朝着正确的方向开始
于 2012-10-02T13:36:07.170 回答
0
感谢您的澄清。像这样创建一个切换按钮：
您可以使用如下所示的代码：
<div id="toggleImage">
<img id="toggleOn" class="toggle" src="on.jpg" />
<img id="toggleOff" class="toggle" src="off.jpg" />
</div>
$(document).ready(function(){
$('.toggle').click(function(){
$(this).hide();
$(this).sibbling('img').show();
/* the code for whatever you are toggling goes here */
});
});
您正在切换的代码可能包括显示或隐藏通知内容或您希望在页面上切换的任何内容。对于此 on.jpg 是切换“打开”图像，而 off.jpg 是切换“关闭”图像，就像 iphone 的按钮一样。
于 2012-10-02T14:06:35.480 回答