is there a way to add jquery ui classes into my own css file per element, IE:
input {
ui-corner-all /* <- JQuery UI class */
}
as opposed to adding the class to every input, IE:
<input name="myinput" type="text" class="ui-corner-all" value="" />
You can check out LESS, here is a very similar question on SO Can a CSS class inherit one or more other classes?
LESS is an extension for CSS a great level of abstraction with variables, nested rules, function, operations, etc
You can use the jQuery .addClass method to add a class to elements at any time, including page load, such as:
$(function() {
$(input).addClass('ui-corner-all');
});
This would add the ui-corner-all class to every input element in the html when the page loads. If you would like to select only certain elements on the page, use a more specific selection, such as:
$(function() {
$('#myInput').addClass('ui-corner-all');
});
This will add the ui-corner-all class to all of the elements on the page that have the ID of myInput.
You might want to look into checking out Sass. This will give you the option to extend css classes to your own classes via @extend.
This is a handy Sass + Compass video
This way, you don't have to depend on javascript to add classes. It's all done through css.
Hope this helps!
You could also use a preprocessor like LESS to achieve this. You would have to save your ui.css as ui.less and then you could do something like this:
@import url(ui.less);
input {
.ui-corner-all;
}
After compilation of your less to css, it would take all the styles of the ui-corners-all class and apply them to your inputs. And that is just one of the many advantages of using a css preprocessor. It is really worth looking into and is not very hard to learn if you are familiar with css. You can find more info here: http://lesscss.org/
inputsuch that you can remove the class name from the actual input element?