层显示

最新推荐文章于 2022-02-15 16:57:29 发布

最新推荐文章于 2022-02-15 16:57:29 发布 · 105 阅读

文章标签：

#Google #JavaScript #jQuery #CSS #XHTML #ViewUI

本文介绍了一个使用jQuery实现页面元素动态定位与交互功能的例子。通过代码实现了页面元素居中显示，并根据输入框获取焦点及按钮点击事件触发元素显示与隐藏。此外，还实现了复选框选择项的增删功能。

<!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>
    <title>无标题页</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#res").css("left",($(window).width()-$("#res").width())/2+"px");
            $("#res").css("top",($(window).height()-$("#res").height())/2+"px");
            $("#Text1").focus(function(){
                $("#res").fadeIn();
            })
            $("#Button1").click(function(){
                $("#Text1").val($("#result").html());
                $("#res").fadeOut();
            })
            $("input[type=checkbox]").click(function(){
                if($(this).attr("checked")==true)
                    $("#result").append($(this).val()+",");
                else
                     $("#result").html($("#result").html().replace($(this).val(),""));
            })
        })
    </script>
</head>
<body style="margin:0 auto; padding:0; text-align:center;">
    <input id="Text1" type="text" style="height:20px;border:1px solid #ccc;" />
    <div id="res" style="width:300px;height:300px;border:1px solid #ccc;z-index:10; background:yellow; FILTER:alpha(opacity=30);opacity=0.3;position:absolute; display:none;">
        <input id="Button1" type="button" value="确定" /><span id="result"></span><br />
        <input id="Checkbox1" type="checkbox" value="youku"/>youku
        <input id="Checkbox2" type="checkbox" value="tudou" />tudou
        <input id="Checkbox3" type="checkbox" value="baidu" />baidu
        <input id="Checkbox4" type="checkbox" value="google" />google
    </div>
</body>
</html>