ایجاد گوشه‌های گرد برای عناصر
گوشه‌های گرد
اگر بخواهیم یکی از جلوه‌های جدید در طراحی‌های وب 2 را معرفی کنیم، گرد شدن یا تغییر شکل گوشه‌های عناصر مختلف، یکی از موارد جالب است. طرح‌های قدیمی‌با گوشه‌های مربعی دیگر بسیار خشک و یکنواخت جلوه می‌کند و کمتر طرح وب2 را می‌توانید بیابید که از گوشه‌های گرد در طراحی صفحاتش استفاده نکرده باشد.
برای انجام این کار روش‌های مختلفی وجود دارد، استفاده از تصویر در پشت عناصر از رایج‌ترین راه‌هایی است که طراحان از آن استفاده می‌کنند. همچنین مرورگر‌های پیشرفته نظیر فایرفاکس از دستوراتCSS اختصاصی خود جهت گرد کردن محیط اطراف عناصر مورد نظر در صفحه استفاده می‌کنند.
اگر بخواهیم به صورتی ساده به هدف خود برسیم، می‌توانیم از جی‌کوئری مدد بگیریم! با استفاده از جی‌کوئری و پلاگینی که با استفاده از این فریم‌ورک نوشته شده است، می‌توان گوشه‌های هر عنصری در صفحه را به سادگی گرد و یا از دیگر استایل‌هایی که به صورت پیش‌فرض در این پلاگین تعریف شده است، استفاده کنید.
همان‌طور که در مباحث گذشته نیز بحث شد، یکی از خاصیت‌های مهم جی‌کوئری این است که به کاربر این امکان را می‌دهد تا با استفاده از دستورات این فریم‌ورک در عناصر DOM صفحه، به نحوی که خودش مایل است، تغییر ایجاد کند.پلاگینjquery corner با استفاده از این خاصیت تغییراتی را که باید در صفحه انجام شود را ایجاد می‌کند و از سرعت بالایی جهت انجام این کار برخوردار است.
با استفاده ازjquery corner می‌توانید تعداد زیادی از انواع تغییر گوشه‌ها را برای عناصر صفحه خود ایجاد کنید، طول و عرض محیطی از گوشه عناصر که قرار است تغییر کند را مشخص کنید و یا به هر گوشه از عنصر مورد نظر خود یک نوع از استایل‌ها را اختصاص دهید. برای انجام این کار نیاز نیست دستور خاصی را به کار ببرید و به سادگی می‌توانید نوع استایل تغییر گوشه‌ها را خودتان تعریف و ایجاد کنید!
روش استفاده از این پلاگین نیز مانند دیگر پلاگین‌های جی‌کوئری است. برای شروع پلاگین را از آدرس :
http://methvin.com/jquery/jquery.corner.js
دریافت کنید. سپس دو کد مربوط به شناسایی اسکریپت‌ها به مرورگر را در بخش > <head صفحه خود قرار دهید:
script type="text/javascript">
<src="jquery.js"<>/script
script type="text/javascript" >
<>/script<src=" jquery.corner.js"
سپس از دستور $ ()corner.() جهت گرد کردن گوشه‌های عنصر مورد نظر خود استفاده کنید. به عنوان مثال می‌خواهید گوشه‌های عنصری که با شناسه ID مانندmytext در صفحه قرار دارد را گرد کنید، دستوری که می‌توانید استفاده کنید چیزی شبیه $""َmytext).corner() خواهد بود.
جهت مشاهده نمونه‌های این طرح‌ها می‌توانید به آدرس
http://blog.pixeldesign.ir/page/jquery/jquery-corners
مراجعه کنید و نمونه‌هایی از طرز قرار گرفتن گوشه‌های عناصر صفحه را مشاهده نمایید.
اما در استفاده از این پلاگین به نکات زیر دقت کنید:
برای اینکه مقدار انحنای گوشه‌ها و یا مقدار پیکسلی از گوشه‌ها که تحت تاثیر قرار بگیرد را مشخص کنید می‌توانید از دستور:
("َmytext").corner("bevel 4px")$
استفاده کنید، دقت کنید در داخل تابع corner می‌توانید نوع نمایش گوشه‌ها و اندازه آن را مشخص کنید. به عنوان مثال در مثال قبل گوشه‌های عنصر به اندازه 4 پیکسل از هر طرف چیده می‌شوند. پارامتر ورودی تابع corner می‌تواند:
Round, bevel, notch, dog, sharp,
sculpt, fray
باشد که هر کدام از این پارامتر‌ها گوشه‌های عنصر مورد نظر را به شکل خاصی تغییر می‌دهد.
با استفاده از دستورات دیگری که همه آنها را می‌توانید در آدرسی که ارائه شد مشاهده نمایید، می‌توانید مشخص کنید که کدام گوشه از عنصر مورد نظر شما چگونه تغییر کند یا از چه رویه ای استفاده کند.
در پایان جهت نتیجه بهتر و نمایش بهتر گوشه‌ها پیشنهاد می‌کنیم که اندازه استایل گوشه‌ها را تا حد ممکن کوچک انتخاب کنید تا تصویری به مراتب شفاف‌تر از عنصر مورد نظر خود ایجاد کنید.
امیدواریم که از این پلاگین استفاده لازم را ببرید و با تغییراتی که خود در آن ایجاد می‌کنید، نتیجه بهتری بگیرید.
پویا سلیمی
گفت و گو
