加冰的可乐

  博客园 :: 首页 :: 联系 :: 订阅 订阅 :: 管理
  3 Posts :: 3 Stories :: 9 Comments :: 0 Trackbacks

公告

昵称:加冰的可乐
园龄:5年8个月
粉丝:0
关注:0

搜索

 

常用链接

积分与排名

  • 积分 - 6587
  • 排名 - 11353

最新评论

2009年4月30日 #

原始需求:移到图片的左边,显示向左的箭头,移到图片的右边,显示向右的箭头。与QQ的相册的图片上的翻页一个特性。

明了的需求,不绕弯,直接上代码。看看便明。

 

<head>
    
<title>Js实现的图片分页导航</title>
    
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    
<meta name="Generator" content="EditPlus" />
    
<meta name="Author" content="Dicky">
    
<meta name="Keywords" content="ENSONFLY'S BLOG:http://ensonfly.guwancun.com/">
    
<script language="javascript" type="text/javascript">
<!--
        
var ImageID = 0;
        
function SetImageID(e) {
            
var image;            
            
if (typeof (img) != 'object') {
                image 
= document.createElement("img");
                image.src 
= e.src;
            }
            
var ax = getLeft(e);
            
//算出鼠标离当前图片的左边缘的距离
            var axa = parseInt(window.event.screenX) - ax;
//            var aya = parseInt(window.event.screenY) - ay;
            ImageID = axa <= image.width / 2 ? e.preImageID : e.nextImageID;

            
if (e.preImageID != 0 || e.nextImageID != 0) {
                
if (axa <= image.width / 2 && ImageID != 0) {
                    e.style.cursor 
= "url(" + "http://imgcache.qq.com/qzone/client/photo/cursor/pre.ani" + ")";
                    e.title 
= "点击跳到上一张";
                }
                
else if (axa > image.width / 2 && ImageID != 0) {
                    e.style.cursor 
= "url(" + "http://imgcache.qq.com/qzone/client/photo/cursor/next.ani" + ")";
                    e.title 
= "点击跳到下一张";
                }
            }

        }  
        
        
//获取元素的横坐标
        function getLeft(e) {
            
var offset = e.offsetLeft;
            
if (e.offsetParent != null) offset += getLeft(e.offsetParent);
            
return offset;
        }

        
function GoToNewImage() {
            
if (ImageID != 0) {
                window.location 
= "/shop/detail.aspx?id=" + ImageID;
            }
        }
//-->
    </script>

</head>
<body>
    
<table align="center" border="1">
        
<tr>
            
<td>
                
<img src="http://images.cnblogs.com/logo.gif" onmousemove="SetImageID(this)"
                    onclick
="GoToNewImage()" preimageid="2" nextimageid="3" />
            
</td>
        
</tr>
    
</table>
</body>
</html>

总结:

1、obj.style.cursor中url的图片必须是.ani的图片,否则无法显示。

2、要想让IIS支持.ani文件,还需要对IIS做一点小小的改动,见下图:

注:以上代码只在IE上做过测试,其它浏览器可能不支持。

posted @ 2009-04-30 02:13 加冰的可乐 阅读(1277) 评论(0) 编辑

2008年11月27日 #

  前两天在博问上提过一个关于Custom Validation 控件使用的问题结果没有人给与回答。

  具体场景如下:

  1、需要从javascript异步调用服务端的方法才能确定是否校验通过。

  2、配合使用了.net提供的CustomValidator 控件

  如果你遇到和我类似的情况,解决的第一想法可能和我一样。首先会使用全局变量把argument的值存入,然后在成功返回的回调函数中将它的IsValid置为false(当然也可能设为true,但这里为了展现我们的问题就假设它校验一直不成功,始终置为false)。

具体代码如下 

Code

 

  这样行吗?当然是不行了,原因何在,为什么样我们把argument.IsValid=false写在 custom validator的clientvalidationFunction中指定的而的方法中就可以提示校验不过,而放入回调函数就不成了。下边我们先来看custom validator 控件的client部分到底是如何工作的。

custom validator简要工作流程

  我们可以看在页面添加custom validator control后,会在页面的javascript置入了ValidatorOnLoad(),以备在页面载入时运行。其实这方法就是custom validator control 最初始的入口,它为以后的校验工作打下了基础。整个执行顺序大致如下:

  ValidatorOnLoad()->ValidatorHookupControlID(controlID, val)->ValidatorHookupControl(ctrl, val)最终在ValidatorHookupControl方法将ValidatorOnChange(event) attach到我们被校验控件(就是上边的TextBox1)的onchange事件中。

  下边我们再看看ValidatorOnChange(event)又干了啥。 ValidatorOnChange方法也就是当我们change了TextBox1输入值时就会调用它。我们看看它一路下来调用了哪些方法,及各方法的作用。

  ValidatorOnChange->ValidatorValidate(val,null, event)(如果有多种校此方法会调用多次,当然每次val的值就不一样了)->CustomValidatorEvaluateIsValid(val)->ValidatorUpdateDisplay(val)->ValidatorUpdateIsValid()。跟到CustomValidatorEvaluateIsValid方法我们可以看到它才是最终调用clientvalidationFunction指定的自定义javascript方法,通过自定义的方法更改了argument的IsValid属性后,ValidatorUpdateDisplay会根据该值是否要更ErrorMessage的style的visibility值的以确定显示校验错误提示信息。

 
  了解这个过程后,我们就可以很清楚的明白为何我们开始那样做是不行的了,因为调用服务器的方法是异步的,所以该方法的下边语句并不会等你执行完,而是并行处理的,所以等从服务器端取回值后,再去给argument.IsValid赋值已是错过班车了。所我们解决的办法就是在回调的方法里边手动再将validateOnChange执行一遍,或者是其中的某些方法。本人在解决的这个问题时,只是在回调函数中依次调用了ValidatorValidate(val,null, event)->ValidatorUpdateDisplay(val)->ValidatorUpdateIsValid()。就得到我所要的结果。大致就是这样,可能具体的问题还要具体去分析。不过个人认为了解custom validator contol的client部分的来胧去脉,对于理解整个.net提供的的校验控件的工作原理会有较大的帮助。

以上仅仅是个人浅易理解,不妥之处请指证。

posted @ 2008-11-27 02:23 加冰的可乐 阅读(3661) 评论(9) 编辑

2008年9月23日 #

摘要: 每日构建最近我们的团队需要搭建一个C#项目的持续集成的环境(WEB程序),这一光荣的任务落入我手中。通过几天折腾,总算弄得基本功能可以跑通,记下来,供以后有需要的弟兄参考。依照顺序逐一写下基本要求:用CruiseControl.net+Nant+Nunit来构建这个可持续集成的环境,一、先介绍下这都是些什么物件:)CruiseControl.NET: 是.net平台下,一个开源的自动化持续集成工具...阅读全文
posted @ 2008-09-23 09:21 加冰的可乐 阅读(594) 评论(0) 编辑