Search jQuery

jQuery Forum

joern.zae..

Some Observations

in Developing jQuery UI • 12 years ago

While building an example application, I noticed a few issues:
- .slider() can't be used on an input, instead I have to manually create a div, insert that, handle the resulting layout issues...
- there is no demo that shows how to use draggable and droppable to add items to a container; there is the simple photo manager demo, but thats way too complex
-> my attempt at inserting the ui.helper at the droppable had two results: either nothing happened (helper was killed), or I cloned it first, but then ended up with position:absolute and the position styles
- the theme font-sizes are irritating: as soon as I apply a tabs widget, the font-size of the tabs content changes, I dunno why and I don't know how to set it up so that I can toggle tabs without affecting contents font-sizes
- themeroller bookmarklet works well, but takes a long time to load and doesn't seem to cache anything, when loading it again, the load time is just as bad
On the other hand:
- tabs work well as is, and the markup is easy enough to write down without having to lookup the docs or copy an example
Any thoughts on these? I can put comments on the appropiate wiki pages later on.
Jörn

Replies(7)

scottjehl

Re: Some Observations

12 years ago

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">
<div><div>On Nov 4, 2009, at 9:45 AM | Nov 4, 2009, Jörn Zaefferer wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">While building an example application, I noticed a few issues:
- .slider() can't be used on an input, instead I have to manually create a div, insert that, handle the resulting layout issues...
</blockquote><div>I agree that this would be a nice convenience. Would we just support the slider replacing the input, or fading in and out upon focus? </div><div>Something like this for instance, could replace it:</div><div>
</div><div><i>var myInput = $('#myInput');</i></div><div><i>
</i></div><div><i>$('<div></div>')</i></div><div><span class="Apple-tab-span" style="white-space:pre"><i> </i></span><i>.slider({</i></div><div><span class="Apple-tab-span" style="white-space:pre"><i> </i></span><i>slide: function(ui){</i></div><div><span class="Apple-tab-span" style="white-space:pre"><i> </i></span><i>myInput.val(ui.value);</i></div><div><span class="Apple-tab-span" style="white-space:pre"><i> </i></span><i>}</i></div><div><span class="Apple-tab-span" style="white-space:pre"><i> </i></span><i>})</i></div><div><span class="Apple-tab-span" style="white-space:pre"><i> </i></span><i>.insertAfter(myInput)</i></div><div><span class="Apple-tab-span" style="white-space:pre"><i> </i></span><i>.prev()</i></div><div><span class="Apple-tab-span" style="white-space:pre"><i> </i></span><i>.hide();</i></div><div>
</div><div>It'd be nice for this to happen when you call myInput.slider(), but maybe just documenting this code is enough...?</div><div>
</div><div>We've been talking for a while about being able to call .slider() on a select as well, and there's an example plugin in the lab that does it already.</div>
<blockquote type="cite">- there is no demo that shows how to use draggable and droppable to add items to a container; there is the simple photo manager demo, but thats way too complex
-> my attempt at inserting the ui.helper at the droppable had two results: either nothing happened (helper was killed), or I cloned it first, but then ended up with position:absolute and the position styles
- the theme font-sizes are irritating: as soon as I apply a tabs widget, the font-size of the tabs content changes, I dunno why and I don't know how to set it up so that I can toggle tabs without affecting contents font-sizes
</blockquote><div>This one can be tough because we always put the ui-widget class on the outermost container, and that controls font size inheritance for all its children. </div><div>
</div><div>I'd recommend you write a single override style that sets the ui-tabs-panel class back to whatever font-size you need to make 1em = 10px (or whatever your content assumes 1em is equal to). </div><div>
</div><div>So if you set your global font-size in themeroller to 1.2em, you could add this rule to reset the content panel:</div><div><i>.ui-tabs-panel { font-size: .83em; }</i></div><div>
</div>Does that make sense?</div><div>
<blockquote type="cite"> - themeroller bookmarklet works well, but takes a long time to load and doesn't seem to cache anything, when loading it again, the load time is just as bad</blockquote><blockquote type="cite">
On the other hand:
- tabs work well as is, and the markup is easy enough to write down without having to lookup the docs or copy an example</blockquote><blockquote type="cite">
Any thoughts on these? I can put comments on the appropiate wiki pages later on.
Jörn

</blockquote></div>

rdworth

Re: Some Observations

12 years ago

scott.gon..

Re: Some Observations

12 years ago

On Wed, Nov 4, 2009 at 10:45 AM, Jörn Zaefferer <span dir="ltr"><<a href="mailto:joern.zaefferer@googlemail.com">joern.zaefferer@googlemail.com</a>></span> wrote:

guest

Re: Some Observations

12 years ago

On 11/5/09 04:42 , Scott González wrote:
> On Wed, Nov 4, 2009 at 10:45 AM, Jörn Zaefferer
> <joern.zaefferer@googlemail.com <mailto:joern.zaefferer@googlemail.com>>
>

joern.zae..

Re: Some Observations

12 years ago

More:
- when using .trigger("slide") to trigger a slide event, eg. directly after intializing the slider, so that the code in the slide-option gets executed, nothing happens; I'd have to implement the same code again, which is even more annoying as I can't reuse the same function: the slide event handler has to use ui.value in order to get at the actual value, as .slider("value") returns the current value
- when clicking on a an #-anchor before tabs are initialized, the location is updated to include that anchor; when then tabs are initialized, they use that location to display the tab; so far, so good, but when now clicking on other tabs, the location isn't updated, so on each reload, that same tab is activated

scott.gon..

Re: Some Observations

12 years ago

On Thu, Nov 5, 2009 at 2:09 PM, Jörn Zaefferer <span dir="ltr"><<a href="mailto:joern.zaefferer@googlemail.com">joern.zaefferer@googlemail.com</a>></span> wrote:

scott.gon..

Re: Some Observations

12 years ago

I had an idea for how we could fix this. Plugins could bind the callback as an event handler instead of just using it as a callback. This would require plugins to actually write code to handle the callback options, which isn't as elegant as what we have now where the plugins don't need to do any work at all. We could move that logic into the base widget so that each plugin wouldn't need to duplicate the logic, but then the plugins would have to list which options are callbacks. That wouldn't be too bad.
So a plugin would look like this (based on the new widget factory cuz it's nicer):
$.widget('ui.dialog', {
    options: {
        close: null,
        closeText: 'close',
        open: null,
        title: null
    },
    callbacks: 'close open',
    _init: function() { ... }
});

2009/11/5 Scott González <span dir="ltr"><<a href="mailto:scott.gonzalez@gmail.com">scott.gonzalez@gmail.com</a>></span>

Top Reply

Response title

Attachments

jQuery Forum

Some Observations

Replies(7)

Re: Some Observations

Re: Some Observations

Re: Some Observations

Re: Some Observations

Re: Some Observations

Re: Some Observations

Re: Some Observations

Statistics

Tags

Actions

Related Posts