JQueryUI Library - Drag/Drop, Animations, Custom Menus...

I’ve been working on a JQueryUI library for the last week or so.
While its not 100%complete I figured I would let the community check it out as there’s plenty worth showing now. It’s cross-browser friendly too :smiley:

Interactions
*Draggable
*Droppable
*Resizable
*Selectable
*Sortable

UI Widgets
*Datepicker
*Menu
*Progressbar
*Selectmenu
*Slider
*Tabs
*Custom Tooltip (much better than the built in ones)

Effects/Animations
*15+ effects each with various options
*32 easings to change how the effects animate
*Animating of color changes
*Create Animation Loops (they dont need to callback to Xojo so they dont bombard the server once they’re created)

Custom Positioning
Improved Mobile Support (converts touch events into mouse events, helps with built in controls as well)

The project contains 3 main libraries that are still in production (JqueryUI, Jquery, Javascript)

https://www.dropbox.com/s/mpoa7agglyax4bz/JQueryUISharable2015-01-15.zip?dl=0

I added a new CSS module that will allow custom css classes to be built on the fly as well as support for Responsive Design (Auto sized Mobile/Tablet/Desktop friendly layouts).

Also here are some quick examples to get started:

myControl.jquery.css("width","50%").css("margin","5px").script.run

myControl.JQuery_UI.AddTooltip("This is an example of a custom tooltip!")

dim StyleSheet as new StyleSheet
StyleSheet.Styles.Append _
  Css.Style.Instance("input[type='text'], input[type='password']")_
  .add("-webkit-appearance","none")_
  .add("-webkit-border-radius","0")_
  .add("border-radius","0")
myControl.jquery.append(StyleSheet.ToHtml).Script.Run

https://www.dropbox.com/s/lxpim802i7dmk6v/JQueryUISharable2015-07-06.zip?dl=0

This is great, thanks for sharing!

@Brock Nash
HI, I found a little question about the library … maybe you using the cdn jquery from google , but in china , all google website was fired …
so you can change the jquery CDN url ? tks!

[quote=214106:@Henry Chan]@Brock Nash
HI, I found a little question about the library … maybe you using the cdn jquery from google , but in china , all google website was fired …
so you can change the jquery CDN url ? tks![/quote]

https://www.dropbox.com/s/o9bqfmp9fzznrui/JQueryUISharable2015-09-17.zip?dl=0

I unlocked the JQueryUIHook object. You can change it in there or

JqueryUIHook.includeLibraries = false

and then include them in your header manually.

Hi Brock

I love your windows animation!

Can I use it for my experimental program ?

Brock,

I see some of the modules are locked.

Are they licensable?

[quote=214242:@ronaldo florendo]Hi Brock
I love your windows animation!
Can I use it for my experimental program ?[/quote]

Thanks and absolutely you can :slight_smile:

[quote=214277:@Steve Upton]Brock,
I see some of the modules are locked.
Are they licensable?[/quote]

You are free to use them as they exist currently. I was thinking about doing a licensed version but until I can spend more time making the libraries more robust and can debug them thoroughly, they’re free to use “as is”. Although if you did want to donate some bitcoins to continue its development, I wont say No :smiley: - Bitcoin Wallet Address: 1K3rdyN8nfaKZp2QHTCYrXpNtGq6DbWxbJ

They look quite good and might solve some of the issues we are dealing with.

But in order to integrate them over the long run we will need to have access to all the code. We don’t mind paying such licensing fees.

@Brock Nash Tks?I seen

Thanks Nash!

UPDATE 2015-09-24
https://www.dropbox.com/s/4lkrnkmqhdszj1v/JQueryUISharable2015-09-24.zip?dl=0

In your App.Open you can now force the library to use “jQuery” instead of “$” to avoid conflicts:

jquery.UseJqueryNamespace //Sets the Namespace to "jQuery" instead of "$"

You can use a custom namespace as well:

JQuery.JqueryIndicator = "myjqueryNamespace"

If you want to control the version of Jquery that gets loaded using the JQueryUIHook object call:

JqueryUIHook.includeLibraries = false

then load your own versions of Jquery in the header.

this is interesting, thanks.

A couple of questions:

  • when should jquery.UseJqueryNamespace be set? In app.open? web page open?

  • you’ve locked JQueryUIhook which is where I put JQuery.noConflict() Now it seems to conflict. Do I still need to put that in the header after jQuery loads or…

[quote=215960:@Steve Upton]this is interesting, thanks.

A couple of questions:

  • when should jquery.UseJqueryNamespace be set? In app.open? web page open?

  • you’ve locked JQueryUIhook which is where I put JQuery.noConflict() Now it seems to conflict. Do I still need to put that in the header after jQuery loads or…[/quote]

Change the namespace right away in App.Open

I updated the link just now. The JQueryUI Controls are now decrypted.

that seems to have done the trick!

thanks

If I wanted to add a (or write our own) jQuery plug-in, is it possible with your framework? (for instance an ‘alsodrag’ plugin)

How would one go about linking it in?

[quote=216149:@Steve Upton]If I wanted to add a (or write our own) jQuery plug-in, is it possible with your framework? (for instance an ‘alsodrag’ plugin)

How would one go about linking it in?[/quote]

I’m unclear what you’re trying to do so I’m not sure. Is there a Jquery function that you need that my library is missing? You can build extension methods in your own module that add functionality to the existing library. Or you can build your own controls, methods that do more advanced proceses by calling multiple methods and functions from the Jquery library.

well, specifically, jQuery doesn’t have an “alsodrag”, which would work similarly to its “alsoresize”, which you have supported.

I found code for an “alsodrag” and I’m wondering if I can link it into your framework so it is usable in the same manner as your “alsoresize”

[quote=216178:@Steve Upton]well, specifically, jQuery doesn’t have an “alsodrag”, which would work similarly to its “alsoresize”, which you have supported.

I found code for an “alsodrag” and I’m wondering if I can link it into your framework so it is usable in the same manner as your “alsoresize”[/quote]

What does the code for the “alsodrag” event look like? I might be able to help if I see what you’re trying to do. (More information is better than less - better than 20 replies back and forth)

When you try to open the sliders item, the app crashes.