JQuery实现个性化，可以拖拽 自定义自己的界面（一）

JQuery实现个性化，可以拖拽 自定义自己的界面（一）

感谢yawaa  （现在找不到他了） ， 以前有个网址，现在也访问不了了。遗憾！

-----------------------------------------------------------------------------------------------

今天不谈怎么实现的，只说一下思路 和 知识点。

一.知识点：

1.JQuery

2.了解一点CSS Html

3.是用vs2008开发  

使用：

Jquery            :  jquery-1.4.2.min.js

Jquery UI        :  jquery-ui-1.8.2.custom.min.js

Jquery UI CSS :  jquery-ui-1.8.2.custom.css 

名词解释：

Widget :  页面上的每一个小区域

Tab:        用户登录后，点击添加页面是后会出现一个  新建页面 的标签，我们称他为Tab; 目的是和Page作概念的区分。 

------------------------------------------------------------------------------------------ 

二.思路：

先调侃一下，自定义页面，有人说是web3.o; 比较认同（毕竟是好事，呵呵）；

1. 要有一个用户注册，即每一个用户都有一个自己的界面；

 

2. Widget的拖动：保存到数据库中。

 

3. Tab的添加     ：也需要保存到数据库中。

 

4. 为了方便开发，我们需要对widget做个标准，这个我是采用的xml文档，在后面的文章我会提及。

 

5. 用户怎么维护自己的widget，很方便 可以根据权限添加内容，点击添加内容后，会显示所有的widget（根据权限），选择后

　　点击立即应用即可。widget会默认添加到当前Tab的第一列；

 

6.widget: 主要有：Head、 Content、 EditContent 部分构成；

　　Head: 顾名思义，头，：主要有标题和4张图片，删除 编辑 刷新 最大化（最小化）。

　　　　标题：标示该widget叫什么名字，就像每一个人都有名字一样，同样该widget也要id，就像身份证号一样。呵呵我就不多说了，拖拽交换位置都需要这个身份证号啊。

　　　　图片：每个图片都有自己的事件。主要实现一些效果；比如我不想在该Tab显示一个widget, 那就可以删除，其他的图片就不解释了；

　　Content: 显示和用户交互的内容。

　　EidtContent: 编辑区域，例如用户需要编辑 标题；这个编辑区域默认是隐藏的。只有点击了编辑图片的时候，才会显示。 

　　注：如果我不想让该widget编辑怎么办，或者不想让他删除？

　　　　呵呵，别忘了，我们有一个xml文档就是专门定义该widget的，什么显示，显示什么内容，在这里设置就可以了。 

　　先看一下这个xml文档吧： 

代码

< Module >
   < Head >
     < Edit > True </ Edit >
     < Max > True </ Max >
     < Delete > True </ Delete >
     < Refresh > True </ Refresh >
   </ Head >

   < Content >
   </ Content >

   < EditContent >
   </ EditContent >
</ Module > 

 　　

　　我们可以看到，在xml文档的Head中，并没有Title的定义，这是因为后来考虑到了，这个title每一个用户都需要修改，故我把他放到了数据库里面保存了， 读出来的时候，我拼了个html显示在页面上。现在想想，还是应该标记上，这个问题先放在这里，我看看是否添加上。呵呵每次总结都会有新的问题。 

 

　　今天就写到这里了，谢谢大家阅读， 如果发现错误，或者设计不合理的地方希望大家给出建议，我好修改。呵呵 坚持就是胜利！

 

　　Demo:http://xiaoguan1985.36jhw.dnscnc.com/

 

 

 

posted on 2010-07-10 10:23  管宇 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/winner2009/archive/2010/07/10/1774748.html