آموزش jQuery UI قسمت دهم کار با Tooltip
0 0

آموزش jQuery UI قسمت دهم کار با Tooltip


آموزش jQuery UI قسمت دهم کار با Tooltip

در این پست در ادامه آموزش jQuery UI به مبحث Tooltip می پردازیم.

Tooltip یا عنوان

در مثال  زیر برای تگ input و a ابتدا برای آنها آی دی مشخص کردیم و سپس توسط خاصیت title یک متن برای آن نوشتیم و در نهایت توسط یک خط کد jquery تابع tooltip() را صدا زدیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(function () {
                $("#tooltip-1").tooltip();
                $("#tooltip-2").tooltip();
            });
        });
    </script>
</head>
<body>
    <label for="name">Name:</label>
    <input id="tooltip-1" title="Enter You name">
    <p>
        <a id="tooltip-2" href="#" title="Nice tooltip">
            I also have a tooltip
        </a>
    </p>
</body>
</html>

در مثال زیر به جای نوشتن متن tooltip در خاصیت title هر تگ خودمان توسط دستور content متن مورد نظر را نمایش دادیم و همچنین توسط دستور disabled خاصیت tooltip را برای تگ input دومی غیر فعال کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(function () {
                $("#tooltip-3").tooltip({
                    content: "<strong>Hi!</strong>",
                    track: true
                }),
                $("#tooltip-4").tooltip({
                    disabled: true
                });
            });
        });
    </script>
</head>
<body>
    <label for="name">Message:</label>
    <input id="tooltip-3" title="tooltip"><br><br><br>
    <label for="name">Tooltip disabled for me:</label>
    <input id="tooltip-4" title="tooltip">
</body>
</html>

تنظیمات بیشتر برای tooltip

در مثال زیر محل نمایش tooltip را مشخص کردیم

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(function () {
                $("#tooltip-7").tooltip({
                    position: {
                        my: "center bottom",
                        at: "center top-10",
                        collision: "none"
                    }
                });
            });
        });
    </script>
    <style>
        body {
            margin-top: 100px;
        }

        .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
        }

        .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
        }

        .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
        }
    </style>
</head>
<body>
    <label for="name">Enter Date of Birth:</label>
    <input id="tooltip-7" title="Please use MM.DD.YY format.">
</body>
</html>

در مثال زیر زمانی که روی دکمه کلیک می شود tooltip را به نمایش در می آید.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(function () {
                $("#tooltip-8").tooltip({
                    //use 'of' to link the tooltip to your specified input
                    position: { of: '#myInput', my: 'left center', at: 'left center' },
                }),
                $('#myBtn').click(function () {
                    $('#tooltip-8').tooltip("open");
                });
            });
        });
    </script>

</head>
<body>
    <a id="tooltip-8" title="Message" href="#"></a>
    <input id="myInput" type="text" name="myInput" value="0" size="7" />
    <input id="myBtn" type="submit" name="myBtn" value="myBtn" class="myBtn" />
</body>
</html>

در مثال زیر تمام موارد قبل را به صورت یکجا در یک کد نوشتیم و همچنین نحوه نمایش tooltip را توسط خاصیت show مشخص کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(function () {
                $('.tooltip-9').tooltip({
                    items: 'a.tooltip-9',
                    content: 'Hello welcome…',
                    show: "slideDown", // show immediately
                    open: function (event, ui) {
                        ui.tooltip.hover(
                        function () {
                            $(this).fadeTo("slow", 0.5);
                        });
                    }
                });
            });
            $(function () {
                $('.tooltip-10').tooltip({
                    items: 'a.tooltip-10',
                    content: 'Welcome to TutorialsPoint…',
                    show: "fold",
                    close: function (event, ui) {
                        ui.tooltip.hover(function () {
                            $(this).stop(true).fadeTo(500, 1);
                        },
                        function () {
                            $(this).fadeOut('500', function () {
                                $(this).remove();
                            });
                        });
                    }
                });
            });
        });
    </script>

</head>
<body style="padding:100px;">
    <div id="target">
        <a href="#" class="tooltip-9">Hover over me!</a>
        <a href="#" class="tooltip-10">Hover over me too!</a>
    </div>
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب JqueryUI
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۷ مرداد ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم