I'm on the verge of starting a new web application that is likely to have need for both standard, simple dropdowns as well as more feature-rich autocomplete controls for longer lists of values, better type ahead behavior, etc. I'm planning on using the jQuery UI Autocomplete widget along with some combobox behavior as detailed here:
http://jqueryui.com/demos/autocomplete/#combobox
My concern is that "out of the box" the Autocomplete widget looks very different than a standard control. Since is not easy to skin/style, I'm hoping to adjust the Autocomplete to look & feel as close to the as possible, except in the cases where the increased functionality justifies a different L&F.
What is the best way to go about reskinning the Autocomplete to look more like a ? Has this already been done somewhere? Should I use jQuery UI theming? Other options?
The autocomplete control already uses the jQuery UI theming :)
Change the style with the dropdown in the upper right of that page you linked here to see.
Those are the default themes available. but you can of course tweak the theme yourself. All jQuery UI widgets conform to this theming scheme. They provide a tool you can customize the theme with as well, called ThemeRoller. You'll see autocomplete on the right in ThemeRoller, it will be styled live as you make changes to the theme.
Related
Hi I want to know what is the easiest way to create smooth,simple and attractive,
light weight theme for website ?
so I have confusion in choosing many css, js framework.
can any body tell me which is better and best to create theme ??
it depends on many factors such as what type of theme you want to create. If the theme is just going to be dealing with UI Controls, Then checkout
jquery ui at http://jqueryui.com/ as it provides excellent themese for you.
Since you mentioned CSS you should also check
Blue Print CSS Framework
as it comes with a huge variety of styles that you can add readily.
You can also download some HTML 5 light weight themes that are compatible with mobile devices also and then you can customize them to their content.
http://creativecan.com/2012/05/html5-and-css3-templates/
Check that out as well.
I render a page from the server (an admin intranet app) then I want jQuery UI it and keep things consistent with the selected jquery ui theme.
Take for example buttons
<button class="do-something">Logout</button>
The jQuery UI documentation say that one should not apply ui-state-default and 37 other CSS classes manually (at server render time), but on a initial render one should call $(selector).button() where selector maybe just 'button' or '.nice-button' etc..
This seems a bit smelly to me but I suppose the fine grain control make sense given its not intending to be as high-level as ExtJS or Sproutcore etc..
Then I thought what about an icon button I'd thought <button class="do-something ui-icon-arrow-e">Logout</button> when calling .button() it would check for presence of such class and render accordingly. However it seems one has to do button(icons { pri: 'blah'}}). Yikes.
Am I approaching it wrong? it seems like a code smell here mixing a lot JavaScript statements related purely to rendering outside the html? I haven't even considered stuff injected later via ajax etc..
Then I want to have a panel with heading like an accordion, I ended up having to dump about 93 CSS classes onto a div and h3 to get things consistent. I then created my own extension jQuery $ fn extension .crmPanel() which was basically parent.addClass 43 and parent.children('h3:first').addClass() 53 times. Seems messy
How are people using jQuery UI in intranet apps, or are you just purely using the element and doing the others bit manually?
(note divide any quantitative figures related to number of CSS classes by 4)
jQuery UI CSS Framework gives a nice base for some of the UI elements such as Tabs, Dialogs etc. We have found it lacking and therefore would usually add another CSS file to enhance standard CSS with some CSS3 effects, add typography and Grid System.
The result looks like this:
http://agiletoolkit.org/intro/engage
and although it's still based on jQuery UI theme it does not look like that.
When it comes to buttons, we sometimes use the jQuery but sometimes use CSS. In that particular example, CSS is used, in other cases (selector).button() is used:
http://codepad.agiletoolkit.org/buttonpushing.html?b=devel
In regards to panels and layouts, compared to ExtJS, jQuery does almost nothing to help out. Besides, I'm not fan of JS-controlled layouts since they are slow and jittery. I think CSS is a way to go.
Thanks for looking into this.
I'm looking to build a framework of apps which can be extended by third party developers.
The goal is to load each frame via ajax - I need to know if there is a framework which can be help me position and resize various widgets just like this one.
Example screenshot
http://tour.netvibes.com/private.php
Thanks.
Not completely sure what the question is... but:
http://jqueryui.com/
Draggable/droppable as well as jqueryui dialog should help you create and position widgets as in your question.
If you do 'view source' on the page you have linked, you can see that the page uses Mootools.
Appears to be some kind of Javascript framework.
http://mootools.net/
Additionally, you could follow Mark's advice and go with jQuery, which is a widely-used, mature framework that offers great functionality.
I agree with rmk and Mark about jQuery being a great framework!
For the ajax stuff it works well and is really easy to get into work.
For the UI part you can try the "standard" jQueryUI, which is well structured and easily themed, but by now it has a limited set of things. You have all you need to build widgets, but you don't have ready-to-use stuff like panels, layouts and so on..
If you need more, besides those said above, try looking at jQuery EasyUI, which has a lot more of things (for instance a "panel" extension to put widgets inside).
They are both based on jQuery.
For some reason i don't like any of the themes that are on the jquery ui themeroller page (i am looking for something on a business website and these all look either bleak or too corny). I wanted to see if there were other sites where people have uploaded or voted on other themes to view and download.
I know i can tweak my own but first wanted to see if anyone has done this already with a better artistic eye.
Aristo is a really nice jQuery UI theme that is worth consideration.
As others have mentioned, there are more themes out there if want to do some more digging...
I want to have two different jQuery UI accordion menus on the same page, but I want them to have different themes. Is this possible?
Absolutely. The jQuery UI CSS Framework has a robust and complete theming solution. Just give your accordions separate CSS classes - jQuery UI classes are semantic in nature - and off you go! Let me know if you'd like an example.
EDIT: There are many different ways to do this, depending on what your needs are. See the bottom part of this page for more information on how to use theme-ing with the accordion
According to the article Using Multiple jQuery UI Themes on a Single Page from the Filament Group, it is possible to provide a CSS Scope when a theme is downloaded that will allow you to specify use of alternate themes on a single page. There is also a link to a demo page.
Disclaimer: I have not tried doing this myself, but it does look promising.