Permalink
Browse files

Added step-by-step demos

  • Loading branch information...
1 parent ca165fb commit f5deba5312ad95b04d7ad619c2a68a3e8e8a1d63 @BorisMoore committed Apr 28, 2011
Showing with 2,693 additions and 497 deletions.
  1. +74 −74 demos/movies/components/jquery.pager.js
  2. +7 −0 demos/resources/demos.css
  3. +7 −0 demos/resources/movielist.css
  4. +513 −0 demos/resources/syntaxhighlighter.css
  5. +30 −0 demos/resources/syntaxhighlighter.min.js
  6. +1 −1 demos/samplesTmplPlus/basic.html
  7. +1 −1 demos/samplesTmplPlus/composition.html
  8. +1 −1 demos/samplesTmplPlus/parameters.html
  9. +30 −0 demos/step-by-step.html
  10. +63 −0 demos/step-by-step/0_tmpl-read-only/0_local-data-source.html
  11. +40 −0 demos/step-by-step/0_tmpl-read-only/0_local-data.html
  12. +101 −0 demos/step-by-step/0_tmpl-read-only/1_remote-data-source.html
  13. +64 −0 demos/step-by-step/0_tmpl-read-only/1_remote-data.html
  14. +81 −0 demos/step-by-step/0_tmpl-read-only/2_html-tag-source.html
  15. +60 −0 demos/step-by-step/0_tmpl-read-only/2_html-tag.html
  16. +103 −0 demos/step-by-step/0_tmpl-read-only/3_if-else-tag-source.html
  17. +67 −0 demos/step-by-step/0_tmpl-read-only/3_if-else-tag.html
  18. +105 −0 demos/step-by-step/0_tmpl-read-only/4_each-tag-source.html
  19. +76 −0 demos/step-by-step/0_tmpl-read-only/4_each-tag.html
  20. +124 −0 demos/step-by-step/0_tmpl-read-only/5_javascript-source.html
  21. +90 −0 demos/step-by-step/0_tmpl-read-only/5_javascript.html
  22. +96 −0 demos/step-by-step/0_tmpl-read-only/6_hierarchical-data-source.html
  23. +67 −0 demos/step-by-step/0_tmpl-read-only/6_hierarchical-data.html
  24. +184 −0 demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template-source.html
  25. +123 −0 demos/step-by-step/1_tmpl-interactive/0_accordion-switching-template.html
  26. +173 −0 demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag-source.html
  27. +107 −0 demos/step-by-step/1_tmpl-interactive/1_tree-view-using-tmpl-tag.html
  28. +181 −0 demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag-source.html
  29. +124 −0 demos/step-by-step/1_tmpl-interactive/2_tabs-using-wrap-tag.html
  30. +0 −419 sampleViewer.js
  31. +0 −1 sampleViewer.min.js
@@ -17,8 +17,8 @@
* Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest });
*
* Where pagenumber is the visible page number
-* pagecount is the total number of pages to display
-* buttonClickCallback is the method to fire when a pager button is clicked.
+* pagecount is the total number of pages to display
+* buttonClickCallback is the method to fire when a pager button is clicked.
*
* buttonClickCallback signiture is PagerClickTest = function(pageclickednumber)
* Where pageclickednumber is the number of the page clicked in the control.
@@ -28,101 +28,101 @@
*/
(function($) {
- $.fn.pager = function(options) {
+ $.fn.pager = function(options) {
- var opts = $.extend({}, $.fn.pager.defaults, options);
+ var opts = $.extend({}, $.fn.pager.defaults, options);
- return this.each(function() {
+ return this.each(function() {
- // empty out the destination element and then render out the pager with the supplied options
- $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
+ // empty out the destination element and then render out the pager with the supplied options
+ $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
- // specify correct cursor activity
- $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
- });
- };
+ // specify correct cursor activity
+ $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
+ });
+ };
- // render and return the pager with the supplied options
- function renderpager(pagenumber, pagecount, buttonClickCallback) {
+ // render and return the pager with the supplied options
+ function renderpager(pagenumber, pagecount, buttonClickCallback) {
- // setup $pager to hold render
- var $pager = $('<ul class="pages"></ul>');
+ // setup $pager to hold render
+ var $pager = $('<ul class="pages"></ul>');
- // add in the previous and next buttons
- $pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback));
+ // add in the previous and next buttons
+ $pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback));
- // pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases
- var startPoint = 1;
- var endPoint = 9;
+ // pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases
+ var startPoint = 1;
+ var endPoint = 9;
- if (pagenumber > 4) {
- startPoint = pagenumber - 4;
- endPoint = pagenumber + 4;
- }
+ if (pagenumber > 4) {
+ startPoint = pagenumber - 4;
+ endPoint = pagenumber + 4;
+ }
- if (endPoint > pagecount) {
- startPoint = pagecount - 8;
- endPoint = pagecount;
- }
+ if (endPoint > pagecount) {
+ startPoint = pagecount - 8;
+ endPoint = pagecount;
+ }
- if (startPoint < 1) {
- startPoint = 1;
- }
+ if (startPoint < 1) {
+ startPoint = 1;
+ }
- // loop thru visible pages and render buttons
- for (var page = startPoint; page <= endPoint; page++) {
+ // loop thru visible pages and render buttons
+ for (var page = startPoint; page <= endPoint; page++) {
- var currentButton = $('<li class="page-number">' + (page) + '</li>');
+ var currentButton = $('<li class="page-number">' + (page) + '</li>');
- page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); });
- currentButton.appendTo($pager);
- }
+ page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); });
+ currentButton.appendTo($pager);
+ }
- // render in the next and last buttons before returning the whole rendered control back.
- $pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback));
+ // render in the next and last buttons before returning the whole rendered control back.
+ $pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback));
- return $pager;
- }
+ return $pager;
+ }
- // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button
- function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
+ // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button
+ function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
- var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');
+ var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');
- var destPage = 1;
+ var destPage = 1;
- // work out destination page for required button type
- switch (buttonLabel) {
- case "first":
- destPage = 1;
- break;
- case "prev":
- destPage = pagenumber - 1;
- break;
- case "next":
- destPage = pagenumber + 1;
- break;
- case "last":
- destPage = pagecount;
- break;
- }
+ // work out destination page for required button type
+ switch (buttonLabel) {
+ case "first":
+ destPage = 1;
+ break;
+ case "prev":
+ destPage = pagenumber - 1;
+ break;
+ case "next":
+ destPage = pagenumber + 1;
+ break;
+ case "last":
+ destPage = pagecount;
+ break;
+ }
- // disable and 'grey' out buttons if not needed.
- if (buttonLabel == "first" || buttonLabel == "prev") {
- pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
- }
- else {
- pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
- }
+ // disable and 'grey' out buttons if not needed.
+ if (buttonLabel == "first" || buttonLabel == "prev") {
+ pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
+ }
+ else {
+ pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
+ }
- return $Button;
- }
+ return $Button;
+ }
- // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
- $.fn.pager.defaults = {
- pagenumber: 1,
- pagecount: 1
- };
+ // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
+ $.fn.pager.defaults = {
+ pagenumber: 1,
+ pagecount: 1
+ };
})(jQuery);
@@ -0,0 +1,7 @@
+body { padding: 10px; font-family: Verdana; font-size: small }
+h4 { font-size: inherit`; font-variant: small-caps; }
+.height { width: 100%; margin-bottom:10px; float: left; clear: both; }
+.bottom { height:400px; width: 100%; margin-bottom:10px; float: left; clear: both; }
+body > button { float: left; clear: right; margin: 3px }
+.subhead { margin: 15px 0 4px 0; font-weight:bolder; color:#116; font-family:Arial; font-size:10pt }
+a { color: #55b}
@@ -0,0 +1,7 @@
+table { border-collapse: collapse; }
+table tr { color: blue; height: 25px; }
+.header { color: #009; border-bottom: solid #77c 2px; background-color: #E8E8F7; }
+.header th { padding:5px; border: 1px solid #77c; }
+#movieList tr td:first-child { width: 100px; }
+table { border: 2px solid blue; width: 480px; margin: 4px 0 4px 4px; padding: 2px; background-color: #f8f8f8; }
+table td { padding: 3px; margin: 3px; border: solid #77c 1px; }
Oops, something went wrong.

0 comments on commit f5deba5

Please sign in to comment.