片：
<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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
