ايجاد گوشه ‌هاي گرد براي عناصر - گوشه ‌هاي ‌گرد

برايانجام اين كار روش‌هاي مختلفي وجود دارد، استفاده از تصوير در پشت عناصراز رايج‌ترين راه‌هايي است كه طراحان از آن استفاده مي‌كنند. همچنينمرورگر‌هاي پيشرفته نظير فايرفاكس از دستوراتCSS  اختصاصي خود جهت گردكردن محيط اطراف عناصر مورد نظر در صفحه استفاده مي‌كنند.

اگربخواهيم به صورتي ساده به هدف خود برسيم، مي‌توانيم از جي‌كوئري مددبگيريم! با استفاده از جي‌كوئري و پلاگيني كه با استفاده از اين فريم‌وركنوشته شده است، مي‌توان گوشه‌هاي هر عنصري در صفحه را به سادگي گرد و يااز ديگر استايل‌هايي كه به صورت پيش‌فرض در اين پلاگين تعريف شده است،استفاده كنيد.

همان‌طور كه در مباحث گذشته نيز بحث شد، يكي ازخاصيت‌هاي مهم جي‌كوئري اين است كه به كاربر اين امكان را مي‌دهد تا بااستفاده از دستورات اين فريم‌ورك در عناصر  DOM  صفحه، به نحوي كه خودشمايل است، تغيير ايجاد كند.پلاگينjquery corner  با استفاده از اين خاصيتتغييراتي را كه بايد در صفحه انجام شود را ايجاد مي‌كند و از سرعت بالاييجهت انجام اين كار برخوردار است.

با استفاده ازjquery corner مي‌توانيد تعداد زيادي از انواع تغيير گوشه‌ها را براي عناصر صفحه خودايجاد كنيد، طول و عرض محيطي از گوشه عناصر كه قرار است تغيير كند را مشخصكنيد و يا به هر گوشه از عنصر مورد نظر خود يك نوع از استايل‌ها را اختصاصدهيد. براي انجام اين كار نياز نيست دستور خاصي را به كار ببريد و بهسادگي مي‌توانيد نوع استايل تغيير گوشه‌ها را خودتان تعريف و ايجاد كنيد!

روش استفاده از اين پلاگين نيز مانند ديگر پلاگين‌هاي جي‌كوئري است. براي شروع پلاگين را از آدرس :
   http://methvin.com/jquery/jquery.corner.js
دريافت كنيد. سپس دو كد مربوط به شناسايي اسكريپت‌ها به مرورگر را در بخش >  script type="text/javascript">
/script
script type="text/javascript" >
<>/script سپساز دستور  $ ()‌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

باشد كه هر كدام از اين پارامتر‌ها گوشه‌هاي عنصر مورد نظر را به شكل خاصي تغيير مي‌دهد.

بااستفاده از دستورات ديگري كه همه آنها را مي‌توانيد در آدرسي كه ارائه شدمشاهده نماييد، مي‌توانيد مشخص كنيد كه كدام گوشه از عنصر مورد نظر شماچگونه تغيير كند يا از چه رويه اي استفاده كند.

در پايان جهت نتيجهبهتر و نمايش بهتر گوشه‌ها پيشنهاد مي‌كنيم كه اندازه استايل گوشه‌ها راتا حد ممكن كوچك انتخاب كنيد تا تصويري به مراتب شفاف‌تر از عنصر مورد نظرخود ايجاد كنيد.

اميدواريم كه از اين پلاگين استفاده لازم را ببريد و با تغييراتي كه خود در آن ايجاد مي‌كنيد، نتيجه بهتري بگيريد.