Project

General

Profile

Actions

Bug #1344

closed

Replace prototype javascript code with jQuery

Added by Scott Ullrich about 13 years ago. Updated about 8 years ago.

Status:
Resolved
Priority:
Very Low
Assignee:
-
Category:
Web Interface
Target version:
-
Start date:
03/10/2011
Due date:
% Done:

0%

Estimated time:
Plus Target Version:
Release Notes:
Affected Version:
Affected Architecture:

Description

In light of this announcement http://twitter.com/#!/usejquery/statuses/45924060558925825 and due to the steam building behind the jQuery project it would be in our best interest to replace prototype with jQuery for 2.1 or beyond.

Actions #2

Updated by Scott Ullrich almost 13 years ago

Possible on / off / service buttons: http://www.givainc.com/labs/ibutton_example.htm

Actions #3

Updated by G D almost 13 years ago

For log/state/etc... tables, I would highly recommend the DataTables jQuery plugin ( http://www.datatables.net ). I have used it extensively and it has great performance and can enable really useful additional features such as per column filtering as shown in this example: http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html
An additional use for DataTables, when combined with jQueryUI as shown here ( http://www.jonathonjoyce.co.uk/2011/04/08/updating-datatables-display-orders-by-drag-and-drop/ ) is to allow drag and drop row re-ordering. This would allow this to be used for the firewall filters as well if desirable.

On the subject of jQueryUI, the tab element could be used as shown here: http://jqueryui.com/demos/tabs/
And depending on how the different form elements were built within the tabs, a single apply/save button per section could be used above the tabs to allow going back and forth between tabs before saving or applying the settings of the actual section.

Actions #4

Updated by Scott Ullrich almost 13 years ago

Another alerting jQuery plugin: http://boedesign.com/demos/gritter/

Actions #5

Updated by Warren Baker almost 13 years ago

Also another notification bar called foobar http://themergency.com/foobar/ - which is pretty neat.
Then there is also http://thrivingkings.com/badger/ which can be used for event notifications. Possibly a nice addition to certain widgets or # of fw log hits etc.

Note: I havent looked at the licensing of the above.

Actions #6

Updated by G D almost 13 years ago

Other Growl style notifications:
-----------------------
jGrowl
URL: http://stanlemon.net/projects/jgrowl.html
http://plugins.jquery.com/project/jGrowl
Last update: 2011-01-16
License: MIT & GPL
Notes: A neat builtin feature of jGrowl is detection of multiple existing alerts and the automatic display of a "Close All" option.
-----------------------
jQuery Purr
URL: http://kitchen.net-perspective.com/open-source/purr/
http://kitchen.net-perspective.com/purr-example-1.html (Shows existing object turned into alert)
http://kitchen.net-perspective.com/purr-example-4.html (More advanced example)
Last update: 2008-08-15
License: MIT
Notes: This takes a different approach by turning an (existing) object into a notification instead of building the notification based on a template.
------------------------
jwNotify (jQuery HTML5 Desktop Notification)
URL: http://athousandnodes.com/labs/jwNotify/
http://plugins.jquery.com/project/desktop-notification
Last update: 2011-05-15
License: CC0 (Public Domain Dedication)
Notes: I haven't pondered desktop notifications for pfSense before, but this would allow them in supported browsers.

@Warren Baker, thank you I had forgotten to look at licensing!
- DataTables is dual licensed under the GPL v2 license or a BSD (3-point) license

Actions #7

Updated by Scott Ullrich almost 13 years ago

2.0 has Growl support already. Might be nice to use the jGrowl deal.

Actions #8

Updated by Scott Ullrich almost 13 years ago

Neat tool for generating network maps!?

http://jsplumb.org/jquery/anchorDemo.html

Actions #9

Updated by Warren Baker almost 13 years ago

Progress bar replacement?

http://t.wits.sg/misc/jQueryProgressBar/demo.php for the demo

http://t.wits.sg/jquery-progress-bar/ - also BSD licensed.

Actually System->Firmware->Manual Upload needs some progress bar love to at least give the end user some form of feedback.

Actions #10

Updated by G D almost 13 years ago

jQuery UI Core has a progress bar builtin:
http://jqueryui.com/demos/progressbar/

It is easy to control, is built in to jQuery UI, and can be customized nicely as well. The one thing worth noting is that if you are using the animated background fill image feature, where say the bar stops at 50%, but the 50% that is filled has an animation to it, you have to manually generate a different animated image if you do not like the default scrolling orange diagonal lines. The Theme Roller does not yet generate this image. It is however simple to modify that image or make your own if desired, but it is worth noting that is one extra step if you use that feature. The progress bar animates very nicely and works very well even without enabling that.

Actions #12

Updated by G D over 12 years ago

I wanted an "enhanced" multi select box for something I was working on and although Chosen looks absolutely brilliant, I did not like the manner in which it worked with multi selects (social network tag style). I found another plugin which takes a completely different approach which I am more accustomed to with the transfer of options from one area to another:
http://quasipartikel.at/multiselect_next/
The reasons this one is handy for my particular case are that it is searchable for very long lists and allows you to visualize both selected and unselected elements side by side. It also allows click selecting or drag and drop selecting.

Actions #13

Updated by Scott Ullrich over 12 years ago

Nice javascript spinner http://fgnass.github.com/spin.js/

Actions #14

Updated by Warren Baker over 12 years ago

Bootstrap, a nice framework from Twitter which has a number of some quite nice features http://twitter.github.com/bootstrap/

Actions #16

Updated by Warren Baker over 12 years ago

Nice Pagify jQuery plugin https://github.com/cmpolis/Pagify

Actions #17

Updated by Warren Baker about 12 years ago

And another notification plugin - looks neat http://needim.github.com/noty/

Actions #18

Updated by Chris Buechler about 8 years ago

  • Status changed from New to Resolved
  • Target version deleted (Future)
Actions

Also available in: Atom PDF