浏览 2352 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2012-05-02
最后修改:2012-05-02
上一节说到这个简单类似网络收藏夹的webos,那么我们要怎么配合后台去实现?
91uu浮云【桌面webapp块的实现方案】
<article style="overflow-x: hidden; overflow-y: hidden; height: 345px; "> <section class="current" style="position: absolute; "></section> <section style="position: absolute; "> <ul class="app-list-mod"> <li> <a href="http://cdc.tencent.com/" title="腾讯CDC" class="app" target="_blank"> <img src="appICO/icon_tencent_cdc.jpg" alt="腾讯CDC"> <span class="img-mask"></span> <p>腾讯CDC</p> </a> </li> </ul> </section> <section style="position: absolute; "></section> </article>
看到上面的代码,我们可以看到,桌面容器【article】与每页放应用容器【section】,在到俱体页面的 应用列表【ul.app-list】
给出两种简单方案:
1、后台放接口异步请求数据,交给前台处理。并生成创建对应该的html块rendTo到 【article】里头 写好js约定好json格式,更好的给用户体验以极后然的扩展成 接入第三方接口或站点都是可以的。 2、由后台代码直接打印到前台页面上。 这个写法就有点死,没有太多的js 体验跟后期 的扩展。【目前简单做,一个实例所以webos.91uu.net 选用这个来讲解一个简单开发方式】
那么为什么要这么做?在布局那一块章节,我们可以了解到 这几块的关联关系。
section 容器的多少关系到 我们的分页,以及 navs导航 的 对section 块的控制。
由section 个数可以初始化 两个区。 【navs区】分屏导航控制 【div.section-turn-wrap】分页区
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |