[转载]【jquery仿dataList】应用之——模仿igoogle【定制化、拖动排序，最大化、分屏】 - 叶小钗 - 博客园

[转载]【jquery仿dataList】应用之——模仿igoogle【定制化、拖动排序，最大化、分屏】 – 叶小钗 – 博客园.

接上一次日志哈，这一次用原来写的datalist实现了简单应用，模拟igoogle。

做的过程中发现代码很多问题，主要是流程上的问题。

主要是自己层次不够，明明已经感到这样那样的问题，都能说出来就是不知道怎么改。主要问题：

1 初始化时候参照其他JQuery框架，应该达到配置最小化，却怎么都做不好

2 现在控件必须提供数据源datalist与模板template，数据源还好说，但是模板的写法真的太坑爹，现在是放在数据库里面了

以后怎么做还说不清哦

3 与.net中datalist一致，不论datalist还是item都会生成多余的标签，这里是生成的div，看上去很是别扭

4 最大问题还是，混乱！！！就像这篇文章一样，js控制力不同于服务器语言，所有整个做起来，不论事件绑定

还是其他什么定义都感觉有点混乱，流程不清，这是我主要应该改进的地方。

主要流程：

1 加载小工具模板:现在先一次性加载，以后用到一个保存一个作为全局参数
2 加载该用户的所有小工具：现在先一次性加载，以后先加载第一页，
根据页索引判断加载
3 根据用户小工具数据，初始化所有小工具外框
由于数据以及模板已经取出，此时加载速度应该非常快，左中右一次加载
**此处注意，虽说小工具外框一样，但是新增的小工具可能会在外框加载结束后再修饰外框
比如，weibo、top…..，此数据存于小工具定制列（CustomData）
4 此时进行数据异步加载，
***数据可以统一加载，但是此处先加载所有小工具每列前两名数据
在根据后台用户干预加载那些大数据小工具，加载结束后，当用户滑动鼠标便进行以下
控件加载，每次控件加载数量可配置化
5 所有控件加载结束，已加载结束控件，可能会根据后台配置要求动态刷新数据
此处需要做轮询
6 控件加载结束后，开始做控件事件绑定
***注意粒度尽量小，不要和其他模块相互影响

首页效果图：

此处点击都会触发事件，一个是异步加载选项卡数据，一个是展开摘要：

也可以延后加载，比如：开始只加载前三个模块，鼠标滑动后，再加载后面的模块：

一下是，初始化后鼠标滑动前与鼠标滑动后的效果：

分屏、分页效果

点击上面1,2,3肯定会指向不同也了，其实现在用户是我，若是用户换了也会有所不同

下面是第二页和第三页

拖动排序也实现了，之前想自己写一个拖动插件，拖动时实现了却发现插件非常困难，

局限于自己的层次，就直接用的JQuery ui的拖动

下面是拖动排序的展示，保存到数据库的，最后一张是刷新后重新排序的图：

点击最大化，并实现鼠标滚动到最下边重新加载数据（滚动分页嘛）：

数据库简要设计，因为我没有安装数据库，所有优点不好弄：

设计缘由：由于今后可能不止五页，做到页数动态化

小工具模板表 templates(基本字段)

小工具表 modules(基本字段)

小工具参数化，可变参数，具有验证性

参数化后

小工具参数moduleParameter

用户小工具设置表（用户参数设置）

userModules

用户小工具参数偏好userModulePre

最终表设计

核心实现代码如下：原来的datalist的代码我就不发了：

代码太多不做说明了，以后肯定会封装，

就现在看来整个应用感觉问题不少，实际用处不大吧。

后面点代码整理后再一并发出吧，如果有需要的话。