欢迎访问我的个人博客：三秋邦

选中弹出层中内容

效果图片：

<style type="text/css">
        #b
        {
            width: 500px;
            height: 200px;
        }
        
        #talkPop
        {
            position: absolute;
            z-index: 9;
        }
        
        .commonType_F7F7F7
        {
            background-color: #FFFFFF;
            border: 1px solid #CBCBCB;
        }
        .commonType_F7F7F7 .trigon
        {
            background: url("Images/Box.png") no-repeat scroll 0 -76px transparent;
            height: 12px;
            position: absolute;
            top: -12px;
            width: 22px;
        }
        .MLeft_17
        {
            margin-left: 17px;
        }
        
        .font12
        {
            font-size: 12px !important;
        }
        .color666
        {
            color: #666666;
        }
        .at-list
        {
            background: none repeat scroll 0 0 #FFFFFF;
            border-top: 1px solid #E0E0E0;
            display: block;
            max-height: 200px;
            overflow-y: scroll;
        }
        .clearBoth
        {
            clear: both;
        }
        ul, li, dl, dt, dd, ol
        {
            list-style: none outside none;
        }
        .at-list li
        {
            line-height: 24px;
            padding: 0 7px;
        }
        .at-list li a
        {
            display: block;
        }
        a:link, a:visited
        {
            text-decoration: none;
        }
        a
        {
            color: #0087C0;
            outline: medium none;
        }
    </style>

jquery Code:

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#talkPop").hide(); //首先把弹出层隐藏掉
            $("#atuser").click(function () {//点名被点击时触发
                var $atuseroOffset = $("#atuser").offset(); //获得点名的位置
                $("#talkPop").css("left", $atuseroOffset.left - 5); //把点名的左边所在位置-5赋给弹出层的左边应该所在位置下面+30是一样的道理，这里主是调整弹出层向上的方向头指上点名，如果你觉得-5不合适，自己调节吧。
                $("#talkPop").css("top", $atuseroOffset.top + 30);
                $("#talkPop").slideToggle("slow", function () { //点击奇数次显示，偶数次隐藏，“slow”慢慢显示或隐藏
                });
            });
            $("#atList>li>a").click(function () {//点击弹出层里的li
                var $name = $(this).text(); //获得被点击的li的里的文本
                var $contents = $("#contents");
                if ($contents.val().indexOf($name) < 0) {//判断选中的这个是否已经存在了。
                    $("#contents").append("<a href=\"javascript:void(0);\">@" + $name + " </a>");
                    $("#contents").focus();
                    return false;  //如果没有return false;那么选中追夢，就会跳到追夢博客园的首面去了。
                }
            });
        });
    </script>
<body>
    <div id="b">
        <textarea id="contents" cols="3" rows="45" style="width: 300px; height: 100px;"></textarea>
    </div>
    <div style="margin-left: 200px">
        <a href="javascript:void(0);" id="atuser">点名</a></div>
    <div id="talkPop">
        <div id="atTips" class="commonType_F7F7F7 dialogs" style="width: 200px; z-index: 100;">
            <div class="trigon MLeft_17">
            </div>
            <div class="font12 color666" style="text-align: center; height: 30px; line-height: 30px;">
                输入姓名后请轻敲空格完成输入</div>
            <ul id="atList" class="at-list clearBoth" style="height: 200px; overflow-y: auto;">
                <li><a href="http://www.cnblogs.com/koeltp">追夢</a></li>
                <li><a href="http://www.cnblogs.com/">博客园</a></li>
                <li><a href="javascript:void(0);">胡子大哥</a></li>
                <li><a href="javascript:void(0);">灭掉日本</a></li>
                <li><a href="javascript:void(0);">日本鬼子</a></li>
                <li><a href="javascript:void(0);">钓鱼岛</a></li>
            </ul>
        </div>
    </div>
</body>

Code Demo Down 

posted @ 2012-09-12 00:30  追夢  阅读(436)  评论(0)  编辑  收藏  举报
欢迎访问我的个人博客：三秋邦