Question

我差不多完成了我的Document Manager项目，但是我被要求添加Toggle按钮。我已经链接了javascript和css代码，但我坚持使用html代码。

我知道

  <input type = 'checkbox' .... />

任何人都可以帮助填补其余部分吗？我真的被卡住了。

非常感谢

Answer 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');
});

使用上面的代码，你将有一个复选框，旁边会有文本Notifications，当有人点击复选框时会执行.click函数，当发生这种情况时，会执行.toggle函数。 .toggle函数的作用是切换#notifications元素上的display属性（所以你的div包含通知）。因此，当您单击该复选框时，它将在隐藏和可见之间切换通知。

至于代码，“//完成后的一些代码”这是你可以放置你想要执行的更多代码的地方，如果你不确定它是什么意思你不可能需要该部分，以便您可以使用我放的第二个示例代码。您应该在init函数中的页面上的javascript标记中添加此代码，如：

$(document).ready(function(){
     //the code I showed above
});

Answer 2

在没有超出您的教育范围的情况下，我建议从下面的基础开始。你想要的确切按钮包含在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..
}

如果这是您的标准，这可以帮助您开始正确的方向

Answer 3

感谢您的澄清。创建一个像这样的切换按钮：

http://www.google.co.uk/imgres?num=10&hl=en&biw=1366&bih=643&tbm=isch&tbnid=CfXL9cv8l0CfvM:&imgrefurl=http://mitchjinfo.deviantart.com/art/iPhone-Toggle-Button-173878367&docid=KCfqyS-NlBl4eM&imgurl=http://fc03.deviantart.net/fs71/f/2010/215/2/0/iPhone_Toggle_Button_by_mitchjinfo.png&w=400&h=300&ei=ffJqUMnTOcP80QXosYCwDA&zoom=1&iact=rc&dur=1&sig=117831312973390827386&page=1&tbnh=136&tbnw=224&start=0&ndsp=23&ved=1t:429,r:0,s:0,i:71&tx=115&ty=55

你可以使用看起来像这样的代码：

<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是切换“on”图像，off.jpg是切换“关闭”图像，就像iphone的按钮一样。

jQuery / jQTouch - 如何编码切换按钮？

3 个答案: