模仿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的拖动

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













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

















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

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

NO.	字段名称	说明
1	uuid	页面唯一标识
2	pageSort	页面排序
3	pageName	页面标题，默认1,2,3,4,5
4	pageDes	页面描述，鼠标划上显示
5

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

NO.	字段名称	说明
1	uuid	页面唯一标识
2	templateKey	标识
3	templateValue	模板内容
4	des	描述
5

小工具表 modules(基本字段)

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

NO.	字段名称	说明
1	uuid	小模块唯一标识
	author	小工具作者
2	alias	模块前台标识名，对应category
3	title	小模块名称
4	dataSourceUrl	数据源链接地址
5	pageId	当前小工具属于第几屏，对应pages 的 uuid
6	colId	当前小工具属于第几列（暂分为1,2,3列）
7	sort	当前小工具顺序
8	templateId	当前小工具对应模板，对应templates表
9	type	当前小工具类型，frame或者json

参数化后

NO.	字段名称	说明
1	uuid	小模块唯一标识
2	alias	模块前台标识名，对应category
3	title	小模块名称
5	pageId	当前小工具属于第几屏，对应pages 的 uuid
6	colId	当前小工具属于第几列（暂分为1,2,3列）
7	sort	当前小工具顺序
8	moduleParameter	当前小工具具有的参数对象，现在采用json对象 采用键值对，加一个描述字段 {dataSourceUrl:XXXXX ,templateId:XXXX , type:XXX } 以上是基本属性，应该是字段吧…..
灰色部分可以不用，直接默认在第一页第一排，默认最大 其默认值在用户小工具表中体现出来

小工具参数moduleParameter

NO.	字段名称	说明
1	uuid	小模块唯一标识
2	moduleKey
3	moduleValue
4	des
5	isTransfer	是否形成json传向前台

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

userModules

NO.	字段名称	说明
1	uuid	小模块唯一标识
2	userId	用户id
3	moduleId	小工具Id
	userPrefers	用户偏好设置

用户小工具参数偏好userModulePre

NO.	字段名称	说明
1	uuid	小模块唯一标识
2	preKey
3	preValue
4	des
5	isTransfer	是否形成json传向前台

最终表设计

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

?
　　

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

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

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

Web前端

【jquery仿dataList】应用之——模仿igoogle【定制化、拖动排序，最大化、分屏】
posted @ 2012-03-07 22:34 叶小钗 阅读(1221) | 评论 (25) 编辑

【jquery版.net控件—dropdownlist】附源码，欢迎大家指点、指正、拍砖！！！
posted @ 2012-02-10 01:04 叶小钗 阅读(1760) | 评论 (17) 编辑

【jquery模仿net控件】简单的datalist控件更新，及其简单应用
posted @ 2012-01-25 22:32 叶小钗 阅读(1531) | 评论 (1) 编辑

【jquery模仿net控件】简单的dropdownlist与datalist
posted @ 2012-01-22 02:24 叶小钗 阅读(2021) | 评论 (6) 编辑

javascript01-div居中的兼容问题，发一个奇怪的代码，可能是我没有理解精髓吧。
posted @ 2011-11-24 13:52 叶小钗 阅读(559) | 评论 (4) 编辑

只言碎语总结，今后发展web前端，并分享两个项目难点解决方案。
posted @ 2011-10-07 14:25 叶小钗 阅读(3589) | 评论 (46) 编辑