jquery ui similar to Apple Finder - jquery-ui

I'm looking to build a navigation system similar to Apple Finder using jQuery UI. The idea is you drag an object into this 'finder' navigation and are able to navigate between folders to drop an object. This is to behave similar to moving a file from on your Desktop to a directory or moving a file between directories.
Additionally, inside this 'finder' navigation, I'd like to be able to sort objects by dragging and dropping using jQuery UI Sortable, except it will need to be a nested sortable option.
Has anything like this been created yet? I prefer not to reinvent the wheel in javascript if necessary. Otherwise, any examples or directions to help solve this will be appreciated.
Thanks!

I'm not sure if this helps but you can see what I've done with jQuery Finder: http://code.google.com/p/jqueryfinder/ (the demo link does not work, so you'll have to checkout the trunk)
It's pretty much abandoned so I'd love it if someone else would pick it up.

I believe this is quite similar if you're still looking..
http://net.tutsplus.com/tutorials/wordpress/wordpress-sidebar-turned-apple-flashy-using-jquery-ui/

Related

How to use Bootstrap in flutter?

I am making a app in which I want to show a web page which is made using bootstrap.Can anyone show me how to do it.
The app I am making is like an article app so I want to make more quickly so I use Bootstrap to write the long article.
Here is the screenshot of the design but it will make more mesh if i write in dart.
Flutter does not come with a Bootstrap library. You can't use an existing one too, as flutter use neither a webview nor native components for rendering.
If you miss something that is available in bootstrap, create it yourself for flutter.
Disclaimer: This is an untested idea and I am rather unexperienced with that. But maybe it can guide you in the right direction.
You might be able to use flutter-view to include the Bootstrap css. You might still have to rebuild the interactivity though.

jQuery UI dropdown select

I wanna have a dropdown menu like this link: http://datatables.net/release-datatables/examples/basic_init/table_sorting.html
(The one that are right below "Live example" line);
I haven't got many experience of working with jQuery UI, and I guess that result is produced by using it. Could you suggest me a way to create that dropdown.
Thank you.
P/S: that may be ok if it is not using jQuery UI (it's just my guess)
That solution doesn't appear too complex - they've got all the data already, and they're just hiding rows depending on what's selected.
On the other hand, as that's an open source project, you could just download it or use the hosted versions and integrate it on your site, which is probably easier than rolling your own solution.
Ok, got it. This is just default style in Firefox (There's no style applying for it yet). I got this misunderstand due to changing browser.

Prototype.js Interferring with Jquery UI

So I am currently working with an e-commerce cms that implements Lightbox to display large product pics.
In the sidebar I have implemented my own tab group powered by jquery-ui.
The sidebar works perfectly on every page except the product pages. i soon found out the problem was the call to prototype.js used by Lightbox...When i comment out the call to the prototype script the tab group starts working again.
I have tried various things like trying to change the scope of my code and reordering when the scripts are called, but this hasn't worked...any ideas on what i could do to remedy the situation?
NOTE: I didn't include any code because i thought we could just throw around soem theory : )...if you think anything would help i can add it
thanks for any help,
~skev
The problem was i needed to use $.noConflict();
before #MichealKoper suggested this i had no idea it existed
Thanks!

Knockoutjs binding issue JQuery UI tabs

I have the following issue.
In the following JSFiddle1 the dialogs allow the editing of folders and the editing of links.
In this JSFiddle2 I try to add JQuery UI tabs to the previous JSfiddle and apply the model to a div in one of the tabs
ko.applyBindings(foldersModel, document.getElementById("folders-view"));
the dialogs do not work.
Any ideas?
Your're not doing it right, use custom bindings handlers to achieve this instead.
And since I'm such a nice guy I've already made my own bindings public and with a JSFiddle togo with it.. :P
https://github.com/AndersMalmgren/Knockout.Bindings
http://jsfiddle.net/H8xWY/
Sorry, but I've never seen so many logic errors in a code before :D
Anyway, beacuse I was bored and are a nice guy i cleaned up the code somewhat and fixed the bugs
http://jsfiddle.net/uK5KL/20/

jquery UI widgets without the CSS bloat

A question about jquery UI widgets. Is there a way to get them without all the bloat of CSS that they carry and render out ? I'm having a complete mess with tabs rendering all those jquery-ui-widget, jquery-ui-panel etc. etc. classes.
This guy here does it somehow
http://www.davereederdesign.com/post/2010/04/23/Tabs-with-Memory.aspx
?
He doesn't use the JQuery Tab widget.
I know this as an old post, but I'm having a similar problem applying UI widgets to an already very heavy website. If you inspected the widget in Firebug you might be able to only grab the rules that the widget uses and create a custom CSS file to apply to it. I'm going to try this when I'm back at work tomorrow and I'll report back on my progress.

Resources