javascript - phonegapを使用してAndroid用の折りたたみ可能なリストビューを取得する方法

Question

私は3つのリストビューという名前を持っています

活動-今日、活動-今週、活動-今月。

折りたたみ可能なリストビュー形式を使用してリストを表示したい。jquery mobileを使用した折りたたみ可能なリストビューの例を見てきましたが、java script、html、およびcssを使用してこれを実現したいと思います。誰かが私を助けることができますか？

示されているように、私はこのように何かが欲しいです。私の質問が明確であることを願っています。

ありがとうございました。

Answer 1

このjsfiddleを設定しました。タイトルをクリックすると、コンテンツが表示されます。

jsfiddle

基本的に、タイトルのonclickイベントを使用して、コンテンツを表示するか非表示にするかを決定し、タイトルを変更して+/-記号を変更します。もちろん、この例はロジックの実装方法を示しているだけですが、見栄えの良いスタイルは適用されていません。

html：

<div class='collapsibleCont'>
<h3 id='collapsible1' class='collapsibleTitle' onclick="handleCollapsible('collapsible1')">+ title</h3>
<p  style="display:none" class='collapsibleContent'>helloooooooooooo</p>
</div>

handleCollapsible（id）関数：

function handleCollapsible(id){
var clickedTitle = document.getElementById(id);
var contentC = clickedTitle.parentNode.childNodes[1];
if(contentC.style.display=='none'){
        contentC.style.display = 'block';
        var mysplittedtitle = clickedTitle.innerHTML.split(" ");
        var newTitle = "- "+mysplittedtitle[1];
        clickedTitle.innerHTML =newTitle;


}else{
        contentC.style.display = 'none';
        var mysplittedtitle = clickedTitle.innerHTML.split(" ");
        var newTitle = "+ "+mysplittedtitle[1];
        clickedTitle.innerHTML=newTitle;


}
        }

jqueryでこれを行うのははるかに簡単です。jquery-mobileでそれを行うのははるかに簡単です。このコードの悪い点は、idを含むすべての折りたたみ可能なオブジェクトにonclickイベントを追加する必要があることです。これは、jqueryを使用すると回避でき、はるかに簡単です。

Answer 2

この方法を試してください：

<div data-role="page" id="home"> 

    <div data-role="header"> 
        <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content">

        <div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">
    <h3>Section 1</h3>

        <ul data-role="listview" data-inset="true">
                <li data-filtertext="11:first:one"><a href="#">one</a></li>
<li data-filtertext="22:second:two"><a href="#">two</a></li>
<li data-filtertext="33:third:three"><a href="#">three</a></li>
<li data-filtertext="44:fourth:four"><a href="#">four</a></li>            
            </ul>

    </div>

    <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

</div>


    </div>
</div>
​

フルソースhttp://jsfiddle.net/dhavaln/UCDfU/

Answer 3

ネストされたリストビューを使用したいと思います。

<h3>Nested List Example</h3>
<ul data-role="listview">
 <li>Restaurants
  <ul>
   <li>French
     <ul>
           <li>Le Central</li>
           <li>Bistro Vandome</li>
           <li>Antoine's</li>
   </ul>
  </li>
  <li>Cajun and Creole
    <ul>
         <li>Bayou Bob's</li>
         <li>Pappadeaux</li>
         <li>Lucile's</li>
   </ul>
  </li>
  <li>American
    <ul>
         <li>Dixon's</li>
         <li>Vesta Dipping Grill</li>
         <li>Steuben's</li>
    </ul>
  </li>
</ul>
</li>
</ul>