JQuery实现个性化，可以拖拽 自定义自己的界面（一）
2010-07-10 10:23
357 查看
感谢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/
-----------------------------------------------------------------------------------------------
今天不谈怎么实现的，只说一下思路 和 知识点。
一.知识点：
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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery实现个性化，可以拖拽 自定义自己的界面（三）
- JQuery实现个性化，可以拖拽 自定义自己的界面（四）
- JQuery实现个性化，可以拖拽 自定义自己的界面（二）
- jQuery实现页面模块拖拽与模块自定义效果.rar
- js,jQuery实现拖拽自定义移动端板块，web移动端开发
- 利用jquery插件中的拖拽与放置实现的相册效果，可以删除和恢复
- 自己实现vector，对于自定义类型可用，可以实现vector的嵌套。功能上目前只实现了插入和删除。
- Android 打造自己的个性化应用(四)：仿墨迹天气实现-->自定义扩展名的zip格式的皮肤
- 利用5个标签，4个文本框，2个按钮，自己设计布局实现输入三边求三角形面积。界面如下所示。三角形类的编写可以使用实验4中已经写过的三角形类，当点击“判断三边”时，若能构成三角形，在标签5上显示“可以构成三角形！”，如不能构成三角形，在标签5上显示“不能构成三
- Java开发中网页截图的示例，采用jquery.imageaeraselect-0.9.10这个插件实现，自己详细测试过，可以使用。
- TreeSet集合存放自定义类型的对象，可以使用比较器，实现Comparable接口自己设置排序方式
- Android 打造自己的个性化应用(四)：仿墨迹天气实现-->自定义扩展名的zip格式的皮肤
- Jquery实现自定义窗口随意的拖拽
- easysize的使用方法 （实现控件大小位置随界面变化而有相应的变化，这个变化可以自己设置）
- 在Android中，可以自定义类，继承ViewGroup等容器类，以实现自己需要的布局显示。
- jquery网页层拖动实例,保存可以自己实现
- Android 打造自己的个性化应用(四)：仿墨迹天气实现-->自定义扩展名的zip格式的皮肤
- jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
- jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽，按列排序，并可以保存排序后的结果
- Jquery实现自定义窗口随意的拖拽