- accordion(1)
- active-trail(1)
- ajax(1)
- angular(1)
- apache(3)
- bash(4)
- block(2)
- browsers(1)
- button styles(1)
- checkboxes(1)
- code key(1)
- compress(1)
- console(4)
- css(1)
- ctools(1)
- date(1)
- db_query(2)
- db_select(2)
- debian(1)
- dom function(1)
- drag and drop(1)
- drupal 6(3)
- drupal 7(3)
- drupal functions(6)
- drupal_goto()(1)
- drupal_mail(1)
- errors(1)
- eslint(1)
- fancybox(1)
- fedora(1)
- firefox(2)
- firefox addons(1)
- firefox profiles(1)
- form(1)
- form api(5)
- format_date(1)
- git(1)
- hooks(2)
- hook_mail(1)
- hook_theme(1)
- hotkey(1)
- httpd(1)
- husky(1)
- ie(2)
- javascript(2)
- jquery(7)
- jquery plugin(2)
- jquery regex(1)
- js templates(1)
- kb(1)
- like button(1)
- link(1)
- linux(4)
- linux commands(2)
- list(1)
- list styles(1)
- markup(1)
- menu(3)
- mobile(1)
- modal(2)
- module develop(2)
- modules(1)
- monorepo(1)
- mootools(1)
- mysql(2)
- node_save(1)
- opacity(1)
- opensuse(5)
- opera mini(1)
- padStart(1)
- page.tpl.php(1)
- password hash(1)
- patch(1)
- pdf(1)
- python(1)
- radiobuttons(1)
- reg_ex(2)
- sass(1)
- scripts(1)
- search form(1)
- selenium(1)
- share button(1)
- sms(1)
- ssh(2)
- styles(4)
- switch case(1)
- table style(1)
- tar(1)
- taxonomy(1)
- taxonomy menu(1)
- templates(1)
- theme(4)
- toggle(2)
- touchpad(1)
- tray(1)
- trigger(1)
- typescript(2)
- typescript-eslint(1)
- ubuntu(3)
- usefull function(1)
- views(1)
- virtual hosts(2)
- virtualbox(2)
- vmware(1)
- webdriver(1)
- youtube(1)
- кроссбраузерность(1)
Стилизация Radio button и Checkboxes
Написал тут по быстрому скрипт стилизации radiobuttons и checkboxes на jquery для Drupal:
(function ($) {
$(document).ready(function() {
$('input[type="checkbox"]').each(function() {
var self = $(this);
self.hide();
if (this.getAttribute('checked')) {
self.after('<div class="checkbox-style checked" data-id="' + this.getAttribute('id') + '"></div>');
} else {
self.after('<div class="checkbox-style" data-id="' +this.getAttribute('id') + '"></div>');
}
})
$('.checkbox-style').live('click', function(){
var self = $(this);
var id = this.getAttribute('data-id');
if(self.hasClass('checked')) {
self.removeClass('checked');
$('#' + id).attr('checked', '');
} else {
self.addClass('checked');
$('#' + id).attr('checked', 'checked');
}
})
$('input[type="radio"]').each(function() {
var self = $(this);
self.hide();
if (this.getAttribute('checked')) {
self.after('<div class="radio-style checked" data-id="' + this.getAttribute('id') + '" data-name="' + this.getAttribute('name') + '"></div>');
} else {
self.after('<div class="radio-style" data-id="' + this.getAttribute('id') + '" data-name="' + this.getAttribute('name') + '"></div>');
}
})
$('.radio-style').live('click', function(){
var self = $(this);
var id = this.getAttribute('data-id');
var name = this.getAttribute('data-name');
if(self.hasClass('checked')) {
$('input[name="'+name+'"]').attr('checked', '');
$('div[data-name="'+name+'"]').removeClass('checked');
self.removeClass('checked');
$('#' + id).attr('checked', '');
} else {
$('input[name="'+name+'"]').attr('checked', '');
$('div[data-name="'+name+'"]').removeClass('checked');
self.addClass('checked');
$('#' + id).attr('checked', 'checked');
}
})
});
})(jQuery);
$(document).ready(function() {
$('input[type="checkbox"]').each(function() {
var self = $(this);
self.hide();
if (this.getAttribute('checked')) {
self.after('<div class="checkbox-style checked" data-id="' + this.getAttribute('id') + '"></div>');
} else {
self.after('<div class="checkbox-style" data-id="' +this.getAttribute('id') + '"></div>');
}
})
$('.checkbox-style').live('click', function(){
var self = $(this);
var id = this.getAttribute('data-id');
if(self.hasClass('checked')) {
self.removeClass('checked');
$('#' + id).attr('checked', '');
} else {
self.addClass('checked');
$('#' + id).attr('checked', 'checked');
}
})
$('input[type="radio"]').each(function() {
var self = $(this);
self.hide();
if (this.getAttribute('checked')) {
self.after('<div class="radio-style checked" data-id="' + this.getAttribute('id') + '" data-name="' + this.getAttribute('name') + '"></div>');
} else {
self.after('<div class="radio-style" data-id="' + this.getAttribute('id') + '" data-name="' + this.getAttribute('name') + '"></div>');
}
})
$('.radio-style').live('click', function(){
var self = $(this);
var id = this.getAttribute('data-id');
var name = this.getAttribute('data-name');
if(self.hasClass('checked')) {
$('input[name="'+name+'"]').attr('checked', '');
$('div[data-name="'+name+'"]').removeClass('checked');
self.removeClass('checked');
$('#' + id).attr('checked', '');
} else {
$('input[name="'+name+'"]').attr('checked', '');
$('div[data-name="'+name+'"]').removeClass('checked');
self.addClass('checked');
$('#' + id).attr('checked', 'checked');
}
})
});
})(jQuery);
Стили:
/*Checkboxes style**/
.checkbox-style {
display: inline-block;
*display: inline;
zoom:1;
width: 22px;
height: 22px;
background: url('img/checkbox.png') no-repeat bottom left;
}
.checkbox-style.checked {
background: url('img/checkbox-checked.png') no-repeat bottom left;
}
.radio-style {
display: inline-block;
*display: inline;
zoom:1;
width: 22px;
height: 22px;
background: url('img/radio.png') no-repeat center left;
}
.radio-style.checked {
background: url('img/radio-checked.png') no-repeat center left;
}
.checkbox-style {
display: inline-block;
*display: inline;
zoom:1;
width: 22px;
height: 22px;
background: url('img/checkbox.png') no-repeat bottom left;
}
.checkbox-style.checked {
background: url('img/checkbox-checked.png') no-repeat bottom left;
}
.radio-style {
display: inline-block;
*display: inline;
zoom:1;
width: 22px;
height: 22px;
background: url('img/radio.png') no-repeat center left;
}
.radio-style.checked {
background: url('img/radio-checked.png') no-repeat center left;
}
Картинки: