kendo ui 左侧弹出分享框 

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/fx/slidein#">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    

</head>
<body>
<div id="example">
    <div id="slide-in-content">
        <div id="slide-in-share">
            <a id="slide-in-handle" href="#">Share</a>
            <ul>
                <li><a class="share-button share-facebook" href="#">Share in Facebook</a></li>
                <li><a class="share-button share-twitter" href="#">Post in Twitter</a></li>
                <li><a class="share-button share-tumblr" href="#">Reblog in Tumblr</a></li>
            </ul>
        </div>
    </div>
</div>

<style>
    #slide-in-content {
        width: 600px;
        height: 558px;
        background: transparent url(../content/web/fx/blogs-screenshot.png) no-repeat 50% 50%;
        border: 1px solid #ededed;
        -o-box-shadow: 0 0 5px rgba(0,0,0,.15);
        -moz-box-shadow: 0 0 5px rgba(0,0,0,.15);
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
        box-shadow: 0 0 5px rgba(0,0,0,.15);
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    #slide-in-share {
        position: absolute;
        top: 100px;
        left: 0;
        width: 60px;
        margin-left: -60px;
        border: solid #e9e9e9;
        border-width: 1px 1px 1px 0;
    }

    #slide-in-handle {
        position: absolute;
        left: 60px;
        width: 31px;
        height: 69px;
        background: #1b7458 url(../content/web/fx/share-handle.png) no-repeat 50% 50%;
        color: #fff;
        text-indent: -999em;
    }

    #slide-in-share ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 269px;
        background: #fff;
        text-align: center;
    }

    #slide-in-share li {
        margin: 0 2px;
    }

    .share-button {
        background: #fff url(../content/web/fx/social-buttons.png) no-repeat 50% 50%;
        border: 4px solid #a6a6a6;
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-top: 17px;

        -webkit-border-radius: 21px;
        -moz-border-radius: 21px;
        border-radius: 21px;
        text-indent: -999em;
        color: #a6a6a6;
    }

    .share-button:hover {
        border-color: #333;
    }

    .share-facebook { background-position: 50% -2px; }
    .share-twitter { background-position: 50% -40px; }
    .share-tumblr { background-position: 50% -78px; }

    .share-facebook:hover { border-color: #3b5998; }
    .share-twitter:hover { border-color: #00c0f7; }
    .share-tumblr:hover { border-color: #2b4865; }
</style>

<script>
    var slide = kendo.fx($("#slide-in-share")).slideIn("left"),
        visible = true;

    $("#slide-in-handle").click(function(e) {
        if (visible) {
            slide.reverse();
        } else {
            slide.play();
        }
        visible = !visible;
        e.preventDefault();
    });

</script>


</body>
</html>

 

posted @ 2018-09-28 21:47  星星c#  阅读(148)  评论(0)    收藏  举报