Skip to content

Commit

Permalink
start redesign html for new animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@nostalgiaz
nostalgiaz committed Sep 12, 2012
1 parent 8d2b477 commit bfcf3e0
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 26 deletions.
50 changes: 32 additions & 18 deletions examples/index.html
View file
Expand Up @@ -50,6 +50,20 @@ <h3>Basic</h3>
<hr>
</div>
</div>
<div class="row-fluid">

<div class="span4">
<div style="display: inline-block; width: 100px; overflow: hidden; height: 20px; position: relative;">
<div style="display: inline-block; width: 150px; position: absolute; top: 0; left: 0;">
<span style="display: inline-block; width: 50px; background: #8a2be2; float: left;">ON</span>
<label style="display: inline-block; width: 50px; height: 20px; margin:0; background: red; float: left;"></label>
<span style="display: inline-block; width: 50px; background: green; float: left;">OFF</span>
<input type="checkbox" value="value1" checked="checked" style="display: none">
</div>
</div>
</div>
</div>
<hr>
<div class="row-fluid">

<div class="span4">
Expand Down Expand Up @@ -329,29 +343,29 @@ <h3>Class</h3>
</div>
<div class="row-fluid">

<div class="span4">
<label for="checkbox15">one</label>
<div class="span4">
<label for="checkbox15">one</label>

<div class="toggle-button-class">
<input id="checkbox15" type="checkbox" value="value1" checked="checked">
</div>
<br>
<br>
<label for="checkbox16">two</label>
<div class="toggle-button-class">
<input id="checkbox15" type="checkbox" value="value1" checked="checked">
</div>
<br>
<br>
<label for="checkbox16">two</label>

<div class="toggle-button-class">
<input id="checkbox16" type="checkbox" value="value1" checked="checked">
</div>
<br>
<br>
<div class="toggle-button-class">
<input id="checkbox16" type="checkbox" value="value1" checked="checked">
</div>
<br>
<br>

<label for="checkbox17">three</label>
<label for="checkbox17">three</label>

<div class="toggle-button-class">
<input id="checkbox17" type="checkbox" value="value1" checked="checked" disabled="">
</div>
<br>
<div class="toggle-button-class">
<input id="checkbox17" type="checkbox" value="value1" checked="checked" disabled="">
</div>
<br>
</div>
<div class="span8">

<h4>Html:</h4>
Expand Down
33 changes: 25 additions & 8 deletions static/js/jquery.toggle.buttons.js
View file
Expand Up @@ -70,16 +70,10 @@
$(this).find('label').click();
});

$element.find('input').on('change', function (e) {
e.stopPropagation();
e.preventDefault();

$(this).closest('.toggle-button').toggleButtons("toggleState", true);
});

$element.find('label').on('click', function (e) {
var mainClickFunction = function (e) {
e.stopPropagation();
e.preventDefault();
console.log('click2')

$element = $(this).parent();

Expand All @@ -98,7 +92,30 @@

$element.find('input').attr('checked', active);
options.onChange($element, active, e);
};

$element.find('input').on('change', function (e) {
e.stopPropagation();
e.preventDefault();

$(this).closest('.toggle-button').toggleButtons("toggleState", true);
});

$element.find('label').on('mousedown', function (e) {
e.stopPropagation();
e.preventDefault();
console.log('mouse down');
$(this).unbind('click');
$(this).bind('click', function () {
console.log('click');
$(this).unbind('click');
$(this).bind('click', mainClickFunction);
$(this).click();
return false;
});
});

$element.find('label').on('click', mainClickFunction);
});
},
toggleActivation: function () {
Expand Down

0 comments on commit bfcf3e0

Please sign in to comment.