Vertical tabs with jquery tabs
I have found a simple solution (mostly CSS based, minimal javascript processing) to use jquery tabs to create vertical tabs. If somebody are interested, please let me know.
Adding an autofill option and anchored filters to the autocomplete plugin
I propose a couple of new features for the autocomplete plugin. First, add the option to do the text filtering based on the first characters in the source instead of the character string contained in the source. Secondly, add an autoFill option so that the first selection will auto-populate into the input box, with the portion of that option not already typed created as a selection. When the user types in the next character, the selected portion will immediately disappear as part of the keyDown event.
In the Dialog, auto focus on first tabbable element should be a configuration option
We have some Dialog windows that when opened we do not want any elements to be focused. A good example of this is if we use textbox hints (text displayed in the textbox giving information on when that textbox does) in a dialog. When the textbox is focused, it clears the hint. When we open the dialog we would prefer it if the textbox hint was not cleared until the user selects the box. Technically there are other ways to get around this problem but it would be nice if an option was added indicating
Documenting bound events as part of specifications
Here is something we should do in the future, and where time is available, add for existing components: Document all the events that are bound as part of the functional specification, including details of event-object properties that are read. For example, Autocomplete binds, among various others, a keydown-event to the element, and checks the keyCode event property for various values. This could make code reviews much more effective, and even better yet, would server as documentation on how to script
Sychronized animations and where eventual implementation should be added
At the moment in jQuery (and UI as well, see explode effect for prime example); there is no possibility to execute multiple animations in parallel and guarantee that they will execute in sync. At http://dev.jquery.com/ticket/6281 I proposed an implementation to effectively enable synchronization; but question arises if this should be in Core or in UI. Thus I need to ask you what you think, and also if my implementation is the right™ way to accomplish this. An example of this issue can be found at
Position Dialog using Position Object
Hello, I have created a patch to allow the postion of a dialog to be specified using a position object. With this patch you can do the following: $("#dialog-modal").dialog({ height: 140, modal: true, position: {my: 'center', at: 'center', of: '#test_form'} }); The patch does not effect the results of the Unit Tests for the Dialog, and all of the original options for the dialog's postion option should function as expected. The patch is against the master branch, alternatively the a branch with
Autocomplete to allow for multiple words
I am new to this forum, so please forgive me if this has already been posted. It would be great if one could specify a delimenator so that a fresh autocomplete list appears when one starts a new word followed by the delimenator, in the same string. This would work great for things like email addresses. How could I go about contributing development to these controls? Thanks for a great library!
Themeroller shouldn't generate images if user chooses flat background
When choosing a flat background css should be like: background-color: #c0c0c0; and not: background: #c0c0c0 url(images/ui-bg_flat_100_c0c0c0_40x100.png) 50% 50% repeat-x;
New menu() feature should be closable by hitting ESC
The new menu() feature is nice, but I think it should be closable by hitting ESC. This is something that a lot of people will try to do because they are used to it in normal menus. Dan
JQuery UI for not supporting IE6
I am not jscript develper, but I know, lots of js and CSS is written to support IE6 quirks. I am think, jquery team can fork another branch for core + CSS code, which supports IE7+ , FF, chrome only. I think, jquery code might be more stable and resilient, if we take out IE6. Once that forked branch is stable, then Jquery team can give option to users, which version to use. Hopefully, users will stop using IE6 compliant version and JQuery team can deprecate their IE6 version. PS: The reason,
New markup structure for tabs
The current markup structure required by the tabs widget is not very friendly for the purposes of progressive enhancement (nor for alternative styling in different media -- say, how do you style a tabbed area for print?) Would it be feasible to migrate the markup to the structure proposed on this blog post? (Disclaimer: that's my blog :-)
UI tabs from fieldsets
Hey guys, In my understanding the semantics of <fieldset>s in forms are in fact what tabs are trying to express visually: sets of logically related fields with their associated content like help texts and media. Then when I try to visually organize a complex form as tabs, it's pretty frustrating that, instead just being able to use the so natural and semantical <fieldset>s right away, you need to write some additional markup that doesn't entirely express the original semantics/intent of field-sets.
tab post option
It seems reasonable to have a post option with the tabs. It is possible currently to set the tab to post by changing the ajax method to post, however, there is no way to easily provide a parameter with the post. (forgive my missing it if there is). To have a post option with a url and param(s), would be most beneficial. As another thought, if a callback could be added before the load, one could set the parameters for a post... this could also be useful for checking updates not saved, etc... Thanks,
ui-icon files could be much smaller
While the ThemeRoller was broken, I found some icons sitting around from a previous download with a different theme and edited the file in Gimp to have a single-color palette of the various colors required for my theme. This technique resulted in files less than half the size of the original. ui-icons_ffffff_256x240.png went from 4369 to 1936 bytes by this transformation.
Default "post click" action for buttons
I feel that the default behavior for an button on click (or more exactly, after a click) should be like following code: button_object.click(function(){$(this).blur()}); i.e. that the button object shouldn't be marked as focused, as it's rather contrary what people expect, especially for icon buttons, like toolbar buttons. In a perfect world perhaps also last focused object before click should regain it's focus (dunno if that's possible)
Plugin support for themeroller
I would like to see support in themeroller for plugins to define their own UI elements that the user can then style using themeroller, in addition to the standard framework styles. For example, look at the demo for the data tables plugin at: http://www.datatables.net/styling/themes This plugin supports theme roller but the plugin uses additional styles that are not covered by the CSS framework - e.g. the odd/even band colours for the rows of the table. I would like to see an enhancement to themeroller
onAfterChangeMonthYear addition to datepicker
Hello, I made a change to datepicker that may be useful to others, so I'm forwarding the idea for inclusion in the widget. The datepicker widget currently supports onChangeMonthYear callback, but... this gets fired before the calendar view is updated. If the calendar is sitting inside some flexible container that needs programatic resizing (eg. a div inside a Coda slider panel) I can't use this callback to refresh the view. What I needed was a callback to fire after the calendar has been changed,
Auto-initializing widgets
I've created a base widget class for my own widgets to extend which allows them to auto-initialize and I thought it might be of interest to others. The concept is each widget registers a selector which it auto-initializes against, and options can be declared in the HTML. Example: ============================ --jquery.ui.foo.js $.widget("ui.foo", { register: "div.ui-foo", // elements matching this selector will initialize with the foo widget options: { bar: false // because bar is
Enhancement, allowing animateClass to affect other nodes.
Right now the animateClass functionality is limited to only animating the node(s) you change the class on. I'd like the ability to use animateClass/switchClass/etc... in a way that affects other nodes. For example in the case of putting classes on the body to depict states that parts of the page is in (fairly common practice in flexible apps at times) I'd like to be able to have the change in class affect those other nodes. For example, pretending that there is a div in the page with an id of #sidebar
autocomplete should expose "ui.items" on "open" event
It would be great if the "open" event would pass information about the menu as a parameter.
jQueryUI Custom Downloads - Managing features from version to version
hi, first off thanks for all of your hard work on this great framework; we've incorporated jqueryUI on multiple projects which we maintain and frequently update with the latest available framework library versions. We've found that while the custom download feature of jQueryUI is a great way to get (only) the features we need into a project, it becomes hard to manage which features need to be 're-selected' when generating a subsequent version (i.e. upgrading from jQueryUI 1.7.3 to jquery1.8.2) as
Extending Dialog Buttons Option
Has there been any thought to developing Dialog Buttons - Primary, Secondary, Disabled? I did not find a use for setting the priority of a button, the proposed implementation below was created to apply additional styles. Thoughts? Current buttons : { "publish" : function() { }, "preview" : function() { } "cancel" : function() { } } Proposed buttons : { "publish" : function() { //support current functionality }, "preview" : { click : function() { }
asynchronous resize in Resizable/ui
it would really help if resizing an object will resize the oposite of an other object $.ui.plugin.add("resizable", "asyncResize", { start: function(event, ui) { var self = $(this).data("resizable"), o = self.options; var _store = function(exp) { $(exp).each(function() { $(this).data("resizable-asyncresize", { width: parseInt($(this).width(), 10), height: parseInt($(this).height(), 10), left: parseInt($(this).css('left'),
Include text fields, checks, radios and combos with TR themes
You've about everything else there, why not these things? They are, after all, ubiquitous elements of web sites...
Remove Accordion focus/blur()
There is a comment in the source on line 411 that asks the questions: // TODO assert that the blur and focus triggers are really necessary, remove otherwise I for one would say remove that stuff, or move it to the click handler at least. It causes issues with auto-rotating the accordion. If the next topic is below the viewport it will automatically scroll down, which is expected. Also a weird bug in FF that if you are on another tab and the next topic is focused it FF will switch back to that tab.
Slider with a fixed range
Hi, I want a slider which selects a range of 3 out of 10. It could be done with the range slider but then the range could be changed and that should not be possible. Yet it should work as a range slider because I need the two values of the range. As an attachment I added an edited screenshot which will make clear what I am looking for. Greetings Tomas
Base Libraries for Drawing
I needed to draw lines using javascript for a game I am developing. When I looked at the existing libraries I saw that they were either browser dependent or too processor intensive, with methods like creating 1 pixel divs. I could not find any simple and good library. After some research I saw that there were two standards that could be used to draw lines without using too much resources. The canvs on firefox, safari and opera and the vml on internet explorer. Some old browsers may not support this,
HTML 5 markup for widgets
Hi all, I am new here but a long time user of jquery UI. I am starting my activity in this space with an idea: - should the widgets use the new html5 semantic tags? I think this is a great help for developers because it would make the markup of the widgets much cleaner and easy to remember. I blogged about this but you dont have to go there, the key idea is most widgets represent paradigms that are easy to follow with semantic tags: - accordion is a TOC and a TOC in html 5 can be a nav element
Attach ui.autocomplete searching event on propertychange/input instead of keydown
Why not use the onpropertychange(msie)/oninput(firefox) event to catch content changing in autocomplete plugin, so that it can fire the search event on content changed by other event like paste from clipboard or chinese input method? Now I map the event to keydown manual outside the control : if ($.browser.msie) ele.onpropertychange = function() { $(ele).trigger("keydown"); }; else ele.addEventListener("input", function() { $(ele).trigger("keydown");
Console in demo system
Hi, I've just read ideas page. Have one idea for "jQuery new demo system". It will be cool if in widget demo be console, that logs what code now executing. Something like this: http://demos.telerik.com/kendo-ui/combobox/events
[jQueryUI] [Tooltip] One more demo - Growl
Here is a proposal for a one more demo for Tooltip: simple growl. With the new jQueryUI Tooltip widget there is no need in a separate growl plugin anymore. http://jsfiddle.net/yarshevich/GrFDQ Please let me know if it sounds reasonable. I can add it to the demo site.
Refactoring dialog.overlay in preparation for Modal & better keyboard accessibility
Hi, we - that is, I and my team - need to improve the keyboard accessibility & modality of the Dialog widget in order to use it. I was originally thinking of binding the "focus" event as it bubbles up to the document - which would remove a lot of the expense of trying to get all "focusables" in the page or any technique like that. Weirdly, this seems to only work for focus() events triggered by jQuery, rather than native ones. That aside, would you be able to accept a patch that kept (or improved)
Possibility to select layout
My idea is to let the website developer freely set the layout of the elements of jquery-ui, like by example menu (for now it's possible to do only vertical ones and there should be a possibility to make it also horonizontal). This option is important in site navigation development. Without it, there would be need to rewrite whole site to change it's layout only to fit the menu (with would be time critical)
datepicker accessibility extension: voice-over compatibility
Although there are proposed keyboard accessibility changes for datepicker here: http://wiki.jqueryui.com/w/page/12137778/Datepicker There is no mention of voice-over support, Is it planned? I am considering contributing to the datepicker module hosted on Github: https://github.com/jquery/jquery-ui/tree/datepicker Thanks, Omar
suggestions on spinner
I had not so much time to look into your spinner control. But so far: use a span-element as a wrapper. this has two advantages over div IE6/IE7 do support display: inline-block on "native" inline elements like span, but not on div span is valid inside other inline elements like input-elements, div is not don't set height - other than auto - on the wrapper-element, let the developer only style the input and the wrapper will automatically adjust his size also add left/right arrow keys to increase/decrease
Datepicker: only certain days are selectable
To make only certain days of the datepicker selectable, I have to the file jquery.ui.datepicker.js made some minor changes. Using a function, it is possible to provide some days with the tag "ui-state-disabled". Example usage: $('input[name="_date"]').datepicker({ disable_date: function(date, month, year) { return day % 2 == 0; } });In the Annex you will find the modified file and the modifications listed individually.
Please create the ability to have stationary DIV's that look like Dialog boxes with title bar and minimize button.
Please create the ability to have stationary DIV's that look like Dialog boxes with title bar and minimize button. That way everything will look the same theme wise without a lot of code. I of course am able to simulate the look of my DIV's with the rounded corners and the title bar with a minimize button. But thats a lot of DIV's and CSS and code. Thanks. Instead of "dialog' you could call it 'divbox' or something like that. Thanks.
Extend datepicker to fill calendar with pre-existing dates and highlight them....
Hi, what I would want to have is a functionality, where I can define certain groups, assigning them a specific colour, then, in a second step, assign certain dates and names into those groups. If the calendar shows such a date, it should be marked by the colour provided for it's group and show the name as a tool tip on mouse hover. If a date appears multiple times, each name should appear in the tool tip in a new line. And maybe there should be a hardcoded background-colour implying "multiple", if
Button GET\SET Value
Because the button is a part of a form element and can be used as a checkbox or radio, it should have a get and set value method. Though the values inherited from markup, i would propose to add this feature. For example I'm working with an Ajax form, and i need to change state of button each time i get a response, that kind of behavior i don't need while submitting the form to a URL.
add rotation awareness to $.fn.position
Hey guys, I'm trying to figure out a way to make the position method context aware, modifying the final position of the source element if the target is rotated in some form. Whenever I try to move elements beside a rotated target, the positions won't work as expected. I was trying to do some matrix transformations, but I'm too newbie to actually bootstrap something quickly, it would be pretty cool if someone from your team could guide me, or see if you would be also interested in adding this type
Next Page