We decorate text fields using jQuery themes
Honorable public,
JQuery themes framework allows you to easily and quickly impart the same style to all widgets from the jQuery UI set. However, this does not apply to simple elements - they remain gray and dull. I wanted to arrange all the other fields in the same style. Let's start with the text.
To write a special widget for this will be overkill, we restrict ourselves to a simple script that will be connected to the Master Page:
')
First, we connect the default classes: ui-widget - the base class, ui-state-default - for the “default” state, and ui-corner-all for the rounding of corners (does not work in IE). The hover method sets two behaviors: when you hover the mouse, we change the default class to ui-state-hover (the third argument is to remove the smooth transition), and when we remove the mouse, everything returns. Well, for the focus and blur events, we write two different handlers.
update
For all this to work, you need to connect the following scripts:
Jquery
Jqueryui
And the CSS of your favorite theme from here:
jqueryui.com/themeroller
The post is intended for beginners in jQuery. I just spent a couple of hours, sorting out with all these classes, I wanted to save others time ...
update2
Early I rushed to write a post, a fact. Text fields should be set by default to the “ui-widget ui-widget-content ui-corner-all” class, by focus, to add the “ui-state-highlight” class, and by hover it is not clear what to do. They have been planning to add classes like ui-form-default and ui-form-hover for such cases for a year already.
JQuery themes framework allows you to easily and quickly impart the same style to all widgets from the jQuery UI set. However, this does not apply to simple elements - they remain gray and dull. I wanted to arrange all the other fields in the same style. Let's start with the text.
To write a special widget for this will be overkill, we restrict ourselves to a simple script that will be connected to the Master Page:
$(function () { $('input:text, input:password, textarea') .addClass('ui-widget ui-state-default ui-corner-all') .hover( function () { $(this).switchClass('ui-state-default', 'ui-state-hover', 1); }, function () { $(this).switchClass('ui-state-hover', 'ui-state-default', 1); }) .focus(function () { $(this).addClass("ui-state-focus"); }) .blur(function () { $(this).removeClass("ui-state-focus"); }); }); ')
First, we connect the default classes: ui-widget - the base class, ui-state-default - for the “default” state, and ui-corner-all for the rounding of corners (does not work in IE). The hover method sets two behaviors: when you hover the mouse, we change the default class to ui-state-hover (the third argument is to remove the smooth transition), and when we remove the mouse, everything returns. Well, for the focus and blur events, we write two different handlers.
update
For all this to work, you need to connect the following scripts:
Jquery
Jqueryui
And the CSS of your favorite theme from here:
jqueryui.com/themeroller
The post is intended for beginners in jQuery. I just spent a couple of hours, sorting out with all these classes, I wanted to save others time ...
update2
Early I rushed to write a post, a fact. Text fields should be set by default to the “ui-widget ui-widget-content ui-corner-all” class, by focus, to add the “ui-state-highlight” class, and by hover it is not clear what to do. They have been planning to add classes like ui-form-default and ui-form-hover for such cases for a year already.
Source: https://habr.com/ru/post/94701/
All Articles