Permalink
Browse files

adding itoggle support files

  • Loading branch information...
nurey committed May 18, 2011
1 parent cb301ed commit 5f6decf3060150bea65f586f311c244d2d1ddd54
View
Binary file not shown.
@@ -0,0 +1,124 @@
+/*---------------
+ * jQuery iToggle Plugin by Engage Interactive
+ * Examples and documentation at: http://labs.engageinteractive.co.uk/itoggle/
+ * Copyright (c) 2009 Engage Interactive
+ * Version: 1.0 (10-JUN-2009)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ * Requires: jQuery v1.3 or later
+---------------*/
+
+(function($){
+ $.fn.iToggle = function(options) {
+
+ clickEnabled = true;
+
+ var defaults = {
+ type: 'checkbox',
+ keepLabel: true,
+ easing: false,
+ speed: 200,
+ onClick: function(){},
+ onClickOn: function(){},
+ onClickOff: function(){},
+ onSlide: function(){},
+ onSlideOn: function(){},
+ onSlideOff: function(){}
+ },
+ settings = $.extend({}, defaults, options);
+
+ this.each(function(){
+ var $this = $(this);
+ if($this.attr('tagName') == 'INPUT'){
+ var id=$this.attr('id');
+ label(settings.keepLabel, id);
+ $this.addClass('iT_checkbox').before('<label class="itoggle" for="'+id+'"><span></span></label>');
+ if($this.attr('checked')){
+ $this.prev('label').addClass('iTon');
+ }else{
+ $this.prev('label').addClass('iToff');
+ }
+ }else{
+ $this.children('input:'+settings.type).each(function(){
+ var id = $(this).attr('id');
+ label(settings.keepLabel, id);
+ $(this).addClass('iT_checkbox').before('<label class="itoggle" for="'+id+'"><span></span></label>');
+ if($(this).attr('checked')){
+ $(this).prev('label').addClass('iTon');
+ }else{
+ $(this).prev('label').addClass('iToff');
+ }
+ if(settings.type == 'radio'){
+ $(this).prev('label').addClass('iT_radio');
+ }
+ });
+ }
+ });
+
+ function label(e, id){
+ if(e == true){
+ if(settings.type == 'radio'){
+ $('label[for='+id+']').addClass('ilabel_radio');
+ }else{
+ $('label[for='+id+']').addClass('ilabel');
+ }
+ }else{
+ $('label[for='+id+']').remove();
+ }
+ }
+
+ $('label.itoggle').click(function(){
+ if(clickEnabled == true){
+ clickEnabled = false;
+ if($(this).hasClass('iT_radio')){
+ if($(this).hasClass('iTon')){
+ clickEnabled = true;
+ }else{
+ slide($(this), true);
+ }
+ }else{
+ slide($(this));
+ }
+ }
+ return false;
+ });
+ $('label.ilabel').click(function(){
+ if(clickEnabled == true){
+ clickEnabled = false;
+ slide($(this).next('label.itoggle'));
+ }
+ return false;
+ });
+
+ function slide($object, radio){
+ settings.onClick.call($object); //Generic click callback for click at any state
+ h=$object.innerHeight();
+ t=$object.attr('for');
+ if($object.hasClass('iTon')){
+ settings.onClickOff.call($object); //Click that turns the toggle to off position
+ $object.animate({backgroundPosition:'100% -'+h+'px'}, settings.speed, settings.easing, function(){
+ $object.removeClass('iTon').addClass('iToff');
+ clickEnabled = true;
+ settings.onSlide.call(this); //Generic callback after the slide has finnished
+ settings.onSlideOff.call(this); //Callback after the slide turns the toggle off
+ });
+ $('input#'+t).removeAttr('checked');
+ }else{
+ settings.onClickOn.call($object);
+ $object.animate({backgroundPosition:'0% -'+h+'px'}, settings.speed, settings.easing, function(){
+ $object.removeClass('iToff').addClass('iTon');
+ clickEnabled = true;
+ settings.onSlide.call(this); //Generic callback after the slide has finnished
+ settings.onSlideOn.call(this); //Callback after the slide turns the toggle on
+ });
+ $('input#'+t).attr('checked','checked');
+ }
+ if(radio == true){
+ name = $('#'+t).attr('name');
+ slide($object.siblings('label[for]'));
+ }
+ }
+
+ };
+})(jQuery);

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,94 @@
+/* ---------------------------------------------
+ TOGGLE.CSS
+-----------------------------------------------*/
+
+div#itoggle{
+ background:#FFF;
+ padding:20px 20px 0;
+ -moz-border-radius:10px;
+ -webkit-border-radius:10px;
+ color:#333;
+ }
+div#itoggle h3{
+ margin-bottom:4px;
+ font-size: 14px;
+ font-weight:bold;
+ }
+div#itoggle p{
+ color:#666;
+ margin-bottom:10px;
+ }
+
+div#console{
+ display:none;
+ position:absolute;
+ top:8px;
+ right:8px;
+ width:160px;
+ padding:6px 8px 8px 8px;
+ text-align:right;
+ background:#000;
+ -moz-border-radius:6px;
+ -webkit-border-radius:6px;
+ background:url(/global/images/console.gif);
+ }
+div#console p{
+ margin:0;
+ font-size:11px;
+ font-family:"Courier New", Courier, monospace;
+ }
+
+div#itoggle input.iT_checkbox_on{
+ display:block !important;
+ float:left;
+ position:relative !important;
+ top:-43px !important;
+ left:100px !important;
+ margin-bottom:-43px;
+ }
+
+/* -----------------------------
+ This is the important bit
+-------------------------------*/
+
+div#itoggle label.ilabel{
+ display:block;
+ font-size:12px;
+ padding-bottom:10px;
+ cursor:pointer;
+ }
+
+div#itoggle label.itoggle,
+div#itoggle label.itoggle span{
+ display: block;
+ width: 93px;
+ height: 27px;
+ margin-bottom: 20px;
+ background: url(../images/itoggle.png) left bottom no-repeat;
+ cursor:pointer;
+ text-indent:-5000px;
+ }
+div#itoggle label.itoggle.iToff{
+ background-position:right bottom;
+ }
+div#itoggle label.itoggle span{
+ background-position: left top;
+ margin: 0;
+ }
+div#itoggle input.iT_checkbox{
+ position:absolute;
+ top:-9999px;
+ left:-9999px;
+ }
+
+/*
+ If you want the corners to be
+ transparent, add these two lines
+ to the main block above. Only
+ works on webkit and mozilla browsers
+ For more reliable results, make your
+ own png using the supplied .psd
+
+ -moz-border-radius:6px;
+ -webkit-border-radius:6px;
+*/
View
@@ -1,3 +1,41 @@
<html>
+<head>
+<link rel="stylesheet" type="text/css" href="/stylesheets/engage.itoggle.css"/>
+<script type="text/javascript" src="/javascripts/jquery-1.6.1.min.js"></script>
+<script type="text/javascript" src="/javascripts/engage.itoggle.js"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+ $('input#example').iToggle({
+ // easing: 'easeOutExpo',
+ type: 'radio',
+ keepLabel: true,
+ // easing: 'easeInExpo',
+ speed: 300,
+ onClick: function(){
+ //Function here
+ },
+ onClickOn: function(){
+ //Function here
+ },
+ onClickOff: function(){
+ //Function here
+ },
+ onSlide: function(){
+ //Function here
+ },
+ onSlideOn: function(){
+ //Function here
+ },
+ onSlideOff: function(){
+ //Function here
+ },
+ });
+});
+</script>
+</head>
+
+<body>
Hello World!
+</body>
+<input type="checkbox" id="example_1" />
</html>

0 comments on commit 5f6decf

Please sign in to comment.