javascript - Windows 8 JavaScriptのセマンティックズーム

Question

JavaScript を使用してアプリを開発しており、使用したいと考えていますSemanticZoom。

使用するリスト ビューは 1 つだけですが、ページには複数のリスト ビューがあります。

これは私が現在使用している私のサンプルコードです:

 <section>
 <table><tr><td style="width: auto; height: 100%; display: none;" id="myDealsSection">
                        <table style="height: 100%; margin-left: 80px; margin-bottom: 
      50px;">
                            <thead>
                                <tr>
        <td ><span id="MyDealsHead" style="font-size: 20pt; font-family: 'Segoe UI
       Light'; padding-left: 5px;">My Deals</span><span id="myDealsHdrArrw"style="font-             
    size:20pt;"> &#xe013;</span></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
               <td style="width: auto; height: 100%; vertical-align: top;">
      <div id="homePageDealsList" aria-label="List of this group's items"style="height:
   100%; width: auto;" data-win-control="WinJS.UI.ListView" data-win-options="{
   selectionMode: 'none',layout: {type:WinJS.UI.GridLayout} }"></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
       <td style="width: 100%; height: 100%; display: none;" id="pinnedDealsSection">
                        <table style="height: 100%; margin-left: 80px;">
                            <thead style="width: 100%;">
                                <tr>
                                    <td><span id="pinnedDeals" style="padding-left: 
   5px; font-size: 20pt; font-family: 'Segoe UI Light';">Pinned Deals</span><span 
   id="pinnedDealsHdrArrw" style="font-size:20pt;"> &#xe013;</span></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width: auto; height: 100%; vertical-
     align: top;">
                                        <div id="pinnedDealsList" 
   class="pinnedDealsItemsList" aria-label="List of this group's items" style="height:
 100%; width: auto; margin-bottom: 50px;" data-win-control="WinJS.UI.ListView" data-
  win-options="{ selectionMode: 'none', layout: {type:WinJS.UI.GridLayout} }"></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td></tr></table>
 </section>

ズームイン ビューに 2 つのリスト ビューを追加するにはどうすればよいですか? その方法がわかりません。

SemanticZoomサンプルについては、 http: //msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspxをご覧ください。