javascript - 关于jquery.tokeninput.js的问题-PHP中文网问答

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>
        p.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 src="img/20160918105709.jpg" src="img/thumbnails/20160918105709.jpg"></li>
        <li><img src="img/fewfef.jpg" src="img/thumbnails/fewfef.jpg"></li>
        <li><img src="img/apic14052.jpg" src="img/thumbnails/apic14052.jpg"></li>
        <li><img src="img/images (2).jpg" src="img/thumbnails/images (2).jpg"></li>
        <li><img src="img/vfegvreg.jpg" src="img/thumbnails/vfegvreg.jpg"></li>
        <li><img src="img/images.jpg" src="img/thumbnails/images.jpg"></li>
        <li><img src="img/20160918132119.jpg" src="img/thumbnails/20160918132119.jpg"></li>
    </ul>

    <p class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
        <p class="modal-dialog modal-lg" role="document">
            <p class="modal-content">
                <p class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><i class="fa fa-pencil-square-o"></i> 图片上传</h4>
                </p>
                <p class="modal-body">
                    <p><input type="text" id="tokeninput" /></p>
                    <p> 以下图片是为了让页面滚动而多加的内容：</p>
                    <ul id="pictures">
                        <li><img src="img/20160918105709.jpg" src="img/thumbnails/20160918105709.jpg"></li>
                        <li><img src="img/fewfef.jpg" src="img/thumbnails/fewfef.jpg"></li>
                        <li><img src="img/apic14052.jpg" src="img/thumbnails/apic14052.jpg"></li>
                        <li><img src="img/images (2).jpg" src="img/thumbnails/images (2).jpg"></li>
                        <li><img src="img/vfegvreg.jpg" src="img/thumbnails/vfegvreg.jpg"></li>
                        <li><img src="img/images.jpg" src="img/thumbnails/images.jpg"></li>
                        <li><img src="img/20160918132119.jpg" src="img/thumbnails/20160918132119.jpg"></li>
                    </ul>
                </p>
                <p class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class='fa fa-times'></i> 关闭</button>
                </p>
            </p>
        </p>
    </p>
    <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>

问，如何将这个东西做成随着页面能滚，随着模态框也能滚？

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(); }

全部回复(1)

高洛峰2017-04-10 17:37:54 1楼

这个问题，下午的时候，忽然想到了，tokeninput源码中是将其下拉搜索列表的p全部加到body中，代码如下（jquery.tokeninput.js 第343~347行）：

 // The list to store the dropdown items in  
    var dropdown = $("<p>")
        .addClass(settings.classes.dropdown)
        .appendTo("body")
        .hide();

我可以将这里改为加到input的父元素里，再把页面上的input在一起相对于父元素定位，顺着这个思路试了一下，果然行的通^_^

将上面的代码改为：

// The list to store the dropdown items in
    var dropdown = $("<p>")
        .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行）如下：

改为如下代码：

如此一来，就可以在页面能滚动，模态框中也能滚动。

but
有一个小小的毛病
我正在想办法~~ @_@

赞 +0

添加回复