Question

我使用ddslick列表，然后搜索经典列表的复制开头。

当我有向下打开的地方然后在经典模式下打开但是当我没有地方时我想强行向上开启。

我无法对我的ddslick列表说出一个简单的选择表。

我给出了一个示例代码

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>

<!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">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
    .MaxHeightPopup
    {
        border-style: solid;
        border-color: red;
        display: block;
        max-height: 100px;
        overflow: auto;
    }
</style>
<script type="text/javascript">
    $(function () {

        var ddData = [
            {
                text: "Facebook",
                value: 1,
                selected: false,
                description: "Description with Facebook",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            },
            {
                text: "Twitter",
                value: 2,
                selected: false,
                description: "Description with Twitter",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            },
            {
                text: "LinkedIn",
                value: 3,
                selected: true,
                description: "Description with LinkedIn",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            },
            {
                text: "Foursquare",
                value: 4,
                selected: false,
                description: "Description with Foursquare",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            }
        ];

        $("#btnAdd").click(function () {
            var row = '<tr height="50"><td>';
            row += '<select class="myDropdown"></select></td>';
            row += '<td>2</td><td>3</td><td >4</td></tr>';
            $('#tbdatas').append(row);

            $('.myDropdown').ddslick({
                zindex: 200,
                data: ddData,
                width: 300,
                selectText: "Select your preferred social network",
                imagePosition: "right"
            });

        });

        $("#btnAdd1").click(function () {
            var row = '<tr height="50"><td>';
            row += '<select class="myselect1"></select></td>';
            row += '<td>2</td><td>3</td><td >4</td></tr>';
            $('#tbdatas1').append(row);

        });
    });
</script>
</head>
<body>
<button id="btnAdd">
    Ajouter 1 ligne</button>
    <table class="MaxHeightPopup" id="tbdatas">
    </table>
    <br />
     <button id="btnAdd1">
    Ajouter 1 ligne</button>
    <table class="MaxHeightPopup" id="tbdatas1">
    </table>
</body>
</html>

有人能帮助我吗？

我只是看看我是否添加 .DD容器 { 位置：静态的; }

但是.dd-options没有处于有利位置

Answer 1

它更好，但不完美

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>

<!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">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
    .MaxHeightPopup
    {
        border-style: solid;
        border-color: red;
        display: block;
        max-height: 100px;
        overflow: auto;
    }

    .dd-container
    {
        position: static;
    }
</style>
<script type="text/javascript">
    $(function () {
        var mypositions = [];
        var ddData = [
            {
                text: "Facebook",
                value: 1,
                selected: false,
                description: "Description with Facebook",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            },
            {
                text: "Twitter",
                value: 2,
                selected: false,
                description: "Description with Twitter",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            },
            {
                text: "LinkedIn",
                value: 3,
                selected: true,
                description: "Description with LinkedIn",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            },
            {
                text: "Foursquare",
                value: 4,
                selected: false,
                description: "Description with Foursquare",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            }
        ];

        $("#btnAdd").click(function () {
            var nbl = $('#tbdatas tr').length;
            var row = '<tr height="50"><td>';
            row += '<select class="myDropdown" id="' + nbl + '"></select></td>';
            row += '<td>2</td><td>3</td><td >4</td></tr>';
            $('#tbdatas').append(row);

            $('#' + nbl).ddslick({
                zindex: 200,
                data: ddData,
                width: 300,
                selectText: "Select your preferred social network",
                imagePosition: "right"
            });

            var windowpos = $("#tbdatas").scrollTop();
            mypositions.push(parseInt($('#' + nbl).position().top) + windowpos);
        });

        $("#tbdatas").scroll(function () {
            var windowpos = $("#tbdatas").scrollTop();
            $('.dd-container').each(function () {

                $('.dd-options', $(this)).css("top", parseInt(this.clientHeight) + parseInt(mypositions[this.id]) - windowpos);
            });

        });

    });
</script>
</head>
<body>
<button id="btnAdd">
    Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas">
</table>
</body>
</html>

如何在不同的方向打开ddslick列表

1 个答案: