حركة جيكوري js/jquery جميلة جدا على زر اضافة رد و موضوع جديد

Mohamed Ali

[ VIP ]
24 مارس 2010
670
4
0

السلام عليكم ورحمة الله وبركاته

كيفكم اخواني الغالين


بعد ما طرحت الاستايل الجديد سألني بعض الاخوة على الحركة التي في زر اضافة رد وموضوع جديد


لذلك قمت بطرحها في هذا الموضوع


لمشاهدة مثال مباشر من خلال المنتدى التالي وهو احد المنتديات الي ركب الاستايل


سمو الحرف


مرر الماوس على اضافة موضوع جديد وتشاهد الحركة


الطريقة كالتالي


اولا


حمل الملف المرفق وبعد فك الضغط عنه ارفع المجلدات الي في داخله الى داخل مجلد منتداك واقبل الاستبدال


ضع التالي في نهاية قالب headinclude


PHP:
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 

      <script type="text/javascript">
        $(document).ready(function(){
            $(".button").hover(function(){
                $(".button img")
                .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
                .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
                .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
            });
        }); 
    </script>
ضع التالي في تعاريف css
PHP:
a.button1 {padding: 4px 10px 3px 25px;border: solid 1px  #3e6d99;position: relative;cursor: pointer;display:  inline-block;background-image: url( 'images/buttons/bkg.png'  );background-repeat: repeat-x;font-size: 11px;height:  16px;text-decoration: none;color: #ffffff;-moz-border-radius-bottomleft:  5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-topleft:  5px;-moz-border-radius-topright: 5px;}
.button1 img { position: absolute;top: -4px;left: -12px;border: none;}
a.button1:hover {color: #00386d;}
الان التعديل على القوالب دائما خذ نسخة من القالب قبل التعديل

افتح قالب FORUMDISPLAY


ابحث عن التالي


PHP:
<td class="smallfont"><if  condition="$show['newthreadlink']"><a  href="newthread.php?$session[sessionurl]do=newthread&f=$foruminfo[forumid]"  rel="nofollow"><img src="$stylevar[imgdir_button]/newthread.gif"  alt="$vbphrase[post_new_thread]" border="0" /></a><else  /> </if></td>
تجده مرتين استبدله بالتالي


PHP:
<td><if condition="$show['newthreadlink']"><a  class="button1"  href="newthread.php?$session[sessionurl]do=newthread&f=$foruminfo[forumid]"> 
        <img src="images/buttons/button1.png" alt="" />اضافة موضوع</a><else /> </if></td>
افتح قالب SHOWTHREAD

ابحث عن التالي


PHP:
<td class="smallfont"><a  href="newreply.php?$session[sessionurl]do=newreply&noquote=1&p=$FIRSTPOSTID"  rel="nofollow"><if condition="$show['closethread']"><img  src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]"  border="0" /><else /><img  src="$stylevar[imgdir_button]/threadclosed.gif"  alt="$vbphrase[closed_thread]" border="0"  /></if></a></td>
استبدله بالتالي


PHP:
<td><a class="button1"  href="newreply.php?$session[sessionurl]do=newreply&noquote=1&p=$LASTPOSTID"  rel="nofollow"><if condition="$show['closethread']"><img  src="images/buttons/button1.png" alt="" />اضافة رد</a><else  /><img src="images/buttons/threadclosed.png"  alt="$vbphrase[closed_thread]" border="0"  />مغلق</if></td>
الان ابحث عن

PHP:
<td class="smallfont"><a  href="newreply.php?$session[sessionurl]do=newreply&noquote=1&p=$LASTPOSTID"  rel="nofollow"><if condition="$show['closethread']"><img  src="$stylevar[imgdir_button]/reply.gif" alt="$vbphrase[reply]"  border="0" /><else /><img  src="$stylevar[imgdir_button]/threadclosed.gif"  alt="$vbphrase[closed_thread]" border="0"  /></if></a></td>
استبدلها بالتالي


PHP:
<td><a class="button1"  href="newreply.php?$session[sessionurl]do=newreply&noquote=1&p=$LASTPOSTID"  rel="nofollow"><if condition="$show['closethread']"><img  src="images/buttons/button1.png" alt="" />اضافة رد</a><else  /><img src="images/buttons/threadclosed.png"  alt="$vbphrase[closed_thread]" border="0"  />مغلق</if></td>
لتحميل الجيكوري بالمرفقات
اتمنى لكم التوفيق



 

المرفقات

  • al3ani.zip
    29.1 KB · المشاهدات: 139

Abdul Rahim

[ أعضاء فى القلب ]
30 مايو 2011
3,386
23
0
وعليكم السلام

دخلت المنتدى علشان أشوف المثال وما لقيت
لو أمكن أرفق مثال مصور

وينقل للقسم المناسب

جزيل الشكر