js 在input 里头插入一个button
日期：2014-05-16 浏览次数：20560 次
js 在input 里面插入一个button
就是我现在有很多tag去选择，我想在单击之后在input窗口里面显示button样式的东西，然后单击后去掉
------解决方案--------------------
demo在这儿，用chrome运行，否则很慢
就是我现在有很多tag去选择，我想在单击之后在input窗口里面显示button样式的东西，然后单击后去掉
------解决方案--------------------
demo在这儿，用chrome运行，否则很慢
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>test</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{font:12px/1.5 arial;background:#fff;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
.demo{ width:500px;margin:0 auto;}
.wrap{ border:1px solid #ccc;}
.input{ height:26px; border:none;background:#fff;}
#father{ height:28px; padding:5px;}
#son{ padding:10px 0;}
.sub{ width:500px;}
.sub span{ padding:2px 4px; margin-right:5px;cursor:pointer; display:inline-block;background:#f1f1f1; border:1px solid #ccc;}
.sub i{ margin-left:5px;}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="demo">
<div id="father" class="wrap sub">
<input class="input" type="">
</div>
<div id="son" class="sub">
<span><a href="#">web01</a><i>X</i></span>
<span><a href="#">web02</a><i>X</i></span>
<span><a href="#">web03</a><i>X</i></span>
<span><a href="#">web04</a><i>X</i></span>
<span><a href="#">web05</a><i>X</i></span>
</div>
</div>
<script type="text/javascript">
$('#son span').click(function(){
$('#father').prepend($(this));
});
$('#father').delegate('span', 'click', function(){
$('#son').append($(this));
})
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
