0

我正在使用“ http://fancyapps.com/fancybox/ ”中的 FancyBox 灯箱

我想在此 Lightbox 中显示运行时生成的“动态表”。

请找到将在运行时单击任何生成的表的代码<div class="bin">

    <div class="vault overflowHidden">
    <div class="floatLeft">
        <div class="bin" data-cols="4" data-rows="3">
            <div class="number">S1</div>
            <div class="type">4x3</div>
            <div class="description">
                Designed to hold max size packages.
                    <br>
                Est. capacity: 23 pkgs
            </div>
        </div>
        <div class="bin" data-cols="5" data-rows="4">
            <div class="number">S3</div>
            <div class="type">5x4</div>
            <div class="description">Est. capacity: 34.5 packages</div>
        </div>
        <div class="bin" data-cols="7" data-rows="4">
            <div class="number">S4</div>
            <div class="type">7x4</div>
            <div class="description">Est. capacity: 72.8 packages</div>
        </div>
        <div class="bin" data-cols="9" data-rows="5">
            <div class="number">S5</div>
            <div class="type">9x5</div>
            <div class="description">Est. capacity: 121 packages</div>
        </div>
        <div class="bin" data-cols="4" data-rows="3">
            <div class="number">S6</div>
            <div class="type">4x3</div>
            <div class="description">
                Designed to hold max size packages.
                    <br>
                Est. capacity: 23 packages
            </div>
        </div>
        <div class="bin repack" data-cols="9" data-rows="5">
            <div class="number">S8</div>
            <div class="type">9x5 Repack</div>
            <div class="description">Est. capacity: 117 packages</div>
        </div>
    </div>
    <div class="floatRight">
        <div class="bin repack" data-cols="9" data-rows="5">
            <div class="number">S2</div>
            <div class="type">9x5 Repack</div>
            <div class="description">Est. capacity: 117 packages</div>
        </div>
        <div class="loader">
            <div class="lot" data-cols="8" data-rows="1">
                <div class="number">L1</div>
                <div class="type">42-50.5</div>
            </div>
            <div class="lot" data-cols="7" data-rows="1">
                <div class="number">L2</div>
                <div class="type">50.5-77.5</div>
            </div>
            <div class="lot" data-cols="4" data-rows="1">
                <div class="number">L3</div>
                <div class="type">93.6-119</div>
            </div>
            <div class="lot repack" data-cols="8" data-rows="1">
                <div class="number">L4</div>
                <div class="type">Repack</div>
            </div>
            <div class="lot removed">
                <div class="number">L5</div>
                <div class="type">42-50.5</div>
            </div>
            <div class="lot" data-cols="4" data-rows="1">
                <div class="number">L6</div>
                <div class="type">93.6-119</div>
            </div>
            <div class="lot" data-cols="8" data-rows="1">
                <div class="number">L7</div>
                <div class="type">42-50.5</div>
            </div>
            <div class="lot removed">
                <div class="number">L8</div>
                <div class="type">42-50.5</div>
            </div>
            <div class="lot" data-cols="7" data-rows="1">
                <div class="number">L9</div>
                <div class="type">50.5-77.5</div>
            </div>
        </div>
        <div class="bin" data-cols="9" data-rows="5">
            <div class="number">S7</div>
            <div class="type">9x5</div>
            <div class="description">Est. capacity: 121 packages</div>
        </div>
        <div class="bin" data-cols="5" data-rows="4">
            <div class="number">S9</div>
            <div class="type">5x4</div>
            <div class="description">Est. capacity: 34.5 packages</div>
        </div>
    </div>
</div>

这是单击上述任何 DIV 时将生成的表格:-

<div class="beanStructure overflowHidden">
    <div class="tableContainer">
        <table class="container">
        </table>
    </div>
</div>

用于生成表的 Jquery :-

    <script>

    function generateTable(rows, cols) {

        $('table.container').add

        $('table.container').each(function () {
            for (i = 0; i < rows; i++) {
                $(this).hide().append('<tr>').fadeIn(100);;
            }
        });
        $('table.container tr').each(function () {
            for (j = 0; j < cols; j++) {
                $(this).hide().append('<td></td>').fadeIn(100);;
            }
        });
    }

    $(function() {
        $('.bin, .lot').click(function() {
            var repack = '';
            if ($(this).hasClass('repack')) {
                repack = ' repack';
            }
            var myRows = $(this).attr('data-rows');
            var myCols = $(this).attr('data-cols');
            $("table.container").html('');
            $("div.tableContainer").removeClass().addClass('tableContainer bin-' + myCols + 'x' + myRows + repack + '');
            generateTable(myRows, myCols);
            //$('.beanStructure div').hide();
            //$('.beanStructure div.bin-' + $(this).children('.type').html() + '').show();
        });
    });

</script>

调用灯箱代码:-

<script>
    //Lightbox Function
    $(document).ready(function () {
        $(".various").fancybox({
            maxWidth: 1000,
            maxHeight: 800,
            fitToView: false,
            width: '80%',
            height: '80%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });
</script>

如果您需要任何其他信息,请告诉我。

谢谢你

4

1 回答 1

0

感谢大伙调查!我得到了解决方案!

我所做的只是:-

<a class="various" href="#inline">在每个外面都给了标签

<div class="bin">... </div></a>

前任:-

<div class="bin" data-cols="5" data-rows="4">
        <div class="number">S3</div>
        <div class="type">5x4</div>
        <div class="description">Est. capacity: 34.5 packages</div>
    </div>

并提供id="inline"给正在生成动态表的 div:-

<div class="beanStructure overflowHidden" id="inline">
    <div class="tableContainer">
        <table class="container">
        </table>
    </div>
</div>

再次感谢

于 2013-09-10T15:02:08.837 回答