鼠标
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基地管理</title>
<link type="text/css" rel="stylesheet" href="../css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="../css/style.css"/>
<style type="text/css">
.left,.right{ display:inline-block; width:300px; margin:0 50px;}
.right label,.right input[type="text"]{ display:inline-block;}
.select{border:1px solid #000; width:100px; position:absolute; background:#fff; display:none;}
.select ul{ list-style:none; padding:10px;}
.select ul li{ cursor:pointer;}
</style>
</head>
<body>
<div class="z_page">
<div class="z_head">
<div class="z_left"></div>
<div class="z_right">
<span class="z_user_img"><img src="../image/male.png"/></span>
<span class="zyd_name dropdown-toggle z_names" data-hover="dropdown">欢迎您登录：林XXX医师<em></em></span>
<ul class="dropdown-menu dropdown-alerts z_dropdown-menu">
<li class="z_change_m">
<a href="#"><span></span>重置密码</a>
</li>
<li class="z_exit">
<a href="#"><span></span>退出登录</a>
</li>
</ul>
</div>
</div>
<div class="left">
重置密码重置密码重置密码重置密码重置密码重置密码重置密码重置密码重置密码重置密码重置密码重置密码重置密码
<div class="select">
<ul>
<li class="li1">A元素</li>
<li class="li2">B元素</li>
<li class="li3">C元素</li>
</ul>
</div>
</div>
<div class="right">
<div>
<label>A元素：</label>
<input type="text" class="li1"/>
</div>
<div>
<label>B元素：</label>
<input type="text" class="li2"/>
</div>
<div>
<label>C元素：</label>
<input type="text" class="li3"/>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../js/bootstrap-hover-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".dropdown-toggle").click(function(){
$(".dropdown-alerts").show();
});
$(".left").mouseup(function (e) {
var pointX=e.pageX-20;//获取鼠标点击的位置
var pointY=e.pageY+20;
txt = window.getSelection();//获取鼠标选中的位置
var txts=txt;
//alert(txt);
if (txt.toString().length > 0) { //鼠标选中文字
$(".select").show(); //下拉框显示出了
$(".select").css({left:pointX,top:pointY}); //给下拉框具体的位置赋给值
}
alert(txts);
$(".select li").click(function(){
$(this).parents(".select").hide();
var vals = $(this).attr('class');
//alert(vals);
$(".right input").each(function (e) {
var inp=$(this).attr('class');
if(vals==inp){
$(this).val(txt);
}
});
});
});
});
</script>
