[الحواف الدائرية] عمل حواف دائرية، دعم كامل لمتصفح IE والمتصفحات الاخرى

[loulou ange]

http://www.dzbatna.com/images/icons/iconrote.gif [ط§ظ„ط*ظˆط§ظپ ط§ظ„ط¯ط§ط¦ط±ظٹط©] ط¹ظ…ظ„ ط*ظˆط§ظپ ط¯ط§ط¦ط±ظٹط©طŒ ط¯ط¹ظ… ظƒط§ظ…ظ„ ظ„ظ…طھطµظپط* IE ظˆط§ظ„ظ…طھطµظپط*ط§طھ ط§ظ„ط§ط®ط±ظ‰ (http://www.dzbatna.com/t1442014/)



السلام عليكم ورحمة الله وبركاته
اسعد الله مساءكم / صباحكم بكل خير


بدون اي مقدمات اقدم لكم اليوم طريقة مبسطة جدا لعمل الحواف الدائرية ام ما يسمى rounded corners احد الاخوان شرح طريقةها في احد المواضيع اعتمادا على css3 لكننا نعلم ان css3 غير مدعوم من قبل IE لذلك لا بد من وجود حل

نعم الحل موجود، بالاعتماد على ملف جافاسكربت بسيط يمكنك الحصول على حواف دائرية، بل ان هذه الطريقة لا تتطلب منك كتابة التعريف للفايرفوكس وثم تعيده للاوبرا والخ
فقط سطر واحد من الكود code سيجعل الحواف تصبح دائرية

والناتج سيكون كما في الصورة

http://upload.dzbatna.net/upfiles/txV00117.gif


طبعا الالوان والتنسيقات الاخرى انت تقوم بتنسيقها عن طريق css
ومهمة الملف المرفق فقط هي تدوير الحواف

طريقة الاستخدام:
طريقة الاستخدام سهلة جدا وتتكون من خطوتين



تضمين ملف الجافا سكربت في العمل رمز PHP:

<code style="white-space:nowrap"> <code> <script src="rounded.js"></script>
</code> </code>




وضع الكود code التالي بعد الdiv المراد تدوير حوافه ولا تنسى ان يكون الايدي للديف هو نفس الايدي الموجود في الكود code التالي رمز PHP:

<code style="white-space:nowrap"> <code> <script type="text/javascript">Rounded('rounded', 6, 6);</script>



</code> </code>





العملية سهلة اليس كذلك
يمكنك الاطلاع على المثال المباشر من هنا
http://www.editsite.net/blog/rounded_corners.html

::::::: ::::::::: :::::: ::::::::
لكن السؤال الذي يطرح نفسه
هل يمكننا الحصول على اشكال اخرى
الجواب لحسن الحظ هو (نعم)

تابع معي
Rounded('rounded', 10, 10);
هذا الكود code يدور الحواف الاربعة بنفس المقدار



Rounded('rounded', 5, 5, 20, 20)
هذا الكود code يدور الحدود السفلية بمقدار 10 والعلوية بمقدار 5


Rounded('rounded', 0, 0, 20, 20);
هذا الكود code وظيفته تدوير الحافتين السفليتين فقط


Rounded('rounded', 10, 10, 0, 0);
هذا الكود code وظيفته تدوير الحدين العلويين فقط

المتأمل في الكود code يرى ان الرقم الاول هو نصف قطر التدوير للحدود العلوية
والرقم الثاني هو ارتفاع التدوير عن جسم الديف
والرقم الثالث هو نصف قطر التدوير للحدود السفلية
والرقم الاخير هو ارتفاع التدوير عن جسم الديف

اي استفسار او اضافة حياكم الله

الملف مرفق معه مثال جاهز لتسهيل فهم عملية الاستخدام

الدرس مفصل من اعدادي انا اخوكم مهند
مصدر الملفات من هنا
http://www.editsite.net/blog/rounded_corners.html

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







ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)


الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif الحواف الدائرية.zip (http://www.traidnt.net/vb/attachments/445283d1263600908-الحواف-الدائرية.zip) (2.7 كيلوبايت, عدد مرات المشاهدة 176 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©