1.Create jQuery plugin function zendFormStyled
$.fn.zendFormStyled = function(method) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.zendFormStyled' );
}
};
2.Offer initialization with predefined options and external options
init: function (options) {
var settings = $.extend( {
'automaticRestyle' : true,
'allowFormRestore' : false,
'hideEmptyDt' : true,
'moveHiddenElements' : true,
'adjustColumnHeights' : true,
'addErrorClassToInvalidElement' : true,
'removeErrorClassOnInvalidElementBlur' : false,
'submitContainerClass' : 'submit-container'
}, options);
// first initialization
this.zendFormStyled('style', settings);
if (settings.automaticRestyle) {
var self = this;
// restyle all forms after successful AJAX request - their code might have changed
// @TODO would be great to detect and restyle only the forms that changed...
$('html').ajaxComplete(function() {
self.zendFormStyled('style', settings);
});
}
},
3. Apply the style method
style: function(settings) {
return this.each(function(){
var self = $(this);
self.addClass('zendFormStyled');
/**
* First we check what kind of Zend_Form we're dealing with...
* It can either be:
* - Zend_Form with Zend_Form_Elements in it ('elementsOnly' class added),
* - Zend_Form with Zend_Form_Subform(s), Zend_Form_Elements in it,
* but all elements are groupped in DisplayGroups ('allInDisplayGroups' class added),
* - Zend_Form with Zend_Form_Subform(s) and Zend_Form_Elements in it, can also contain DisplayGroups
* ('subformAndDisplayGroups' class added).
* We add classes to each form.
* If you want to force certain type of styling despite form contents,
* set one of the classes in Zend_Form, it will override jquery.
*/
if (!self.hasClass('allInDisplayGroups') &&
!self.hasClass('subformAndDisplayGroups') &&
!self.hasClass('elementsOnly')
) {
if ($('fieldset fieldset', self).length > 0) {
self.addClass('allInDisplayGroups');
}
else if ($('dl.zend_form>dd>fieldset>dl>dd>fieldset', self).length > 0) {
self.addClass('subformAndDisplayGroups');
}
else if ($('dl.zend_form>dd>fieldset>dl>dd>input', self).length > 0) {
self.addClass('subformsOnly');
}
else {
self.addClass('elementsOnly');
}
}
if (settings.moveHiddenElements) {
// move all input[type=hidden] to the end of the form and drop their dt/dd containers
$("dl.zend_form input[type='hidden']", self).each(function(index, element) {
var hiddenElement = $(element);
var parentForm = hiddenElement.parents('form:first');
// check if it's not a hidden field connected with a checkbox (from Zend decorator)
if (hiddenElement.next("input[type='checkbox']").length == 0 &&
hiddenElement.next("input[type='file']").length == 0
) {
hiddenElement.parent('dd').prev('dt').remove();
hiddenElement.parent('dd').remove();
hiddenElement.appendTo(parentForm);
}
});
}
if (settings.hideEmptyDt) {
/**
* Hiding empty dt elements rendered by Zend_Form only for validation purposes.
*/
$('dl.zend_form dt', self).each(function(index, element) {
if($(element).html() == ' ') {
$(element).hide();
}
});
}
if (settings.adjustColumnHeights) {
/**
* Equalizing boxes heights in each row (for twoColumns layout).
* @TODO rewrite this completely!
*/
if (self.hasClass('twoColumns') && self.hasClass('subformsOnly')) {
$('dl.zend_form>dd:even', self).each(function(index, element) {
var height = 0;
if($(element).children('fieldset').height() < $(element).next().next().children('fieldset').height())
$(element).children('fieldset').css('height', $(element).next().next().children('fieldset').height());
else if($(element).children('fieldset').height() > $(element).next().next().children('fieldset').height())
$(element).next().next().children('fieldset').css('height', $(element).children('fieldset').height());
});
}
else if (self.hasClass('twoColumns')) {
$('dl.zend_form>dd>fieldset', self).each(function(index, subform) {
var height = 0;
$('dl>dd:even', $(subform)).each(function(index, element) {
if($(element).children('fieldset').height() < $(element).next().next().children('fieldset').height())
$(element).children('fieldset').css('height', $(element).next().next().children('fieldset').height());
else if($(element).children('fieldset').height() > $(element).next().next().children('fieldset').height())
$(element).next().next().children('fieldset').css('height', $(element).children('fieldset').height());
});
});
}
}
if (settings.addErrorClassToInvalidElement) {
/**
* Adding 'error' class to form element which did not pass validation.
* (standard Zend_Form decorators do not do that...)
*/
$('ul.errors', self).each(function(index, element) {
$(element).prev().addClass('error');
});
}
if (settings.removeErrorClassOnInvalidElementBlur) {
/**
* Removing 'error' class after leaving the element (not sure if it's reasonable though...)
*/
$('.error', self).bind('blur', function() {
$(this).removeClass('error');
});
}
if (settings.submitContainerClass) {
/**
* Adding 'submit' class to button's container
*/
$("input[type='submit']", self).parent().addClass(settings.submitContainerClass);
}
});
}
4. Bookmark
I may need this tool one day: https://github.com/sarlak/Zend-Form-Maker