zoukankan      html  css  js  c++  java
  • 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/

    作者:管宇

    欢迎转载,请标明出处。

  • 相关阅读:
    获取自定义属性的值
    当前窗口,父级窗口,顶层窗口
    图片一直居中,并且窗口变小图片两端缩小,但是图片还是居中。
    解决IE打开时,弹出的提示调用active的问题,阻止js运行。
    $.fn.exted({})与$.extend({})区别
    rem与部分手机 字体偏大问题
    Python 内部函数
    Python lambda表达式
    Python 函数动态参数
    python 邮件发送
  • 原文地址:https://www.cnblogs.com/winner2009/p/1774748.html
Copyright © 2011-2022 走看看