CODEWITHSUNDEEP
javascriptjqueryhtmljqtouch
user1703470
user1703470

Reputation:

jQuery/jQTouch - How do you code a toggle button?

I'm almost finished my Document Manager's project, but I have been asked to add in Toggle buttons. I have already linked the javascript and css code but am stuck with the html code. I know to put the 

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

can anyone help fill in the rest? I'm really stuck.

Thanks so much in advance

Upvotes: 0

Views: 795

Answers (3)

Ben Sewards
Ben Sewards

Reputation: 2661

Without going out of your educational scope of this project, I suggest starting off with the basics below. The exact button you want is included in the iOS framework class UISwitch, but let's not get way over our heads here :)

Start of with creating the front-end html structure, include the css and javascript links in your tag, create a javascript folder and inside, a .js file.

It's common to see buttons/check boxes used in any type of form where a button click event is triggered, and you need to determine which buttons are selected:

<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...
});

Now in your style sheet (.css):

.radio_form {
  //style properties will go here, such as radius, border, width, height, etc..
}

This should help you get started in the right direction if this is your criteria

Upvotes: 0

ProdigyProgrammer
ProdigyProgrammer

Reputation: 415

thanks for the clarification. to create a toggle button like this:

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

you can use code that looks something like this:

<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 */
    });
});

the code for whatever you are toggling could include showing or hiding the Notification content or whatever it is you would like to be toggling on the page. For this on.jpg is the toggle "on" image, and off.jpg is the toggle "off" image just like the buttons for the iphone.

Upvotes: 0

ProdigyProgrammer
ProdigyProgrammer

Reputation: 415

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

the question marks could be replaced with some code if you would like to have some other effect, like a css change or some other event. it is not necessary so you can remove it by using this instead.

$('#clickme').click(function(){
    $('#notifications').toggle('slow');
});

with this code above you will have a checkbox and beside it will be the text Notifications, the .click function will be executed when someone clicks on the checkbox, when this happens the .toggle function will then be executed. What the .toggle function does is it switches the display property on the #notifications element (so your div that contains notifications). so when you click the checkbox it will switch the notifications between being hidden and visible.

As for the code, "//some code after completion" this is where you could have put further code that you would like to have executed, if you aren't sure what that is for its likely that you don't need that section so you can use the second sample code that I put. You should add this code within javascript tags on your page within your init function like:

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

Upvotes: 1

Related Questions