From a0a85b0af5729afa1d82290b7157a58c88ff9c79 Mon Sep 17 00:00:00 2001 From: Mark Malek Date: Mon, 2 May 2011 10:48:56 -0400 Subject: [PATCH] Updated demo and examples Signed-off-by: Mark Malek --- demo/css/demo.css | 236 +++++++++++++++++++++++++++++++++++++++++++ demo/css/myTheme.css | 43 ++++++++ demo/demo.html | 60 +++++++++++ demo/demo.js | 6 +- demo/images/bg.png | Bin 0 -> 4480 bytes demo/js/demo.js | 73 +++++++++++++ demo/test.html | 34 ++----- 7 files changed, 424 insertions(+), 28 deletions(-) create mode 100644 demo/css/demo.css create mode 100644 demo/demo.html create mode 100644 demo/images/bg.png create mode 100644 demo/js/demo.js diff --git a/demo/css/demo.css b/demo/css/demo.css new file mode 100644 index 0000000..fffdae5 --- /dev/null +++ b/demo/css/demo.css @@ -0,0 +1,236 @@ +body { + /* appearance */ + background-image: url(../images/bg.png); + background-repeat: repeat; + + /* text */ + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + } + +.styles { + display: none; + } + +input::-webkit-input-placeholder { + color: #585858; + } +input:-moz-placeholder { + color: #585858; + } + +.button { + /* appearance */ + background-color: #3f3f3f; + background-image: -moz-linear-gradient( + top, + rgba(255,255,255,0.0) 0%, + rgba(255,255,255,0.1) 50%); + + background-image: -webkit-gradient( + linear, left top, left bottom, + color-stop(100%,rgba(255,255,255,0.0)), + color-stop(50%,rgba(255,255,255,0.1))); + border: 1px solid #000000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1); + -moz-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1); + box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1); + + /* position */ + display: inline-block; + margin: 10px 0; + + /* size */ + padding: 0 10px; + + /* text */ + color: #eaeaea; + font-size: 12px; + line-height: 30px; + text-decoration: none; + white-space: nowrap; + } +.button:hover { + /* appearance */ + background-color: #6495ed; + -webkit-box-shadow: 0 0 3px #6495ed; + -moz-box-shadow: 0 0 3px #6495ed; + box-shadow: 0 0 3px #6495ed; + } + +#buildTable { + margin-top: 20px; + } + +#tablePlaceholder { + margin-top: 40px; + } + +.table_options { + /* appearance */ + background-color: #252525; + background-image: -moz-linear-gradient( + top, + rgba(255,255,255,0.05) 20%, + rgba(255,255,255,0.0) 80%); + + background-image: -webkit-gradient( + linear, left top, left bottom, + color-stop(20%,rgba(255,255,255,0.05)), + color-stop(80%,rgba(255,255,255,0.0))); + border: 1px solid #000000; + -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.75); + -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.75); + box-shadow: 0 5px 10px rgba(0,0,0,0.75); + overflow: hidden; + + /* size */ + padding: 10px 0; + + } + h2 { + /* text */ + color: #dadada; + font-size: 14px; + font-weight: bold; + text-align: center; + text-shadow: 0 -1px 1px #000000; + } + .table_options fieldset { + /* appearance */ + border: none; + + /* size */ + padding: 5px 0; + + /* text */ + text-align: right; + } + .table_options label { + /* size */ + padding: 0 10px 0 0; + + /* text */ + color: #b2b2b2; + font-size: 12px; + text-shadow: 0 -1px 1px #000000; + + } + .table_options input, + .table_options input:focus { + /* appearance */ + background-color: #1f1f1f; + border: 1px solid #000000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 1px 1px rgba(63,63,63,1), 0 1px 3px rgba(0,0,0,1) inset; + -moz-box-shadow: 0 1px 1px rgba(63,63,63,1), 0 1px 3px rgba(0,0,0,1) inset; + box-shadow: 0 1px 1px rgba(63,63,63,1), 0 1px 3px rgba(0,0,0,1) inset; + + /* size */ + padding: 8px 5px; + width: 50px; + + /* text */ + color: #fff; + } + .table_options input:focus { + outline: 1px solid #fff; + } + + + + +/* Fancy Dark Table */ +.fancyDarkTable .numeric { + /* text */ + text-align: right; + } + +.fancyDarkTable td, .fancyDarkTable th { + border: 1px solid #000000; + padding: 5px; +} + +.fancyDarkTable thead tr th { + padding: 10px 5px 10px 5px; + } + +.fancyDarkTable { + /*border-collapse: separate;*/ + + /* text */ + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + } + +.fancyDarkTable tbody tr td { + /* appearance */ + background-color: #3f3f3f; + background-image: -moz-linear-gradient( + top, + rgba(255,255,255,0.0) 0%, + rgba(255,255,255,0.02) 100%); + + background-image: -webkit-gradient( + linear, left top, left bottom, + color-stop(0%,rgba(255,255,255,0.0)), + color-stop(100%,rgba(255,255,255,0.02))); + border-bottom-color: #2f2f2f; + border-right-color: #2f2f2f; + + /* size */ + padding: 10px 5px 30px 5px; + + /* text */ + color: #FFFFFF; + font-size: 11px; + font-weight: bold; + text-shadow: 0 -1px 1px #000000; + } + +.fancyDarkTable tbody tr.odd td { + /* appearance */ + background-color: #464646; + background-image: -moz-linear-gradient( + top, + rgba(255,255,255,0.0) 0%, + rgba(255,255,255,0.02) 100%); + + background-image: -webkit-gradient( + linear, left top, left bottom, + color-stop(0%,rgba(255,255,255,0.0)), + color-stop(100%,rgba(255,255,255,0.02))); + border-right-color: #2f2f2f; + } + +.fancyDarkTable thead tr th, +.fancyDarkTable tfoot tr td { + /* appearance */ + background-color: #151515; + background-image: -moz-linear-gradient( + top, + rgba(255,255,255,0.05) 0%, + rgba(255,255,255,0.0) 100%); + + background-image: -webkit-gradient( + linear, left top, left bottom, + color-stop(0%,rgba(255,255,255,0.05)), + color-stop(100%,rgba(255,255,255,0.0))); + + /* text */ + color: #ffffff; + font-size: 12px; + font-weight: bold; + text-shadow: 0 -1px 1px #000; + } + +.fancyDarkTable .fht-head { + -webkit-box-shadow: 0 -1px 0 #3f3f3f; + -moz-box-shadow: 0 -1px 0 #3f3f3f; + box-shadow: 0 -1px 0 #3f3f3f; + z-index: 1; + position: relative; + } \ No newline at end of file diff --git a/demo/css/myTheme.css b/demo/css/myTheme.css index 70abc6e..c46e839 100644 --- a/demo/css/myTheme.css +++ b/demo/css/myTheme.css @@ -1,6 +1,49 @@ .divider { margin: 20px 0; } + +.button { + /* appearance */ + background-color: #3f3f3f; + background-image: -moz-linear-gradient( + top, + rgba(255,255,255,0.0) 0%, + rgba(255,255,255,0.1) 50%); + + background-image: -webkit-gradient( + linear, left top, left bottom, + color-stop(100%,rgba(255,255,255,0.0)), + color-stop(50%,rgba(255,255,255,0.1))); + border: 1px solid #000000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1); + -moz-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1); + box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1); + cursor: pointer; + + /* position */ + display: inline-block; + margin: 10px; + + /* size */ + padding: 0 10px; + + /* text */ + color: #eaeaea; + font-size: 12px; + line-height: 30px; + text-decoration: none; + white-space: nowrap; + } +.button:hover { + /* appearance */ + background-color: #6495ed; + -webkit-box-shadow: 0 0 3px #6495ed; + -moz-box-shadow: 0 0 3px #6495ed; + box-shadow: 0 0 3px #6495ed; + } .myTableWrapper { width: 800px; diff --git a/demo/demo.html b/demo/demo.html new file mode 100644 index 0000000..0e7f0bc --- /dev/null +++ b/demo/demo.html @@ -0,0 +1,60 @@ + + + + FixedHeaderTable Demo + + + + + + + + +
+ +
+
+
+

Table Properties

+
+ + +
+
+ + +
+
+ +
+

Table Appearance

+
+ + +
+
+ + +
+
+ +
+

 

+
+ + +
+
+ +
+ Build Table + Run Plugin +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/demo/demo.js b/demo/demo.js index 44d37cb..6cc135a 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,9 +1,11 @@ $(document).ready(function() { - $('.myTable01').fixedHeaderTable({ width: '600', height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' }); + $('.myTable01').fixedHeaderTable({ width: '600', height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false }); + + $('.myTable01').fixedHeaderTable('show', 1000); $('.myTable02').fixedHeaderTable({ width: '600', height: '250', footer: true, altClass: 'odd', themeClass: 'fancyDarkTable' }); - $('.myTable03').fixedHeaderTable({ altClass: 'odd', themeClass: 'fancyDarkTable' }); + $('.myTable03').fixedHeaderTable({ altClass: 'odd', footer: true, themeClass: 'fancyDarkTable' }); $('a.makeTable').bind('click', function() { diff --git a/demo/images/bg.png b/demo/images/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..2cf8af040214e79aba5cb76c2154d02ac0132381 GIT binary patch literal 4480 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'); + + $thead = $self.find('thead'); + $thead.append(''); + for ( var column = 1; column <= columns; column++ ) { + $thead.find('tr') + .append('Column '+column+''); + } + + $tbody = $self.find('tbody'); + for ( var row = 1; row <= rows; row++ ) { + $currentRow = $('').appendTo($tbody); + + for ( var column = 1; column <= columns; column++ ) { + $currentRow.append('Column '+column+''); + } + } + +/* + var paddingStyle = "padding: " + options.padding + "px !important;"; + + $styles = $('').appendTo('.styles'); + + $styles.html('th, td { '+paddingStyle+' }'); +*/ + } +}); \ No newline at end of file diff --git a/demo/test.html b/demo/test.html index 6cc90e3..d3a203f 100644 --- a/demo/test.html +++ b/demo/test.html @@ -6,19 +6,11 @@ + -
- -
@@ -30,16 +22,6 @@ - - - - - - - - - - @@ -187,12 +169,12 @@ - - - - - - + + + + + + @@ -375,7 +357,7 @@ - +
Bounce Rate
BrowserVisitsPages/VisitAvg. Time on Site% New VisitsBounce Rate
Firefox
BrowserVisitsPages/VisitAvg. Time on Site% New VisitsBounce RateThis is a unique footer12345