الرئيسية » دروس منوعة » jQuery : خاصية جميلة للعناوين .. شرح
من أجمل المميزات التي تضاف على أي قالب هي أستخدام مميزات jQuery الأكثر من جميلة والأفضل لأي مصمم في هذا الشرح سوف نتعلم ميزة جميلة لظهور وصف لروابط أو العناوين في أي سكربت سواء الووردبريس أو غيره من السكربتات المنتشرة .. صورة توضيحية عن هذا الشرح ..
jQuery Clean and Simple Tooltips: gips
يوجد ملف مرفق في نهاية الموضوع عن هذه الميزة بشكل كامل …
- طريقة تركيبها أو عملها كتالي :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Clean and Minimal Tooltip Plugin: Gips</title>
<link href="css/gips.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/gips.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input#purple').gips({ 'theme': 'purple', autoHide: true, text: 'This is purple tooltip, auto hide after pausess time elapses.' });
$('input#green').gips({ 'theme': 'green', placement: 'left' });
$('input#yellow').gips({ 'theme': 'yellow', autoHide: true, placement: 'right' });
$('input#red').gips({ 'theme': 'red', placement: 'bottom' });
});
</script>
</head>
<body>
<div id="center">
<div id="header">
</div>
<div id="demo">
<input type="text" value="Purple Tooltip Here." id="purple" />
<input type="text" value="Green Tooltip Here." id="green" />
<input type="text" value="Yellow Tooltip Here." id="yellow" />
<input type="text" value="Red Tooltip Here." id="red" />
</div>
</div>
</body>
</html>
لتحميل هذه العمل : http://www.tuufy.com/up/do.php?id=781
تعليق شاركنا 2 الأن. (RSS 2.0) أضف تعليق
السلام عليكم
يعطيك العافيه .. ولكن ارجو التوضيح اكثر واي يتم وضع الكود وشكرا
حياك الله اخي الكريم
الكود مرفق فيه جميع الملفات .. طبعاً على حسب موقعك هل هو منتدى او مجلة يتم اضافة المرفقات بعد تحرير ملفاتها واخذ الكواد منها بحيث ننسخ ما بداخل Css الى استايل الموقع ونفس الشيء مع php ننسخ ما بداخله ونضعه في المكان المناسب لنا …
والكود الموجود في الاعلى يوضح ذلك .. تحياتي