Question

这是我到目前为止所做的。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Open on hoverintent</title>
    <link rel="stylesheet" href="jquery.ui.all.css">
    <script src="jquery-1.9.1.js"></script>
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.ui.accordion.js"></script>
    <link rel="stylesheet" href="demos.css">
    <script src="jquery-ui.js"></script>
    <script>
        $(function() {
            $("#accordion").accordion({
                event: "click hoverintent",
                heightStyle: "content"
            });
        });

        $.event.special.hoverintent = {
            setup: function() {
                $(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
            },
            teardown: function() {
                $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
            },
            handler: function(event) {
                var currentX, currentY, timeout,
                        args = arguments,
                        target = $(event.target),
                        previousX = event.pageX,
                        previousY = event.pageY;

                function track(event) {
                    currentX = event.pageX;
                    currentY = event.pageY;
                }
                ;

                function clear() {
                    target
                            .unbind("mousemove", track)
                            .unbind("mouseout", clear);
                    clearTimeout(timeout);
                }

                function handler() {
                    var prop,
                            orig = event;

                    if ((Math.abs(previousX - currentX) +
                            Math.abs(previousY - currentY)) < 7) {
                        clear();

                        event = $.Event("hoverintent");
                        for (prop in orig) {
                            if (!(prop in event)) {
                                event[ prop ] = orig[ prop ];
                            }
                        }
                        // Prevent accessing the original event since the new event
                        // is fired asynchronously and the old event is no longer
                        // usable (#6028)
                        delete event.originalEvent;

                        target.trigger(event);
                    } else {
                        previousX = currentX;
                        previousY = currentY;
                        timeout = setTimeout(handler, 100);
                    }
                }

                timeout = setTimeout(handler, 100);
                target.bind({
                    mousemove: track,
                    mouseout: clear
                });
            }
        };
    </script>
</head>
<body>
    <div id="jq">

    <div id="accordion">
        <h3>title</h3>
        <div>
            content
        </div>
        <h3>title</h3>
        <div>
           content
        </div>

    </div>
    </div>
    </body>
</html>

是否可以将其转为水平？我尝试过在网上找到的其他代码，但限制是长度和宽度都是固定的，当然还有设计。我更喜欢默认设计。：）

如何让jquery ui手风琴水平？

0 个答案: