مهووس نتدخول

منتدى يضم عدد كبير من المواضيع في شتى المجالات


شاطر

descriptionكود الملاحظات الجديد من مهووس نت

more_horiz
كود الملاحظات الجديد من مهووس نت
السلام عليكم 
اليوم راح نعرض عليكم 
كود جميل جدا جدا واتحدى اى منتدى 
يكون علية هذا الابداع
الكود والله غير مجانى 

ولاكن لعيون اعضاء وزوار مهووس نت 
صار لكم مجانا

صورة ومثال على الكود 

بعد ما  شوفنا المثال اجا وقت الكود 
الكود الاول يوضع فى ورقة الCSS

الكود:

/*alert*/
.alert{
   background:#ffffff;
   border:1px solid #bbbbbb;
   color:#6D6D6D;
   padding:10px 10px 10px 60px;
   margin-bottom:20px;
   position:relative;
}
.alert:before{
   background:#bbbbbb;
   top:0;
   left:0;
   bottom:0;
   width:50px;
   content:'';
   position:absolute;
}
.alert p{ margin:0; }
.alert.success{
   border-color:#b0d86e;
   color:#578C00;
}
.alert.mahwos{
   border-color:#FFC95F;
   color:#EE800A;
}
.alert.mahwoserror{
   border-color:#ffaaaa;
   color:#D62626;
}
.alert.mahwosinfo{
   border-color:#94dbff;
   color:#0091DC;
}

.alert.mahwosinfo:before      { background: url(https://i37.servimg.com/u/f37/17/84/07/02/info110.png) no-repeat center center #bce9ff; }
.alert.mahwoserror:before      { background:url(https://i37.servimg.com/u/f37/17/84/07/02/error10.png) no-repeat center center #ffcbcb; }
.alert.mahwos:before   { background:url(https://i37.servimg.com/u/f37/19/56/23/70/115.png) no-repeat center center #fff8ac; }
.alert.success:before   { background:url(https://i37.servimg.com/u/f37/17/84/07/02/succes10.png) no-repeat center center #DBF0B8; }
.alert.mahwoshelp:before      { background:url(https://i37.servimg.com/u/f37/17/84/07/02/help10.png) no-repeat center center #bbbbbb; }
.alert .alert-close{
   position:absolute;
   right:0px;
   top:0px;
   background:url(https://i37.servimg.com/u/f37/17/84/07/02/alert-10.png) no-repeat center center #bbbbbb;
   padding:1px;
   height:13px;
   width:13px;
   display:block;
   text-indent:-9999px;
   -webkit-border-radius: 0 0 0 3px;
     -moz-border-radius: 0 0 0 3px;
         border-radius: 0 0 0 3px;
}
.alert.mahwossuccess .alert-close   { background-color:#b0d86e; }
.alert.mahwos .alert-close   { background-color:#FFC95F; }
.alert.mahwoserror .alert-close   { background-color:#ffaaaa; }
.alert.mahwosinfo .alert-close      { background-color:#94dbff; }
.alert.mahwossuccess .alert-close   { background-color:#b0d86e; }


اما هذا الكود يوضع فى اى مكان تريد بة الملاحظات
التشكيلات العامة
او
 الاعلانا الخاصة

الكود:


<div class="alert success">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>
<p><a class="alert-close" href="javascript:void(0);">Close</a></p></div><div class="alert mahwos">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>
<p><a class="alert-close" href="javascript:void(0);">Close</a></p></div><div class="alert mahwoserror">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>
<p><a class="alert-close" href="javascript:void(0);">Close</a></p></div>
<div class="alert mahwosinfo">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>
<p><a class="alert-close" href="javascript:void(0);">Close</a></p></div><div class="alert mahwoshelp">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>



وهذا نفس الكود 
كامل ويوضع كامل اذا لم ترغب بوضع الcss
لسهولة العمل ضع الكود كامل ومبروك عليك 

الكود:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
jQuery(document).ready(function($){

//alert close
      $('.alert-close').click(function() {
         $(this).closest('.alert').fadeOut();
      });

});
</script>


<body style="background:#000;"><div style="margin:0 auto; padding:40px; width:500px; background:#fff;">



<div class="alert success">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>
<p><a class="alert-close" href="javascript:void(0);">Close</a></p></div><div class="alert mahwos">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>
<p><a class="alert-close" href="javascript:void(0);">Close</a></p></div><div class="alert mahwoserror">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>
<p><a class="alert-close" href="javascript:void(0);">Close</a></p></div>
<div class="alert mahwosinfo">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>
<p><a class="alert-close" href="javascript:void(0);">Close</a></p></div><div class="alert mahwoshelp">
<p><strong>مثال النص هنا.</strong> مثال النص هنا.</p>



وتنبية لكل من ينقل عملى الخاص 
ويقول انه هو من صمم الكود او استخرجة
بالله عليك ربنا شايفك

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

descriptionرد: كود الملاحظات الجديد من مهووس نت

more_horiz
مشكووووووور كود راائع

descriptionرد: كود الملاحظات الجديد من مهووس نت

more_horiz
كود رووووعه وجمالية
ابدعت بما تطرح عوافي يارب
دمت بخير
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى