轻巧的jQuery提示框插件Tipso演示

简介:

这里写图片描述

<!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>
目录
相关文章
|
5月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
2天前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
13 4
jQuery Cookie 插件
|
4月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
46 1
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
4月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
26 0
|
5月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
48 0
|
5月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
89 1
|
5月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
52 0
|
11月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
75 0
|
11月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
71 0