使用 javascript 的 windows 8 语义缩放答案

【问题标题】：windows 8 semantic zoom using javascript使用 javascript 的 windows 8 语义缩放
【发布时间】：2013-02-21 07:48:36
【问题描述】：

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

    <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>

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

【问题讨论】：

标签： javascript windows-8 microsoft-metro winjs

【解决方案1】：

组成语义缩放的列表视图必须是语义缩放控件的唯一子元素。像这样的……

<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。

【讨论】：