需要如下图,
1、鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来。
2、鼠标可以移动到上面浮动的DIV。
3、鼠标移出浮动DIV且移出头像DIV时,浮动DIV消失,
第一步,给DIV添加mouseon事件,触发获取数据:这个比较简单,我使用的是通过ajax get:$.get(url, function(data) {。。。。。}
第二步,显示DIV,
alert('用户名片加载失败,请联系管理员!');
}else{
$(wrap_uid).append(data);//外面一层DIV,data本身就是HTML代码,当然也可以再这边先组织出data来
$(uid).show();//浮动窗口的DIV,show函数必须,不然这个新加的DIV是不会自个儿主动出来的!
}
第三步,这是比较头疼的一步了,最开始,是这样的思路,给头像DIV和浮动DIV的外面那层DIV添加一个事件,mouseout事件,在事件中将浮动DIV删除
,问题来了,很多时候,用户移动到头像DIV,然后浮动DIV显示出来了,用户就想去操作浮动DIV了,但是中间是分开的!只有一个箭头是和头像DIV在一起的,也就是说,鼠标从头像DIV移动到浮动DIV时,会有很大概率跑出大的DIV,一旦鼠标进入两个DIV中间的缝隙,mouseout事件就触发了,浮动DIV就木有了,很蛋疼。
最后想了个办法,让移除浮动DIV放到一个setTimeout中,在一定的时间内(0.2s或者0.1s),若用户鼠标移动到浮动的DIV上时,触发一个clearTimeout事件,把移除浮动DIV定时器给删了!想法挺好,看着也挺简单,但是中间还是有各种BUG,各种失败,最重要的一点就是,最外面的DIV的mouseout事件需要移除绑定,自己做过实验就会知道为什么了,下面直接贴代码
var my_timeout;
var url = 'xxxxxx';
console.log(url);
$.get(url, function(data) {
console.log(data);
if(data=='error'){
alert('用户名片加载失败,请联系管理员!');
}else{
$(wrap_id).append(data).mouseout(function() {
my_timeout = setTimeout(function() {
$(float_id).remove();
}, 200);
$(wrap_id).unbind('mouseout');
}).mouseover(function() {
clearTimeout(my_timeout);
});
$(float_id).show().mouseover(function() {
clearTimeout(my_timeout);
}).mouseout(function() {
my_timeout = setTimeout(function() {
$(float_id.remove();
}, 200);
});
}
});
}
还是写点清楚吧,也算锻炼下自己的表达能力!首先,鼠标移出外层DIV时,有两种情况,一种是鼠标它真的走了,还有一种是它其实是去浮动DIV了,所以,给他200毫秒时间,时间一到,如果它没到浮动DIV,就认为它真的走了,就删掉浮动DIV,如果到了浮动DIV,就把定时器给删了!浮动DIV依旧显示,然后,从浮动DIV出来,也有两种情况,一种是去头像DIV,一种是鼠标他真的走了,老样子。至于为什么要外层的DIV解除mouseout绑定,是因为当鼠标在浮动DIV移动的时候,实际上鼠标已经移出了外层DIV的范围,当鼠标在浮动DIV上不停滑动时,mouseout事件不断触发,会造成BUG,第一次完全OK,在浮动DIV移动时,不停clearTimeout 后面timeout越来越多,第二次开始timeout就乱了,无法正确删除clearTimeout事件.....还是有点说不清,囧....
感谢@tanshaohua的指点,指出了这段代码的改进之处,就是在用户鼠标移动到头像,显示出浮动框后,鼠标再次移动到头像时,不应该再去获取数据,增加了服务器的压力。最后贴一下改进后的代码,其实就是判断下float_id的DIV是否已经存在,存在了就不进行加载。代码还比较臃肿,先把手头上其他事解决了,再来处理这个问题
if($(float_id).size()>0){
$(wrap_id).mouseout(function() {
my_timeout = setTimeout(function() {
$("float_id).remove();
}, 200);
$(wrap_id).unbind('mouseout');
}).mouseover(function() {
clearTimeout(my_timeout);
$(float_id).show().mouseover(function() {
clearTimeout(my_timeout);
}).mouseout(function() {
my_timeout = setTimeout(function() {
$(float_id).remove();
}, 200);
});
}else{
var url = 'XXXXXXX';
// console.log(url);
$.get(url, function(data) {
// console.log(data);
if(data=='error'){
alert('用户名片加载失败,请联系管理员!');
}else{
$(wrap_id).append(data).mouseout(function() {
my_timeout = setTimeout(function() {
$(float_id).remove();
}, 200);
$(wrap_id).unbind('mouseout');
}).mouseover(function() {
clearTimeout(my_timeout);
$(float_id).show().mouseover(function() {
clearTimeout(my_timeout);
}).mouseout(function() {
my_timeout = setTimeout(function() {
$(float_id).remove();
}, 200);
});
}
});
}
今天把这个功能做成了一个jquery插件:,下面是插件的代码:
$.fn.popovercard = function(op) {
var nowObj = $(this);
var defaults = {
obj_type : 'user',
obj_id : '21',
url : '',
user_url : '/user/user_info_card?id=',
prod_url : '/prod/prod_info_card?id',
needParam : 'true',
popover_id : 'popover',
popover_wrap_id : 'popover_wrap',
onSuccess : null,
onError : null
};
if (typeof ($(this).data('obj_id')) != "undefined") {
defaults.obj_id = $(this).data('obj_id');
}
if (typeof
xdebug配置
装了wamp后,xdebug默认就安装好了,为了能够用netbeans远程调试,配置文件里得加几句
xdebug.remote_enable = on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost
xdebug.remote_port=9000
Netbeans配置
工具选项
- 常规=>Web浏览器=>Firefox
- PHP=>常规=>PHP 5解释器=><wamp>\bin\php\php5.x.xx\php.exe
- PHP=>调试:这里默认就行了,默认就是9000号端口
调试
打开要调试的文件,选择“调试=>调试文件”菜单即可
本文链接:http://www.cnblogs.com/windtail/p/3155624.html,转载请注明。
小编今天给大家总结下 windows 下 apache的二级域名的相关配置
下面就利用本地127.0.0.1进行测试
我们这里以 www.jobs.com 为例,以下代码中的 jobs.com 都可以替换成你自己想要的域名 这里只是为了测试。
我们的目标是,不同的子域名可以访问不同目录下的网站:
www.jobs.com => / ;
jobs.com => / ;
news.jobs.com => /news;
1、 开启apache的mod_rewrite功能(肯定是要让它支持重写的)在httpd.conf 找到 mod_rewrite 把前面的#号去了就行,
接着开启apache的虚拟主机 在httpd.conf 找到 Virtual hosts 把前面的# 号去了。
2、添加几个域名,在 C:\WINDOWS\system32\drivers\etc 目录中找到hosts 这个文件 记事本打开它,添加如下三个域名
127.0.0.1 www.jobs.com
127.0.0.1 jobs.com
127.0.0.1 news.jobs.com
3、在虚拟主机中填写相关代码 让它有权限访问 www目录,找到Apache2\conf\extra 目录下的 httpd-vhosts.conf 文件并打开 代码添加如下
<VirtualHost *:80>
DocumentRoot "E:/www"
ServerName localhost
<Directory "E:/www">
Options Indexes FollowSymLinks
AllowOverride all
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
</Directory>
</VirtualHost>
然后讲www.jobs.com 绑定到 相关jobs项目所在目录 代码添加如下
<VirtualHost *:80>
DocumentRoot "E:/www/job"
ServerName www.jobs.com
ServerAlias *.jobs.com
<Directory "E:/www/job">
Options Indexes FollowSymLinks
AllowOverride all
Order Deny,Allow
Deny from all
Allow from All
</Directory>
</VirtualHost>
弄好之后然后重启apache ,如果重启之后遇到apache启动报错 要查看apache的错误日志,根据需求进行修改。
4、在jobs目录下 建立 .htaccess 文件 在里面添加如下代码
RewriteEngine on
#让www.jobs.com 访问根目录
RewriteCond %{HTTP_HOST} ^www.jobs.com$
RewriteCond %{REQUEST_URI} !^/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /$1
RewriteCond %{HTTP_HOST} ^www.jobs.com$
RewriteRule ^(/)?$ /index.php [L]
#让news.jobs.com 访问news目录
RewriteCond %{HTTP_HOST} ^news.jobs.com$
RewriteCond %{REQUEST_URI} !^/news/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /news/$1
RewriteCond %{HTTP_HOST} ^news.jobs.com$
RewriteRule ^(/)?$ news/index.php [L]
一切完成之后 你就可以试试 www.jobs.com job.com news.jobs.com 等访问了 就看到你想要的结果了
如果需要其它二级域名访问的话 按照如上的方法要重复 2 、4 步就可以了,不需要在重启apache了
本文所涉及的只为了测试环境所用 并为对安全性进行校验,请在一切设置好之后用于产品中。
本文链接:http://www.cnblogs.com/wlgaojin/p/3156783.html,转载请注明。