Your SlideShare is downloading. ×
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
jQuery Objects
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Objects

4,103

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,103
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery DAP Objects Why? • Rich front-end functionality to improve user experience • Use appropriate languages for appropriate parts of the system • JavaScript for browser functionality • CSS for styling • Perl for server functionality • Avoid server-side work than can be done (quicker!) on the client • Avoid re-loading pages ‘in the middle of a task’, e.g.: • Validating input values • Changing configurations, values, etc. • Retrieving ‘choice-making’ information • Tailing logs, etc.
  • 2. jQuery DAP Objects Why? Appropriate in JavaScript Inappropriate in JavaScript • Rich front-end functionality to • Check an input field has a value improve user experience • Rounding corners mathematically • Add a class to an element • Data storage • Show or hide elements • Use appropriate languages for appropriate parts of the system Inappropriate in Perl • JavaScript Appropriate in Perl for browser functionality Sorting a table where the data • • CSS to database • Read/write forastyling hasn't changed • Perl for • File handling server functionality • Re-loading a page with an error • Setting element colours directly Appropriate in CSS • Avoid server-side work than can Inappropriate in CSS on the client • Rounded corners using a background be done (quicker!) image • Sizing images • Avoid re-loading pages ‘in the middle of a task’, e.g.: • Class –based colours, etc. • Conditional statements • Validating input values • Changing configurations, values, etc. • Retrieving ‘choice-making’ information • Tailing logs, etc.
  • 3. jQuery DAP Objects So?... We are no longer just We need to engineer adding a bit of JavaScript to do simple things via ‘onclick’ => front-end code the same as we do back- end code - OO functions, etc. JavaScript
  • 4. jQuery DAP Objects What Benefit? Almost - No • Simple and effective code re-use inheritance • All the benefits of OO-code – encapsulation, name-spacing, simple interface, etc. • Remove the pain of writing JavaScript – concentrate on writing the functionality, not coding up visuals and behaviour • Respect styling and design
  • 5. jQuery DAP Objects DapTable Auto-sort Auto-filter Auto-styled CSV/TSV downloadable
  • 6. jQuery DAP Objects DapTable: Features • All styling defined 1. All done client side 2. Respects sorting and filter • striped • collapsable Currently: • By file size (KB, • tsv_downloadable, csv_downloadable MB, etc.) • By node (webd2.dd.com < webd12.db.com • tsv_downloadable_custom, csv_downloadable_custom • url_downloadable • Sorting, and custom sorting • Keys • Auto-highlighting of rows on rollover • Fix width
  • 7. jQuery DAP Objects Popup Suggestions Expander
  • 8. jQuery DAP Objects Popup: Features • Works on any element • Can use AJAX to populate • Optional offset from element • Custom close methods Suggestions: Features • Can use list on page, or get results by AJAX Expander: Features • Works on element Audit • Refreshes audit history
  • 9. jQuery DAP Objects JavaScript Objects var Object = function() { this.function = function() { Looks less like JavaScript var self = this and more like an object in C++, Java, Perl? function code (Maybe…) } } var obj = new Object()
  • 10. jQuery DAP Objects Generic DAP Objects var Object = function() { this.includedObject = new IncludedObject() this.init = function() { var self = this initialisation code self.includedObject.init() // if necessary ... } }
  • 11. jQuery DAP Objects Example use: Cluster var Cluster = function() { Object variables this.dragged = 0 Included objects this.audit = new Audit() this.expander = new Expander() this.input = new Input() this.suggestions = new Suggestions() this.popup = new Popup() this.table = new DapTable() this.init = function() { Scope self var self = this Standard jQuery self.table.init($('#server_table')) Call object method $('#node_div').draggable({ stop: function() { self.dragged = 1 } }) $('#node_div_close').click( function() { self.deselect_node() })
  • 12. jQuery DAP Objects DapTable: Usage In Template <link rel="stylesheet" type="text/css" href="/css/common.css" /> <link rel="stylesheet" type="text/css" href="/css/common/daptable.css" /> <script type="text/javascript" src="/javascript/jquery/jquery.js"></script> <script type="text/javascript" src="/javascript/table/table.js"></script> <script type="text/javascript" src="/javascript/common/DapTable.js"></script> <script type='text/javascript'> $(document).ready( function() { var cluster = new Cluster() cluster.init() Will ultimately be: } ) a) one compressed JS script, and </script> one compressed CSS file b) CSS at the top, JavaScript at the bottom <table class=‘dap_table table-autosort cvs_downloadable’> …
  • 13. jQuery DAP Objects DapTable: Usage In Javascript var Cluster = function() { this.table = new DapTable() this.init = function() { var self = this self.table.init($('#server_table')) self.table.init('#server_table') … } }
  • 14. jQuery DAP Objects TableKey In Javascript self.key = new TableKey('#toggle_key', 65, 17)
  • 15. jQuery DAP Objects Generic jQuery Objects: Thickbox Just add a class ‘thickbox’ to a <a> tag
  • 16. jQuery DAP Objects More Generic Objects: • Cookie • Format • Input • StringFuns • Url Future Suggestions: • Client-side Validation • Generic ‘COMET’
  • 17. jQuery DAP Objects Client-side Validation function validate() { valid = 1 <div> $(‘.mandatory’).each( function() {id="rtsub" type="text" class="mandatory“ name="rtsub" value=“" /> <input if ($(this).val() == ‘’)) { </div> $(this).addClass(‘invalid’) <div> <input=id="rtenv" type="text“ name="rtenv" value=“" /> valid 0 </div> Note: Don’t do this! Do (e.g.): }) if (! valid) { $(‘#element .mandatory’) ... alert(‘Please complete all mandatory fields’) return 0 } return 1 }
  • 18. jQuery DAP Objects “Rich front-end functionality to improve user experience”
  • 19. jQuery 1.4.2 FYI: • “Wow, the performance improvements are overwhelming.” • “1.4.2 is blazing fast http://j.mp/9yUNZ9 ...” • “There has been a great increase in performance.” • “Great work, great performance increases.” http://blog.jquery.com/2010/02/19/jquery-142-released/
  • 20. jQuery 1.4.2 My Own Tests: • N Elements, all same class • 3 handlers per element jQuery Bind Times 250000 for (var i = 0; i < 10000; i++) { $('body').append("<div class='a_div'></div>") 200000 } 150000 $('.a_div').click( function() { $(this).hide() }) 1.3.2 ms $('.a_div').mouseover( function() { $(this).hide() }) 100000 1.4.2 $('.a_div').mouseout( function() { $(this).hide() }) 50000 0 1000 3000 10000 30000

×