0

<ul>with data-role="listview"属性があります。<li>要素については<div>、内に<li>、の主要なコンテンツをカバーする、が必要です<li>。人が右にスワイプすると、<div>アニメーションが右にスライドし、divの下のコンテンツが表示されます。

私の問題は、divを<li>要素に追加すると、要素<div>をカバーすることができないこと<li>です。のスタイルを設定しても、divは要素スペースstyle: height=100%の約2/3しか占めていないようです。<li>

4

1 に答える 1

3

次のように、DIV要素をリストアイテムに追加できます。

HTML-

    <ul data-role="listview">
        <li data-icon="grid"><a href="#">This is normal content.</a><div class="cover-div">Swipe to Uncover</div></li>
        <li data-icon="grid"><a href="#">This is normal content.</a><div class="cover-div">Swipe to Uncover</div></li>
        <li data-icon="grid"><a href="#">This is normal content.</a><div class="cover-div">Swipe to Uncover</div></li>
        <li data-icon="grid"><a href="#">This is normal content.</a><div class="cover-div">Swipe to Uncover</div></li>
        <li data-icon="grid"><a href="#">This is normal content.</a><div class="cover-div">Swipe to Uncover</div></li>
    </ul>

これにより、jQuery Mobileがリストビューを初期化した後、次の出力が作成されます。

<li data-icon="grid" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
    <div class="ui-btn-inner ui-li">
        <div class="ui-btn-text">
            <a href="#" class="ui-link-inherit">This is normal content.</a>
            <div class="cover-div">Swipe to Uncover</div>
        </div>
        <span class="ui-icon ui-icon-grid ui-icon-shadow">&nbsp;</span>
    </div>
</li>

次に、要素にポジショニングと背景スタイルを追加できます。

CSS-

.cover-div {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    z-index    : 2;
    background : #000;
    background : rgba(0, 0, 0, 0.7);
    color      : #fff;
}​

そして最後に、「カバー」DIVでスワイプイベントを検出し、画面外の要素をアニメーション化できます。

JS-

//when a page is initialized by jQuery Mobile, we'll do our own initialization
$(document).delegate('[data-role="page"]', 'pageinit', function () {

    //find all the `.cover-div` elements on this page and bind to swipe left/right events for the elements
    $(this).find('.cover-div').bind('swipeleft swiperight', function (event) {

        //if the user swiped to the left then animate the DIV to the left
        if (event.type == 'swipeleft') {
            $(this).stop().animate({ left : '-100%' }, 250);

        //otherwise animate the DIV to the right
        } else {
            $(this).stop().animate({ left : '100%' }, 250);
        }
    });
});
​

これがデモです：http：//jsfiddle.net/pmqDf/1/

于 2012-04-24T21:39:16.250 に答える