יום ראשון, 11 בנובמבר 2012

הוספת פינות מיוחדות לdiv עם JQ

ספריה קטנה ונחמדה בשם jQuery Corner יוצרות "מסכה" על אובייקטים מרובעים ובכך יוצרת מגוון רחב של פינות:
מגוון רחב של דוגמאות והסברים:
http://malsup.com/jquery/corner/

נוריד את הקוד אל הפרוייקט ונוסיף לספריית הScripts.

השימוש פשוט, נוסיף DIV רגיל:

 <div id="box1" class="box">
        <strong> דוגמא דוגמא</strong>
        <br />
         בלה בלה בלה בלה בלה
 </div>


נוסיף לו מאפיינים בCSS:

.box  { background-color: #6af;
 padding: 15px;
 text-align: center;
 margin: 25px;
height: 150px;
 width:250px; margin:auto
  }

ואז הוספת קישור של הספריה לדף HTML, ופקודת הJQ שהופכת כל DIV אם CLASS הbox יהפוך למעוגל בפינות:
<script type="text/javascript" src="Scripts/corner.js"></script>
 <script type="text/javascript">
           $(document).ready(function () {
                $("div.box").corner();
            })
 </script>

אין תגובות:

הוסף רשומת תגובה