上一节说到这个简单类似网络收藏夹的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】分页区
浙公网安备 33010602011771号