JQuery 모바일 목록보기 스 와이프 메뉴

Question

자동 생성 구분선이있는 ListView가있는 표준 JQM 페이지가 있습니다.

사용자가 목록보기에서 항목을 왼쪽 또는 오른쪽으로 스 와이프 할 수있는 기능을 추가하고 다음 중 하나를 수행 할 수있게하려고합니다.

1) 별표 아이콘을 공개하고 localstorage에 정보를 만듭니다. 두 번째로 스 와이프 할 때 아이콘을 'hollow'스타로 변경하고 localstorage의 값을 제거하십시오.

2) 'hollow'스타 아이콘을 클릭하면 locastorage에 값이 생성되고 아이콘이 ' 채워진 '별. 마찬가지로 별이 두 번째로 눌려지면 localstorage 값이 제거되고 아이콘이 '할로우 (hollow)'별표로 바뀝니다

다른 주제와 비슷한 정보를 본 적이 있지만 지금은 찾을 수 없습니다. 그래서 모든 포인터, 팁, 링크 크게 감사하겠습니다.

감사합니다.

Answer 1

는 스타이 포함됩니다 span 요소를 만듭니다. 각 li 요소 앞에 span을 추가하십시오.

<ul data-role="listview" id="list"> 
    <span class="yellowStar"></span> 
    <li>Item 1</li> 
    <span class="hollowStar"></span> 
    <li>Item 2</li> 
    <span class="hollowStar"></span> 
    <li>Item 3</li> 
    <span class="hollowStar"></span> 
    <li>Item 4</li> 
    <span class="hollowStar"></span> 
    <li>Item 5</li> 
</ul> 

모두 작성 및 중공 별에 대해 다음 CSS를 적용합니다.

.ui-listview>.ui-li-static { 
    overflow: initial; /* to hide spans underneath */ 
    -webkit-transition: -webkit-transform 300ms ease; /* transition effect */ 
    -moz-transition: -moz-transform 300ms ease; 
     -o-transition: -o-transform 300ms ease; 
      transition: transform 300ms ease; 
} 

ul span { 
    float: right; 
    padding: 1.3em 20px; 
    z-index: -1; 
} 

ul .yellowStar { 
    background-image: url(filled.png); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

ul .hollowStar { 
    background-image: url(hollow.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

그런 다음 swipeleft을 첨부하여 별표를 표시하십시오. swipe 해고 될 때마다

$(document).on("click", "ul span", function() { 
    $(this).toggleClass("yellowStar hollowStar"); 
}).on("swipeleft", "ul li", function (e) { 
    $(this).off("click"); 
    $(this).css({ 
     transform: "translateX(-40px)" 
    }).one("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() { 
     $(this).one("click swiperight", function() { 
      $(this).css({ 
       transform: "translateX(0)" 
      }); 
     }); 
    }); 
}); 

, 또한 click는, 따라서, .off("click") 때 swipe 트리거 필수적입니다 발생합니다. 그러나 전환이 끝나면 별 폐쇄/숨기기에 click 및 swiperight 청취자가 첨부됩니다. 이와 유사한

Demo