صناديق css مع تقنية ال jquery
في هذا الموضوع سوف أتحدث عن الأساسيات
التي تساعد على عمل تصميم المثالي لمستخدمي بلوجر
و هو عبارة عن رسالة مميزة تحتوي على مبادئ أساسية للتصميم
و هي css , HTML , jquery
المثال سيكون عن إضافة لعمل تأثيرات على اغلاق رسالة أو تنبيه
فكما قلت سابقا
مكتبة jQuery تتيح لك إمكانية عمل الإضافات بكل سهولة
وهذا يمنح المطورين فرصة لتقديم عمل مبني على مكتبة رائعة
ندخل في صلب الموضوع...
سبق ووضع الاخ ذؤيب موضوع عن كيفية
اداراج صندوق او رسالة مميزة بتقنية ال CSS
لكن اليوم هته التقنية سوف ندمجها بمكتبة الjquery
لتعطي ثأتير رهيب و ميز
مصدر الفكرة هو عبارة عن دالة بسيطة سوف تدمج مع مكتبة الjQuery
يمكنك فهم الدالة من هنا..
أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم " تحرير HTML "
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة.
ثالثا : ضع علامة في خانة توسيع القوالب .
قبل كل شيء سيكون محتوى الاضافة مخفي بدون الستايل
لدالك عليك البحث عن هذا الوسم
]]></b:skin>و نضع قبله تماما هدا الكود
/*MESSAGE BOX WITH ICONS*/
.msg-box, .ok-box, .success-box, .warning-box, .error-box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.msg-box{
border:solid 1px #8e8e04;
background:#FFFFCC url(images/msg.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.ok-box{
border:solid 1px #27739d;
background:#94d5fb url(images/ok.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.success-box{
border:solid 1px #90ac13;
background:#eef4d3 url(images/success.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.warning-box{
border:solid 1px #ba4c0e;
background:#ffcaa4 url(images/warning.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.error-box{
border:solid 1px #dc2727;
background:#f2abab url(images/error.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
/*MESSAGE CSS BOX*/
.yellow-box{
border:solid 1px #8e8e04;
background:#FFFFCC;
color:#222222;
padding:6px;
text-align:center;
}
.blue-box{
border:solid 1px #27739d;
background:#94d5fb;
color:#222222;
padding:6px;
text-align:center;
}
.green-box{
border:solid 1px #90ac13;
background:#eef4d3;
color:#222222;
padding:6px;
text-align:center;
}
.orange-box{
border:solid 1px #ba4c0e;
background:#ffcaa4;
color:#222222;
padding:6px;
text-align:center;
}
.red-box{
border:solid 1px #dc2727;
background:#f2abab;
color:#222222;
padding:6px;
text-align:center;
}
/*MESSAGE BOX WITH ICONS*/
.msg-box, .ok-box, .success-box, .warning-box, .error-box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.msg-box{
border:solid 1px #8e8e04;
background:#FFFFCC url(images/msg.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.ok-box{
border:solid 1px #27739d;
background:#94d5fb url(images/ok.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.success-box{
border:solid 1px #90ac13;
background:#eef4d3 url(images/success.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.warning-box{
border:solid 1px #ba4c0e;
background:#ffcaa4 url(images/warning.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.error-box{
border:solid 1px #dc2727;
background:#f2abab url(images/error.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
/*MESSAGE CSS BOX*/
.yellow-box{
border:solid 1px #8e8e04;
background:#FFFFCC;
color:#222222;
padding:6px;
text-align:center;
}
.blue-box{
border:solid 1px #27739d;
background:#94d5fb;
color:#222222;
padding:6px;
text-align:center;
}
.green-box{
border:solid 1px #90ac13;
background:#eef4d3;
color:#222222;
padding:6px;
text-align:center;
}
.orange-box{
border:solid 1px #ba4c0e;
background:#ffcaa4;
color:#222222;
padding:6px;
text-align:center;
}
.red-box{
border:solid 1px #dc2727;
background:#f2abab;
color:#222222;
padding:6px;
text-align:center;
}
إستخدام مكتبة jQuery في عمل تأثيرات
الآن نأتي لجزء التأثيرات وباستخدام مكتبة jQuery،
لاحظ أنك تستطيع إستدعاء المكتبة مباشرة
عبر الموقع بوضع هذه الشفرة لديك وهو ما سيوفر عليك الوقت:
<script src='http://blogspacetech.googlecode.com/files/jquery-1.2.6.js' type='text/javascript'/>
أما بالنسبة لعمل الثأتير فسيكون عن طريق دالة
<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ setTimeout(function(){ $(".Messages").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(500);}, 5000); }); //]]> </script>
ليكون لك الكود الأخير الدي سوف تضعه تحت
</head> هو
تم الانتهاء من الشروط الأساسية
<script src='http://blogspacetech.googlecode.com/files/jquery-1.2.6.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ setTimeout(function(){ $(".Messages").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(500);}, 5000); }); //]]> </script>
تم الانتهاء من الشروط الأساسية
أخيرا : استعرض مدونتك ثم احفظ قالبك.
تطبيق الإضافة
قم بكتابة تدوينتك بالطريقة المعتادة
و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,
أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة
<div class="ok-box Messages">
أنا رسالة داخل صندوق أزرق</div>طبعا ok-box تميز الصندوق الأزرق ذو الأيقونة،
إن أردت استعمال صندوق آخر ما عليك سوى
استبدالها بأخرى مميزة للصندوق المطلوب.مثلا صندوق الخطأ الأحمر تميزه error-box
و صندوق التحذير البرتقالي تميزه warning-box ...
روابط استفدت منها في كتابة الموضوع:
|
-
بالعكس اخي محمد فالوفاء كان من عندك
لانك قمت بتقدير المجهود
و اهتممت بمن كان وفيا لك
بارك الله فيك أخي الكريم و رمضان مبارك لك و للعائلة الكريمة
تحياتي لك
-
جميل جدًا
ولكن لدي ملاحظة بسيطة وهي انك استخدمت اسطر كثيرة جدًا
اظن انه يمكن اختصارها في اقل من ستة اسطر وبنفس الوظيفة ودون استخدام الجي كويري
شكرًا لك أخي الحبيب :)
جميل جدا أخي خالد وعدت فوفيت . تأثير ممتاز و الأهم طريقة عمل هذا التأثير فهي حقا ستفيدني. جزاك الله خيرا و رمضامن مبارك سعيد أدخله الله عليكم بموفور الصحة و الهناء.
تقبل تحيات أخيك محمد.