Team:Peking/jqueryplugins4
From 2010.igem.org
Evamonlight (Talk | contribs) (New page: <html> <style type="text/javascript"> <!--jquerycorner--> // TODO: alter variable/property naming so that less string manipulation is required. // TODO: make prototype "safe". low priority...) |
Evamonlight (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | |||
<!--jquerycorner--> | <!--jquerycorner--> | ||
// TODO: alter variable/property naming so that less string manipulation is required. | // TODO: alter variable/property naming so that less string manipulation is required. | ||
Line 65: | Line 64: | ||
// expressions for ie6, but otherwise, it is what it is. | // expressions for ie6, but otherwise, it is what it is. | ||
STRinlineStyling : '\n\ | STRinlineStyling : '\n\ | ||
- | <style type="text/css"> | + | <style type="text/css"> |
- | /* THE FOLLOWING STYLES ARE THE BASE/DEFAULT STYLES, AND ASSUME NO BIAS */ | + | /* THE FOLLOWING STYLES ARE THE BASE/DEFAULT STYLES, AND ASSUME NO BIAS */ |
/* BIAS STYING IS APPLIED INLINE, AS IT MUST BE CALCULATED IN JS. */\n\ | /* BIAS STYING IS APPLIED INLINE, AS IT MUST BE CALCULATED IN JS. */\n\ | ||
/* only styles imposed upon original container */\n\ | /* only styles imposed upon original container */\n\ | ||
Line 309: | Line 308: | ||
- | + | ||
</html> | </html> |
Revision as of 14:24, 19 September 2010
// TODO: alter variable/property naming so that less string manipulation is required.
// TODO: make prototype "safe". low priority.
////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////
//// ////
//// TITLE: quadCorners jquery plugin v 1.0 - initial release ////
//// ////
//// AUTHOR: Jose Cao-Garcia ////
//// ////
//// DESCRIPTION: quadCorners is a jQuery plugin. It provides a dead-simple way to ////
//// specify rounded-corner/dropShadowed/stroked/etc corner styles to an element, ////
//// via css, or javascript. QuadCorners permits you to use a single background ////
//// image to specify your container background, without restricting the width and ////
//// height of your container to the size of your image. Quadcorners inserts your ////
//// image four times within your container--clipped at 50% width/height and ////
//// positioned absolutely at top-left, top-right, bottom-right, and bottom-left. ////
//// This clipped, four-corner positioning permits the container to resize despite ////
//// the fact that only a single image is being used as a background. As long as ////
//// the container is not larger the 2X image length - 1X corner radius, it will ////
//// not repeat. The quadCorner markup will expand and contract naturally with the ////
//// width/height of the markup container, without the assistance of javascript. ////
//// ////
////////////////////////////////////////////////////////////////////////////////////////////////
//// ////
//// Copyright 2009 Jose Cao-Garcia ////
//// ////
//// This work is licensed under the Creative Commons Attribution-Share Alike 3.0 ////
//// United States License. To view a copy of this license, visit ////
//// http://creativecommons.org/licenses/by-sa/3.0/us/ or send a letter to Creative ////
//// Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. ////
//// ////
////////////////////////////////////////////////////////////////////////////////////////////////
//// ////
//// LIMITATIONS: background image applied must be at least ~1/2 the size of the ////
//// comtainers maximum dimensions. This limitation will be eliminated in a future ////
//// release. Contaioner must be positioned relatively ... this limitation will ////
//// also be eliminated in the future. ////
//// ////
//// FEATURES: Use a single image to specify resizable corner/edge styling for ////
//// containers. apply this styling via CSS background properties, or via ////
//// javascript. Supports png transparency in standards-challenged browsers. ////
//// ////
//// DEPENDENCIES: jQuery. ////
//// ////
//// USAGE: see documentation at http://jcao.com/scripts/quadCorners/ ////
//// ////
////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////
// For legibility - set tabs to four spaces.
// all MSIE 6.0 code is denoted with an /*MSIE*/ comment at the beginning of the line.
// wrap in anonymous function to keep the window napespace clean, and protect plugin scripts.
(function() {
////////////////////////////////////////////////////////////////////////////////////////////
//// object contains important properties, and support for the jquery plugin functions
////////////////////////////////////////////////////////////////////////////////////////////
var quadBg = {
// styles used by quadcorners, edit at your own risk. percentage values are converted to
// expressions for ie6, but otherwise, it is what it is.
STRinlineStyling : '\n\
\n\
',
/*MSIE*/ ////////////////////////////////////////////////////////////////////////////////////////
/*MSIE*/ //// function converts css percentage values to ie-proprietary css "expressions" it is
/*MSIE*/ //// necessary because standards-challenged browsers (ie6) don't support height by
/*MSIE*/ //// percentage, but do by "expression". pass it a css string and it then converts it,
/*MSIE*/ //// if the rendering engine is ie6. For standards-capable browsers, it just passes
/*MSIE*/ //// the unedited css on. Yet another example of MSIE littering the web with crap code.
/*MSIE*/ ////////////////////////////////////////////////////////////////////////////////////////
/*MSIE*/ procStyles : function(STRstyle) {
/*MSIE*/ // if MSIE6, then process
/*MSIE*/ if (jQuery.browser.msie && jQuery.browser.version == '6.0') {
/*MSIE*/ // regex to id percentage values in the styling strings
/*MSIE*/ var RGXcentVal = /\d{1,3}\%{1}/g;
/*MSIE*/ // split stying into arrays split by percentage values
/*MSIE*/ var ARRcentVals = STRstyle.match(RGXcentVal);
/*MSIE*/ var ARRcutCents = STRstyle.split(RGXcentVal);
/*MSIE*/ if(ARRcentVals) {
/*MSIE*/ // create an empty string to build new styling into
/*MSIE*/ var STRnewStyle = '';
/*MSIE*/ // loop through percent values, convert to expressions and reassemble arrays into new styling string
/*MSIE*/ for (var i=0; i