本博客立志于收集各类儿童教育资料及技术信息,便于本人和广大网友及家长查询检索,无论公司或个人认为本站存在侵权内容均可与本站联系,任何此类反馈信息一经查明属实后,将立即删除!
   
预览模式: 普通 | 列表

JavaScript Google IG Drag Demo

JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖动
attachments/200703/1914166252.gif
效果演示地址:http://www.phzzy.org/code/drag/google_drag.html
加强版效果演示地址:http://www.phzzy.org/code/drag/google_drag_2.html
拖拽原理:
关于拖拽的基础,可以参考这篇文章,讲得非常不错。
http://www.sohotx.com/mzk/index.php/1007/ArticleContent/298.html
其实原理很简单,就是把绑定三个事件:onmousedown , onmousemove , onmouseup。
在鼠标点下时(onmousedown)把元素的坐标设置为鼠标的坐标,并把 position 设置为绝对坐标。
在鼠标移动时(onmousemove)改变元素坐标。
在鼠标弹起时(onmouseup)取消绑定的事件,并做后续操作。
下面是关于仿 google 个性化主页拖拽效果的一个 Demo (需包含 prototype)。  完整下载包:下载文件Google Drag.rar (19.82 KB ,下载:424次)
总共有四个文件:
  1. google_drag.html
  2. prototype.js
  3. 通用拖拽函数 drag.js
  4. 仿 google 个性化主页的拖拽 google_drag.js
google_drag.html 中最后几行中有个初始化拖拽函数
  1. window.onload = function(){initDrag();}

必须写成这样,如果直接写成
  1. window.onload = initDrag();

这样会在 IE 下报个错误:尚未实现
其他代码可以直接查看源码,就几行注释。其实就是用 JavaScript 绘制了 15 个 div,然后设置它们 class 都为drag_div (后面是通过 className 来判断元素是否可拖拽),然后把可拖拽的部分的 ID 设置元素的 ID 后加个 _h(也可设置自己为拖拽部分)
drag.js 是一个比较通用的拖拽函数。里面包含四个最简单的函数:start_Drag, when_Drag, end_Drag, after_Drag。这四个函数只是实现最基本的拖拽功能,要实现其他功能可修改或在后面覆盖掉这些函数。
google_drag.js 是仿 google 个性化主页拖拽效果的函数。它覆盖了上面说的那个四个函数,实现比较高级的效果。
拖拽其实应该还是比较简单的,实现完拖拽后就是要用 Ajax 来传递拖拽后的位置,改变服务器端的值,这样下次用户访问时元素才会位置不变。效果的实现是非常简单的,主要是怎么融合到已有的项目中,从而提高用户体验。
这个 Demo 有一部分参考的网上的代码。
在网上还有很多这种例子,不过感觉效率都没这个高。有一些例子是把所有元素的位置都设置为 absolute,然后直接修改各个元素的 top 和left来显示效果,感觉那个不是很通用,那样的话比如我要把这个效果修改为一个数的拖拽,并且记录各个元素之间的位置,比较麻烦。这个例子中要记录元素的位置,只需在拖拽完成后记录被拖拽元素的 id 以及拖拽到了哪个元素的前面然后传给服务器端去修改就可以了。

Update 2007-01-26 1:22
加了个加强版的,效果请看 Demo。其实就是加了个函数,让他保证左上方那个大块只会有一个元素,如果超过一个则把后面的挤到下面的第一列去,如果没有元素则从下面的第一列拿出第一个元素放到左上方的大块中,如果下面的第一列没有元素,则找第二列,第三列。
 

推荐好文:《javascript的函数》

原文地址:http://sheneyan.com/g.php/tech/article/js/jsfunc.html

javascript的函数     整篇文档下载: 下载文件JS函数.rar (44.09 KB , 下载:207次) 子乌注:一篇相当不错的function入门文章,个人感觉相当经典。
词语翻译列表 function:函数(Function未翻译) declare:定义 assign:指派,分配 functionbody:函数体(就是函数的内容) object:对象 property:属性 unnamed:匿名(在这里没翻译成未命名) object oriented programming:面相对相编程 class:类(比如后面的class data type我翻译成类数据类型) pointer:指针 reassign:重新分配 nest:嵌套 feature:功能,特性 local/global:局部/全局 blueprint:蓝图(?) user defined:用户自定义 instance:实例 prototype:原型(除了标题都不翻译) internal:内部 constructor:构造器 duplication:复制 函数:定义有以下这些方法可以定义一个函数。所有这些都是有效的,但是它们在后台如何实现的则有一些差别。
常用的写法一般大家都用这个写法来定义一个函数:
functionName([parameters]){functionBody};
Example D1:
Language:javascript, parsed in: 0.005 seconds, using GeSHi 1.0.7.12
    function add(a, b)
    {                     
      return a+b;
    }                     
    alert(add(1,2));        // 结果 3

运行示例
当我们这么定义函数的时候,函数内容会被编译(但不会立即执行,除非我们去调用它)。而且,也许你不知道,当这个函数创建的时候有一个同名的对象也被创建。就我们的例子来说,我们现在有一个对象叫做“add”(要更深入了解,看底下
函数:对象节。)
匿名函数我们也可以通过指派一个变量名给匿名函数的方式来定义它。
Example D2
Language:javascript, parsed in: 0.006 seconds, using GeSHi 1.0.7.12
    var add=function(a, b)
    {                     
      return a+b;
    }                     
    alert(add(1,2));        // 结果 3

运行示例
这个代码和前一个例子做了同样的事情。也许语法看起来比较奇怪,但它应该更能让你感觉到函数是一个对象,而且我们只是为这个对指派了一个名称。可以把它看做和var myVar=[1,2,3]一样的语句。以这种方式声明的函数内容也一样会被编译。
当我们指派一个这样的函数的时候,我们并不一定要求必须是匿名函数。在这里,我作了和ExampleD2一样的事情,但我加了函数名“theAdd”,而且我可以通过调用函数名或者是那个变量来引用函数。
Example D2A
Language:javascript, parsed in: 0.008 seconds, using GeSHi 1.0.7.12
    var add=function theAdd(a, b)
    {                     
      return a+b;
    }                     
    alert(add(1,2));           // 结果 3
    alert(theAdd(1,2));        // 结果也是 3

[阅读全文]

WIKI (维客) 究竟是什么?如何使用它?

wiki概念的发明人是Ward Cunningham。wiki这个字到底是什幺意思呢?根据FAQ的说法,WikiWiki一词来源于夏威夷语的“wee kee wee kee”,原本是“快点快点”(quick)的意思。实际上 wiki 也真的是既简单又快速,你可以看到 wiki 每天都在成长。
新概念的定义总是让人有点摸不着头脑,wiki 也不例外。先看看简单解释:Wiki--一种多人协作的写作工具。Wiki站点可以有多人(甚至任何访问者)维护,每个人都可以发表自己的意见,或者对共同的主题进行扩展或者探讨。
还不明白,那就给你看看更复杂、更晕眩的解释:Wiki指一种超文本系统。这种超文本系统支持面向社群的协作式写作,同时也包括一组支持这种写作的辅助工具。我们可以在Web的基础上对Wiki文本进行浏览、创建、更改,而且创建、更改、发布的代价远比HTML文本为小;同时Wiki系统还支持面向社群的协作式写作,为协作式写作提供必要帮助;最后,Wiki的作者自然构成了一个社群,Wiki系统为该社群提供简单的交流工具。与其它超文本系统相比,Wiki有使用方便及开放的特点,所以Wiki系统可以帮助我们在一个社群内共享某领域的知识。
还是有点云里雾里?那就通俗一点:根据 wiki 社群的定义,wiki 是一种提供「共同创作(collaborative)」环境的网站,也就是说,每个人都可以任意修改网站上的页面资料。这听起来挺疯狂的,万一有陌生人来网站上乱搞怎幺办?别担心,所有的 wiki 都有「版本控制(Version Control)」的概念,你随时都可以找回之前的正确版本;更何况你可不是单打独斗,社群的力量是非常惊人的。就在这种相信人性本善的概念下,整个 wiki 社群迅速地成长茁壮。如果你还是很担心,更可以帮 wiki 加入权限管理(Access Control)的机制,保证万无一失。除了版本控制之外,值得一题的是「格式化语法(Formating Rule)」。因为对一般人来说,HTML语法实在是个恶梦,所以 wiki 创造了一套更简单的写作语法,让大家可以专注在写作上。
你还是不明白,网络风云那也不要紧,我们就先不要咬文嚼字,还是以一种看热闹的从容心态,先慢慢看下去。
Wiki的历史还不长,无论是Wiki概念自身,还是相关软件系统的特性,还都在热烈的讨论中;所以怎样的一个站点才能称得上是一个Wiki系统还是有争议的。与Wiki相关最近出现的技术还有blog,它们都降低了超文本写作和发布的难度。这两者都与内容管理系统关系紧密。第一个 Wiki 网站诞生于1995年,Ward Cunningham 创建的,作为波特兰的模式仓库的模式定义和讨论的交互性场所: http://c2.com/ppr/;而其根源可以上述到1972年卡耐基-梅隆大学的 ZOG 数据库系统。

[阅读全文]

不同浏览器 JavaScript 的getyear年份函数兼容性问题

先举个例子
用 Firefox 上一些网站会看到这样的提示
现在时间是 106年8月8日

而用 ie 浏览器的话就显示正常的 2006年8月8日

原因就是 javascript 的兼容性问题

var today = new date();
var year = today.getYear();

在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值 (以前都如此)
而微软很NB的做了一个改动:
当today的年份大于等于2000的时候 直接把1900加上了 返回的 200X (而不是10X)
如:today年份是1999 返回99
    today年份是2000 返回2000

一个简单的解决是加一个判断:
year = (year<1900?(1900+year):year);

也有另外的方法
通过 getFullYear getUTCFullYear 去调用
var year = today.getFullYear();

PHP程序漏洞产生的原因和防范方法

滥用include

  1.漏洞原因:

  Include是编写PHP网站中最常用的函数,并且支持相对路径。有很多PHP脚本直接把某输入变量作为Include的参数,造成任意引用脚本、绝对路径泄露等漏洞。看以下代码:

CODE:

 ...
 $includepage=$_GET["includepage"];
 include($includepage);
 ...    
 

  很明显,我们只需要提交不同的Includepage变量就可以获得想要的页面。如果提交一个不存在的页面,就可以使PHP脚本发生错误而泄露实际绝对路径(这个问题的解决办法在下面的文章有说明)。

  2.漏洞解决:

  这个漏洞的解决很简单,就是先判断页面是否存在再进行Include。或者更严格地,使用数组对可Include的文件作出规定。看以下代码:

CODE:

 $pagelist=array("test1.php","test2.php","test3.php"); //这里规定可进行include的文件
 if(isset($_GET["includepage"])) //判断是否有$includepage
 {
  $includepage=$_GET["includepage"];
  foreach($pagelist as $prepage)
  {
   if($includepage==$prepage) //检查文件是否在允许列表中
   {
    include($prepage);
    $checkfind=true;
    break;
   }
  }
  if($checkfind==true){ unset($checkfind); }
  else{ die("无效引用页!"); }
 }    
 

  这样就可以很好地解决问题了。

  小提示:有此问题的函数还有:require(),require_once(),include_once(),readfile()等,在编写的时候也要注意。

[阅读全文]

标签: php安全

程序员的八荣八耻

以塌实编码为荣 以心浮气躁为耻

以详细注释为荣 以注释残缺为耻

以勤于测试为荣 以懒于测试为耻

以简明文档为荣 以冗余文档为耻

以注重团队为荣 以孤傲自大为耻

以刻苦钻研为荣 以敷衍了事为耻

以善于总结为荣 以不思进取为耻

以质效并进为荣 以单取其一为耻

几点提高php序运行效率的方法

1、用i+=1代替i=i+1。符合c/c++的习惯,效率还高。
2、尽可能的使用PHP内部函数。自己编写函数之前要详细查阅手册,看有没有相关的函数,否则费力不讨好。
3、能使用单引号字符串尽量使用单引号字符串。单引号字符串的效率要高于双引号字符串。
4、用foreach代替while遍历数组。遍历数组时foreach的效率明显高于while循环,而且不需要调用reset函数。两种遍历方法如下:
reset ($arr);
while (list($key, $value) = each ($arr)) {
echo "Key: $key; Value: $value<br>n";
}
foreach ($arr as $key => $value) {
echo "Key: $key; Value: $value<br>n";
}
标签: php效率