Con l'uscita di frameworks sempre più completi l'attenzione di molti programmatori si è spostata oltre che sulla funzionalità e sulla fruibilità di un sito anche sull'aspetto grafico, soprattutto per via della maggiori interazioni e contenuti messi a disposizione degli utenti.
Per questo motivo oltre a una scelta accurata dei colori e alla disposizione dei contenuti multimediali e non è possibile abbellire le proprie pagine utilizzando delle librerie che permettono di abbellire i propri form rendendo il tutto più gradevole.
Se utilizzate jQuery 1.2 o superiori è possibile affidarsi a jNice (sviluppato e mantenuto dalla WhiteSpace Creative) per abbellire facilmente dei componenti per form con poche righe di codice.
<form class="jNice">
<!--- Componenti / Html a cui applicare lo stile jNice --></form>
Per completezza, sopratutto per chi volesse apprendere e valutare la tecnica utilizzata inserisco di seguito il contenuto dei due files.
Contenuto del file jNice.css:
/* ------------- * Buttons * ------------- */button { margin: 0px; padding: 0px; border: none; background-color: transparent; cursor: pointer; overflow: visible;}*:first-child+html button[type]{width: 1;} /* IE7 */button span { background: transparent url(../../elements/btn_right.gif) no-repeat scroll right top; display: block; float: left; padding: 0px 4px 0px 0px; /* sliding doors padding */ margin: 0px;}button span span { background: transparent url(../../elements/btn_left.gif) no-repeat; color: #FFFFFF; padding: 1px 4px 0px 8px; font-weight: normal; font-size: 10px; line-height: 13px; text-transform: lowercase; display: block; text-decoration: none;}/* ------------- * Inputs * ------------- */.jNiceInputWrapper { background: transparent url(../../elements/input_left.gif) no-repeat left top; height: 23px; padding: 0px;}.jNiceInputInner { background: transparent url(../../elements/input_right.gif) no-repeat right top; padding: 2px 4px 2px 0px; margin: 0px 0px 0px 4px;}.jNiceInputInner div { height: 19px;}.jNiceInputInner input { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height: 18px; vertical-align: middle; height: 17px; color:#404040; border: 0; padding: 0px; margin: 0px;}.jNiceSafari .jNiceInputInner div { position: relative; overflow: hidden;}.jNiceSafari input { background-color: none; position: absolute; top: -2px; left: -4px; height: 26px; }/* ------------- * Radios * ------------- */.jRadioWrapper {float: left;}.jNiceRadio { background: transparent url(../../elements/radio.gif) no-repeat center top; vertical-align: middle; height: 18px; width: 18px; display:block;/*display: -moz-inline-block;*/}/* ------------- * Checkboxes * ------------- */.jNiceCheckbox { background: transparent url(../../elements/checkbox.gif) no-repeat center top; vertical-align: middle; height: 18px; width: 18px; display:block;/*display: -moz-inline-block;*/}/* ------------- * Checked - Used for both Radio and Checkbox * ------------- */.jNiceChecked { background-position: center bottom;}/* ------------- * Selects * ------------- */.jNiceSelectWrapper { width: 132px; position:relative; height: 17px;}.jNiceSelectWrapper div span { float: none; position: absolute; width: 104px; height: 15px; line-height: 15px; padding: 0px 3px; overflow: hidden; border: 1px solid #CCCCCC; border-right: none;}.jNiceSelectWrapper div a { display: block; position: absolute; right: 0px; width: 21px; height: 17px; background: url(../../elements/select_right.gif) no-repeat center center;}.jNiceSelectWrapper ul { position: absolute; width: 150px; top: 16px; left: 0px; list-style: none; background-color: #FFF; border: solid 1px #CCC; display: none; margin: 0px; padding: 0px; height: 150px; overflow: auto; overflow-y: auto; z-index:100;}.jNiceSelectWrapper ul a { display: block; padding: 5px; text-decoration: none; color:#0099CC; background-color: #FFF;}.jNiceSelectWrapper ul a:hover { background:#E1F5FF; }.jNiceSelectWrapper ul a.selected {background: #EDEDED;}/* ------------- * Hidden - used to hide the original form elements * ------------- */.jNiceHidden {display: none;}
Contenuto file jquery.jNice.js:
/* * UPDATED: 12.19.07 * * jNice * by Sean Mooney (sean@whitespace-creative.com) * * To Use: place in the head * <link href="inc/style/jNice.css" rel="stylesheet" type="text/css" /> * <script type="text/javascript" src="inc/js/jquery.jNice.js"></script> * * And apply the jNice class the form you want to style * * To Do: Add textareas, Add File upload * ******************************************** */(function($){ $.fn.jNice = function(options){ var self = this; var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */ /* each form */ this.each(function(){ /*************************** Buttons ***************************/ var setButton = function(){ $(this).replaceWith('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +'"><span><span>'+ $(this).attr('value') +'</span></span>'); }; $('input:submit, input:reset', this).each(setButton); /*************************** Text Fields ***************************/ var setText = function(){ var $input = $(this); $input.addClass("jNiceInput").wrap('<div class="jNiceInputWrapper"><div class="jNiceInputInner"><div></div></div></div>'); var $wrapper = $input.parents('div.jNiceInputWrapper'); $wrapper.css("width", $(this).width()+10); $input.focus(function(){ $wrapper.addClass("jNiceInputWrapper_hover"); }).blur(function(){ $wrapper.removeClass("jNiceInputWrapper_hover"); }); }; $('input:text:visible, input:password', this).each(setText); /* If this is safari we need to add an extra class */ if (safari){$('.jNiceInputWrapper').each(function(){$(this).addClass('jNiceSafari').find('input').css('width', $(this).width()+11);});} /*************************** Check Boxes ***************************/ $('input:checkbox', this).each(function(){ $(this).addClass('jNiceHidden').wrap('<span></span>'); var $wrapper = $(this).parent(); $wrapper.prepend('<a href="#" class="jNiceCheckbox"></a>'); /* Click Handler */ $(this).siblings('a.jNiceCheckbox').click(function(){ var $a = $(this); var input = $a.siblings('input')[0]; if (input.checked===true){ input.checked = false; $a.removeClass('jNiceChecked'); } else { input.checked = true; $a.addClass('jNiceChecked'); } return false; }); /* set the default state */ if (this.checked){$('a.jNiceCheckbox', $wrapper).addClass('jNiceChecked');} }); /*************************** Radios ***************************/ $('input:radio', this).each(function(){ $input = $(this); $input.addClass('jNiceHidden').wrap('<span class="jRadioWrapper"></span>'); var $wrapper = $input.parent(); $wrapper.prepend('<a href="#" class="jNiceRadio" rel="'+ this.name +'"></a>'); /* Click Handler */ $('a.jNiceRadio', $wrapper).click(function(){ var $a = $(this); $a.siblings('input')[0].checked = true; $a.addClass('jNiceChecked'); /* uncheck all others of same name */ $('a[rel="'+ $a.attr('rel') +'"]').not($a).each(function(){ $(this).removeClass('jNiceChecked').siblings('input')[0].checked=false; }); return false; }); /* set the default state */ if (this.checked){$('a.jNiceRadio', $wrapper).addClass('jNiceChecked');} }); /*************************** Selects ***************************/ $('select', this).each(function(index){ var $select = $(this); /* First thing we do is Wrap it */ $(this).addClass('jNiceHidden').wrap('<div class="jNiceSelectWrapper"></div>'); var $wrapper = $(this).parent().css({zIndex: 100-index}); /* Now add the html for the select */ $wrapper.prepend('<div><span></span><a href="#" class="jNiceSelectOpen"></a></div><ul></ul>'); var $ul = $('ul', $wrapper); /* Now we add the options */ $('option', this).each(function(i){ $ul.append('<li><a href="#" index="'+ i +'">'+ this.text +'</a></li>'); }); /* Hide the ul and add click handler to the a */ $ul.hide().find('a').click(function(){ $('a.selected', $wrapper).removeClass('selected'); $(this).addClass('selected'); /* Fire the onchange event */ if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); } $select[0].selectedIndex = $(this).attr('index'); $('span:eq(0)', $wrapper).html($(this).html()); $ul.hide(); return false; }); /* Set the defalut */ $('a:eq('+ this.selectedIndex +')', $ul).click(); });/* End select each */ /* Apply the click handler to the Open */ $('a.jNiceSelectOpen', this).click(function(){ var $ul = $(this).parent().siblings('ul'); if ($ul.css('display')=='none'){hideSelect();} /* Check if box is already open to still allow toggle, but close all other selects */ $ul.slideToggle(); var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top); $ul.animate({scrollTop: offSet}); return false; }); }); /* End Form each */ /* Hide all open selects */ var hideSelect = function(){ $('.jNiceSelectWrapper ul:visible').hide(); }; /* Check for an external click */ var checkExternalClick = function(event) { if ($(event.target).parents('.jNiceSelectWrapper').length === 0) { hideSelect(); } }; /* Apply document listener */ $(document).mousedown(checkExternalClick); /* Add a new handler for the reset action */ var jReset = function(f){ var sel; $('.jNiceSelectWrapper select', f).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});}); $('a.jNiceCheckbox, a.jNiceRadio', f).removeClass('jNiceChecked'); $('input:checkbox, input:radio', f).each(function(){if(this.checked){$('a', $(this).parent()).addClass('jNiceChecked');}}); }; this.bind('reset',function(){var action = function(){jReset(this);}; window.setTimeout(action, 10);}); };/* End the Plugin */ /* Automatically apply to any forms with class jNice */ $(function(){$('form.jNice').jNice(); });})(jQuery);
Se volete potete accedere alla demo messa a disposizione proprio dalla WhiteSpace Creative. Il tutto risulta compatibile e testato con: FF 2+, Safari 2+, IE 6+, Opera 9+ e Netscape 7+.
Da alcuni test fatti (che ammetto veloci) risulta funzionante anche con Google Chrome 0.3 (sebbene ci siano dei problemi di rendering).
Collegamenti esterni: jQuery | WhiteSpace Creative | demo