SemanticZoom and ListView
2013-02-23 01:04
48 查看
一、SemanticZoom
当当前页面有很多分页表示不同部分或者功能时,可以使用SemanticZoom来管理这些页面,当页面缩小时,各页面提取其标志信息,形成较小的一块,这样,多个页面将更多地显示在同一个屏幕中,用户一目了然,当用户想进入到某一部分时可以很快地找到标志的那一块,然后进入到放大页面,在实际应用中起到很大的作用,简便了用户操作
SemanticZoom的定义:
不能在里面添加任何其他的东西,在一个SemanticZoomDiv里面只有一个ZoomedIn和一个ZoomedOut,接着开始定义ZoomedIn和ZoomedOut里面要显示的东西,这里推荐一个官方的sample:Input: Windows 8 gestures sample,参照里面的代码,可以自定义ZoomedIn和ZoomedOut里面的东西。个人觉得如果数据不是很多,而且所要展示与区分的是不同的功能,那最好采用sample里面提到的方法,其实我们只需要关键代码而已,引用关键代码,定义的部分自己实现。还有一种就是当数据很多,而且要展示的是不同类别的数据,这个时候ListView便发挥作用了,这里用到基本ListView和GroupingListView,当页面缩小到简略方式时,采用基本的ListView,当单击进入页面时,采用GroupingListView
定义ListView:将data-win-control设为“WinJS.UI.ListView”,接着在data-win-options中为ListView添加dataSource和template
template定义:可以在HTML中定义template
如:
data-win-bind为数据绑定,GroupingListView定义时需要多设置两个属性groupDataSource和groupHeaderTemplate,这两个分别是分组和分组的模板,dataSource的部分,首先需要先定义一个WinJS.Binding.List,如:
接着需要用到myList的createGrouped函数,此函数包含三个函数,getGroupKey(获得分组的组名或者一些标志该组的东西)、getGroupData(获取该组数据)和compareGroups(说白了就是帮你排序,例如当你的组名以字母区别时,可以按照字母表的排序为分组进行排序),其实说来说去都没说到一些比较深入的东西,ListView和SemanticZoom都是很强大很实用的东西,但是对于它们如何跟数据关联这一块还不是很懂,用倒是知道怎么用,这个等以后深入了解才行。另外,个人觉得在做win8
APP开发时结合Blend的使用真的是很不错的,有时在使用SemanticZoom的时候会出现没有任何东西显示,这个时候可能是你的div大小的问题,通过blend调整一下便可。
当当前页面有很多分页表示不同部分或者功能时,可以使用SemanticZoom来管理这些页面,当页面缩小时,各页面提取其标志信息,形成较小的一块,这样,多个页面将更多地显示在同一个屏幕中,用户一目了然,当用户想进入到某一部分时可以很快地找到标志的那一块,然后进入到放大页面,在实际应用中起到很大的作用,简便了用户操作
SemanticZoom的定义:
<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom"> <div id="zoomedIn"></div> <div id="zoomedOut"></div> </div>
不能在里面添加任何其他的东西,在一个SemanticZoomDiv里面只有一个ZoomedIn和一个ZoomedOut,接着开始定义ZoomedIn和ZoomedOut里面要显示的东西,这里推荐一个官方的sample:Input: Windows 8 gestures sample,参照里面的代码,可以自定义ZoomedIn和ZoomedOut里面的东西。个人觉得如果数据不是很多,而且所要展示与区分的是不同的功能,那最好采用sample里面提到的方法,其实我们只需要关键代码而已,引用关键代码,定义的部分自己实现。还有一种就是当数据很多,而且要展示的是不同类别的数据,这个时候ListView便发挥作用了,这里用到基本ListView和GroupingListView,当页面缩小到简略方式时,采用基本的ListView,当单击进入页面时,采用GroupingListView
<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom"> <div id="zoomedInListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource:myGroupedList.dataSource, itemTemplate:textTemplate, groupDataSource:myGroupedList.groups.dataSource, groupHeaderTemplate:headerTemplate }"></div> <div id="zoomedOutListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource:myGroupedList.groups.dataSource, itemTemplate:semanticZoomTemplate }"></div> </div>
定义ListView:将data-win-control设为“WinJS.UI.ListView”,接着在data-win-options中为ListView添加dataSource和template
template定义:可以在HTML中定义template
如:
<div id="textTemplate" data-win-control="WinJS.Binding.Template" style="display:none"> <div class="textItem"> <div class="text"> <h2 data-win-bind="innerText:text"></h2> </div> </div> </div>
data-win-bind为数据绑定,GroupingListView定义时需要多设置两个属性groupDataSource和groupHeaderTemplate,这两个分别是分组和分组的模板,dataSource的部分,首先需要先定义一个WinJS.Binding.List,如:
var myList = new WinJS.Binding.List([ {title:"iOS",text:"GCD"}, { title: "iOS", text: "MKMapView" }, { title: "C++", text: "MFC" }, { title: "WinJS", text: "ListView" }, { title: "Java", text: "多线程" }, { title: "高数", text: "微积分" }, { title: "英语", text: "定语从句" } ]);
接着需要用到myList的createGrouped函数,此函数包含三个函数,getGroupKey(获得分组的组名或者一些标志该组的东西)、getGroupData(获取该组数据)和compareGroups(说白了就是帮你排序,例如当你的组名以字母区别时,可以按照字母表的排序为分组进行排序),其实说来说去都没说到一些比较深入的东西,ListView和SemanticZoom都是很强大很实用的东西,但是对于它们如何跟数据关联这一块还不是很懂,用倒是知道怎么用,这个等以后深入了解才行。另外,个人觉得在做win8
APP开发时结合Blend的使用真的是很不错的,有时在使用SemanticZoom的时候会出现没有任何东西显示,这个时候可能是你的div大小的问题,通过blend调整一下便可。
相关文章推荐
- the Semantic Web (English and Chinese version) , the bible paper
- Rich feature hierachies for accurate object detection and semantic segmentation
- RCNN学习笔记(2):Rich feature hierarchies for accurate object detection and semantic segmentation
- 在.Net Compact Framework中为ListView添加Context Menu(Tap and hold)
- Use advanced interactive viewer to move, zoom and record photos, producing a unique sightline flash
- D3 Example: zoom, pan, and axis rescale
- Rich feature hierarchies for accurate object detection and semantic segmentation
- Non-negative Matrix Factorization and Probabilistic Latent Semantic Analysis
- 【deeplab】Semantic Image Segmentation with Deep Convolutional Nets and Fully
- [Android 問題] How to Add a Button in ListView, and Make the Event of onClick and onItemClick Coexist?
- Android ListView And GridView 单选模式
- zifeng wu instance level segmentation:Bridging Category-level and Instance-level Semantic Image
- Rich feature hierarchies for accurate object detection and semantic segmentation(译)
- Make your Android Listview Fast and Efficient
- Difference between ScrollView and ListView
- [Javascript] Log Levels and Semantic Methods
- R-CNN论文笔记《Rich feature hierarchical for accurate object detection and semantic segmentation》
- R-CNN学习笔记2:Rich feature hierarchies for accurate object detection and semantic segmentation
- sisinflab--semantic web and pervasive computing
- DHTML Zoom In and Out Script