Jquery 插件问题！
小弟有一难题求教！用jquery写一个插件插件的功能是当鼠标点击文本框时下拉出一系列值这里面的值是一个数组！用作参数传过去！谁能帮忙分析下该怎么做答得好可以加分呦！...
小弟有一难题求教！用jquery写一个插件 插件的功能是当鼠标点击文本框时 下拉出一系列值 这里面的值是一个数组！ 用作参数传过去！ 谁能帮忙分析下该怎么做 答得好可以加分呦！
展开
2个回答
展开全部
把JQuery换成本地的文件看下能否运行及是否是你想要的效果:-)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
font-family: Helvetica, 'microsoft yahei', Arial, sans-serif;
color: #4e443c;
}
ul {
list-style: none;
padding-left: 20px;
}
ul li {
font-size: 14px;
margin: 3px 0;
}
</style>
</head>
<body>
<fieldset id="parent">
<legend>JQuery提示小插件</legend>
<input id="demo_input" type="input" data-action="suggest">
<!-- 去除组件的依赖性，则提示的DIV应该在js中动态插入 -->
<!-- 通常是获取事件源位置绝对定位，这里简单处理 -->
<div id="tip_area" style="border: 1px solid red;display: none;"></div>
</fieldset>
<!--引入jquery-->
<script src="/public/js/lib_ext/jquery/jquery-1.9.1.min.js"></script>
<script>
$.fn.extend({
showTipArea: function(e, arr) {
var renderNode = $('#tip_area'), html = '', i;
if (arr.length) {
html += '<ul>';
for(i = 0; i < arr.length; i++) {
html += '<li><a href="#" data-action="response">第' + arr[i]+ '号数据</a></li>';
}
html += '</ul>';
} else {
html += '<p>暂无数据:(</p>';
}
renderNode.html(html);
renderNode.slideDown('500');
},
hideTipArea: function(text, renderNode) {
renderNode.val(text);
$('#tip_area').slideUp('500');
}
});
$(document).ready(function() {
$('#parent').on('click', function(e) {
var $target = $(e.target),
action = $target.attr('data-action');
if (action) {
if (action === 'suggest') {
var arr = [1, 2, 3, 4];
$target.showTipArea(e, arr)
} else if (action === 'response') {
$target.hideTipArea($target.text(), $('#demo_input'))
}
return false;
}
});
// 针对document的点击事件
$(this).click(function() {
$('#tip_area').slideUp('500');
});
});
</script>
</body>
</html>
更多追问追答
追问
功能是一样的 只是样式还有点不一样！我要的事文本框下里后面有一个小箭头 点击打开下拉列表 在点击就关闭！ 你能帮我调一下嘛 谢谢了
追答
这只是我花20分钟随便写的。。。。样式包括结构优化最好自己再调整下吧⊙﹏⊙
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
