学习web标准、用户体验改善、Ajax&Asp.Net

最新推荐文章于 2021-08-06 02:45:10 发布

musttieying

最新推荐文章于 2021-08-06 02:45:10 发布

阅读量1.1k

点赞数

分类专栏： Ajax php编程 HTML+CSS+JS 文章标签： ajax asp.net web function javascript div

本文链接：https://blog.csdn.net/musttieying/article/details/1719665

版权

HTML+CSS+JS 同时被 3 个专栏收录

67 篇文章 1 订阅

订阅专栏

php编程

44 篇文章 0 订阅

订阅专栏

Ajax

4 篇文章 0 订阅

订阅专栏

用javascript来实现select标签的美化
论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级功能。拿出来和大家一起分享一下。先可以看一下预览效果：http://www.iwcn.net/demo/select。

【功能需求】
1、调用要方便，做好之后应该像这样：
程序代码程序代码

function loadSelect(selectobj){
//传入一个select对象就能将他的样式美化
}

2、不改变原有表单项，表单的页面代码不去破坏：
程序代码程序代码

<form name="f" οnsubmit="getResult();">
    <fieldset>
        <legend>用户注册</legend>
        <div>
            <label for="username">帐号</label>
            <input type="text" id="username" name="username" />
        </div>
        <div>
            <label for="pwd">密码</label>
            <input type="password" name="pwd" id="pwd" />
        </div>
        <div>
            <label for="province">省份</label>
            <select id="province" name="province">
                <option value="10">江西</option>
                <option value="11">福建</option>
                <option value="12">广东</option>
                <option value="13">浙江</option>
            </select>
        </div>
    </fieldset>
    <input type="submit" value="提交" name="btnSub" />
</form>

【实现思路】

第一步：将表单中的select隐藏起来。
为什么？很简单，因为这家伙太顽固了，用css根本搞不出来你想要的。所以把它杀掉。

第二步：用脚本找到select标签在网页上的绝对位置。
我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。

第三步：用脚本把select标签中的值读出来。
虽然藏起来了，但它里边的options我们还有用呢，统统取过来。

第四步：当用户点击select标签的替身，也就是div的时候。我们再用一个div浮在上一个div的下边，这个就是options的替身了。

大致上就是这样了，接下来我们一步一步去实现它！

【准备工作】
1、想好你要把select美化成什么样子，并准备好相应的图片。我准备了两张小图，就是下拉箭头1和下拉箭头2，1是默认样式，2是鼠标移过来的样式。
2、写好一个普通的表单递交页面，比如下边这个。注意我给select定义了基本的CSS样式、在头部添加了调用js文件的代码、在body中添加了调用函数的脚本。
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <title>用javascript美化Select</title>
    <script type="text/javascript" src="select.js"></script>
    <style type="text/css">
    select{width:200px;height:20px;}
</style>
    </head>
    <body>
        <h1>用javascript模拟select达到美化效果</h1>
<form name="f" οnsubmit="getResult();">
    <fieldset>
        <legend>用户注册</legend>
        <div>
            <label for="username">帐号</label>
            <input type="text" id="username" name="username" />
        </div>
        <div>
            <label for="pwd">密码</label>
            <input type="password" name="pwd" id="pwd" />
        </div>
        <div>
            <label for="province">省份</label>
            <select id="province" name="province">
                <option value="10">江西</option>
                <option value="11">福建</option>
                <option value="12">广东</option>
                <option value="13">浙江</option>
            </select>
        </div>
    </fieldset>
    <input type="submit" value="提交" name="btnSub" />
</form>
        <script type="text/javascript">
            loadSelect(document.f.province);
        </script>
    <p>
        <a href="<a href="http://www.iwcn.net" target="_blank">http://www.iwcn.net</a>">作者博客</a>
    </p>
    </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

【编写javascript】
程序代码程序代码
<script type="text/javascript" src="select.js"></script>

新建一个js文件并保存为select.js，剩下的工作我们全部在这个js中去完成。

函数名：loadSelect(obj);
参数：select对象

相关函数：
程序代码程序代码

function Offset(e)
//取标签的绝对位置
{
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight-2;

    while(e=e.offsetParent)
    {
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    return {
        top : t,
        left : l,
        width : w,
        height : h
    }
}

第一步：把select的绝对位置记录下来。一会替身上来就知道应该站那里了。
程序代码程序代码

var offset=Offset(obj);
//这里解释一下Offset是一个函数，用来获取对象的绝对位置。写在loadSelect()函数外边的。他有四个属性分别是top/left/width/height。

第二步：将select隐藏。
程序代码程序代码

obj.style.display="none";

第三步：虚拟一个div出来代替select
程序代码程序代码

    var iDiv = document.createElement("div");
        iDiv.id="selectof" + obj.name;
        iDiv.style.position = "absolute";
        iDiv.style.width=offset.width + "px";
        iDiv.style.height=offset.height + "px";
        iDiv.style.top=offset.top + "px";
        iDiv.style.left=offset.left + "px";
        iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
        iDiv.style.border="1px solid #3366ff";
        iDiv.style.fontSize="12px";
        iDiv.style.lineHeight=offset.height + "px";
        iDiv.style.textIndent="4px";
    document.body.appendChild(iDiv);

第四步：把原始select没人选中的值给它。
程序代码程序代码
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;

第五步：为替身添加鼠标移过样式。
程序代码程序代码

    iDiv.οnmοuseοver=function(){//鼠标移到
        iDiv.style.background="url(icon_select_focus.gif) no-repeat right 4px";
    }
    iDiv.οnmοuseοut=function(){//鼠标移走
        iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
    }

第六步：添加关键的鼠标点击事件。
程序代码程序代码

    iDiv.οnclick=function(){//鼠标点击
        if (document.getElementById("selectchild" + obj.name)){
        //判断是否创建过div
            if (childCreate){
                //判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。
                document.getElementById("selectchild" + obj.name).style.display="none";
                childCreate=false;
            }else{
                document.getElementById("selectchild" + obj.name).style.display="";
                childCreate=true;
            }
        }else{
            //初始一个div放在上一个div下边，当options的替身。
            var cDiv = document.createElement("div");
            cDiv.id="selectchild" + obj.name;
            cDiv.style.position = "absolute";
            cDiv.style.width=offset.width + "px";
            cDiv.style.height=obj.options.length *20 + "px";
            cDiv.style.top=(offset.top+offset.height+2) + "px";
            cDiv.style.left=offset.left + "px";
            cDiv.style.background="#f7f7f7";
            cDiv.style.border="1px solid silver";

            var uUl = document.createElement("ul");
            uUl.id="uUlchild" + obj.name;
            uUl.style.listStyle="none";
            uUl.style.margin="0";
            uUl.style.padding="0";
            uUl.style.fontSize="12px";
            cDiv.appendChild(uUl);
            document.body.appendChild(cDiv);
            childCreate=true;
            for (var i=0;i<obj.options.length;i++){
                //将原始的select标签中的options添加到li中
                var lLi=document.createElement("li");
                lLi.id=obj.options[i].value;
                lLi.style.textIndent="4px";
                lLi.style.height="20px";
                lLi.style.lineHeight="20px";
                lLi.innerHTML=obj.options[i].innerHTML;
                uUl.appendChild(lLi);
            }
            var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
            for (var j=0;j<obj.options.length;j++){
                //为li标签添加鼠标事件
                liObj[j].οnmοuseοver=function(){
                    this.style.background="gray";
                    this.style.color="white";
                }
                liObj[j].οnmοuseοut=function(){
                    this.style.background="white";
                    this.style.color="black";
                }
                liObj[j].οnclick=function(){
                    //做两件事情，一是将用户选择的保存到原始select标签中，要不做的再好看表单递交后也获取不到select的值了。
                    obj.options.length=0;
                    obj.options[0]=new Option(this.innerHTML,this.id);
                    //同时我们把下拉的关闭掉。
                    document.getElementById("selectchild" + obj.name).style.display="none";
                    childCreate=false;
                    iDiv.innerHTML=this.innerHTML;
                }
            }
        }
    }

最后这个比较复杂一点，再解释一下，我们在做这一步之前，select的样子已经出来了，下一步就是再加一个div去模仿select被点击之后出现的下拉选项了。我们可以讲select标签的options通过javascript提取出来，把它写成这样：
程序代码程序代码

<div>
    <ul>
        <li>optionName</li>
        <li>optionName</li>
        <li>optionName</li>
    </ul>
</div>

基本上就这样了。还有些缺陷，有时间大家可以一起补充！

预览地址：javascript模拟select下拉
脚本下载：select.js

实现div可编辑的常见方法
功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
方法1：直接通过textarea标签实现，请运行下边代码：
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
    #info {
          font-size: 12px;
          overflow:hidden;
          background-color: #ffffcc;
          color: black;
          padding-right:5px;
          padding-left:5px;
          font-family: courier;
          width:100%;
          letter-spacing:0;
          line-height:12px;
          border-style:none;
        }
</style>
</HEAD>

<BODY>

    <div id="sdf" style="width:400px;">
    <textarea id="info" οnblur="saveInfo()" οnmοuseοut="saveInfo()" οnkeyup="setRows()"></textarea>
    </div>
        <script language="JavaScript">
        function saveInfo() {
          var text = document.getElementById("info").value;
        //再用ajax向数据库中更新当前修改内容
        }
        function setCols() {
          var textarea = document.getElementById("info");
          textarea.setAttribute("cols", Math.floor(textarea.clientWidth / 7));
          setRows();
        }
        function setRows() {
          var textarea = document.getElementById("info");
          var cols = textarea.cols;
          var str = textarea.value;
          str = str.replace(//r/n?/, "/n");
          var lines = 2;
          var chars = 0;
          for (i = 0; i < str.length; i++) {
            var c = str.charAt(i);
            chars++;
            if (c == "/n" || chars == cols) {
              lines ++;
              chars = 0;
            }
          }
          textarea.setAttribute("rows", lines);
          textarea.style.height = lines*12 + "px";
        }
        function setDefault(){
            var textarea=document.getElementById("info");
            textarea.value="单击这里进行编辑";
        }
        setDefault();
        setCols();
      </script>
</BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。

方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码：
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div id="gtest">
    点击这里就可以编辑
</div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。

PS：第二个方法的代码还有点问题，有空再来调试一下。
代替marquee的滚动字幕效果代码
由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了，至于不明白为什么不直接用marquee标签的朋友，不妨先阅读一下这篇文章。
第一种方法：用javascript模拟marquee的做法。
出处：网易游戏
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>热点新闻</title>
<style type="text/css">

</style>
</head>

<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank><a href="http://www.163.com" target="_blank">网易</a>将军令官方网站</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>";
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee() {
    var str=marqueeContent[0];
    document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" οnmοuseοver="clearInterval(marqueeInterval[0])" οnmοuseοut="marqueeInterval[0]=setInterval(/'startMarquee()/',marqueeDelay)"><div>'+str+'</div></div>');
    marqueeId++;
    marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
    var str=marqueeContent[marqueeId];
    marqueeId++;
    if(marqueeId>=marqueeContent.length) marqueeId=0;
    if(document.getElementById("marqueeBox").childNodes.length==1) {
    var nextLine=document.createElement('DIV');
    nextLine.innerHTML=str;
    document.getElementById("marqueeBox").appendChild(nextLine);
    }
    else {
        document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
        document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
        document.getElementById("marqueeBox").scrollTop=0;
    }
    clearInterval(marqueeInterval[1]);
    marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
    document.getElementById("marqueeBox").scrollTop++;
    if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
    clearInterval(marqueeInterval[1]);
    }
}
initMarquee();
</script>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

个人观点：从web可用性角度上讲，我们在采用这段代码的同时要考虑到noscript环境下的可用性，建议将内容还是以下边代码的形式出现在页面中。如：
程序代码程序代码

<div id="newslist">
<ul>
<li><a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a></li>
<li><a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a></li>
<li><a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a></li>
<li><a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a></li>
</ul>
</div>

然后用脚本去设置隐藏，将列表项读进javascript中定义的数组中。即可达到在noscript环境下也能正常看到内容列表。

第二种方法：这个更强，能自动根据内容自动进行左右滚动，解决了宽度太小造成的截取问题。
原文作者：风动人
HTML代码
<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}
#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.οnlοad=function(){
    var o=document.getElementById('infozone');hscroll(o);
    window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);
}
function scrollup(o,d,c){
    if(d==c){
        var t=o.firstChild.cloneNode(true);
        o.removeChild(o.firstChild);o.appendChild(t);
        t.style.marginTop=o.firstChild.style.marginTop='0px';
        hscroll(o);
    }
    else{
        ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
        o.firstChild.style.marginTop=-c+l+'px';
        window.setTimeout(function(){scrollup(o,d,c-l)},50);
    }
}

function hscroll(o){
    var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
    if(w1<=w2)return;
    tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}

function hs(o,d,c,p){
    c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
    if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
    else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>

<body>
<div id="infozone"><div>温岚 - 屋顶(周杰伦对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

个人观点：从xhtml的语义化的角度看，页面内容中滥用div标签现象比较严重，可改成ul/li形式。

第三种是最精简的，代码非常少。
原文作者：cityvoice
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
    #newslist{
        background:#f7f7f7;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px;
    }
    #contain{
        font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0;
    }
    #contain li{
        height:20px;line-height:20px;white-space:nowrap;overflow:hidden;
    }
</style>
</HEAD>

<BODY>
    <div id="newslist">
        <ul id="contain">
            <li><a href="http:/www.iwcn.net">温岚 - 屋顶(左右摆动)</a></li>
            <li><a href="http:/www.iwcn.net">范玮琪 - 那些花儿</a></li>
            <li><a href="http:/www.iwcn.net">张韶涵 - 娃娃</a></li>
            <li><a href="http:/www.iwcn.net">孙楠&韩红 - 美丽的神话</a></li>
            <li><a href="http:/www.iwcn.net">张信哲 - 白月光</a></li>
        </ul>
    </div>
<SCRIPT LANGUAGE="JavaScript">
function xx(){
var container=document.getElementById("contain");
container.appendChild(container.firstChild);
}
setInterval("xx()",3000);
</SCRIPT>
</BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

个人观点：太短小精干了，如果你喜欢简单的话，这个也可以考虑的。
改善用户体验之密码强度提示
功能说明：在用户注册或更改密码时，根据用户输入进行检测并返回结果。能有效地提醒用户提高帐号的安全性。

类似效果：Live.com中的修改密码功能

简单预览：

HTML代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密码</title>
<style type="text/css">
body{
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
}
form{
    margin:2em;
}
#chkResult{margin-left:53px;height:15px;}
</style>
</head>

<body>
<form name="form1">
    <label for="pwd">用户密码</label>
    <input type="password" name="pwd" οnblur="chkpwd(this)" />
    <div id="chkResult"></div>
    <label for="pwd2">重复密码</label>
    <input type="password" name="pwd2" />
</form>
<script type="text/javascript">
    function chkpwd(obj){
        var t=obj.value;
        var id=getResult(t);

        //定义对应的消息提示
        var msg=new Array(4);
        msg[0]="密码过短。";
        msg[1]="密码强度差。";
        msg[2]="密码强度良好。";
        msg[3]="密码强度高。";

        var sty=new Array(4);
        sty[0]=-45;
        sty[1]=-30;
        sty[2]=-15;
        sty[3]=0;

        var col=new Array(4);
        col[0]="gray";
        col[1]="red";
        col[2]="#ff6600";
        col[3]="Green";

        //设置显示效果
        var bImg="attachments/month_0612/v200612702136.gif";//一张显示用的图片
        var sWidth=300;
        var sHeight=15;
        var Bobj=document.getElementById("chkResult");

        Bobj.style.fontSize="12px";
        Bobj.style.color=col[id];
        Bobj.style.width=sWidth + "px";
        Bobj.style.height=sHeight + "px";
        Bobj.style.lineHeight=sHeight + "px";
        Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";
        Bobj.style.textIndent="20px";
        Bobj.innerHTML="检测提示：" + msg[id];
    }

    //定义检测函数,返回0/1/2/3分别代表无效/差/一般/强
    function getResult(s){
        if(s.length < 4){
            return 0;
        }
        var ls = 0;
        if (s.match(/[a-z]/ig)){
            ls++;
        }
        if (s.match(/[0-9]/ig)){
            ls++;
        }
         if (s.match(/(.[^a-z0-9])/ig)){
            ls++;
        }
        if (s.length < 6 && ls > 0){
            ls--;
        }
        return ls
    }
</script>
</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

使用方法：
第一步：保存图片
第二步：根据您的需要修改js文件中该图片地址。如下所示：
程序代码程序代码
var bImg="pwdlen.gif";//一张显示用的图片

第三步：在需要检测的页面中引用这个脚本文件，如下所示：
程序代码程序代码
<script type="text/javascript" src="chkpwd.js"></script>

第四步：在网页的表单中，找到密码输入框添加onblur事件驱动，然后添加一个Div，如下所示：
程序代码程序代码

<input type="password" name="pwd" οnblur="chkpwd(this)" />
<div id="chkResult">强度检测</div>

第五步：根据您页面的需要通过样式表CSS重新定义#chkResult的摆放位置，以合适您网页的整体布局。

完整效果预览：点击这里

脚本文件chkpwd.js 下载：下载文件点击下载此文件
改善用户体验之alert提示效果
类似于新浪邮箱的提示效果。比较独立。在wenming版主的帮助下，已解决了高度不能适应的BUG。

使用方法很简单，在需要弹出提示的页面先引用alert.js脚本文件,如:
程序代码程序代码

<script type="text/javascript" src="alert.js"></script>

然后直接在需要提出处使用：
程序代码程序代码

sAlert("需要提示的信息");

即可.不需要额外添加HTML代码.

完整代码:
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-CN" lang="zh-CN">
    <head>
        <meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />
        <title>
            政策文件_中国电力工程造价信息网</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="gb2312" />
        <meta name="KeyWords" content="电力工程造价,价格信息,装材,设备,电力工程" />
        <meta name="description" content="电力工程造价信息" />
        <style type="text/css">
            *{
                margin:0;padding:0;
            }
        </style>
    </head>
    <body>


    <div class="cecmbody" id="cecmpolicy">
        <div class="leftClass">

<p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

            <input type="button" value="点击这里" οnclick="sAlert('测试效果');" />


        </div>
        <div class="rightClass">
        </div>
    </div>
                <script type="text/javascript" language="javascript">

//Author:Daviv
//Blog:<a href="http://blog.163.com/<a href="http://www.iwcn.net" target="_blank">jxdawei</a>" target="_blank">http://blog.163.com/<a href="http://www.iwcn.net" target="_blank">jxdawei</a></a>
//Date:2006-10-27
//Email:<a href="http://www.iwcn.net" target="_blank">jxdawei</a>@gmail.com

            function sAlert(str){
            var msgw,msgh,bordercolor;
            msgw=400;//提示窗口的宽度
            msgh=100;//提示窗口的高度
            titleheight=25 //提示窗口标题高度
            bordercolor="#336699";//提示窗口的边框颜色
            titlecolor="#99CCFF";//提示窗口的标题颜色

            var sWidth,sHeight;
            sWidth=document.body.offsetWidth;
            sHeight=screen.height;

            var bgObj=document.createElement("div");
            bgObj.setAttribute('id','bgDiv');
            bgObj.style.position="absolute";
            bgObj.style.top="0";
            bgObj.style.background="#777";
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
            bgObj.style.opacity="0.6";
            bgObj.style.left="0";
            bgObj.style.width=sWidth + "px";
            bgObj.style.height=sHeight + "px";
            bgObj.style.zIndex = "10000";
            document.body.appendChild(bgObj);

            var msgObj=document.createElement("div")
            msgObj.setAttribute("id","msgDiv");
            msgObj.setAttribute("align","center");
            msgObj.style.background="white";
            msgObj.style.border="1px solid " + bordercolor;
            msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight ="25px";
            msgObj.style.zIndex = "10001";

           var title=document.createElement("h4");
           title.setAttribute("id","msgTitle");
           title.setAttribute("align","right");
           title.style.margin="0";
           title.style.padding="3px";
           title.style.background=bordercolor;
           title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
           title.style.opacity="0.75";
           title.style.border="1px solid " + bordercolor;
           title.style.height="18px";
           title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
           title.style.color="white";
           title.style.cursor="pointer";
           title.innerHTML="关闭";
           title.οnclick=function(){
                document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
           document.body.appendChild(msgObj);
           document.getElementById("msgDiv").appendChild(title);
           var txt=document.createElement("p");
           txt.style.margin="1em 0"
           txt.setAttribute("id","msgTxt");
           txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }
        </script>
    </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

下载文件点击下载此文件

musttieying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习web标准、用户体验改善、Ajax&Asp.Net

用javascript来实现select标签的美化论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级功能。拿出来和大家一起分享一下。先可以看一下预览效果：http://www.iwcn.net/demo/select。【功能需求】1、调用要方便，做好之后应该像这样：程序代码程序代码function
复制链接

扫一扫