URL location的应用----js根据输入内容指定URL瞄点

2011-03-10 17:34:14 by 【6yang】, 163 visits, 收藏 | 返回

Link Address:

http://www.6yang.net/myjavascriptlib/urlhash

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>URL location的应用----js根据输入内容指定URL瞄点</title>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function(){ 

    var urlArr = {
        hash: location.hash,
        host: location.host,
        hostname: location.hostname,
        href: location.href,
        port: location.port,
        protocol: location.protocol,
        search:    location.search
    };
   
    /**
     * get the url hash
     * param arr
     * @return this
     */   
    $.fn.handleLocation = function(options, msg){
        this.each(function(){
            var self = $(this);   
            var settings = $.extend(urlArr , options);           
            urlSearch = settings.search  + settings.mySearch + "&" + msg;
            window.location.href = "?#" + urlSearch;
            //self.html( urlSearch );
        });
        return this;
    };
   
    /**
     * get the url has arr
     * param arr
     * @return this
     */   
    $.fn.hadleUrlArr = function(){
        this.each(function(){
            var self = $(this);
            var currhashArr = (window.location.hash.replace('#','')).split('&');
            $("#urlarray").html('');
            for(var i = 0; i < currhashArr.length ; i++){
                var currhashArrVal = currhashArr[i].split("=");
                $("#urlarray").append(currhashArrVal[0] + "=" + currhashArrVal[1] + ",<br>");
            }   
        });
        return this;
    };
   
    /**
     * get the url has arr
     * param arr
     * @return this
     */   
    $.fn.clearComma = function(){
        $("#urlarray").each(function(){
            var self = $(this),
                selfHtml = self.html().replace(/(,<br>)$/g, '');
            $(this).html(selfHtml);
        });
        return this;
    };
   
   
    $("#keyword ,#keyword1 ,#lnktxt").bind("focus keyup keydown blur click",function(){
        var urlSetting = {
            mySearch: "page=10&totalPage=20"
        };
        var self = $(this);
       
        if(self.val()){
            var selfVal = self.attr("name") + "="+ self.val();
        }else if(self.html()){
            var selfVal = self.attr("title");
        }else{
            var selfVal = "";
        }
       
        $("#url").handleLocation( urlSetting, selfVal).hadleUrlArr().clearComma();
       
    });
   
});

</script>
</head>

<body>
    <h1>根据输入内容指定URL瞄点数组</h1><input type="text" name="keyword"  value="" id="keyword">
    <input type="text" name="keyword1"  value="" id="keyword1">
    <span title="jack=1" id="lnktxt">Click</span>
    <div id="url"></div>
   
    <div id="urlarray">
       
    </div>
</body>
</html>

分享到:
share

    图片原图

    loading

    loading