Position demo: Address todo comment by replacing plugin methods

This commit is contained in:
Jörn Zaefferer 2014-04-24 12:15:51 +02:00
parent 62c9a9c3ec
commit 16f421fd50

View File

@ -25,52 +25,51 @@
</style> </style>
<script> <script>
$(function() { $(function() {
// TODO refactor into a widget and get rid of these plugin methods function left( element, using ) {
$.fn.left = function( using ) { element.position({
return this.position({
my: "right middle", my: "right middle",
at: "left+25 middle", at: "left+25 middle",
of: "#container", of: "#container",
collision: "none", collision: "none",
using: using using: using
}); });
}; }
$.fn.right = function( using ) { function right( element, using ) {
return this.position({ element.position({
my: "left middle", my: "left middle",
at: "right-25 middle", at: "right-25 middle",
of: "#container", of: "#container",
collision: "none", collision: "none",
using: using using: using
}); });
}; }
$.fn.center = function( using ) { function center( element, using ) {
return this.position({ element.position({
my: "center middle", my: "center middle",
at: "center middle", at: "center middle",
of: "#container", of: "#container",
using: using using: using
}); });
}; }
$( "img:eq(0)" ).left(); left( $( "img:eq(0)" ) );
$( "img:eq(1)" ).center(); center( $( "img:eq(1)" ) );
$( "img:eq(2)" ).right(); right( $( "img:eq(2)" ) );
function animate( to ) { function animate( to ) {
$( this ).stop( true, false ).animate( to ); $( this ).stop( true, false ).animate( to );
} }
function next( event ) { function next( event ) {
event.preventDefault(); event.preventDefault();
$( "img:eq(2)" ).center( animate ); center( $( "img:eq(2)" ), animate );
$( "img:eq(1)" ).left( animate ); left( $( "img:eq(1)" ), animate );
$( "img:eq(0)" ).right().appendTo( "#container" ); right( $( "img:eq(0)" ).appendTo( "#container" ) );
} }
function previous( event ) { function previous( event ) {
event.preventDefault(); event.preventDefault();
$( "img:eq(0)" ).center( animate ); center( $( "img:eq(0)" ), animate );
$( "img:eq(1)" ).right( animate ); right( $( "img:eq(1)" ), animate );
$( "img:eq(2)" ).left().prependTo( "#container" ); left( $( "img:eq(2)" ).prependTo( "#container" ) );
} }
$( "#previous" ).click( previous ); $( "#previous" ).click( previous );
$( "#next" ).click( next ); $( "#next" ).click( next );
@ -80,9 +79,9 @@
}); });
$( window ).resize(function() { $( window ).resize(function() {
$( "img:eq(0)" ).left( animate ); left( $( "img:eq(0)" ), animate );
$( "img:eq(1)" ).center( animate ); center( $( "img:eq(1)" ), animate );
$( "img:eq(2)" ).right( animate ); right( $( "img:eq(2)" ), animate );
}); });
}); });
</script> </script>