IE CSS HTML 中级开发 Visual Studio Javascript Windows

使用 IFrame 的下拉列表

william s. su

3.40/5 (13投票s)

2006 年 3 月 20 日

CPOL

52097

570

使用 IFrame 创建下拉列表。

下载源代码文件 - 3.42 KB

引言

在本文中，我将讨论 Internet Explorer 中的一个问题。如果你曾经尝试使用 DIV 标签创建下拉菜单或列表，你会发现 SELECT 框会覆盖你的 DIV。这是因为 SELECT 框源自 Windows 控件。解决方案是使用 IFRAME 来覆盖 SELECT 框。

工作原理

你需要测试你当前运行的浏览器。对于 IE，你可以将 IFRAME 放置在 SELECT 框的顶部，它将覆盖 SELECT Windows 控件。然后，你可以在 IFRAME 的顶部放置一个 DIV。

var V=parseInt(navigator.appVersion);
var B=(navigator.userAgent+navigator.appName).toLowerCase();
var NS4=(B.indexOf("netscape")!=-1&&V==4);
var IE=(B.indexOf("microsoft")!=-1);
var parentInputBox = null;
var parentImage = null;
var PopupDivId = 'Popup';
var PopupIFrameId = 'PopupIFrame';

document.write("<IFRAME id=PopupIFrame src="javascript:false" " + 
               "frameBorder=0 scrolling=no></IFRAME>");
document.write("<DIV id=Popup></DIV>");

if(!NS4) window.onresize=function()
{
    if(parentInputBox)
    {
        HidePopup();
    }        
}

function iecompattest()
{
    return (document.compatMode && document.compatMode!="BackCompat")? 
            document.documentElement : document.body
}

if(!NS4) document.onmouseup=function(e)
{
    if(parentInputBox)
    {
        var inputBoxPos = new Position(parentInputBox);
        var linkPos = new Position(parentImage);
        var PopupPos = new Position(PopupDivId);        

        var x = PopupPos.GetElementLeft();
        var y = PopupPos.GetElementBottom();

        var x = inputBoxPos.GetElementLeft();
        var y = inputBoxPos.GetElementBottom();

        var top=document.all && !window.opera? 
                iecompattest().scrollTop : window.pageYOffset;
        var windowedge=document.all && !window.opera? 
            iecompattest().scrollTop+iecompattest().clientHeight : 
            window.pageYOffset+window.innerHeight;

        if(y + PopupPos.GetElementHeight() > windowedge)
        {
            var z = inputBoxPos.GetElementTop() - 
                    PopupPos.GetElementHeight();
            if(z >= top)
                y = z;
        }    
                    
        var width = PopupPos.GetElementWidth();
        var height = PopupPos.GetElementHeight();

        var lx = linkPos.GetElementLeft();
        var ly = linkPos.GetElementTop();
        var lwidth = linkPos.GetElementWidth();
        var lheight = linkPos.GetElementHeight();

        var pageX, pageY;
        if (window.event)
        {
            e = window.event;
            pageX = e.clientX;
            pageY = e.clientY;
        }        
        else
        {
            pageX = e.pageX;
            pageY = e.pageY;
        }        
        if(!((pageX >= x && pageY >= y && 
              pageX < x+width && pageY < y+height) || 
             (pageX >= lx && pageY >= ly && 
              pageX < lx+lwidth && pageY < ly+lheight)))
            HidePopup();            
    }        
}

function Position(object)
{
    var m_elem = object;

    this.GetElementWidth = GetElementWidth;
    function GetElementWidth()
    {
        var elem;
        if(typeof(m_elem) == "object")
        {
            elem = m_elem;
        }
        else
        {
            elem = document.getElementById(m_elem);
        }
        return parseInt(elem.offsetWidth);
    }

    this.GetElementHeight = GetElementHeight;
    function GetElementHeight()
    {
        var elem;
        if(typeof(m_elem) == "object")
        {
            elem = m_elem;
        }
        else
        {
            elem = document.getElementById(m_elem);
        }
        return parseInt(elem.offsetHeight);
    }

    this.GetElementLeft = GetElementLeft;
    function GetElementLeft()
    {
        var x = 0;
        var elem;        
        if(typeof(m_elem) == "object")
            elem = m_elem;
        else
            elem = document.getElementById(m_elem);
            
        while (elem != null)
        {
            x += elem.offsetLeft;
            elem = elem.offsetParent;
        }
        return parseInt(x);
    }
    
    this.GetElementRight = GetElementRight;
    function GetElementRight()
    {
        return GetElementLeft(m_elem) + GetElementWidth(m_elem);
    }

    this.GetElementTop = GetElementTop;
    function GetElementTop()
    {
        var y = 0;
        var elem;
        if(typeof(m_elem) == "object")
        {
            elem = m_elem;
        }
        else
        {
            elem = document.getElementById(m_elem);
        }
        while (elem != null)
        {
            y+= elem.offsetTop;
            elem = elem.offsetParent;
        }
        return parseInt(y);
    }

    this.GetElementBottom = GetElementBottom;
    function GetElementBottom()
    {
        return GetElementTop(m_elem) + GetElementHeight(m_elem);
    }
}

function Popup()
{
    var Desc = 0;

    function SetElementProperty(elemId, property, value)
    {
        var elem = null;

        if(typeof(elemId) == "object")
            elem = elemId;
        else
            elem = document.getElementById(elemId);
            
        if((elem != null) && (elem.style != null))
        {
            elem = elem.style;
            elem[property] = value;
        }
    }

    this.Sort = Sort;
    function Sort(change)
    {
        Desc = change;
        Popup = document.getElementById(PopupDivId);
        Popup.innerHTML = PopupInnerHTML();
    }

    this.SelectFont = SelectFont;
    function SelectFont(value)
    {        
        parentInputBox.value = value; 
        Hide();
        return;
    }


    function PopupInnerHTML()
    {
        var table = "<TABLE cellSpacing=0 cellPadding=3 width=150 border=0>";
        table += "<TBODY><TR class=header>";
        table += "  <TD noWrap align=middle>";
        table += "<A class=linkText href="javascript:Sort(0);">A->Z</A>  ";
        table += "<A class=linkText href="javascript:Sort(1);">Z->A</A>  "; 
        table += "<A class=linkText href="javascript:HidePopup();">Cancel</A>"; 
        table+="</TD></TR><TR><TD>";
        if(Desc == 0) {
          table+="<A class=cursive href='javascript:" + 
                 "SelectFont(\"cursive\");'>cursive</A> "; 
          table+="<A class=fantasy href='javascript:" + 
                 "SelectFont(\"fantasy\");'>fantasy</A> "; 
          table+="<A class=monospace href='javascript:" + 
                 "SelectFont(\"monospace\");'>monospace</A> "; 
          table+="<A class=sans-serif href='javascript:" + 
                 "SelectFont(\"sans-serif\");'>sans-serif</A> "; 
          table+="<A class=serif href='javascript:" + 
                 "SelectFont(\"serif\");'>serif</A>";
        }
        else {
          table+="<A class=serif href='javascript:" + 
                 "SelectFont(\"serif\");'>serif</A> "; 
          table+="<A class=sans-serif href='javascript:" + 
                 "SelectFont(\"sans-serif\");'>sans-serif</A> "; 
          table+="<A class=monospace href='javascript:" + 
                 "SelectFont(\"monospace\");'>monospace</A> "; 
          table+="<A class=fantasy href='javascript:" + 
                 "SelectFont(\"fantasy\");'>fantasy</A> "; 
          table+="<A class=cursive href='javascript:" + 
                 "SelectFont(\"cursive\");'>cursive</A>"; } 
          table+="</TD></TR></TBODY></TABLE>";
        return table;
    }

    this.Show = Show;
    function Show(inputBox, img)
    {
        // If the Popup is visible, hide it.

        if (parentInputBox == inputBox)
        {
            return;
        }            
        else
        {
            parentInputBox = inputBox;
            parentImage = img;
        }            
        

        if(document.getElementById)
        {
            Popup = document.getElementById(PopupDivId);
            Popup.innerHTML = PopupInnerHTML();
            
            // Fixed some Windows and IE problems

            if(B.indexOf("win")!=-1 && IE)
                SetElementProperty(PopupIFrameId, 'display', 'block');
      
            SetElementProperty(PopupDivId, 'display', 'block');
            var inputBoxPos = new Position(parentInputBox);
            var PopupPos = new Position(PopupDivId);

            var x = inputBoxPos.GetElementLeft();
            var y = inputBoxPos.GetElementBottom();
            
            var top=document.all && !window.opera? 
                iecompattest().scrollTop : window.pageYOffset;
            var windowedge=document.all && !window.opera? 
                iecompattest().scrollTop+iecompattest().clientHeight : 
                window.pageYOffset+window.innerHeight;

            if(y + PopupPos.GetElementHeight() > windowedge)
            {
                var z = inputBoxPos.GetElementTop() - 
                        PopupPos.GetElementHeight();
                if(z >= top)
                    y = z;
            }                

            SetElementProperty(PopupDivId, 'left', x + "px");
            SetElementProperty(PopupDivId, 'top', y + "px");
            SetElementProperty(PopupIFrameId, 'left', x + "px");
            SetElementProperty(PopupIFrameId, 'top', y + "px");
            SetElementProperty(PopupIFrameId, 'width', 
                               PopupPos.GetElementWidth() + "px");
            SetElementProperty(PopupIFrameId, 'height', 
                               PopupPos.GetElementHeight() + "px");
        }

    }

    this.Hide = Hide;
    function Hide()
    {
        if(parentInputBox)
        {
            SetElementProperty(PopupDivId, 'display', 'none');
            SetElementProperty(PopupIFrameId, 'display', 'none');
            parentInputBox = null;
        }
    }
}

var PopupWin = new Popup();

function ShowPopup(inputBox, imgDropDown)
{

    if(parentInputBox == null)
        PopupWin.Show(inputBox, imgDropDown);
    else
        PopupWin.Hide();
}

function HidePopup()
{
    PopupWin.Hide();
}

function SelectFont(value)
{
    PopupWin.SelectFont(value);
}

function Sort(change)
{
    PopupWin.Sort(change);
}

一个简单的样式表文件可能如下所示

#PopupIFrame
{
    display: none; 
    left: 0px;
    width: 100px;
    position: absolute;
    z-index: 99;
}
#Popup
{
    display: none;
    color: #000000;
    background-color: #ffffff;
    position: absolute;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-left: #666666 1px solid;
    border-top: #666666 1px solid;
    border-right: #666666 1px solid;
    border-bottom: #666666 1px solid;
    z-index: 100;
}
#Popup .header
{
    background-color: #567cbb;
}
#Popup .linkText
{
    font-family: Verdana, Arial, Helvetica, sans-serif;    
    font-size: 12px;
    color : #ffffff;     
    text-decoration: underline;    
}
#Popup .serif
{
    font-family: serif;
    font-size: 24;
    color: blue;
}
#Popup .sans-serif
{
    font-family: sans-serif;
    font-size: 24;
    color: blue;
}
#Popup .cursive
{
    font-family: cursive;
    font-size: 24;
    color: blue;
}
#Popup .fantasy
{
    font-family: fantasy;
    font-size: 24;
    color: blue;
}
#Popup .monospace
{
    font-family: monospace;
    font-size: 24;
    color: blue;
}