论坛首页 Web前端技术论坛

91uu浮云【桌面webapp块的实现方案】

浏览 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】分页区

 

 

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics