轻巧的jQuery提示框插件Tipso演示-阿里云开发者社区

轻巧的jQuery提示框插件Tipso演示
2016-02-24 2223
版权
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
这里写图片描述
<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <title>轻巧的jQuery提示框插件Tipso演示_dowebok</title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/tipso.min.js"></script>
        <link rel="stylesheet" href="css/tipso.min.css">
        <style>
            * {
                margin: 0;
                padding: 0;

            }

            body {
                font-family: "Microsoft Yahei";
            }

            h1 {
                padding: 45px 0;
                font: 32px "Microsoft Yahei";
                text-align: center;
                border: 1px solid red;
            }

            .dowebok {
                width: 500px;
                margin: 30px auto 0;
                border: 1px solid red;
            }

            .dowebok h2 {
                padding: 20px;
                font-size: 16px;
                font-weight: 400;
                background-color: #f5f5f5;
                border: 1px solid blue;
            }

            .dowebok .inner {
                padding: 100px;
                text-align: center;
                border: 3px solid black;
            }

            .dowebok p {
                position: relative;
                font-size: 14px;
                color: blueviolet;
                border: 1px solid red;
                height: 30px;
            }

            .dowebok input {
                position: absolute; 
                top: 0px;
                left: 20px;
                margin-left: 40px;

                padding: 5px;
                border: 1px solid green;
                font-family: "Microsoft Yahei";
            }
            .dowebok a{
                margin-top: 4px;
                float: right;
                margin-right: 30px;
            }
            img{
                border: 2px solid blueviolet;
            }
        </style>
    </head>

    <body>
        <h1>轻巧的jQuery提示框插件Tipso演示</h1>

        <div class="dowebok">
            <h2>1、默认</h2>
            <div class="inner"><span id="tip1" data-tipso="dowebok.com1">Tipso</span></div>
        </div>

        <div class="dowebok">
            <h2>2、左边显示</h2>
            <div class="inner"><span id="tip2" data-tipso="dowebok.com">Tipso</span></div>
        </div>

        <div class="dowebok">
            <h2>3、背景颜色</h2>
            <div class="inner"><span id="tip3" data-tipso="dowebok.com">Tipso</span></div>
        </div>

        <div class="dowebok">
            <h2>4、使用title属性</h2>
            <div class="inner"><span id="tip4" title="内容来自 title 属性">Tipso</span></div>
        </div>

        <div class="dowebok">
            <h2>5、单击显示/隐藏</h2>
            <div class="inner">
                <span id="tip5" data-tipso="dowebok">Tipso</span>
                <p><a id="btn5" href="javascript:">显示</a></p>
            </div>
        </div>

        <div class="dowebok">
            <h2>6、更新内容</h2>
            <div class="inner">
                <span id="tip6" data-tipso="dowebok.com2">Tipso</span>
                <p>
                    <input type="text"><a id="btn6" href="javascript:">更新</a>
                </p>
            </div>
        </div>

        <div class="dowebok">
            <h2>7、在图片上使用</h2>
            <div class="inner">
                <img id="tip7" src="images/tipso.png" alt="111" data-tipso="dowebok.com">
            </div>
        </div>

        <div class="dowebok">
            <h2>8、回调函数</h2>
            <div class="inner">
                <span id="tip8" data-tipso="dowebok.com">Tipso</span>
                <p>状态：<em id="status"></em></p>
            </div>
        </div>

        <script>
            $(function() {
                // 1
                $('#tip1').tipso({
                    useTitle: false
                });
                // 2
                $('#tip2').tipso({
                    useTitle: false,
                    position: 'bottom'
                //  position: 'left'   //right,top
                });
                // 3
                $('#tip3').tipso({
                    useTitle: false,
                    background: 'tomato'
                });
                // 4
                $('#tip4').tipso();
                // 5
                $('#tip5').tipso({
                    useTitle: false
                });
                $('#btn5').on({
                    click: function(e) {
                        if ($(this).text() == '显示') {
                            $(this).text('隐藏');
                            $('#tip5').tipso('show');
                        } else {
                            $(this).text('显示');
                            $('#tip5').tipso('hide');
                        }
                        e.preventDefault();
                    }
                });
                // 6
                $('#tip6').tipso({
                    useTitle: false
                });
                $('#btn6').on('click', function() {
                    var $val = $(this).prev().val();
                    if ($val) {
                        $('#tip6').tipso('update', 'content', $val);
                    }
                });
                // 7
                $('#tip7').tipso({
                    useTitle: false
                });
                // 8
                $('#tip8').tipso({
                    useTitle: false,
                    onBeforeShow: function() {
                        alert(1);
                        $('#status').html('beforeShow');
                    },
                    onShow: function() {
                        alert(2);
                        $('#status').html('show');

                    },
                    onHide: function() {
                        $('#status').html('hide');
                        alert(3);
                    }
                });
            });
        </script>

        <p class="vad">
            <a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>
            <a href="http://www.dowebok.com/147.html" target="_blank">说 明</a>
            <a href="http://www.dowebok.com/147.html" target="_blank">下 载</a>
        </p>

        <!-- 以下是统计及其他信息，与演示无关，不必理会 -->
        <style>
            .vad {
                margin: 50px 0 30px;
                font-family: Consolas, arial, 宋体, sans-serif;
                text-align: center;
            }

            .vad a {
                display: inline-block;
                height: 36px;
                line-height: 36px;
                margin: 0 5px;
                padding: 0 50px;
                font-size: 14px;
                text-align: center;
                color: #eee;
                text-decoration: none;
                background-color: #222;
            }

            .vad a:hover {
                color: #fff;
                background-color: #000;
            }
        </style>

    </body>

</html>
轻巧的jQuery提示框插件Tipso演示

热门文章

最新文章

相关课程

相关电子书

相关实验场景
