javascript - Windows 8使用JavaScript的语义缩放

我的项目中有多个列表视图，如何为以下代码实现语义缩放？

    <section aria-label="Main content" role="main">
        <div id="detailsSection"   style="width: 100%; overflow-x:
      scroll;height:100%;overflow-y:hidden;">
            <table style="height:100%;">
                <tr>
                    <td style="width: auto; height:100%;" id="myDealsSection">
                        <table style="height:100%;margin-left:120px;
        margin-bottom:50px;">
                            <thead>
                                <tr>
           <td style="font-size: 17pt;font-family: 'segoe   ui';width:100px;
   height: 12px;padding-left:5px;"><span id="MyDeals">My Deals</span></td><td>
  <img id="dealsHeaderImg" src="/images/Arrow1.png" style="display:none;
  padding-left:5px;"/></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
              <td colspan="2" 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: 'single',layout: {type:WinJS.UI.GridLayout} }">

   </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td style="padding-left: 50px; width: auto;height:100%;"

  id="trackDealsSection">
                        <table style="height:100%;">
                            <thead>
                                <tr>
                                    <td style="font-family: 'segoe ui';height:

   12px;width:120px;padding-left:5px;font-size:17pt;"><span id="TrackDeals">Track

   Deals</span></td><td><img id="trackdealsHeaderImg" src="/images/Arrow1.png"

   style="display:none"/></td>
                                </tr>
                           </thead>
                            <tbody>
                                <tr>
                                    <td colspan="2" style="width: auto;height:100%;

   vertical-align: top;">
                                         <div id="trackDealsList"

   class="trackDealsItemsList" 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: 'single', layout:

    {type:WinJS.UI.GridLayout} }"></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>

   </tr>

      </table>

     </div>

对于此代码，当我实现语义缩放时，它不显示任何数据。因此，如何解决此问题。

最佳答案

组成语义缩放的listView必须是语义缩放控件的唯一子元素。像这样

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">

    <!-- The zoomed-in view. -->
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

</div>

标记的布局方式，无法对其进行语义缩放。检出Semantic Zoom Quickstart，Guidelines for Semantic Zoom和Semantic Zoom Sample。