Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fix for #1470 #1660

Merged
merged 5 commits into from

2 participants

@gseguin
Collaborator

Corner styling issue with programmatically populated listview

Ghislain Seguin Fix for #1470
Corner styling issue with listview refresh on growing lists
bd06861
@hakanson

Can you add thumbnails to this test and also check for $("li:first-child .ui-li-thumb").hasClass("ui-corner-tl")?

A second test could programmatically remove the first li and check again.

Collaborator

That'll probably require to add a teardown function to the module to remove the programmatically created list items and then create another test. I'll wait until this pull request gets in.

@gseguin gseguin merged commit d0ec1ec into jquery:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 18, 2011
  1. @gseguin

    Fix for #1470

    Ghislain Seguin authored gseguin committed
    Corner styling issue with listview refresh on growing lists
Commits on Jun 17, 2011
  1. @gseguin

    Merge remote-tracking branch 'upstream/master' into issue-1470

    gseguin authored
    Conflicts:
    	tests/unit/listview/listview_core.js
Commits on Jun 20, 2011
  1. @gseguin

    Merge remote-tracking branch 'upstream/master' into issue-1470

    gseguin authored
    Conflicts:
    	tests/unit/listview/index.html
    	tests/unit/listview/listview_core.js
  2. @gseguin
  3. @gseguin

    Coding standards

    gseguin authored
This page is out of date. Refresh to see the latest.
View
11 js/jquery.mobile.listview.js
@@ -47,7 +47,12 @@ $.widget( "mobile.listview", $.mobile.widget, {
});
},
- _removeCorners: function( li ) {
+ _removeCorners: function( li, which ) {
+ which = which || ["top", "bottom"];
+ var classes = {
+ top: "ui-corner-top ui-corner-tr ui-corner-tl",
+ bottom: "ui-corner-bottom ui-corner-br ui-corner-bl"
+ };
li
.add( li.find(".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb") )
.removeClass( "ui-corner-top ui-corner-bottom ui-corner-br ui-corner-bl ui-corner-tr ui-corner-tl" );
@@ -165,7 +170,9 @@ $.widget( "mobile.listview", $.mobile.widget, {
if(item.prev().prev().length){
self._removeCorners( item.prev() );
- }
+ } else if (item.prev().length) {
+ self._removeCorners( item.prev(), ["bottom"]);
+ }
}
}
View
5 tests/unit/listview/index.html
@@ -241,6 +241,11 @@ <h2 id="qunit-userAgent"></h2>
</div>
</div>
+<!-- Programmatically generated list items !-->
+<div data-nstest-role="page" id="programmatically-generated-list">
+ <ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
+</div>
+
<!-- Removing items from list -->
<div data-nstest-role="page" id='removing-items-from-list-test'>
<div data-nstest-role="header" data-nstest-position="inline">
View
61 tests/unit/listview/listview_core.js
@@ -390,15 +390,60 @@
}, 1000);
});
- module("Programmatic list items manipulation");
+ module( "Programmatically generated list items", {
+ setup: function(){
+ var item,
+ data = [
+ {
+ id: 1,
+ label: "Item 1"
+ },
+ {
+ id: 2,
+ label: "Item 2"
+ },
+ {
+ id: 3,
+ label: "Item 3"
+ },
+ {
+ id: 4,
+ label: "Item 4"
+ }
+ ];
+
+ $( "#programmatically-generated-list-items" ).html("");
+
+ for ( var i = 0, len = data.length; i < len; i++ ) {
+ item = $( '<li id="myItem' + data[i].id + '">' );
+ label = $( "<strong>" + data[i].label + "</strong>").appendTo( item );
+ $( "#programmatically-generated-list-items" ).append( item );
+ }
+ }
+ });
- asyncTest( "Removing list items", 4, function() {
- $.testHelper.pageSequence([
- function(){
- $.testHelper.openPage("#removing-items-from-list-test");
- },
+ asyncTest( "Corner styling on programmatically created list items", function() {
+ // https://github.com/jquery/jquery-mobile/issues/1470
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage( "#programmatically-generated-list" );
+ },
+ function() {
+ ok(!$( "#programmatically-generated-list-items li:first-child" ).hasClass( "ui-corner-bottom" ), "First list item should not have class ui-corner-bottom" );
+ start();
+ }
+ ]);
+ });
+
+ module("Programmatic list items manipulation");
- function(){
+ asyncTest("Removing list items", 4, function() {
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage("#removing-items-from-list-test");
+ },
+
+ function() {
var ul = $('#removing-items-from-list-test ul');
ul.find("li").first().remove();
equal(ul.find("li").length, 3, "There should be only 3 list items left");
@@ -414,6 +459,6 @@
start();
}
]);
- });
+ });
})(jQuery);
Something went wrong with that request. Please try again.