0

2 つのセクションで構成されるリストがあります。

<ul data-role="listview"  data-theme="a" data-inset="true" data-split-theme="c">

        <li>
            <a style="padding-top:0">
                <h5>Text 1</h5>
                <p><strong>Text 2</strong></p>
                <p>Date: April 17, 2012</p>
            <a href="http://some address" ></a>
        </li>

私がしたいのは、ユーザーが行の左側のセクションのどこかをクリックしたときに、(html5 タグを使用して) オーディオ ファイルを再生し、このセクションのテキストを削除してオーディオに置き換えることです。再生中のオーディオのコントロール。ユーザーがオーディオを停止すると、元の状態に戻りたいと思います。

私は JQuery と JQueryMobile が初めてで、どこから始めればよいかわかりません。

理想的には、オーディオ コントロールが表示されたときに可能であれば、行のそのセクションが回転し、一方がオーディオ コントロールで、もう一方がテキストであるなど、ある種のフリップ アニメーションがあれば素晴らしいでしょう。そのようなことは可能ですか？

ティア

4

1 に答える 1

0

で好きなものをネストできるliので、そこに 2 つのdivコンテナーを配置して、適切なイベントにバインドし、それに基づいてそれらを表示および非表示にすることができます。

例えば：

マークアップ:

<ul id="parentUL" data-role="listview"  data-theme="a" data-inset="true" data-split-theme="c">
        <li>
            <a  style="padding-top:0">
                <div class="txtCnt">
                <h5>Text 1</h5>
                <p><strong>Text 2</strong></p>
                <p>Date: April 17, 2012</p>
                </div>
                <div class="audioCnt displayNone">
                    <h1>Audio Controls</h1>
                </div>
        <a href="http://some address" ></a>
    </li>
    </ul>

JavaScript:

$('#parentUL').on('click', '.txtCnt', function () {
    $(this).hide().parent().find('.audioCnt').show();
});

$('#parentUL').on('click', '.audioCnt', function () {
    $(this).hide().parent().find('.txtCnt').show();
});
于 2012-08-22T03:07:40.450 に答える