jNiceIt - jQuery plugin to customize design of textboxes, radiobuttons, checkboxes, and more!
Framework: jQuery Listed in: Forms, User Interface
Description
jNiceIt is a jQuery plugin which allows you to customize generic form controls and apply your customized design to them. You may use this plugin to emulate MS Windows, Linux or Apple MacOS controls or your own unique style.
Design of each control can be fully customized via CSS. The plugin supports both fixed and fluid page layouts because it does not use absolute positioning of skinned controls like most jNiceIt alternatives do.
Features
- Light-weight script
- Easy to integrate
- Fully customizable via CSS
- Works with all modern browsers
- Supports fixed and fluid page layouts
- The following controls supported:
- Button
- Text Input
- Check Box
- Radio Button
- File Upload Input
- Select Box
- List
- Text Area
How to Use
1.) Download jNiceIt script. The package already contains jQuery framework.
2.) Add the following code to your <head>…</head> tag to connect jQuery framework and jNiceIt plugin. (Make sure paths to files are correct.)
{code type=html}
{/code}
That’s it ;) Click the Demo button to see it in action.
Popular Categories
View All- Effects (8)
- Forms (6)
- Lightboxes (5)
- Photo Galleries (1)
- Preloaders (1)
- Tables (1)
- Tooltips (3)
- User Interface (16)
AJAX Tutorials
View All- How to Add Hints & Auto Focus Form Fields using jQuery
- Convert Images to Grayscale
- Advanced Plugins Development with ExtJS
- Rotate Images Using JavaScript
- Create Custom Cursors without .cur File
- Convert ASCII Character to Hex, Decimal and Binary Code
jochen
April 7, 2010
I would not recommend to bend browser controls to such extend. Even for experienced users, juggling with vast variations of form designs — and differing behaviousr — it leads only to reduced usability.
One example: the dropdown menu in “before” selected, go ahead and type V or arrow keys. As you’ll see (on a win platform, at least) it helps you to navigate trough the entries. Try that with the ‘after’ example. which is better?
ajaxBlender.com
May 25, 2010
Thanks jochen. You make a very good point on which I can partially agree. At first as a web developer I believe that generic controls are much better than custom ones. But secondly, the overall look and feel of the end website or web application is done by designers. And according to our internal stats, for every 100 custom web projects, there are at least 20 or so which will require custom textboxes, dropdown menus, textareas, checkboxes, etc. Not just because it is a designer’s fancy, but because objectively, a custom UI looks much better with the design. The jNiceIt script has been developed especially for this purpose. We don’t say you must use it. We just say when designer wants a custom UI, you don’t have any other choice. :p
So, the main reason we “re-invented the wheel” is that from time to time during development projects, we are forced to work with a fixed layout (from the client). But then a custom UI is requested by the client for the page with a fluid width. At this point, all known JavaScript skinning libraries are a pain to work with. They just do not render the layout properly when the browser’s window gets resized. Therefore, we created our own library for this and share with you for free use. :)
Thanks,
Alex
MaksimC
June 10, 2010
Nice plugin. I would like to recommend you to use ‘>’ CSS2 selector where it’s possible. This feature will improve rendering performance of UI widgets.
Darren – ajaxBlender
June 16, 2010
Hi MaksimC….thanks for the suggestion, however this will not work in IE6 and our scripts and client projects are still required to support this compatibility with the IE6 browser…well, atleast until it “officially dies” :P (we can’t wait, lol)… so in a future release, we will modify it as you have suggested. thanks again!
simon
September 30, 2010
Hi guys, just wanted to say that this is a really sweet thing that you’ve made. I can’t believe that there aren’t more comments!
Have looked through a number (of the limited few available) of “similar” solutions, but this one is in my opinion by far the best.
The default (and only?) skin is clean and appealing and looks consistent in the browsers that I have tried. I also like that you cover all form elements (annoying when people make one for checkboxes or buttons only).
Thanks for sharing this and keep up the good work :)
Tomy
January 28, 2011
Hi, the plugin works very well, thank you so much for your contribution! :)
I have just a small issue: it’s possible to indicate an onChange event to a Select Box?
I couldn’t do it so far…
Thank you!
Luli
February 17, 2011
Hi Guys, the plugin works fantastic until you have to deal with two or more selects one above each other.
When you click, the dropdown falls behind the other field and you can’t read the menu options.
I was trying to solve that playing with z-index but it didn’t work.
Anyone with the same problem or a nice solution?
The plugin is great, I think we all can contribute to achieve an awesome script but I don’t know why are just 3 comments.
Thanks for sharing!
Stay Alive
May 5, 2011
I like this plugin..and it works just fine..except for the button..how can i use it with ASP.NET button control..?
Rui Cardoso
June 15, 2011
To solve the select box z-index problem in IE just add the following code to the SELECT BOX section in the css file:
.fmSelect UL LI:hover{
z-index:999999;
}
Paul
February 27, 2012
This might be cool if it worked. As soon as I apply NiceIt to my form, the only dropdown on the form breaks: my regularly-styled form has five values in its single dropdown. As soon as I add class=”NiceIt” to my form tag and refresh the page, opening the dropdown shows no values.
(By the way, you might consider adding a step three to your “How to Use” instructing the user to add the NiceIt class to each for they want to Niceify…)
Paul
February 27, 2012
My textarea is broken too. It suddenly has almost zero rendered width, despite my cols=20.
Browser: IE8 in compatibility mode.
venkat
April 10, 2012
when i am using this script the on change events are not firing. is there a way we can retain the onchange event code which i wrote for normal html controls for the styles ones?
Árpád Csikós
June 21, 2012
Hello!
I have an offer in the script at fnReplaceCheckBoxes()
$(’label[for="' + $(ctrl).attr('id') + '"]‘).bind(’click’, function () {
$(nCtrl).toggleClass(’checked’);
});
Why?
Because, the label click event triggered the normal input element click event (checkbox, radio), and the simple click event ran twice, and the designed element don’t changed.
The normal input elements click event is already treated before this function.