Samuel Learning

  • 联系
  •  
  • 管理

文章分类(203)

  • 01 ASP/HTML(6)
  • 02 Script/CSS(16)
  • 03 C/C++
  • 04 XML(4)
  • 05 微软编程(26)
  • 06 J2EE(60)
  • 09 Linux(14)
  • 10 Database(27)
  • 11 报表打印
  • 12 打包安装(1)
  • 13 模式重构(2)
  • 14 系统架构
  • 15 敏捷开发(11)
  • 16 案例分析(30)
  • 17 Workflow(1)
  • 18 配置管理(1)
  • 19 项目管理
  • 20 英语(4)

新闻分类(52)

  • CXF学习
  • Hibernate学习(1)
  • iBatis学习(16)
  • Struts1学习(1)
  • Struts2学习(34)

.NET资源

  • adxmenu
  • C# Open Source
  • DNN Directory
  • M2Land
  • Windows Form FAQ
  • 中国DNN
  • 中国DNN联盟

Ajax

  • DoJo
  • GWT
  • JQuery
  • jquery autocomplete
  • jquery flexgrid
  • JQuery Form
  • jquery masked input
  • JQuery UI
  • jquery validation
  • Jquery 图表
  • jquery报表
  • jquery插件集合
  • Qooxdoo
  • Tibco GI
  • YUI
  • YUI-EXT
  • ZeroKode

Java开源

  • ABLE
  • Agile Tao
  • Ajax4JSF
  • Alfresco
  • AppFuse
  • Compiere
  • Equinox
  • Findbugs
  • Geronimo
  • Grails
  • Harmony
  • Hibernate论坛
  • JAG
  • Java开源大全
  • Java视线论坛
  • jBPM工作流
  • JSFTutorials
  • Nereide ERP
  • Ofbiz ERP
  • Opentaps ERP
  • operamasks
  • Petstore
  • Prototype.js
  • RIFE
  • Runa
  • SpringSide
  • Struts Menu
  • Sun Glassfish
  • Trails
  • YUI4JSF
  • 满江红

Mobile

  • Sencha

WEB资源

  • DHTML中心
  • DHTML参考手册
  • DHTML文档
  • EclipsePlugin
  • Firebug
  • GRO Clinux
  • jMaki
  • JSTL文档
  • LoadIcon
  • Openlaszlo
  • Struts Menu 展示
  • Web Test Tools
  • WebCtrs
  • Webdeveloper
  • 中国RIA开发者论坛

Workflow

  • E-Workflow
  • JBPM
  • OpenWFE
  • OSWorkflow
  • WFMC
  • Workflow Research

其他连接

  • confach
  • CPP
  • ejay
  • Giovanni
  • 丹佛
  • 交大e-learning
  • 交大研究生院
  • 可恶的猫
  • 天天@blog
  • 我的相册
  • 阿飞

大牛人

  • 32篇JBPM
  • David.Turing
  • HongSoft@业务集成
  • Joel
  • Koen Aers
  • Martinfowler
  • Raible Matt
  • Raible Wiki
  • Scott W.Ambler
  • Tom Baeyens
  • Uncle Bob
  • 一个世界在等待
  • 子在川上曰
  • 小布老师
  • 小明
  • 差沙
  • 徐昊
  • 江南白衣
  • 汪博士
  • 汪小金
  • 银狐999

开源软件

  • 2Bizbox ERP
  • CompiereCRM&ERP
  • EGW
  • Vtiger CRM
  • webERP

敏捷

  • Canoo
  • Cruisecontrol
  • DBUnit
  • EL4Ant
  • Extreme Programming
  • Fit
  • Fitnesse
  • JFrog
  • Liquibase
  • Maven
  • MockObjects
  • Selenium
  • Squish
  • xpairtise
  • XPlanner
  • XProgramming
  • 敏捷联盟

数据库

  • Oracle 中国
  • Oracle-ERP
  • Oracle在线社区

未归类

  • Aquarius Orm Studio
  • mambo建站系统
  • Oracle产品下载
  • 远程同步管理工具Capivara

经典框架

  • Apache Shale
  • formdef-struts
  • FreeMarker 主页
  • JBoss Seam
  • JSF 中心
  • JSF 入门应用
  • JSF中国
  • MyFaces官方
  • Spring 社区
  • Spring专业网站
  • Spring中文论坛
  • Spring参考手册
  • Spring官方网站
  • strecks-struts
  • Struts1
  • Struts2
  • Struts-layout
  • StrutsWiKi
  • Tapestry WIKI
  • Tapestry 官方
  • Tapestry4开发指南
  • Tapestry中文文档
  • Webwork2文档
  • Wicket

网络教程

  • Laliluna
  • RoseIndia
  • Sang Shin
  • Visualbuilder

著名站点

  • Buildix
  • Dev2Dev
  • IBM dev中国
  • InfoQ
  • ITPub
  • Java Eye
  • Java Research
  • JavaRead
  • JavaWorldTW
  • Matrix
  • PHP100
  • PHPX
  • SpringSideWiKi
  • TheServerSide
  • TWPHP
  • 中国工作流论坛

项目管理

  • 管理人网

最新评论

View Post

用层模拟弹出窗口

HTML
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>div弹出</title>
        <META http-equiv=Content-Type content="text/html; charset=gb2312">
        <SCRIPT src="DivShow.js" type="text/javascript"></SCRIPT>
    </head>
    <body>
        <div id="leftDiv" style="width: 800px; position: absolute; left: -410px; top: 100px; display:none;
            border: solid 1px red;">
            <div>left&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="divHide('leftDiv','left','')">close</a></div>
            <div style="width:100%">
                <table width="100%" border="1">
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        </tr>
                </table>
                </div>
        </div>
        <div id="middleDiv" style="width: 400px; position: absolute; display:none; border: solid 1px red;">
            middle&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="divHide('middleDiv','center','')">close</a>
        </div>
        <div id="rightDiv" style="width: 400px; position: absolute; right: 0px; top: 100px; display:none;
            border: solid 1px red;">
            <a href="javascript:void(0);" onclick="divHide('rightDiv','right','speed:5000;')">close</a>&nbsp;&nbsp;&nbsp;&nbsp;right
        </div>
        <div id="jincai"></div>
                <input type="button" name="left" value="left" onclick="divShow('leftDiv', 'left', 'speed: 1000;')" />
                <input type="button" name="middle" value="middle1" onclick="divShow('middleDiv', 'center', '');" />
                <input type="button" name="middle" value="middle2" onclick="divShow('middleDiv', 'center', 'Opacity:10;');" />
                <input type="button" name="middle" value="middle3" onclick="divShow('middleDiv', 'center', 'width:200px;heiGht:200px;');" />
                <input type="button" name="middle" value="middle4" onclick="divShow('middleDiv', 'center', 'left:10px;Top:10;');" />
                <input type="button" name="right" value="right" onclick="divShow('rightDiv', 'Right', 'speed:1000;');" />
    </body>
</html>
Script
//字符的trim()方法
String.prototype.trim= function(){  
    // 用正则表达式将前后空格  
    // 用空字符串替代。  
    return this.replace(/(^\s*)|(\s*$)/g, "");  
}
//验证是否为数字
function isNumber(oNum){
    if(!oNum) return false;
    var strP=/^\d+(\.\d+)?$/;
    if(!strP.test(oNum)) return false;
    try{
        if(parseFloat(oNum)!=oNum) return false;
    }
    catch(ex){
        return false;
    }
    return true;
}

//***************************************页面弹出DIV代码_SHOW Felix 2007-12-07***************************************//
//页面跳出DIV
function divShow(divId, showType, showProperty){
    //获得目标DIV
    var tagDiv = document.getElementById(divId);
    if(tagDiv == null){
        return;
    }
    tagDiv.style.display = "";
    //设置默认属性
    var divWidth = tagDiv.offsetWidth;//目标DIV的宽度
    var divHeight = tagDiv.offsetHeight;//目标DIV的高度
    var divLeft = (Math.max(document.documentElement.offsetWidth, document.body.scrollWidth) - divWidth)/2;//目标DIV左边定位
    var divTop = (Math.max(document.documentElement.offsetHeight, document.body.scrollHeight) - divHeight)/2;//目标DIV顶端定位
    var bgOpacity = 30;//背景的透明度 0为全透明 100为不透明
    var scrollSpeed = 100;//从边框滚动出来的DIV的滚出速度 单位:毫秒

    //读取设置属性
    var propertys = showProperty.split(';');
    for(var i=0;i<propertys.length;i++){
        var property = propertys[i].trim().split(':');
        if(property.length==2){
            var propertyValue = property[1].trim().replace("px","");
            if(!isNumber(propertyValue)){return;}
            switch(property[0].trim().toLowerCase()){
                case "width":
                    divWidth = propertyValue;
                    break;
                case "height":
                    divHeight = propertyValue;
                    break;
                case "left":
                    divLeft = propertyValue;
                    break;
                case "top":
                    divTop = propertyValue;
                    break;
                case "opacity":
                    bgOpacity = propertyValue;
                    break;
                case "speed":
                    scrollSpeed = propertyValue;
                    break;
            }
        }
    }
    //根据弹出类型，调用不同方法
    switch(showType.toLowerCase()){
        case "left":
            showLeftDiv(divId, divWidth + 10, scrollSpeed, 0);
            break;
        case "right":
            document.body.style.overflowX='hidden';
            showRightDiv(divId, divWidth + 10, scrollSpeed, 0);
            break;
        case "center":
            showCenterDiv(tagDiv, divWidth, divHeight, divLeft, divTop, bgOpacity);
            break;
    }
}
//从左边弹出DIV
function showLeftDiv(divId, divWidth, scrollSpeed, i){
    //获得目标DIV
    var tagDiv = document.getElementById(divId);
    if(tagDiv == null){
        return;
    }
    if(i<=20){
        tagDiv.style.left = divWidth * (-1) * (1 - Math.sin((3.14/2)*(i/20)));
        i++;
        window.setTimeout("showLeftDiv('"+divId+"',"+divWidth+","+scrollSpeed+","+i+")",scrollSpeed/20);
    }
}
//从右边弹出DIV
function showRightDiv(divId, divWidth, scrollSpeed, i){
    //获得目标DIV
    var tagDiv = document.getElementById(divId);
    if(tagDiv == null){
        return;
    }
    if(i<=20){
        tagDiv.style.right = divWidth * (-1) * (1 - Math.sin((3.14/2)*(i/20)));
        i++;
        window.setTimeout("showRightDiv('"+divId+"',"+divWidth+","+scrollSpeed+","+i+")",scrollSpeed/20);
    } else{
        document.body.style.overflowX='';
    }
}
//从中间弹出DIV
function showCenterDiv(tagDiv, divWidth, divHeight, divLeft, divTop, bgOpacity){
    var bgDiv = document.createElement("div"); //最外层div
    var iframe = document.createElement("iframe"); //协助wc.div盖select的iframe

    bgDiv.setAttribute("id", "bgDiv_S");
    iframe.setAttribute("id", "iframe_S");

  bgDiv.style.position="absolute";
  bgDiv.style.background="#000000";
  bgDiv.style.left=0;
  bgDiv.style.top=0;
  bgDiv.style.zIndex="99";
  bgDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" + bgOpacity + ",finishOpacity=75)";
  bgDiv.style.opacity=bgOpacity/100;

  iframe.style.position="absolute";
  iframe.style.background="#000000";
  iframe.style.left=0;
  iframe.style.top=0;
  iframe.style.zIndex="98";
  iframe.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=75)";
  iframe.style.opacity=0;    

  tagDiv.style.position="absolute";
  if(tagDiv.style.background == ""){
      tagDiv.style.background = "#FFF";
    }
  tagDiv.style.zIndex="101";
    tagDiv.style.width = divWidth + "px";
    tagDiv.style.height = divHeight + "px";

    document.body.appendChild(iframe);
    document.body.appendChild(bgDiv);

    setPosition();
    //window.onscroll=setPosition;
    //window.onresize=setPosition;

    function setPosition(){
        bgDiv.style.height = iframe.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.offsetHeight, document.body.scrollHeight) + "px";
        bgDiv.style.width = iframe.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.offsetWidth) + "px";
        tagDiv.style.left = divLeft>0 ? divLeft:0;
        tagDiv.style.top = divTop>0 ? Math.max(document.documentElement.scrollTop,document.body.scrollTop) + divTop:Math.max(document.documentElement.scrollTop,document.body.scrollTop);
    }
}
//********************************************页面弹出DIV代码_SHOW End***********************************************//

//***************************************页面弹出DIV代码_HIDE Felix 2007-12-07***************************************//
//跳出的DIV隐藏
function divHide(divId, hideType, hideProperty){
    //获得目标DIV
    var tagDiv = document.getElementById(divId);
    if(tagDiv == null){
        return;
    }
    tagDiv.style.display = "";
    //设置默认属性
    var divWidth = tagDiv.offsetWidth;//目标DIV的宽度
    var divHeight = tagDiv.offsetHeight;//目标DIV的高度
    var divLeft = (Math.max(document.documentElement.offsetWidth, document.body.scrollWidth) - divWidth)/2;//目标DIV左边定位
    var divTop = (Math.max(document.documentElement.offsetHeight, document.body.scrollHeight) - divHeight)/2;//目标DIV顶端定位
    var bgOpacity = 30;//背景的透明度 0为全透明 100为不透明
    var scrollSpeed = 100;//从边框滚动出来的DIV的滚出速度 单位:毫秒

    //读取设置属性
    var propertys = hideProperty.split(';');
    for(var i=0;i<propertys.length;i++){
        var property = propertys[i].trim().split(':');
        if(property.length==2){
            var propertyValue = property[1].trim().replace("px","");
            if(!isNumber(propertyValue)){return;}
            switch(property[0].trim().toLowerCase()){
                case "width":
                    divWidth = propertyValue;
                    break;
                case "height":
                    divHeight = propertyValue;
                    break;
                case "left":
                    divLeft = propertyValue;
                    break;
                case "top":
                    divTop = propertyValue;
                    break;
                case "opacity":
                    bgOpacity = propertyValue;
                    break;
                case "speed":
                    scrollSpeed = propertyValue;
                    break;
            }
        }
    }
    //根据弹出类型，调用不同方法
    switch(hideType.toLowerCase()){
        case "left":
            hideLeftDiv(divId, divWidth + 10, scrollSpeed, 0);
            break;
        case "right":
            document.body.style.overflowX='hidden';
            hideRightDiv(divId, divWidth + 10, scrollSpeed, 0);
            break;
        case "center":
            hideCenterDiv(tagDiv);
            break;
    }
}
//隐藏左边弹出的DIV
function hideLeftDiv(divId, divWidth, scrollSpeed, i){
    //获得目标DIV
    var tagDiv = document.getElementById(divId);
    if(tagDiv == null){
        return;
    }
    if(i<=20){
        tagDiv.style.left = divWidth * (-1) * (Math.sin((3.14/2)*(i/20)));
        i++;
        window.setTimeout("hideLeftDiv('"+divId+"',"+divWidth+","+scrollSpeed+","+i+")",scrollSpeed/20);
    }
}
//隐藏右边弹出的DIV
function hideRightDiv(divId, divWidth, scrollSpeed, i){
    //获得目标DIV
    var tagDiv = document.getElementById(divId);
    if(tagDiv == null){
        return;
    }
    if(i<=20){
        tagDiv.style.right = divWidth * (-1) * (Math.sin((3.14/2)*(i/20)));
        i++;
        window.setTimeout("hideRightDiv('"+divId+"',"+divWidth+","+scrollSpeed+","+i+")",scrollSpeed/20);
    } else{
        tagDiv.style.display = "none";
        document.body.style.overflowX='';
    }
}
//隐藏中间弹出的DIV
function hideCenterDiv(tagDiv){
    var bgDiv = document.getElementById("bgDiv_S"); //最外层div
    var iframe = document.getElementById("iframe_S"); //协助wc.div盖select的iframe
    tagDiv.style.display = "none";
    document.body.removeChild(iframe);
    document.body.removeChild(bgDiv);
    //window.onscroll=null;
    //window.onresize=null;
}
//********************************************页面弹出DIV代码_HIDE End***********************************************//

posted on 2008-01-24 10:50 MingIsMe 阅读(883) 评论(0)  编辑  收藏 所属分类: 02 Script/CSS

 
Powered by:
BlogJava
Copyright © MingIsMe