iOS/Android/WAP 全兼容专题页面制作方法(三)
2014-09-24 23:50
288 查看
3. 数据绑定
3.1.为什么要使用自定义标签
既然在后台我们已经准备好数据了,于是接下来的问题就是,怎么把数据和界面合在一起呢?完成这项工作的就是所谓的“数据绑定”。我们通过自定义标签完成 HTML 页面与实体之间的数据绑定,也就是说,我们采用我们自定义的一些标签,或者说咱们约定的一些标记,说明我们需要引用什么数据展现在数据上。通常这是数据集合,我们便用 <listview> 表示之。预期的数据可以正确展示了,那么标签的首要任务也就达到了。其次,通过合理解析自定义标签,可以使得制作一套专题页面即可跨平台展示了,包括 WAP 版、客户端(Android & iPhone)等,从而减少差异化带来的冗余工作。
自定义标签并不复杂,让我们一起来学习吧!
3.2.使用自定义标签
自定义标签分两类: 单内容事件标签、列表呈现标签。一、单内容事件标签
用途:对于单个文字或图片链接,点击的时候指向对应的内容展示界面。如在html中增加静态图片,要求点击即进入某频道播放界面或某视频的播放界面。支持内容类型:直播、点播、专辑、专题、图文、图集。
样例:
<a href="###" data-event="play" data-type='live' data-id='1'> <div align="center"> <img src="images/55.jpg" width="320" /> </div> </a>或者
<a href="###" data-event="tap" data-type="live" data-id="2">展播平台</a>
二、列表呈现标签
用途:在专题页面的某区域中显示某栏目中的类容列表,列表以多种方式展示,类表中的元素点击将跳转到相应的内容展示界面,并支持免费参数。支持简单的栏目中内容的过滤,如指定获取视频列表或图文列表。支持内容类型:直播、点播、专辑、专题、图文、图集、广告(url)。
列表风格类型:单列图文、双列图(压缩标题)、单列文字标题。
样例:
<listview data-section="332" data-viewmode="2" data-contenttype="all" data-row="15" data-sort="default"></listview>
相关文章推荐
- iOS/Android/WAP 全兼容专题页面制作方法(一)
- iOS/Android/WAP 全兼容专题页面制作方法(二)
- js 调用本地方法时兼容Android和Ios
- 打开页面默认弹出软键盘,同时兼容iOS和Android
- 兼容IOS android 页面滑动的CSS设置
- 移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
- Android ViewPager向导页面制作方法
- JS与android、IOS 页面交互时,js错误信息捕获方法
- h5页面引用idangerous.swiper.js 插件兼容ios和android出现的问题
- IScroll5+在ios、android点击(click)事件不兼容解决方法
- 页面制作统一的头尾的方法(asp+js)
- Android中的.9.png图形的机制及制作和使用方法
- WAP开发页面显示很小的解决方法
- 在本地UI使用webview,在html页面用js与android通信方法。
- android镜像制作方法
- 网站切图和页面制作方法
- Android页面跳转实现方法讲解(纯java)
- Android---如果应用中每个页面都有“首页”“退出” 处理方法
- 兼容解决 IE 和(火狐)FF中 Iframe框架的页面缓存的方法
- Android中级教程之(四)----->页面的转换,利用setContentView方法