| كود الملاحظات الجديد من مهووس نت |
السلام عليكم
اليوم راح نعرض عليكم
كود جميل جدا جدا واتحدى اى منتدى
يكون علية هذا الابداع
الكود والله غير مجانى
ولاكن لعيون اعضاء وزوار مهووس نت
صار لكم مجانا
صورة ومثال على الكود
بعد ما شوفنا المثال اجا وقت الكود
الكود الاول يوضع فى ورقة ال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>وتنبية لكل من ينقل عملى الخاص ويقول انه هو من صمم الكود او استخرجة بالله عليك ربنا شايفك |
وفى الختام السلام عليكم ورحمة الله وبركاتة