Skip to content

Instantly share code, notes, and snippets.

@sdellis

sdellis/index.html

Created March 30, 2015 20:01
Show Gist options
  • Save sdellis/9af995f47076a53835e4 to your computer and use it in GitHub Desktop.
Save sdellis/9af995f47076a53835e4 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/gezadu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="notice" class="alert-info"></div>
<script id="jsbin-javascript">
$.widget( "pul.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({
complete: function( event, data ) {
$( "#notice" ).text( "Callbacks are great!" );
$( "#notice" ).show().fadeOut( 2600, "swing" );
}
})
.data( "pul-progressbar" );
// Call a method directly on the plugin instance.
bar.option( "value", 150 );
// Access properties on the plugin instance.
console.log( bar.options.value );
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"><\/script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="notice" class="alert-info"></div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">$.widget( "pul.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({
complete: function( event, data ) {
$( "#notice" ).text( "Callbacks are great!" );
$( "#notice" ).show().fadeOut( 2600, "swing" );
}
})
.data( "pul-progressbar" );
// Call a method directly on the plugin instance.
bar.option( "value", 150 );
// Access properties on the plugin instance.
console.log( bar.options.value );
</script></body>
</html>
Raw
jsbin.gezadu.js
$.widget( "pul.progressbar", {
options: {
value: 0
},
_create: function() {
this.options.value = this._constrain(this.options.value);
this.element.addClass( "progressbar" );
this.refresh();
},
_setOption: function( key, value ) {
if ( key === "value" ) {
value = this._constrain( value );
}
this._super( key, value );
},
_setOptions: function( options ) {
this._super( options );
this.refresh();
},
refresh: function() {
var progress = this.options.value + "%";
this.element.text( progress );
if ( this.options.value == 100 ) {
this._trigger( "complete", null, { value: 100 } );
}
},
_constrain: function( value ) {
if ( value > 100 ) {
value = 100;
}
if ( value < 0 ) {
value = 0;
}
return value;
},
_destroy: function() {
this.element
.removeClass( "progressbar" )
.text( "" );
}
});
var bar = $( "<div></div>" )
.appendTo( "body" )
.progressbar({
complete: function( event, data ) {
$( "#notice" ).text( "Callbacks are great!" );
$( "#notice" ).show().fadeOut( 2600, "swing" );
}
})
.data( "pul-progressbar" );
// Call a method directly on the plugin instance.
bar.option( "value", 150 );
// Access properties on the plugin instance.
console.log( bar.options.value );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment