Плагины для украшения форм для JQuery
- Плагин, позволяющий заменять внешний вид стандартных select'ов.
Работает как обычный select (передает параметры GET или POST ), но позволяет гибко настроить внешний вид. В качестве параметров принимает выражения: «goto» - при клике на выбранном пункте, переходит по ссылке (ссылку необходимо указать в качестве value для option), «submit» - отправляет форму при клике на выбранном пункте. При вызове без параметров, ничего не делает при выборе пункта.
Вызов - $("input").slideup_select(['goto' | 'submit'] | '');
Плагин в действии: everjazz.ru (форма заказа билетов слева и раздел «фото»)
$.fn.slideup_select = function (action) {
var slideupped = false;
select_array = new Array();
sel_mass = $(this);
for (i = 0; i < sel_mass.length; i++) {
element = $(sel_mass[i]);
select_array[i] = {
element: element,
position: element.css('position'),
width: element.outerWidth(),
height: element.outerHeight(),
left: element.position().left,
top: element.position().top,
efloat: element.css('float'),
margin: /*element.css('margin') ||*/ ((element.css('marginTop')||'0px') + ' ' + (element.css('marginRight')||'0px') + ' ' + (element.css('marginBottom')||'0px') + ' ' + (element.css('marginLeft')||'0px')),
eclass: element.attr('class'),
slideup_height: 0,
action: action}
}
for (i = 0; i < select_array.length; i++) {
//////alert('!');
element = select_array[i].element;
//element.addClass(select_array[i].action);
options = element.find('option');
position = element.position();
element.wrap("
");
container = element.parents("div.replacer_select");
if ((select_array[i].action == 'submit')||(select_array[i].action == 'goto')) {
container.addClass(select_array[i].action); }
var test = false;
options.each(function(){
if ($(this).attr('selected')) {
test = true;}
});
if (!test) {
$(options[0]).attr({selected:'selected'});}
container.prepend("
");
container.append("
select_ul = container.find("ul.select_ul");
for (j = 0; j < options.size(); j++) {
option_text = (option = $(options[j])).html();
if (option.attr('selected')) {
select_ul.append(" - " + option_text + " ");}
- " + option_text + " ");}
- Плагин для преобразования стандартного select'а в прокручивающийся вправо-влево список
Вызов: $("select").rightleft_select();
Плагин в действии: everjazz.ru (форма заказа билетов, количество билетов)
$.fn.rightleft_select = function() {
element = $(this);
element.wrap("
");
container = element.parents(".rightleft_select");
el_width = element.outerWidth();
el_height = element.outerHeight();
container.css({ 'width':el_width,
'height':el_height,
'display':'block'});
container.prepend(" "+
""+
" "+
" "+
" "+
""+
"");
val_container = container.find("td.val_container");
options = container.find("option");
is_selected = false;
for (i = 0; i < options.size(); i++) {
option = $(options[i]);
if (option.attr('selected') == 'selected') {
val_container.html(option.html());
val_container.removeClass(val_container.attr('class').split(' ')[1]).addClass('option_num_'+i);
is_selected = true;
}
}
if (!is_selected) {
val_container.html(options.html());}
$(".rightleft_select .left_button a").click(function(){
button = $(this);
container = button.parents(".rightleft_select");
val_container = container.find(".val_container");
num_option = (num_class = val_container.attr('class').split(' ')[1]).split('_')[2];
if (num_option <= 0) {
return false;}
else {
num_option--;
options = container.find('option');
options.removeAttr('selected');
val_container.removeClass(num_class);
(new_option = $(options[num_option])).attr({'selected':'selected'});
val_container.html(new_option.html());
val_container.addClass('option_num_'+num_option);
return false;
}
});
$(".rightleft_select .right_button a").click(function(){
button = $(this);
container = button.parents(".rightleft_select");
val_container = container.find(".val_container");
num_option = (num_class = val_container.attr('class').split(' ')[1]).split('_')[2];
if (num_option >= options.size()-1) {
return false;}
else {
num_option++;
options = container.find('option');
options = container.find('option');
options.removeAttr('selected');
val_container.removeClass(num_class);
(new_option = $(options[num_option])).attr({'selected':'selected'});
val_container.html(new_option.html());
val_container.addClass('option_num_'+num_option);
return false;
}
});
element.css({'position':'absolute'}).hide();
} - Плагин для проверки заполнения input и textarea
В качестве параметра принимает текст, который будет выводиться при попытке отправить незаполненную форму
Плагин в действии: everjazz.ru (форма заказа билетов слева)
$.fn.important_input = function(text) {
elements = $(this);
elements.each(function(){
if ((!text)||(text == '')) {
text = 'Empty!!!'; }
element = $(this);
if (!element.hasClass('important')) {
element.addClass('important');}
form = element.parents("form");
if (!form.hasClass('important_input_replaced')) {
submit = form.find("input[type='submit'], textarea[type='submit']");
inputs = form.find("input.important, textarea.important").not("input[type='radio']");
submit.click(function(){
all_ok = true;
button = $(this);
form = button.parents("form");
inputs = form.find("input.important, textarea.important").not("input[type='radio']");
for (i = 0; i < inputs.size(); i++) {
if ((!inputs[i].value)||(inputs[i].value == text)) {
all_ok = false;
input = $(inputs[i]);
inputs[i].value = text;
input.addClass('alert_message');
}
}
inputs.click(function(){
input = $(this);
if ((!input[0].value)||(input[0].value == text)) {
input[0].value = '';
input.removeClass('alert_message');
}
});
if (!all_ok) {
return false;}
});
form.addClass('important_input_replaced');
}
});
} - Преобразует группу radiobutton'ов в группу картинок, для которых можно задавать стили
Вызывается для любого radiobutton'а из группы. При отправке формы, передает значения как обычный radiobutton
Плагин в действии: http://znayou.com/
$.fn.radiobutton_decor_dk = function() {
elements = $(this);
elements.each(function(){
element = $(this);
element_name = element.attr('name');
container = element.parents(".radiobuttons");
if (!(container.hasClass('replaced'))) {
buttons = container.find("input[name="+element_name+"]");
for (i = 0; i < buttons.size(); i++) {
buttons[i].checked = false;
button = $(buttons[i]);
button_value = button.attr('value');
button_container = button.parents("label");
button_text = button_container.text();
//button_container.text('');
button_container.prepend(" "+button_text+"");
button.css({'display':'none'});
}
container.addClass('replaced');
}
});
$(".radiobuttons.replaced a.radiobutton_a").click(function(){
element = $(this);
element_name = element.attr('name');
element_value = element.attr('href');
element_container = element.parents("label");
element_name = element_container.find("input[type='radio']").attr('name');
container = element.parents(".radiobuttons");
buttons_a = container.find("a.radiobutton_a");
buttons = container.find("input[name='"+element_name+"']");
button_id = element.attr('class').split(' ')[1].split('_')[1];
for (i = 0; i < buttons.size(); i++) {
buttons[i].checked = false;
button = $(buttons[i]);
button_a = $(buttons_a[i]);
temp = button_a.attr('href').split('/');
//alert(button_a.attr('href'));
button_a_href = temp[temp.length-1];
button_a.removeClass(button_a.attr('class').split(' ')[1]);
if (button_id != button_a_href) {
button_a.addClass('value_' + button.attr('value'));}
else {
button_a.addClass('value_' + button.attr('value') + '_checked');}
}
active_button = element_container.find("input[type='radio']");
active_button[0].checked = true;
return false;
});
} - Плагин, позволяющий менять внешний вид стандартных checkbox'ов
Обрабатывает клики как по чекбоксу, так и по label
Плагин в действии: http://znayou.com/
$.fn.checkbox_decor = function() {
el_array = $(this);
el_array.each(function(){
element = $(this);
element.wrap("
");
element_value = element.attr('value');
if (element_value == '') {
element_value = " ";}
element_name = element.attr('name');
container = element.parents(".checkbox_container");
container.prepend(" "+element_value+"");
element.addClass('replaced');
element.css({'display':'none'});
});
/* replaced_checkbox = $("input[type='checkbox'].replaced");
labels_arr = new Array;
for (i = 0; i < replaced_checkbox.size(); i++) {
checkbox = $(replaced_checkbox[i]);
labels_arr[i] = $("label[for='"+checkbox.attr('id')+"']");
}
for (i = 0; i < labels_arr.size(); i++) {*/
label = $("label");//labels_arr[i];
label.mouseover(function(){
active_label = $(this);
label_for = active_label.attr('for');
checkbox = $("input[type='checkbox']#"+label_for);
if (checkbox.hasClass('replaced')) {
container = checkbox.parents(".checkbox_container");
checkbox_a = container.find("a");
checkbox_a.addClass('hover');
active_label.addClass('hover');
}
return false;
});
label.mouseout(function(){
active_label = $(this);
label_for = active_label.attr('for');
checkbox = $("input[type='checkbox']#"+label_for);
if (checkbox.hasClass('replaced')) {
container = checkbox.parents(".checkbox_container");
checkbox_a = container.find("a");
checkbox_a.removeClass('hover');
active_label.removeClass('hover');
}
return false;
});
label.click(function(){
active_label = $(this);
label_for = active_label.attr('for');
checkbox = $("input[type='checkbox']#"+label_for);
if (checkbox.hasClass('replaced')) {
container = checkbox.parents(".checkbox_container");
checkbox_a = container.find("a");
checkbox_a.removeClass('hover');
if (checkbox_a.hasClass('checked')) {
checkbox_a.removeClass('checked');
checkbox[0].checked = false;}
else {
checkbox_a.addClass('checked');
checkbox[0].checked = true;}
}
return false;
});
$("a.checkbox_href").click(function(){
checkbox_a = $(this);
container = checkbox_a.parents(".checkbox_container");
checkbox = container.find("input[type='checkbox'].replaced");
if (checkbox_a.hasClass('checked')) {
checkbox_a.removeClass('checked');
checkbox[0].checked = false;}
else {
checkbox_a.addClass('checked');
checkbox[0].checked = true;}
return false;
});
$("a.checkbox_href").mouseover(function(){
checkbox_a = $(this);
container = checkbox_a.parents(".checkbox_container");
checkbox = container.find("input[type='checkbox']");
label_a = $("label[for='"+checkbox.attr('id')+"']");
label_a.addClass('hover');
checkbox_a.addClass('hover');
});
$("a.checkbox_href").mouseout(function(){
checkbox_a = $(this);
container = checkbox_a.parents(".checkbox_container");
checkbox = container.find("input[type='checkbox']");
label_a = $("label[for='"+checkbox.attr('id')+"']");
label_a.removeClass('hover');
checkbox_a.removeClass('hover');
});
//}
}
else {
select_ul.append("
/*select_ul.find("a[href='"+((option_value = option.attr('value'))?option_value:"#")+"']").attr({'title':option.attr('value')});*/
}
container.css({ 'position':select_array[i].position,
'float':select_array[i].efloat,
'left':select_array[i].left,
'top':select_array[i].top,
'width':select_array[i].width,
'height':select_array[i].height,
'margin':select_array[i].margin,
'overflow':'hidden'})/*.addClass(container_class[i])*/;
container_class = select_array[i].eclass.split(' ');
for (j in container_class) {
container.addClass(container_class[j]);}
select_ul.css({ 'position':'absolute',
'left':select_array[i].left,
'top':select_array[i].top+select_array[i].height/*+parseInt(select_array[i].margin.split(' ')[0])*/,
'margin':select_array[i].margin,
'width':select_array[i].width,
'overflow':'hidden'});
select_ul.hide();
//////alert(select_array[i].width);
(text_select = container.find(".text_select")).css({'height':select_array[i].height, 'width':select_array[i].width, 'display':'block'});
container.addClass('slideup');
ul_options = container.find("ul.select_ul li.select_li a");
container.find(".text_select a").text(ul_options.text());
text_select.click(function(){
text_select = $(this);
container = text_select.parents(".replacer_select");
select_ul = container.find("ul.select_ul");
if (container.hasClass('slideup')) {
container.removeClass('slideup');
container.addClass('slidedown');
select_ul.show();
select_ul.css({'left':container.position().left, 'top':container.position().top + text_select.height()});}
else {
container.addClass('slideup');
container.removeClass('slidedown');
container.find("ul.select_ul").hide();}
return false;
});
ul_options = container.find("ul.select_ul li a");
ul_options.click(function() {
check_option = $(this);
check_option.parents(".replacer_select").find(".text_select a").html(check_option.html());
select = check_option.parents(".replacer_select").find("select");
if (select.size() <= 0) {
alert("Aaaaaaaa!!!");}
li_mass = check_option.parents(".replacer_select").find(".select_ul li");
options = select.find("option");
for (i = 0; i < options.length; i++) {
select_option = $(options[i]);
if (select_option.attr('value') == check_option.attr('title')) {
select_option.attr({selected:'selected'});
select[0].selectIndex = i;
$(li_mass[i]).addClass('select_li');}
else {
select_option.removeAttr('selected');
$(li_mass[i]).removeClass('select_li');}
}
text_select = container.find(".text_select");
(container = text_select.parents(".replacer_select")).find("ul.select_ul").hide();
container.addClass('slideup');
container.removeClass('slidedown');
if (container.hasClass('submit')) {
container.parents("form")[0].submit();
return false;}
if (container.hasClass('goto')) {
return true;}
return false;
});
element.hide();
}
function slideup_or_no() {
if (!slidedown) {
slide.each(function(){
if ((container = $(this)).hasClass('slidedown')) {
container.find(".text_select").click();
}
});
}
}
var slide = $(".replacer_select");
var slidedown = false;
slide.mouseover(function(){
container = $(this);
if (container.hasClass('slidedown')) {
slidedown = true;}
});
slide.mouseout(function(){
slidedown = false;
setTimeout(slideup_or_no, 1000);
});
}