زوايا دائرية سائلة باستخدام jQuery

Question

ما هي أفضل طريقة لإنشاء زوايا دائرية بعرض/ارتفاع السوائل باستخدام jQuery؟

---

هذا البرنامج المساعد لا يحافظ على الارتفاع كما هو.لدي div عالي يبلغ 10 بكسل وأريد تقريب الزوايا عليه، وعندما أستخدم هذا البرنامج النصي فإنه يضيف حوالي 10 بكسل إلى ما هو موجود هناك.

Answer 1

أنا أستعمل: مسج-الزوايا المستديرة-قماش

فهو يتعامل مع الحدود، ويحافظ على الأشياء بنفس الحجم، وفي الواقع يتعين عليك وضع وسادة قليلاً لمنع ظهور الحروف في التجعد.إنه سريع جدًا، إلا إذا كنت على الإصدار 6.نفس البنية الجميلة لحزم الركن الأخرى، ولكنها أجمل بشكل عام.

تم التعديل لإضافة رابط جديد لـ jQuery Roundcorners Canvas

Answer 2

$(this).corner();

يرى: malsup.com/jquery/corner و مستودع جيثب للمرجع المستقبلي

Answer 3

الطريقة التي تقوم بها واجهة برمجة تطبيقات jQuery UI Theming بذلك في Firefox هي باستخدام "مساعدي نصف القطر الزاوية".

إليك ما تبدو عليه في ملف CSS الذي تم تجميعه في نسختي من واجهة المستخدم:

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }

لسوء الحظ، لا يبدو أن لها أي تأثير على IE7 اعتبارًا من هذا المنشور.

في كود jQuery، يمكن تطبيق إحدى هذه الفئات بطريقة مثل هذا:

$('#SomeElementID').addClass("ui-corner-all");

Answer 4

إذا كنت تريد التحكم الكامل في الحدود والتدرج اللوني، فيمكنك استخدام المكون الإضافي iQuery Background Canvas الخاص بي.إنه يعمل مع عنصر HTML5 Canvas ويسمح برسم الحدود والخلفيات بأي شكل من الأشكال.ولكن يجب أن تكون قادرًا على برمجة JavaScript

هذه عينة كاملة المواصفات مع خلفية متدرجة وزوايا مستديرة.كما ترون، يتم الرسم بالكامل في جافا سكريبت، ويمكنك تعيين كل المعلمة التي تريدها.تتم إعادة الرسم عند كل تغيير حجم (بسبب حدث تغيير الحجم)، يمكنك تعديل رسم الخلفية لإظهار ما تريده على هذا الحجم المحدد.

$(document).ready(function(){
    $(".Test").backgroundCanvas();
});

function DrawBackground() {
    $(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);
}
// Draw the background on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

function TestBackgroundPaintFkt(context, width, height, elementInfo){
    var options = {x:0, height: height, width: width, radius:14, border: 0 };
    // Draw the red border rectangle
    context.fillStyle = "#FF0000";
    $.canvasPaint.roundedRect(context,options);
    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
    backgroundGradient.addColorStop(0 ,'#AAAAFF');
    backgroundGradient.addColorStop(1, '#AAFFAA');
    options.border = 5;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context,options);
}

هذا هو البرنامج المساعد، وهذا الموقع يستخدمه على نطاق واسع:jQuery الخلفية قماش البرنامج المساعد