使用JQuery / JQuery UI自定义水平手风琴 - 宽度问题

时间：2011-06-27 09:31:58

标签： jquery html jquery-ui horizontal-accordion

我使用JQuery和JQuery UI编写了一个自定义水平手风琴。以前我用SlideUp和SlideDown编写了垂直手风琴，效果非常好。从某种意义上说，它们都被同时调用，所以当一个向上滑动（高度减小）时，另一个向下滑动（高度增加）并且它是平滑的。

但是在水平手风琴中，我必须向左滑动。所以我使用JQuery UI Toggle（'slide'）来做到这一点。两个切换功能同时被调用，但问题是控件的WIDTH在滑入时没有减少。宽度保持原样，因为完整的幻灯片已完成并且突然隐藏

这是我的代码 - 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Accordion</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">

        //temporary variables

        //append PCID at the end
        var currentOpenContent000;
        var pcid000 = '000';
        var time = 1000;
        var controlwidth = 600;
        var contentWidth = 400;
        var controlHeight = 400;

        $(document).ready(function () {
            autoScale();
            initializeControl();
            createEvents();
        });

        function autoScale() {
        }

        function setNormalsppheaderStyle(element) {
            $(element).css({
                'background-color': '#347235',
                'color': '#FFFFFF'
            });
        }

        function setHoversppheaderStyle(element) {
            $(element).css({
                'background-color': 'orange',
                'color': '#FFFFFF'
            });
        }

        function setSelectedsppheaderStyle(element) {
            $(element).css({
                'background-color': 'orange',
                'color': '#FFFFFF'
            });
        }

        function createEvents() {
            $('div[id*=header]').click(function () {
                if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
                    return;

                //hide old item
                setNormalsppheaderStyle($('#' + currentOpenContent000.replace('content', 'header')));
                $('#' + currentOpenContent000).toggle('slide');

                var cHeader = $(this).attr('id');
                var cContent = $(this).attr('id').replace('header', 'content');

                //show new item
                setSelectedsppheaderStyle($(this));
                $('#' + cContent).toggle('slide');
                currentOpenContent000 = cContent;

            });

            $('div[id*=header]').mouseover(function () {
                setHoversppheaderStyle($(this));
            });

            $('div[id*=header]').mouseout(function () {
                if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
                    return;
                setNormalsppheaderStyle($(this));
            });
        }

        function initializeControl() {
            var first = $('#' + pcid000 + 'content1');
            first.toggle('slide');
            currentOpenContent000 = pcid000 + 'content1';
            setSelectedsppheaderStyle($('#' + pcid000 + 'header1'));
        }
    </script>
</head>
<body>
    <div style="border: 1px solid red; padding: 1px; float: left" id="000outer">
        <table cellpadding="1" cellspacing="0" style="margin: 0; padding: 0">
            <tr>
                <!--Loop this content-->
                <td>
                    <div id="000header1" style="background-color: darkgreen; width: 30px; height: 396px;">
                    </div>
                </td>
                <td>
                    <div id="000content1" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header2" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content2" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header3" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content3" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
                <td>
                    <div id="000header4" style="background-color: darkgreen; width: 30px; height: 396px">
                    </div>
                </td>
                <td>
                    <div id="000content4" style="background-color: silver; width: 400px; height: 396px;
                        display: none">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

您可以保存此标记并运行并检查它。有什么想法吗？

2 个答案:

答案 0 :(得分：4)

你的标记有点奇怪，所以我做了一点改动（我不是CSS的专家）。链接到游乐场：http://jsfiddle.net/CoolEsh/8LNkG/6/

HTML：

<div style="border: 1px solid red; padding: 1px; float: left" id="outer">

    <div id="header1" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content1" style="background-color: silver; width: 0; height: 396px; float:left;">
    </div>
    <div id="header2" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content2" style="background-color: silver; height: 396px; float:left;">
    </div>
    <div id="header3" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content3" style="background-color: silver; height: 396px; float:left;">
    </div>
    <div id="header4" style="background-color: darkgreen; width: 30px; height: 396px; float:left; margin:1px;">
    </div>
    <div id="content4" style="background-color: silver; height: 396px; float:left;">
    </div>

</div>

JS：

//temporary variables

//append PCID at the end
var currentOpenContent000;
var time = 1000;
var controlwidth = 600;
var contentWidth = 400;
var controlHeight = 400;

$(document).ready(function () {
    autoScale();
    initializeControl();
    createEvents();
});

function autoScale() {
}

function setNormalsppheaderStyle(element) {
    element.css({
        'background-color': '#347235',
        'color': '#FFFFFF'
    });
}

function setHoversppheaderStyle(element) {
    element.css({
        'background-color': 'orange',
        'color': '#FFFFFF'
    });
}

function setSelectedsppheaderStyle(element) {
    element.css({
        'background-color': 'orange',
        'color': '#FFFFFF'
    });
}

function createEvents() {
    $('div[id^="header"]').click(function () {
        if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
            return;

        //hide old item
        setNormalsppheaderStyle($('#' + currentOpenContent000.replace('content', 'header')));
        $('#' + currentOpenContent000).animate( { width: '0' }, 500 );

        var cHeader = $(this).attr('id');
        var cContent = $(this).attr('id').replace('header', 'content');

        //show new item
        setSelectedsppheaderStyle($(this));
        $('#' + cContent).animate( { width: '400px' }, 500 );
        currentOpenContent000 = cContent;

    });

    $('div[id^="header"]').mouseover(function () {
        setHoversppheaderStyle($(this));
    });

    $('div[id^="header"]').mouseout(function () {
        if (currentOpenContent000 == $(this).attr('id').replace('header', 'content'))
            return;
        setNormalsppheaderStyle($(this));
    });
}

function initializeControl() {
    var first = $('#content1');
    first.show().animate( { width: '400px' }, 500 );
    currentOpenContent000 = 'content1';
    setSelectedsppheaderStyle($('#header1'));
}

答案 1 :(得分：0)

由于在IE中内容框中的数据有些重叠，我必须在动画指令旁边添加隐藏和显示功能

$（'＃'+ currentOpenContent000）.hide（'1000'）; 之前： $（'＃'+ currentOpenContent000）.animate（{width：'0'}，600）;

和

$（'＃'+ cContent）。show（）; 后： $（'＃'+ cContent）.animate（{width：'460px'}，600）;

相关问题
最新问题