【Ajax】【JQuery】自己写的输入提示

现在的位置: 首页 > 综合 > 正文

RSS

【Ajax】【JQuery】自己写的输入提示

2013年02月15日 ⁄ 综合 ⁄ 共 6903字 ⁄ 字号小中大 ⁄ 评论关闭

目前除了不能用键盘上下键选取提示外基本上已经算是完善了。

不知为何不能得到keyCode，等有空的时候再看看。

一般处理程序部分

<%@ WebHandler Language="C#" Class="AotoClew" %>

using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;

public class AotoClew : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        IList<string> list = new List<string>();
        for (int i = 0; i < 10; i++)
        {
            list.Add("测试自动提示"+(i+1));
        }
        context.Response.ContentType = "text/plain";

        for (int i = 0; i < list.Count; i++)
        {
            context.Response.Write("<span id=/"span"+(i+1)+"/" name=/"aotoClew/" onclick=/"toInput('span"+(i+1)+"')/" onmouseover=/"mouseOver('span"
                +(i+1)+"')/" onmouseout=/"mouseOut('span"+(i+1)+"')/">" + list[i] + "</span><br />");
        }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

jQuery脚本部分

    //设置弹出提示层的位置
    var offset=$("#txt1").offset();
    $("#div1").css("left",offset.left);
    $("#div1").css("top",offset.top+25);


    //当文本框失去焦点的时候隐藏div
    $("#txt1").blur(function(){
        var x=event.clientX;//得到鼠标的坐标
        var y=event.clientY;
        var left=offset.left;
        var right=left+160;//当层的大小改变的时候记得改变此处的值
        var top=offset.top;
        var down=top+180;//此处同上，需同时修改
        if(x>=left&&x<=right&&y>=top&&y<=down){

        }else{
            $("#div1").css("display","none");//控制div隐藏
        }
    });
});

//点击时将内容输入到文本框，同时隐藏div
function toInput(spanId){
$("#txt1").val($("#"+spanId).text());
$("#div1").css("display","none");
}

//鼠标移上去时背景色的变化
function mouseOver(spanId){
$("#"+spanId).css("background-color","#CCCCCC");
}

//鼠标移走后的背景色变化
function mouseOut(spanId){
$("#"+spanId).css("background-color","#FFFFFF");
}

//var num=1;
//function upAndDown(){
// mouseOver("span"+num);
// num++;
//}

////如果按下的为上下方向键，则调用键盘选择的事件
//if(event.keyCode==38){alert("ttt");
// upAndDown();
//}

</script>

HTML脚本部分

================================================================

2010年12月15日3:03:14更新，已支持用键盘选择。以下为整个测试网页，就不往外抽取了。

================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//创建XMLHttpRequest
function createXmlGttpRequest(){
    if(window.ActiveXObject){//IE浏览器
        return new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){//非IE浏览器
        return new XMLHttpRequest();
    }
}

//发送请求
var xmlHttpRequest;//声明XMLHttpRequest对象
function toSendRequest(){
    xmlHttpRequest=createXmlGttpRequest();
    xmlHttpRequest.onreadystatechange=callbackFun;//设置回调函数，当xmlHttpRequest对象的状态改变时调用callbackFun这个函数

    //初始化XMLHttpRequest组件；第三个参数表示同步(false)or异步(true),异步表示调用send方法发送请求后不用等待请求响应继续执行后面的Javascript代码。
    xmlHttpRequest.open("GET","Ajax.ashx?name=name1&pass=pass1",true);
    xmlHttpRequest.send(null);//发送请求
}

//回调函数
function callbackFun(){
    //readyState共有5种状态，0未初始化，1已初始化，2发送请求，3开始接收结果，4接收结果完毕。
    //status服务器响应状态码。
    if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
        alert(xmlHttpRequest.responseText);
    }else{
        //出现异常
    }
}

</script>

    //当按键释放时触发，press不好使，貌似与keydown冲突。
    $("#txt1").keyup(function(){
        var divDisplay=$("#div1").css("display");
        if(divDisplay=="block"){
            upAndDown();
        }
    });


    //设置弹出提示层的位置
    var offset=$("#txt1").offset();
    $("#div1").css("left",offset.left);
    $("#div1").css("top",offset.top+25);


    //当文本框失去焦点的时候隐藏div
    $("#txt1").blur(function(){
        var x=event.clientX;//得到鼠标的坐标
        var y=event.clientY;
        var left=offset.left;
        var right=left+160;//当层的大小改变的时候记得改变此处的值
        var top=offset.top;
        var down=top+180;//此处同上，需同时修改
        if(x>=left&&x<=right&&y>=top&&y<=down){

        }else{
            $("#div1").css("display","none");//控制div隐藏
        }
    });


});

//点击时将内容输入到文本框，同时隐藏div
function toInput(spanId){
$("#txt1").val($("#"+spanId).text());
$("#div1").css("display","none");
}

//鼠标移上去时背景色的变化
function mouseOver(spanId){
$("#"+spanId).css("background-color","#CCCCCC");
}

//鼠标移走后的背景色变化
function mouseOut(spanId){
$("#"+spanId).css("background-color","#FFFFFF");
}

var num=1;

//如果按下的为上下左方向键，则调用键盘选择的事件
function upAndDown(){
    //$("#spanTest1").html($("#spanTest1").html()+num+"<br/>");
    if(event.keyCode==38){
        mouseOver("span"+num);
        if(num<=1){
            num=1;
        }else{
            num--;
        }
    }else if(event.keyCode==40){
        mouseOver("span"+num);
        if(num>=10){
            num=10;
        }else{
            num++;
        }
    }else if(event.keyCode==39){//右方向键上屏
        toInput("span"+(num-1));
    }
}
</script>

    <div>
        <input type="button" id="Button1" onclick="toSendRequest()" value="测试Ajax" />

        <br/><br/><br/>
        <input type="text" id="txt1" />
        <div id="div1" style="position:absolute;display:none;width:160px;height:180px;Cursor:hand">
        <span id="span1" onclick="test('span1')" onmouseover="mouseOver('span1')" onmouseout="mouseOut('span1')">原始内容1</span><br />
        <span>原始内容1</span><br />
        <span>原始内容1</span><br />
        <span>原始内容1</span><br />
        </div>

        <input type="button" id="Button2" onclick="alert(event.clientX)" value="得到鼠标的坐标" /><br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <span id="spanTest1">测试执行了几遍<br /></span><br />
    </div>
    </form>
</body>
</html>

【上篇】解决WebBrowser中打开链接调用IE窗口问题
【下篇】ARC专题：编写兼容ARC(自动引用计数) 和 non-ARC(非自动引用计数)的通用代码

作者: gush

该日志由 gush 于11年前发表在综合分类下，最后更新于 2013年02月15日.
转载请注明: 【Ajax】【JQuery】自己写的输入提示 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

【Ajax】【JQuery】自己写的输入提示

作者: gush

书签

最新文章New

本站推荐

返回首页