0
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>
این مطلب را به اشتراک بگذارید...
نظر / سوال