jQuery के साथ द्रव गोलाकार कोनों

Question

jQuery के साथ तरल चौड़ाई/ऊंचाई गोलाकार कोनों बनाने का सबसे अच्छा तरीका क्या है?

---

वह प्लगइन ऊंचाई को समान नहीं रखता है। मेरे पास 10 पीएक्स उच्च div है कि मैं कोनों को गोल करना चाहता हूं, जब मैं उस स्क्रिप्ट का उपयोग करता हूं तो इसमें लगभग 10px जोड़ता है।

Answer 1

मैं का उपयोग करें: Jquery-roundcorners-canvas

यह सीमाओं को संभालती है, और चीजों को पत्र रहते होने से रखने के लिए एक बिट में एक ही आकार रहता है, वास्तव में आप पैड करने के लिए है क्रीज में यह बहुत तेज है, जब तक कि आप यानी 6. अन्य कोने पैक के समान सुंदर वाक्यविन्यास हैं, लेकिन सामान्य रूप से केवल सुंदर हैं।

संपादित रास्ता jQuery यूआई थीम एपीआई फ़ायरफ़ॉक्स में पूरा करता है "Corner Radius Helpers" के साथ है के लिए jQuery Roundcorners Canvas

Answer 2

$(this).corner(); 

देखें: malsup.com/jquery/corner और github repository for future ref

Answer 3

नई लिंक जोड़ने के लिए।

यहाँ क्या वे सीएसएस कि यूआई की मेरी कॉपी में समाहित किया गया था में की तरह लग रही है:

/* 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 पृष्ठभूमि कैनवास प्लगइन का उपयोग कर सकते हैं। यह एक HTML5 कैनवास तत्व के साथ काम करता है और किसी भी भिन्नता में सीमाओं और पृष्ठभूमि को आकर्षित करने की अनुमति देता है। लेकिन आपको जावास्क्रिप्ट

प्रोग्राम करने में सक्षम होना चाहिए यह पृष्ठभूमि ढाल और गोलाकार कोनों के साथ एक पूर्ण विशेषीकृत नमूना है। जैसा कि आप देख सकते हैं, चित्र पूरी तरह से जावास्क्रिप्ट में किया जाता है, आप अपने इच्छित पैरामीटर को सेट कर सकते हैं। ड्राइंग प्रत्येक आकार (आकार बदलने के कारण) पर फिर से शुरू की जाती है, आप पृष्ठभूमि चित्र को अनुकूलित कर सकते हैं ताकि आप इस विशिष्ट आकार पर इच्छित वाट को दिखा सकें।

$(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 Background Canvas Plugin