jQuery、CSS、HTML を使用して iOS スタイルのスイッチを作成しました。
現時点では、クリックでトリガーされます。クリック機能を維持したいのですが、ドラッグ機能も欲しいです。これはプラグインなしで可能で、どのように行われますか?
ドラッグ機能なしの作業例。 http://jsfiddle.net/buduR/5/
JS。
$(document).ready(function(){
$('.element.switch').each(function(){
$(this).css('width',($(this).find('li:first').width() + 40) + 'px');
$(this).find('span').css('left',($(this).find('li:first').width() + 18) + 'px')
$(this).find('li:last').css('left',($(this).find('li:first').width() + 30) + 'px').css('text-align','right');
if($(this).find('li:first').attr('data-val') == $(this).find('input').val()){ $(this).find('ol').css('left',0); }
else { $(this).find('ol').css('left','-' + ($(this).find('li:first').width() + 20) + 'px'); }
});
$('.element.switch').click(function(){
if($(this).find('li:first').attr('data-val') == $(this).find('input').val()){
$(this).find('ol').animate({left:- ($(this).find('li:first').width() + 20)},500);
$(this).find('input').val($(this).find('li:last').attr('data-val'));
}
else {
$(this).find('ol').animate({left:0},500);
$(this).find('input').val($(this).find('li:first').attr('data-val'));
}
});
});