- This topic is empty.
Viewing 1 post (of 1 total)
-
Im working on making a webapp and have been using some code from the coloredlists.com example on making a webapp. Anyways I’m trying to figure out how to make the following code look like the correct code as in the example.
As you can see that last functions of the code are very similar and they work, im trying to make the first part of code in the first example more like the second example. The part where the comment is iphone switch button – I have to have that there in order for the button to show correctly. Is there a way to shorten this?
Thanks for looking.
Code that kinda works but would like it more like the below code
jQuery.fn.iphoneSwitch = function(start_state, switched_on_callback, switched_off_callback, options) {
var state = start_state == 'off' ? start_state : 'off';
// define default settings
var settings = {
mouse_over: 'pointer',
mouse_out: 'default',
switch_on_container_path: 'images/iphone_switch_container_on_20.png',
switch_off_container_path: 'images/iphone_switch_container_off_20.png',
switch_path: 'images/iphone_switch_20.png',
switch_height: 20,
switch_width: 70
};
if(options) {
jQuery.extend(settings, options);
}
// create the switch
return this.each(function() {
var container;
var image;
// make the container
container = jQuery('');
// make the switch image based on starting state
image = jQuery('');
// insert into placeholder
jQuery(this).html(jQuery(container).html(jQuery(image)));
jQuery(this).mouseover(function(){
jQuery(this).css("cursor", settings.mouse_over);
});
jQuery(this).mouseout(function(){
jQuery(this).css("background", settings.mouse_out);
});
// click handling
jQuery(this).click(function() {
if(state == 'on') {
jQuery(this).find('.iphone_switch').animate({backgroundPosition: -39}, "slow", function() {
jQuery(this).attr('src', settings.switch_off_container_path);
switched_off_callback();
});
state = 'off';
var id = $(this).parent().attr('id');
toggleSwitch (id, 0);
}
else {
jQuery(this).find('.iphone_switch').animate({backgroundPosition: 0}, "slow", function() {
switched_on_callback();
});
jQuery(this).find('.iphone_switch').attr('src', settings.switch_on_container_path);
state = 'on';
var id = $(this).parent().attr('id');
toggleSwitch (id, 1);
}
});
});
};
/// Iphone switch Button
$('.switch').iphoneSwitch("on",
function() {
// $('#ajax').load('on.html');
},
function() {
// $('#ajax').load('off.html');
},
{
// switch_on_container_path: 'iphone_switch_container_off.png'
});
function toggleSwitch(id, isSwitch)
{
var token = $('#token').val();
$.ajax({
type: "POST",
url: "db-interaction/lists.php",
data: "action=switcher&id="+id
+ "&switcher=" + isSwitch
+ "&token=" + token
})
}
Now for the code that I would like it to look like, more like the example from the coloredlists tutorial
$(".donetab").live("click", function() {
var id = $(this).parent().attr('id');
if(!$(this).siblings('span').children('img.crossout').length)
{
$(this)
.parent()
.find("span")
.append("
")
.find(".crossout")
.animate({
width: "100%"
})
.end()
.animate({
opacity: "0.5"
},
"slow",
"swing",
toggleDone(id, 1));
}
else
{
$(this)
.siblings('span')
.find('img.crossout')
.remove()
.end()
.animate({
opacity : 1
},
"slow",
"swing",
toggleDone(id, 0));
}
});
function toggleDone(id, isDone)
{
var token = $('#token').val();
$.ajax({
type: "POST",
url: "db-interaction/lists.php",
data: "action=done&id="+id
+ "&done=" + isDone
+ "&token=" + token
})
}
Viewing 1 post (of 1 total)
- The forum ‘JavaScript’ is closed to new topics and replies.