next-prev.html | searchcode

/gallery/spotlight/1.1/next-prev.html

https://github.com/akecn/kissy-gallery
HTML | 317 lines | 252 code | 43 blank | 22 comment | 0 complexity | c749ba455cf9b6edcefe207cfcb2a884 MD5 | raw file

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<style>

    body {
        margin: 0;
        padding: 0;
    }

    div.mask-target {
        display: inline-block;
        border-radius: 3px;
        border: 1px solid #A4D3F2;
        width: 30%;
        height: 200px;
        float: left;
        margin: 100px;
        *display: inline;
        zoom: 1
    }

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
        margin: 0;
        padding: 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .popup {
        position: absolute;
        z-index: 50;
        border-collapse: collapse;
        visibility: hidden;
    }

    .popup td.corner {
        height: 15px;
        width: 19px;
    }

    .popup td#topleft {
        background-image: url(../tmp/images/bubble-1.png);
    }

    .popup td.top {
        background-image: url(../tmp/images/bubble-2.png);
    }

    .popup td#topright {
        background-image: url(../tmp/images/bubble-3.png);
    }

    .popup td.left {
        background-image: url(../tmp/images/bubble-4.png);
    }

    .popup td.right {
        background-image: url(../tmp/images/bubble-5.png);
    }

    .popup td#bottomleft {
        background-image: url(../tmp/images/bubble-6.png);
    }

    .popup td.bottom {
        background-image: url(../tmp/images/bubble-7.png);
        text-align: center;
    }

    .popup td.bottom img {
        display: block;
        margin: 0 auto;
    }

    .popup td#bottomright {
        background-image: url(../tmp/images/bubble-8.png);
    }

    .popup table.popup-contents {
        font-size: 12px;
        line-height: 1.2em;
        background-color: #fff;
        color: #666;
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    }

    table.popup-contents th {
        text-align: right;
        text-transform: lowercase;
    }

    table.popup-contents td {
        text-align: left;
    }

    tr#release-notes th {
        text-align: left;
        text-indent: -9999px;
        height: 17px;
    }

    tr#release-notes td a {
        color: #333;
    }

    .ks-overlay {
        position: absolute;
        left: -9999px;
        top: -9999px;
        z-index: 9999;
    }

    #pp-content {
        padding: 10px
    }

</style>
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy.js" charset="utf-8"></script>
<script>
    KISSY.config({
        packages: [
            {
                name: "gallery",
                tag: "20111220",
                path: "../../../", // cdn上适当修改对应路径
                charset: "utf-8"
            }
        ]
    });

    KISSY.use('gallery/spotlight/1.1/,overlay', function (S, Spotlight, overlay) {
        S.ready(function () {

            var nodes = S.DOM.query('.mask-target')
                    , arrNode = []
                    , nextBtns = S.all('button.next')
                    , prevBtns = S.all('button.prev')
                    , listText = [];

            var popup = new overlay.Popup(
                            {
                                srcNode: S.get('#drop')
                            }
                    )
                    ;
            S.log(popup.get("el"));
            popup.on('show', function () {
                var el = popup.get('el') , top = el.offset().top;
                el.stop()

                el.css({top: top + 20, opacity: 0})
                S.Anim(el, {
                    opacity: 1, top: top
                }, .2).run()


            })
            S.each(nodes, function (item, i) {
                arrNode.push({node: item});
                listText.push(Array(10).join(i + ''))
            })
            popup.align(
                    S.one(nodes[0])
                    , ['tc', 'bc']
                    , [0, 20]
            );


            var spot = new Spotlight({
                quene: arrNode, anim: {
                    duration: .1
                }, opacity: .3, zIndex: 9000, toggleOnAnim: false, listeners: {
                    hide: function () {
                        nextBtns.attr('disabled', true);
                        prevBtns.attr('disabled', true);
                        popup.hide();
                    }, focusTo: function (e) {
                        popup.hide();
                        S.one('#pp-content').html(listText[e.index])
                        setTimeout(function () {
                            popup.align(
                                    S.one(e.nodeTarget)
                                    , ['tc', 'bc']
                                    , [0, 20]
                            );
                            popup.show();
                            nextBtns.attr('disabled', false);
                            prevBtns.attr('disabled', false);

                        }, 300)

                    }
                }
            });
            S.one('button').on('click', function () {
                spot.start();

            });
            nextBtns.attr('disabled', true).on('click', function () {
                spot.canNext() ? spot.nextFocus() : spot.end();
            });
            prevBtns.attr('disabled', true).on('click', function () {
                spot.canPrevious() ? spot.prevFocus() : spot.end();
            });


        })
    })
</script>
</head>
<body>
<button>start</button>
<div>

    <div class="mask-target">
        <img src="http://a.tbcdn.cn/s/kissy/logo.png"/>

        <div>
            <button class="next">next</button>
            <button class="prev">prev</button>
        </div>
    </div>
    <div class="mask-target">
        <img src="http://a.tbcdn.cn/s/kissy/logo.png"/>

        <div>
            <button class="next">next</button>
            <button class="prev">prev</button>
        </div>
    </div>
    <div class="mask-target">
        <img src="http://a.tbcdn.cn/s/kissy/logo.png"/>

        <div>
            <button class="next">next</button>
            <button class="prev">prev</button>
        </div>
    </div>
    <div class="mask-target">
        <img src="http://a.tbcdn.cn/s/kissy/logo.png"/>

        <div>
            <button class="next">next</button>
            <button class="prev">prev</button>
        </div>
    </div>
    <div class="mask-target">
        <img src="http://a.tbcdn.cn/s/kissy/logo.png"/>

        <div>
            <button class="next">next</button>
            <button class="prev">prev</button>
        </div>
    </div>
    <div class="mask-target">
        <img src="http://a.tbcdn.cn/s/kissy/logo.png"/>

        <div>
            <button class="next">next</button>
            <button class="prev">prev</button>
        </div>
    </div>
</div>
<div class="popup ks-popup ks-overlay ks-ext-position" id="drop">
    <div class="ks-contentbox ">
        <table>
            <tbody>
            <tr>
                <td class="corner" id="topleft"></td>
                <td class="top"></td>
                <td class="corner" id="topright"></td>
            </tr>
            <tr>
                <td class="left"></td>
                <td>
                    <div class="popup-contents" id="pp-content" style="background-color:#fff"></div>
                    <!-- <table class="popup-contents">
                                        <tbody><tr>
                                            <th>File:</th>
                                            <td>coda 1.7.zip</td>
                                        </tr>
                                        <tr>
                                            <th>Date:</th>
                                            <td>11/5/10</td>
                                        </tr>
                                        <tr>
                                            <th>Size:</th>
                                            <td>20 MB</td>
                                        </tr>
                                        <tr>
                                            <th>Req:</th>
                                            <td>Mac OS X 10.4+</td>
                                        </tr>
                                        <tr id="release-notes">
                                            <th>Read the release notes:</th>
                                            <td><a href="#" title="Read the release notes">release notes</a></td>
                                        </tr>
                                    </tbody></table> -->
                </td>
                <td class="right"></td>
            </tr>
            <tr>
                <td id="bottomleft" class="corner"></td>
                <td class="bottom"><img src="../tmp/images/bubble-tail2.png" width="30" height="29" alt="popup tail"></td>
                <td class="corner" id="bottomright"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>