diff --git a/docs/lists/index.html b/docs/lists/index.html index 387aad7d038..96fce543ffe 100755 --- a/docs/lists/index.html +++ b/docs/lists/index.html @@ -34,6 +34,7 @@

Lists

  • Search filter bar
  • Inset styled lists
  • List performance test
    • +
  • Animation Lists
  • Theming lists
    • diff --git a/docs/lists/list-animations.html b/docs/lists/list-animations.html new file mode 100755 index 00000000000..098c93847b8 --- /dev/null +++ b/docs/lists/list-animations.html @@ -0,0 +1,52 @@ + + + + + jQuery Mobile Docs - Lists + + + + + + +
    + +
    +

    Lists Animations

    +
    + +
    + +

    Animations are cool, enough said. Currently works best with lists already in the DOM, not in seperate HTML files.

    + +

    Blind Down

    +

    To add, use the animation-type="blind-down" on the list's ul.

    + + +

    3D Swing (Works only on iOS Devices & Safari)

    +

    To add, use the animation-type="swing" on the list's ul.

    + + +
    +
    + + + + + diff --git a/js/index.php b/js/index.php index e8239c7cd91..ce92aa488de 100644 --- a/js/index.php +++ b/js/index.php @@ -24,6 +24,7 @@ 'jquery.mobile.fieldContain.js', 'jquery.mobile.listview.js', 'jquery.mobile.listview.filter.js', + 'jquery.mobile.listview.animation.js', 'jquery.mobile.dialog.js', 'jquery.mobile.navbar.js', 'jquery.mobile.grid.js' diff --git a/js/jquery.mobile.listview.animation.js b/js/jquery.mobile.listview.animation.js new file mode 100644 index 00000000000..532c993e59b --- /dev/null +++ b/js/jquery.mobile.listview.animation.js @@ -0,0 +1,76 @@ +(function($) { + $.fn.swing = function() { + + return this.each(function() { + var $this = $(this); + $this.addClass("swing-wrapper no-border"); + + $this.children("li").each(function(i, el) { + $(this).css("-webkit-animation-duration", ((.3/$(this).length)*(i+1))+"s"); + }); + + $(this).closest(".ui-page").bind("pageshow", function() { + $this.addClass("go"); + }); + $(this).closest(".ui-page").bind("pagehide", function() { + $this.removeClass("swing-wrapper no-border go"); + }); + + }); + }; + +// Blind Down + + var methods = { + down : function( ) { + var myheight = function(element) { + var h = window.getComputedStyle(element).height; + h = parseFloat(h); + return h; + } + var blindDown = function($this) { + var children = $this.children(), + lastElHeight = 0, + totalHeight = 0; + + $this.addClass("blindDown-wrapper no-border"); + children.each(function(i, el) { + $(el).css({ + "webkitTransform": "translate(0px, "+totalHeight + "px)", + "opacity": 1 + }); + lastElHeight = myheight(el); + totalHeight+=lastElHeight; + }); + $this.css("height", totalHeight+15); + totalHeight = lastElHeight = 0; + } + + return this.each(function() { + var first = 0; + var $this = $(this); + $this.closest(".ui-page").bind("pageshow", function() { + blindDown($this); + }); + + $(this).closest(".ui-page").bind("pagehide", function() { + $this.removeClass("blindDown-wrapper no-border"); + }); + + }); + } + }; + + $.fn.blind = function(method) { + // Method calling logic + if ( methods[method] ) { + return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); + } else if ( typeof method === 'object' || ! method ) { + return methods.init.apply( this, arguments ); + } else { + $.error( 'Method ' + method + ' does not exist on jQuery.blind' ); + } + }; +})(jQuery); + + diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index cc564109a59..e282dedab8c 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -161,6 +161,19 @@ $.widget( "mobile.listview", $.mobile.widget, { li = $list.children( "li" ), counter = $.support.cssPseudoElement || !$.nodeName( $list[0], "ol" ) ? 0 : 1; + var animationType = $list.attr("animation-type"); + if (animationType != "undefined") { + switch(animationType) { + case "blind-down": + $list.blind("down"); + break; + case "swing": + $list.swing(); + break; + } + } + + if ( counter ) { $list.find( ".ui-li-dec" ).remove(); } diff --git a/themes/default/jquery.mobile.listview.css b/themes/default/jquery.mobile.listview.css index 44fcaba5304..f378802e189 100644 --- a/themes/default/jquery.mobile.listview.css +++ b/themes/default/jquery.mobile.listview.css @@ -40,4 +40,33 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid /* Odd iPad positioning issue. */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { .ui-li .ui-btn-text { overflow: visible; } +} + +.no-border {border: none !important; -webkit-border-radius: 0 !important; -webkit-box-shadow: none !important; } +/* listview animations */ +div[data-role=page] {-webkit-transform-style: preserve-3d;} + +/* 3D Swing Listview */ +.swing-wrapper {-webkit-perspective: 500;} +.swing-wrapper li {-webkit-transform: rotateY(0deg);} +.swing-wrapper.go li { + -webkit-transform-origin: right; + -webkit-animation-name: rotate-in; + -webkit-transition-timing-function: ease-out, cubic-bezier(0.5, 0.2, 0.3, 1.0); +} +@-webkit-keyframes rotate-in { + 0% {-webkit-transform: rotateY(-90deg);opacity: 0; } + 100% {-webkit-transform: rotateY(0deg); opacity: 1;} +} + +/* Blind Down */ + +.blindDown-wrapper {-webkit-perspective: 1300;} +.blindDown-wrapper > li { + opacity: 0; + -webkit-transition: 1s ease-in-out; position: absolute; +} + +.ui-listview > li { + width: 100%; } \ No newline at end of file