javascript - 关于jquery.tokeninput.js的问题
本文介绍了javascript - 关于jquery.tokeninput.js的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
tokeninput这个插件在页面上使用，效果都挺好的，滚动页面，没有任何问题，如下图：
但是，今天测试提了一个问题，在modal里，tokeninput的搜索列表不能随着modal滚动，如下图：
我自己做了一个小demo，给大家演示：
代码：点击查看代码及运行效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tokeninput Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
<link rel="stylesheet" href="plugin/tokeninput/token-input-facebook.css" type="text/css">
<style>
div.token-input-dropdown-facebook {
z-index: 1050;
/* 解决 token-input在modal中不显示*/
}
</style>
</head>
<body>
<h2 id="instant-demo">Instant Demo</h2>
<p><input type="text" id="tokeninput-demo" /></p>
<span id="btn" class="btn btn-default" data-title="add"><i class="fa fa-minus-square"></i> 弹框</span>
<p> 以下图片是为了让页面滚动而多加的内容：</p>
<ul id="pictures">
<li><img data-original="img/20160918105709.jpg" src="img/thumbnails/20160918105709.jpg"></li>
<li><img data-original="img/fewfef.jpg" src="img/thumbnails/fewfef.jpg"></li>
<li><img data-original="img/apic14052.jpg" src="img/thumbnails/apic14052.jpg"></li>
<li><img data-original="img/images (2).jpg" src="img/thumbnails/images (2).jpg"></li>
<li><img data-original="img/vfegvreg.jpg" src="img/thumbnails/vfegvreg.jpg"></li>
<li><img data-original="img/images.jpg" src="img/thumbnails/images.jpg"></li>
<li><img data-original="img/20160918132119.jpg" src="img/thumbnails/20160918132119.jpg"></li>
</ul>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-pencil-square-o"></i> 图片上传</h4>
</div>
<div class="modal-body">
<p><input type="text" id="tokeninput" /></p>
<p> 以下图片是为了让页面滚动而多加的内容：</p>
<ul id="pictures">
<li><img data-original="img/20160918105709.jpg" src="img/thumbnails/20160918105709.jpg"></li>
<li><img data-original="img/fewfef.jpg" src="img/thumbnails/fewfef.jpg"></li>
<li><img data-original="img/apic14052.jpg" src="img/thumbnails/apic14052.jpg"></li>
<li><img data-original="img/images (2).jpg" src="img/thumbnails/images (2).jpg"></li>
<li><img data-original="img/vfegvreg.jpg" src="img/thumbnails/vfegvreg.jpg"></li>
<li><img data-original="img/images.jpg" src="img/thumbnails/images.jpg"></li>
<li><img data-original="img/20160918132119.jpg" src="img/thumbnails/20160918132119.jpg"></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class='fa fa-times'></i> 关闭</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src='js/jquery-2.0.2.min.js'></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="plugin/tokeninput/jquery.tokeninput.js"></script>
<script>
$(document).ready(function() {
$("#tokeninput-demo").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", {
theme: "facebook"
});
$("#tokeninput").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", {
theme: "facebook"
});
$('body').on('click', '#btn', function () {
$('#modal').modal('show');
});
});
</script>
</body>
</html>问，如何将这个东西 做成 随着页面能滚，随着模态框也能滚？
解决方案
这个问题，下午的时候，忽然想到了，tokeninput源码中是将其下拉搜索列表的div全部加到body中，代码如下（jquery.tokeninput.js 第343~347行）：
// The list to store the dropdown items in
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide();我可以将这里改为加到input的父元素里， 再把页面上的input在一起相对于父元素定位，顺着这个思路试了一下，果然行的通^_^
将上面的代码改为：
// The list to store the dropdown items in
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("p.dropdown")
.hide();题目中的html代码中，input标签的父元素加一个类dropdown：
<p class="dropdown"><input type="text" id="tokeninput-demo" /></p>tokeninput的下拉搜索列表的定位源代码（jquery.tokeninput.js 第630~639行）如下：
function show_dropdown() {
dropdown
.css({
position: "absolute",
top: $(token_list).offset().top + $(token_list).outerHeight(),
left: $(token_list).offset().left,
zindex: 999
})
.show();
}改为如下代码：
function show_dropdown() {
dropdown
.css({
position: "absolute",
top: 0 + $('p.dropdown').outerHeight(),
left: $('p.dropdown').offset().left,
zindex: 999
})
.show();
}如此一来，就可以在页面能滚动， 模态框中也能滚动。
but
有一个小小的毛病
我正在想办法~~ @_@
这篇关于javascript - 关于jquery.tokeninput.js的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
