`
panshaobinSB
  • 浏览: 202873 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

浏览器兼容的日期控件

 
阅读更多
/**
 * 请将下面的代码保存为"JTimer.js"文件.
 * 在程序中调用示例:
 * <html>
 * <head>
 *  <script language="javascript" src="JTimer.js"></script>
 * </head>
 * <body>
 *  <input type="text" readonly onclick="JTC.setday(this)"/>全部可选(无任何限制)<br />
 *  <input type="text" readonly onclick="JTC.setday(this,this,1,0)"/>往前日期 (不包含今天)<br />
 *  <input type="text" readonly onclick="JTC.setday(this,this,1,1,'yyyyMMdd')"/>往前日期 (包含今天,日期格式为:yyyyMMdd)<br />
 * </body>
 * </html>
 **/


/********************************************************************
* JavaScript Timer Control - Timer Select Control for Internet
* Copyright (C) 2010-2020 FreshFlower
*
* @author FreshFlower <wpt206@163.com>
* @site http://hi.baidu.com/wangpeng205/
* @version 1.0.2
*********************************************************************/


var JTC = {};

JTC.config = {
    
    //日期背景颜色与字体颜色 依次: 可选择; 今天; 鼠标移过; 不可选择
    dayBgColor : [ '#B1ED89', '#FF66E0', '#F9D23A','#EDECF0'],
    dayColor : [ '#303136', '#303136', '#303136', '#6F6F6F'],
    
    forward : 0 ,   //控制日期可选择的范围  0:无限制;  1:仅可选择过去的日期; 2.仅可选择未来的日期
    includeToday : 1 ,  //是否可以选择今天: 0: 不可选  1: 可以选择; 
    format : 'yyyy-MM-dd',  //返回日期值的格式
    outObject : null ,
    
    bgDivID : 'JTC_BG_DIV',
    yearSpan : 'JTC_TheCurYear',
    yearSelectSpan : 'JTC_SelectYearLayer',
    yearSelectCtrl : 'JTC_SelectYearCtrl',
    
    monthSpan : 'JTC_TheCurMonth',
    monthSelectSpan : 'JTC_SelectMonthLayer',
    monthSelectCtrl : 'JTC_SelectMonthCtrl',
    dayPanelId : 'JTC_TheCurDay'
};
   
JTC.$ = function(id,doc){
    var doc = doc || document;
    return doc.getElementById(id);
};

JTC.$$ = function(name, doc){
	var doc = doc || document;
	return doc.createElement(name);
};   

JTC.browser = (function() {
	var ua = navigator.userAgent.toLowerCase();
	return {
		VERSION: ua.match(/(msie|firefox|webkit|opera)[\/:\s](\d+)/) ? RegExp.$2 : '0',
		IE: (ua.indexOf('msie') > -1 && ua.indexOf('opera') == -1),
		GECKO: (ua.indexOf('gecko') > -1 && ua.indexOf('khtml') == -1),
		WEBKIT: (ua.indexOf('applewebkit') > -1),
		OPERA: (ua.indexOf('opera') > -1)
	};
})();

JTC.util = {
    
    createTable : function(doc){
        var table = JTC.$$('table',doc);
        table.cellPadding = 0;
		table.cellSpacing = 0;
		table.border = 0;
		return {table: table, cell: table.insertRow(0).insertCell(0)};
    },
    
    formatDate : function(date, format){
        var lang = {
            'M+' : date.getMonth() + 1,
            'd+' : date.getDate()
        };
        if(/(y+)/.test(format)){
            format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for(var key in lang){
            if(new RegExp('(' + key + ')').test(format)){
                format = format.replace(RegExp.$1, RegExp.$1.length==1 ? lang[key] : ('00' + lang[key]).substr(('' + lang[key]).length));
            }
        }
        return format;
    },
    
    addEvent : function(el, event, listener) {
		if (el.addEventListener){
			el.addEventListener(event, listener, false);
		} else if (el.attachEvent){
			el.attachEvent('on' + event, listener);
		}
	},
	
	getCoords : function(ev) {
	    ev = ev || window.event;
	    return {
		    x : ev.clientX,
		    y : ev.clientY
	    };
    },
    
	getDocumentElement : function(doc) {
		doc = doc || document;
		return (doc.compatMode != "CSS1Compat") ? doc.body : doc.documentElement;
	},
	
	getScrollPos : function() {
		var x, y;
		if (JTC.browser.IE || JTC.browser.OPERA) {
			var el = this.getDocumentElement();
			x = el.scrollLeft;
			y = el.scrollTop;
		} else {
			x = window.scrollX;
			y = window.scrollY;
		}
		return {x : x, y : y};
	},
	
	getElementPos : function(el) {
		var x = 0, y = 0, x1 = 0, y1 = 0;
		if (el.getBoundingClientRect) {
			var box = el.getBoundingClientRect();
			var el = this.getDocumentElement();
			var pos = this.getScrollPos();
			x = box.left + pos.x - el.clientLeft;
			y = box.top + pos.y - el.clientTop;
		} else {
            x = el.offsetLeft;
            y = el.offsetTop;
            var parent = el.offsetParent;
            while (parent) {
                x += parent.offsetLeft;
                y += parent.offsetTop;
                parent = parent.offsetParent;
            }
		}
		return {x : x, y : y };
	}
};

JTC.dialog = function(){
    
    this.getYMSelect = function(){
        var table = JTC.util.createTable().table;
        table.setAttribute('style','width:100%;height:25px;cursor:default;font-size:12px;');
        table.style.cssText = 'width:100%;height:25px;cursor:default;font-size:12px;';
        var row = table.insertRow(0);
        
        var cell = row.insertCell(0);
        cell.style.width = '50px';
        cell.style.height = '25px';
        cell.style.textAlign = 'right';
        var html = '<span id="'+ JTC.config.yearSpan +'" title="点击这里选择年份" style="width:50px;cursor:pointer;" onclick="JTC.events.beginToSelectYear()"></span>';
        html += '<span id="'+ JTC.config.yearSelectSpan +'" style="display:none; width:50px;"></span>';
        cell.innerHTML = html;
        
        cell = row.insertCell(1);
        cell.style.width = '40px';
        cell.style.textAlign = 'left';
        html = '<span id="'+ JTC.config.monthSpan +'" title="点击这里选择月份" style="width:40px;cursor:pointer;" onclick="JTC.events.beginToSelectMonth()"></span>';
        html += '<span id="'+ JTC.config.monthSelectSpan +'" style="display:none; width:40px;"></span>';
        cell.innerHTML = html;
        
        return table;
    };
    
    this.getHeadPanel = function(){
        var table = JTC.util.createTable().table;
        table.setAttribute('style','width:100%;height:25px;');
        table.style.cssText = 'width:100%;height:25px;';
        
        var row = table.insertRow(0);
        var cell = row.insertCell(0);
        cell.setAttribute('style','width:23px; height:25px;');
        cell.style.cssText = 'width:23px; height:25px;';
        cell.title = '往前翻 月';
        cell.innerHTML = '<input type="button" value="<" style="width:23px; height:23px;" onclick="JTC.events.turnTheMonth(-1)" />';
        
        cell = row.insertCell(1);
        cell.appendChild(this.getYMSelect());
        
        cell = row.insertCell(2);
        cell.setAttribute('style','width:23px; height:25px;');
        cell.style.cssText = 'width:23px; height:25px;';
        cell.title = '往后翻 月';
        cell.innerHTML = '<input type="button" value=">" style="width:23px; height:23px;" onclick="JTC.events.turnTheMonth(1)" />';
        
        return table;
    };
    
    this.getWeekPanel = function(){
        var table = JTC.util.createTable().table;
        table.setAttribute('style','width:100%; font-size:12px;');
        table.style.cssText = 'width:100%; font-size:12px;';
        table.cellSpacing = 1;
        var row = table.insertRow(0);
        var weekDay = ['日','一','二','三','四','五','六'];
        for(var i = 0; i< 7; i++)
        {
            var cell = row.insertCell(i);
            cell.style.width = '20px';
            cell.style.height = '20px';
            cell.style.backgroundColor = '#858F5F';
            cell.style.textAlign = 'center';
            cell.innerHTML = weekDay[i];
        }
        return table;
    };
    
    this.getDayPanel = function()
    {
        var table = JTC.util.createTable().table;
        table.setAttribute('style','width:100%;font-size:12px;');
        table.style.cssText = 'width:100%;font-size:12px;';
        table.cellSpacing = 1;
        
        var count = 0;
        for(var i=0; i<= 5; i++){
            var row = table.insertRow(i);
            for(var j=0; j< 7; j++){
                var cell = row.insertCell(j);
                cell.setAttribute('style','width:20px;height:20px;text-align:center;font-weight:bold;');
                cell.style.cssText = 'width:20px;height:20px;text-align:center;font-weight:bold;';
                cell.id = JTC.config.dayPanelId + count;
                cell.innerHTML = '';
                if(count > 36){
                    cell.colSpan = 5;
                    cell.style.textAlign = 'right';
                    cell.innerHTML = '<input type="button" value="关闭" style="width:45px; height:20px;" onclick="JTC.events.hideLayout()" />';
                    break;
                }
                count ++;
            }
        }
        return table;
    };
    
    this.getBottomPanel = function()
    {
        var table = JTC.util.createTable().table;
        table.style.width = '140px';
        
        var row = table.insertRow(0);
        var cell = row.insertCell(0);
        cell.style.width = '25px';
        cell.style.height = '25px';
        cell.title = '往前翻 年';
        cell.innerHTML = '<input type="button"  value="<<" style="width:25px;height:auto;" onclick="JTC.events.turnTheYear(-1)" />';
        
        cell = row.insertCell(1);
        cell.style.width = '25px';
        cell.title = '往前翻 月';
        cell.innerHTML = '<input type="button"  value="<" style="width:25px;height:auto;" onclick="JTC.events.turnTheMonth(-1)" />';
        
        cell = row.insertCell(2);
        cell.style.width = '40px';
        cell.style.textAlign = 'center';
        cell.innerHTML = '<input type="button"  value="今天"  onclick="JTC.events.resetToToday()" />';
        
        cell = row.insertCell(3);
        cell.style.width = '25px';
        cell.title = '往后翻 月';
        cell.innerHTML = '<input type="button"  value=">" style="width:25px;height:auto;" onclick="JTC.events.turnTheMonth(1)" />';
        
        cell = row.insertCell(4);
        cell.style.width = '25px';
        cell.title = '往后翻 年';
        cell.innerHTML = '<input type="button"  value=">>" style="width:25px;height:auto;" onclick="JTC.events.turnTheYear(1)" />';
        
        return table;
    };
    
    var load = JTC.util.createTable().table;
    load.setAttribute('style','width:140px;height:190px;font-size:12px;background-color:#ffffff; position:absolute;border-collapse:collapse;');
    load.style.cssText = 'width:140px;height:190px;font-size:12px;background-color:#ffffff; position:absolute;border-collapse:collapse;'; 
    load.border = 1;
    load.borderColor = '#858F5F';
    
    var row = load.insertRow(0);
    var cell = row.insertCell(0);
    cell.style.height = '25px';
    cell.appendChild(this.getHeadPanel());
    
    row = load.insertRow(1);
    cell = row.insertCell(0);
    cell.style.height = '20px';
    cell.appendChild(this.getWeekPanel());
    
    row = load.insertRow(2);
    cell = row.insertCell(0);
    cell.style.height = '120px';
    cell.appendChild(this.getDayPanel());
    
    row = load.insertRow(3);
    cell = row.insertCell(0);
    cell.style.height = '25px';
    cell.appendChild(this.getBottomPanel());
    
    var div = JTC.$$('div');
    div.id = JTC.config.bgDivID;
    div.setAttribute('style','position:absolute; width:142px; height:190px;z-index:20000; font-size:12px; background-color:lightgreen;display:none;');
    div.style.cssText = 'position:absolute; width:142px; height:190px;z-index:20000; font-size:12px; background-color:lightgreen;display:none;';
    div.appendChild(load);
    
    document.body.appendChild(div);
    JTC.util.addEvent(document, 'keydown',JTC.events.keyDown);
    JTC.util.addEvent(document, 'mousedown',JTC.events.mouseDown);
};

JTC.events = {
    //是否为闰年
    isLeapYear : function(year){
        if( 0==year%4 && ((year% 100 != 0)||(year% 400 ==0))) {
            return true;
        }else{ 
            return false;
        }
    },
    
    isToday : function(yy,mm,dd){
        var today = new Date();
        var y = today.getFullYear();
        var m = today.getMonth()>= 9 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
        var d = today.getDate()> 9 ? today.getDate() : '0' + today.getDate();
        var num = parseInt('' + y + m + d);
        
        mm = mm> 9 ? mm : '0' + mm;
        dd = dd> 9 ? dd : '0' + dd;
        
        var num2 = parseInt('' + yy + mm + dd);
        if(num == num2){
            return 0;
        }else if(num> num2){
            return -1;
        }else{
            return 1;
        }
    },
    
    setHeadTip : function(yy,mm){
        JTC.$(JTC.config.yearSpan).innerHTML = yy + ' 年';
        JTC.$(JTC.config.monthSpan).innerHTML = mm + ' 月';
    },
    
    getMonthCount : function(yy,mm){
        var count = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var days = count[mm-1];
        if(mm==2 && JTC.events.isLeapYear(yy)){
            days ++;
        }
        return days;
    },
    
    createDay : function(yy, mm)
    {
        JTC.events.setHeadTip(yy,mm);
        
        var RevealDay = new Array(37);
        for(var i=0;i< 37; i++){
            RevealDay[i] = '';
        }
        
        var nday = 1;
        firstCount = new Date(yy,mm-1,1).getDay();
        for(var i = firstCount; nday<= JTC.events.getMonthCount(yy,mm); i++){
            RevealDay[i] = nday ;
            nday++;   
        }

        for(var i=0; i< 37; i++)
        {
            var obj = JTC.$(JTC.config.dayPanelId + i);
            obj.innerHTML = RevealDay[i];   //填充日期
            
            if(RevealDay[i]==''){   //空白区的背景及鼠标样式
                obj.style.backgroundColor = '#FFFFFF';
                obj.style.cursor = 'default';
                continue;
            }
           
            var isDay = JTC.events.isToday(yy,mm,RevealDay[i]);
            //设置背景
            if(isDay==0)
            {
                obj.style.backgroundColor = JTC.config.dayBgColor[1];
                obj.style.color = JTC.config.dayColor[1];
                
                if(JTC.config.includeToday ==1 || JTC.config.forward==0){
                    obj.style.cursor = 'pointer';
                }
                else{
                    obj.style.cursor = 'default';
                }
            }
            else if(isDay >0 ){
                if(JTC.config.forward == 1)
                {
                    obj.style.backgroundColor = JTC.config.dayBgColor[3];
                    obj.style.color = JTC.config.dayColor[3];
                    obj.style.cursor = 'default';
                }
                else{
                    obj.style.backgroundColor = JTC.config.dayBgColor[0];
                    obj.style.color = JTC.config.dayColor[0];
                    obj.style.cursor = 'pointer';
                }
            }else{
                if(JTC.config.forward == 2)
                {
                    obj.style.backgroundColor = JTC.config.dayBgColor[3];
                    obj.style.color = JTC.config.dayColor[3];
                    obj.style.cursor = 'default';
                }
                else{
                    obj.style.backgroundColor = JTC.config.dayBgColor[0];
                    obj.style.color = JTC.config.dayColor[0];
                    obj.style.cursor = 'pointer';
                }
            }
            
            //添加事件
            obj.onmouseover = function(){
                if(this.innerHTML == ''){ return;}
                var cur = this.style.cursor;
                if(cur == 'pointer'){
                    this.style.backgroundColor = JTC.config.dayBgColor[2];
                    this.style.color = JTC.config.dayColor[2];
                }
            }; 
            obj.onmouseout = function(){
                if(this.innerHTML == ''){ return;}
            
                var nDay = JTC.events.isToday(yy, mm,this.innerHTML);
                var cur = this.style.cursor;
                if(nDay==0){
                    this.style.backgroundColor = JTC.config.dayBgColor[1];
                    this.style.color = JTC.config.dayColor[1];
                }else if(cur=='pointer'){
                    this.style.backgroundColor = JTC.config.dayBgColor[0];
                    this.style.color = JTC.config.dayColor[0];
                }
            };
            obj.onclick = function(){
                var cur = this.style.cursor;
                if(cur == 'pointer'){
                    JTC.events.tdDayClick(this.innerHTML);
                }
            };
        }  
    },
    
    turnTheMonth : function(num)
    {
        this.hidenYearSelectCtrl();
        this.hiddenMonthSelectCtrl();
        var flag = num>0 ? 1 : -1;
        var year = parseInt(JTC.$(JTC.config.yearSpan).innerHTML.match(/\d+/g));
        var month = parseInt(JTC.$(JTC.config.monthSpan).innerHTML.match(/\d+/g));
        
        if(month == 1 && flag < 0 ){
            year --;  month = 12;
        }
        else if(month == 12 && flag >0 ){
            year ++; month = 1;
        }
        else{
            month += flag;
        }
        
        JTC.events.createDay(year,month);
    },
    
    turnTheYear : function(num)
    {
        this.hidenYearSelectCtrl();
        this.hiddenMonthSelectCtrl();
        var flag = num> 0 ? 1 : -1;
        var year = parseInt(JTC.$(JTC.config.yearSpan).innerHTML.match(/\d+/g)) + flag;
        var month = parseInt(JTC.$(JTC.config.monthSpan).innerHTML.match(/\d+/g));
        JTC.events.createDay(year,month);
    },
    
    resetToToday : function()
    {
        this.hidenYearSelectCtrl();
        this.hiddenMonthSelectCtrl();
        var year = new Date().getFullYear(); 
        var month = new Date().getMonth() + 1;
        JTC.events.createDay(year,month);
    },
    
    beginToSelectYear : function()
    {
        JTC.events.hiddenMonthSelectCtrl();
        var year = parseInt(JTC.$(JTC.config.yearSpan).innerHTML.match(/\d+/g));
        JTC.$(JTC.config.yearSpan).style.display = 'none';
        var obj = JTC.$(JTC.config.yearSelectSpan);
        var html = '<select id="' + JTC.config.yearSelectCtrl + '" Author="fresh" style="font-size:12px;width:50px;"';
        html += ' onblur="JTC.events.hidenYearSelectCtrl()" onchange="JTC.events.hidenYearSelectCtrl()" >';
        for(var i=year + 10 ;i> year-20; i--){
	        if(i == year){
	            html += '<option value="'+ i +'年" selected>'+ i +'年</option>';
	        }else{
	            html += '<option value="'+ i +'年">'+ i +'年</option>';
	        }
	    }
	    html +='</select>';
	    obj.innerHTML = html;
	    obj.style.display = 'block';
    },
    
    hidenYearSelectCtrl : function()
    {
        var obj = JTC.$(JTC.config.yearSelectCtrl);
        if(obj==null || obj == 'undefined'){ return; }
        var year = parseInt(obj.options[obj.selectedIndex].value);
        var month = parseInt(JTC.$(JTC.config.monthSpan).innerHTML.match(/\d+/g));
        
        JTC.$(JTC.config.yearSelectSpan).innerHTML = '';
        JTC.$(JTC.config.yearSelectSpan).style.display = 'none';
        JTC.$(JTC.config.yearSpan).innerHTML = year;
        JTC.$(JTC.config.yearSpan).style.display = 'block';
        
        JTC.events.createDay(year,month);
    },
    
    beginToSelectMonth : function()
    {
        JTC.events.hidenYearSelectCtrl();
        var month = parseInt(JTC.$(JTC.config.monthSpan).innerHTML.match(/\d+/g));
        JTC.$(JTC.config.monthSpan).style.display = 'none';
        var obj = JTC.$(JTC.config.monthSelectSpan);
        var html = '<select id="' + JTC.config.monthSelectCtrl + '" Author="fresh" style="font-size:12px;width:40px;" ';
        html += ' onblur="JTC.events.hiddenMonthSelectCtrl()" onchange="JTC.events.hiddenMonthSelectCtrl()">';
        for(var i=1; i<=12; i++)
        {
            if(i == month){
                html += '<option value="'+ i + '月" selected>' + i + '月</option>';
            }else{
                html += '<option value="'+ i + '月">' + i + '月</option>';
            }
        }
        html +="</select>";
        
        obj.innerHTML = html;
        obj.style.display = 'block';
    },
    
    hiddenMonthSelectCtrl : function()
    {
        var obj = JTC.$(JTC.config.monthSelectCtrl);
        if(obj==null || obj == 'undefined'){ return; }
        var month = parseInt(obj.options[obj.selectedIndex].value);
        var year = parseInt(JTC.$(JTC.config.yearSpan).innerHTML.match(/\d+/g));
        JTC.$(JTC.config.monthSelectSpan).innerHTML = '';
        JTC.$(JTC.config.monthSelectSpan).style.display = 'none';
        JTC.$(JTC.config.monthSpan).innerHTML = month;
        JTC.$(JTC.config.monthSpan).style.display = 'block';
        JTC.events.createDay(year,month);
    },
    
    hideLayout : function()
    {
        var div = JTC.$(JTC.config.bgDivID);
        JTC.events.hiddenMonthSelectCtrl();
        JTC.events.hidenYearSelectCtrl();
        div.style.display = 'none';
    },
    
    show : function(top, left)
    {
        var div = JTC.$(JTC.config.bgDivID);
        if(div == null || div == 'undefined'){
            JTC.dialog();
            var year = new Date().getFullYear(); 
            var month = new Date().getMonth() + 1;
            JTC.events.createDay(year,month);
            div = JTC.$(JTC.config.bgDivID);
        }
        else{
            var year = parseInt(JTC.$(JTC.config.yearSpan).innerHTML.match(/\d+/g));
            var month = parseInt(JTC.$(JTC.config.monthSpan).innerHTML.match(/\d+/g));
            JTC.events.createDay(year,month);
        }
        div.style.top = top + 'px';
        div.style.left = left + 'px';
        div.style.display = 'block';
    },
    
    tdDayClick : function(num)
    {
        var year = parseInt(JTC.$(JTC.config.yearSpan).innerHTML.match(/\d+/g)) ;
        var month = parseInt(JTC.$(JTC.config.monthSpan).innerHTML.match(/\d+/g));
        var date = new Date(year + '/' + month + '/' + num);
        try{
            JTC.config.outObject.value = JTC.util.formatDate(date,JTC.config.format); 
        }catch(e){ alert('传入的控件不支持Value属性!'); }
        JTC.events.hideLayout();
    },
    
    keyDown : function(ev){
        ev = ev || window.event;
        if(ev.keyCode == 27){
            JTC.events.hideLayout();
        }
    },
    
    mouseDown : function(ev){
        var div = JTC.$(JTC.config.bgDivID);
        if(div.style.display == 'none'){ return;}
        if(JTC.$(JTC.config.yearSelectCtrl)){ return;}
        if(JTC.$(JTC.config.monthSelectCtrl)){ return; }
        
        var minLeft,minTop,maxLeft,maxTop;
        var pos = JTC.util.getElementPos(div);
        minLeft = pos.x; minTop = pos.y;
        maxLeft = minLeft + 150;
        maxTop = minTop + 208;

        var scrol = JTC.util.getScrollPos();
        var mouse = JTC.util.getCoords(ev)
        var x = scrol.x + mouse.x;
        var y = scrol.y + mouse.y;
        if( x < minLeft || x > maxLeft || y < minTop || y > maxTop){ 
            JTC.events.hideLayout();
        }
    }
};

//函数调用入口 
// inObj: 触发控件; outObj:输出控件; forward:选择方向; today:是否包含今天; format:返回日期的格式
JTC.setday = function(inObj, outObj, forward, today, format)
{
    if(arguments.length > 5){
        alert('对不起!传入本控件的参数太多!');
        return;
    }
    if(arguments.length < 1){
        alert('对不起!传入本控件的参数太少!');
        return;
    }
    
    if(typeof(inObj)!='object'){
        alert('传入本控件的第一个参数类型不正确!必须是控件!');
        return ;
    }
    
    forward = typeof(forward)!='number' ?  0 : forward;
    today = typeof(today)!='number' ?  1 : today;
    JTC.config.forward = (forward != 1 && forward != 2) ? 0 : forward;
    JTC.config.outObject = arguments.length > 1 ? outObj : inObj;
    JTC.config.includeToday = today == 1 ?  1 : 0 ;
    if(format){
        JTC.config.format = format;
    }else{
        JTC.config.format = 'yyyy-MM-dd';
    }
    var top = inObj.offsetTop;
    var left = inObj.offsetLeft;
    var height = inObj.clientHeight;
    
    while(inObj = inObj.offsetParent){
        top += inObj.offsetTop; 
        left += inObj.offsetLeft;
    }
    
    var objTop = (typeof(inObj)=='image')? top + height : top + height + 5;
    JTC.events.show(objTop,left);
};
分享到:
评论

相关推荐

    兼容各浏览器的日期js控件

    兼容各浏览器的日期控件

    兼所有浏览器的js日期控件

    "兼所有浏览器的js日期控件"可能就是这样的第三方库,它可能提供了丰富的API,使得开发者可以轻松地添加日期选择功能,同时解决跨浏览器兼容性问题。例如,Bootstrap的Datepicker或jQuery UI的DatePicker都是知名的...

    多浏览器兼容日期选择控件

    本文将深入探讨“多浏览器兼容日期选择控件”,并介绍如何实现跨浏览器的兼容性,特别是在IE8、Firefox和Google Chrome等主流浏览器上的应用。 首先,我们来看“webcalendar”这个标签,这可能是一个特定的日期选择...

    兼容多浏览器的JS日期控件

    本文将深入探讨如何创建一个兼容多浏览器的JS日期控件,以及涉及的相关知识点。 首先,我们需要理解浏览器之间的兼容性问题。不同的浏览器可能对JavaScript的某些API或CSS样式处理有所不同,这给开发者带来了挑战。...

    兼容ie、谷歌等浏览器的日期输入控件

    总结一下,"兼容ie、谷歌等浏览器的日期输入控件"是一个旨在提供一致的日期选择体验的工具,通过JavaScript和可能的polyfills技术实现跨浏览器兼容。这个压缩包内的文件可能是实现这个功能的源代码、样例示例或者...

    兼容主流浏览器的日期控件

    本主题将深入探讨“兼容主流浏览器的日期控件”这一关键技术点,以及如何实现对火狐、IE所有版本、搜狗、Google Chrome和遨游等主流浏览器的支持。 首先,让我们了解日期控件的基本概念。在HTML5中,引入了`...

    日历控件兼容多浏览器

    首先,为什么“多浏览器兼容性”如此重要?互联网用户通常会使用不同的浏览器,如Chrome、Firefox、Safari、Edge等。一个优秀的日历控件应该能在所有主流浏览器上正常工作,提供一致的用户体验。如果控件只在特定...

    日历控件(浏览器兼容)

    【日历控件(浏览器兼容)】是一种网页交互元素,常用于在线预订系统、日程管理等场景,允许用户选择日期。在这个特定的案例中,我们关注的是如何创建一个能够跨多个浏览器(包括Google浏览器)运行的日历组件,并解决...

    日期控件(兼容多数浏览器)

    日期控件(兼容多数浏览器)

    支持多浏览器的JS日期控件

    总的来说,创建一个支持多浏览器的JS日期控件需要深入理解JavaScript的Date对象、DOM操作、事件处理以及浏览器兼容性问题。通过合理的代码结构、有效的样式控制和充分的测试,我们可以实现一个高效且用户体验良好的...

    3大浏览器全兼容 日历控件

    综上所述,"3大浏览器全兼容 日历控件"涵盖了Web开发中的跨浏览器兼容性策略、前端界面设计、JavaScript编程以及用户体验优化等多个方面。通过分析和理解这些文件,开发者可以学习如何创建一个在主流浏览器上稳定且...

    多浏览器兼容的JS日历控件

    "多浏览器兼容的JS日历控件"就是这样一个解决方案,它旨在提供一致的用户体验,无论用户使用的是Firefox、Chrome、Safari、Edge还是Internet Explorer。这个日历控件在设计时特别考虑了跨浏览器的兼容性,避免了由于...

    兼容个种浏览器的日期控件

    兼容个种浏览器的日期控件,调用方式 ///调用方法&lt;input type="text" value="" /&gt; ///第二个参数指定日期格式,第四第五个参数指定xy偏移像素。

    兼容IE日期控件

    因此,选择的日期控件应具备良好的跨浏览器兼容性,确保在所有主流浏览器中都能提供一致的用户体验。 7. **文件`datepicker`**:这可能是包含实现日期控件所需资源的文件,比如JavaScript代码、CSS样式或图片资源。...

    多浏览器兼容日历控件(有例子)

    本文将详细探讨如何实现一个多浏览器兼容的日历控件,并结合提供的资源——"Calendar"压缩包,来阐述其核心知识点。 首先,标题中的“多浏览器兼容”意味着这个日历控件不仅能在主流的浏览器如Chrome、Firefox、...

    兼容多种IE的javascript日期控件

    总结来说,这个主题涵盖的知识点包括:JavaScript日期控件的实现、跨浏览器兼容性策略、事件处理、HTML与JavaScript的交互、以及可能涉及的DOM操作和CSS样式。对于开发者来说,理解这些概念并能熟练应用,是构建高效...

    兼容各种浏览器的日历控件

    综上所述,"兼容各种浏览器的日历控件"是一个综合了JavaScript编程、DOM操作、事件处理、CSS样式和浏览器兼容性策略的复杂项目。`wpCalendar.js`文件作为实现这一目标的核心代码,其内部可能包含了大量优化和适配...

    弹窗式日期控件兼容IE 6.0、7.0和 FF 2.0浏览器

    对于这样的项目,全面的浏览器兼容性测试是必不可少的。使用像BrowserStack或 Sauce Labs 这样的在线工具可以在多个版本的浏览器上模拟运行,以确保控件在各个环境下都能正常工作。 7. **文件结构分析**: 压缩包...

    兼容性很强大的js日期控件

    浏览器兼容性是js日期控件面临的一大挑战。不同的浏览器可能对HTML5的新特性支持程度不同,例如原生的`&lt;input type="date"&gt;`在一些旧版浏览器中可能无法正常工作。因此,开发者需要选择一个能广泛兼容各种浏览器...

Global site tag (gtag.js) - Google Analytics