diff --git a/Gruntfile.js b/Gruntfile.js index 2f609fbe..7d1956db 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -29,7 +29,8 @@ module.exports = function(grunt) { preserveComments: 'some' }, files: { - 'dist/spin.min.js': 'js/spin.js' + 'dist/spin.min.js': 'js/spin.js', + 'dist/ladda.jquery.min.js': 'js/ladda.jquery.js' } } }, @@ -67,7 +68,7 @@ module.exports = function(grunt) { define: false } }, - files: [ 'Gruntfile.js', 'js/ladda.js' ] + files: [ 'Gruntfile.js', 'js/ladda.js', 'js/ladda.jquery.js' ] }, connect: { diff --git a/README.md b/README.md index b2048e57..dd6ab8c4 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,46 @@ All loading animations on the page can be stopped by using: Ladda.stopAll(); ``` +#### With jQuery + +If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the ```ladda('bind')``` method: + +```javascript +// Automatically trigger the loading animation on click +$( 'input[type=submit]' ).ladda( 'bind' ); + +// Same as the above but automatically stops after two seconds +$( 'input[type=submit]' ).ladda( 'bind', { timeout: 2000 } ); +``` + +If you want JavaScript control over your buttons you can use the following approach: + +```javascript +// Create a new instance of ladda for the specified button +var l = $( '.my-button' ).ladda(); + +// Start loading +l.ladda( 'start' ); + +// Will display a progress bar for 50% of the button width +l.ladda( 'setProgress', 0.5 ); + +// Stop loading +l.ladda( 'stop' ); + +// Toggle between loading/not loading states +l.ladda( 'toggle' ); + +// Check the current state +l.ladda( 'isLoading' ); +``` + +All loading animations on the page can be stopped by using: + +```javascript +$.ladda( 'stopAll' ); +``` + ## Module The spinner and Ladda can be loaded as a module using either Common.js or AMD. diff --git a/dist/ladda.jquery.min.js b/dist/ladda.jquery.min.js new file mode 100644 index 00000000..cd2bee13 --- /dev/null +++ b/dist/ladda.jquery.min.js @@ -0,0 +1,8 @@ +/*! + * Ladda for jQuery + * http://lab.hakim.se/ladda + * MIT licensed + * + * Copyright (C) 2013 Hakim El Hattab, http://hakim.se + */ +(function(t,e){if(void 0===e)return console.error("jQuery required for Ladda.jQuery");var i=[];e=e.extend(e,{ladda:function(e){"stopAll"===e&&t.stopAll()}}),e.fn=e.extend(e.fn,{ladda:function(n){var r=i.slice.call(arguments,1);return"bind"===n?(r.unshift(e(this).selector),t.bind.apply(t,r)):e(this).each(function(){var i,o=e(this);void 0===n?o.data("ladda",t.create(this)):(i=o.data("ladda"),i[n].apply(i,r))}),this}})})(this.Ladda,this.jQuery); \ No newline at end of file diff --git a/js/ladda.jquery.js b/js/ladda.jquery.js new file mode 100644 index 00000000..d315e73d --- /dev/null +++ b/js/ladda.jquery.js @@ -0,0 +1,46 @@ +/*! + * Ladda for jQuery + * http://lab.hakim.se/ladda + * MIT licensed + * + * Copyright (C) 2013 Hakim El Hattab, http://hakim.se + */ + +(function( Ladda, $ ) { + if ($ === undefined) + return console.error( 'jQuery required for Ladda.jQuery' ); + + var arr = []; + + $ = $.extend( $, { + ladda: function( arg ) { + if( arg === 'stopAll' ) + Ladda.stopAll(); + } + }); + + $.fn = $.extend( $.fn, { + ladda: function( arg ) { + var args = arr.slice.call( arguments, 1 ); + + if( arg === 'bind' ) { + args.unshift( $( this ).selector ); + Ladda.bind.apply( Ladda, args ); + } + else { + $( this ).each( function() { + var $this = $( this ), ladda; + + if( arg === undefined ) + $this.data( 'ladda', Ladda.create( this ) ); + else { + ladda = $this.data( 'ladda' ); + ladda[arg].apply( ladda, args ); + } + }); + } + + return this; + } + }); +}( this.Ladda, this.jQuery )); \ No newline at end of file diff --git a/test/bootstrap.jquery.html b/test/bootstrap.jquery.html new file mode 100644 index 00000000..3ee25648 --- /dev/null +++ b/test/bootstrap.jquery.html @@ -0,0 +1,6306 @@ + + + + + + + Ladda: Bootstrap compatibility test + + + + + + + + + + + + + + + + + + +
+ +
+

Ladda

+

+ A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where + it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a + real-world example, check out any of the forms on slid.es. +

+
+ +
+

expand-left

+ +
+ +
+

expand-right

+ +
+ +
+

expand-up

+ +
+ +
+

expand-down

+ +
+ + +
+

zoom-in

+ +
+ +
+

zoom-out

+ +
+ + +
+

slide-left

+ +
+ +
+

slide-right

+ +
+ +
+

slide-up

+ +
+ +
+

slide-down

+ +
+ +

Built-in progress bar

+ +
+

expand-right

+ +
+ +
+

contract

+ +
+ +

Sizes

+ +
+

Extra Small

+ +
+ +
+

Small

+ +
+ +
+

Large

+ +
+ +

Buttons in forms containing required inputs

+ +
+
+
+ +
+
+ +
+
+
+ + + +
+ + + + + + + + Fork me on GitHub + + + + +