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/

    作者:管宇

    欢迎转载,请标明出处。

  • 相关阅读:
    leetcode 347. Top K Frequent Elements
    581. Shortest Unsorted Continuous Subarray
    leetcode 3. Longest Substring Without Repeating Characters
    leetcode 217. Contains Duplicate、219. Contains Duplicate II、220. Contains Duplicate、287. Find the Duplicate Number 、442. Find All Duplicates in an Array 、448. Find All Numbers Disappeared in an Array
    leetcode 461. Hamming Distance
    leetcode 19. Remove Nth Node From End of List
    leetcode 100. Same Tree、101. Symmetric Tree
    leetcode 171. Excel Sheet Column Number
    leetcode 242. Valid Anagram
    leetcode 326. Power of Three
  • 原文地址:https://www.cnblogs.com/winner2009/p/1774748.html
Copyright © 2011-2022 走看看