Permalink
Browse files

Plugin files

  • Loading branch information...
1 parent 34dcb86 commit fa164ab054746f4fb8dcf5ebd502eb3d70486f11 @sangregoriopaolo sangregoriopaolo committed Jan 30, 2012
Showing with 99 additions and 0 deletions.
  1. +12 −0 jquery.splitView.css
  2. +87 −0 jquery.splitView.js
View
@@ -0,0 +1,12 @@
+.sv-main { margin-top:20px; margin-bottom: 20px; font-family:helvetica; }
+.sv-detail-view-container { height:100%; float:left; }
+.sv-table-view-container { height:100%; float:left; }
+.sv-table-view { border:1px solid #AAA; height:100%; overflow-y:auto; overflow-x:hidden; }
+.sv-detail-view { border:1px solid #AAA; height:100%; margin-left:10px; overflow-y: auto; overflow-x: hidden; }
+.sv-clear { clear:both; }
+.sv-no-tableview-data { color:#CCC; text-align:center; padding-top:20px; }
+.sv-table-view-row { border-bottom:1px solid #AAA; padding:10px; height: 60px; overflow:hidden; cursor:pointer; position:relative;}
+.sv-title-view { font-weight:bold; color:#333; white-space:nowrap; overflow:hidden; font-size:14px; width:75%; text-overflow: ellipsis; margin-bottom:5px;}
+.sv-date-view { position:absolute; top:10px; right:10px; color:#888 }
+.sv-description-view { color:#888; }
+.sv-no-detail-data { text-align:center; color:#AAA; font-size:20px; }
View
@@ -0,0 +1,87 @@
+(function($) {
+ $.fn.extend({
+
+ splitView: function(options) {
+
+ var _this = this;
+
+ var defaults = {
+ tableViewDataSource: '',
+ height: 500,
+ width: "100%",
+ tableViewWidth: "33%",
+ detailViewWidth: "67%",
+ noTableDataMessage: "No data",
+ noDetailDataMessage: "Select an item on the left",
+ dataReceived: function() { console.log('dataReceived callback not implemented! Pass it as an option to manage your data') },
+ rowClicked: function() { console.log('rowClicked callback not implemented! Pass it as an option to load your data in the details view') }
+ };
+
+ this.options = $.extend(defaults, options);
+
+ this.mainContainer = $('<div class="sv-main"></div>').css('height', this.options.height).css('width', this.options.width);
+ var detailViewContainer = $('<div class="sv-detail-view-container"></div>').css('width', this.options.detailViewWidth);
+ this.detailView = $('<div class="sv-detail-view"><div class="sv-no-detail-data">' + this.options.noDetailDataMessage + '</div></div>');
+ detailViewContainer.append(this.detailView);
+ var tableViewContainer = $('<div class="sv-table-view-container"></div>').css('width', this.options.tableViewWidth);
+ this.tableView = $('<div class="sv-table-view"><div class="sv-no-tableview-data">' + this.options.noTableDataMessage + '</div></div>');
+ tableViewContainer.append(this.tableView);
+ this.mainContainer.append('<div class="sv-clear"></div>');
+
+ $(this).append(this.mainContainer);
+ this.mainContainer.append(tableViewContainer);
+ this.mainContainer.append(detailViewContainer);
+
+ $('.sv-no-detail-data').css('margin-top', (this.detailView.height() / 2) - 10);
+
+ $.get(this.options.tableViewDataSource, function(data) {
+ _this.options.dataReceived(data);
+ }, 'json');
+
+ // Add a row to the tableView
+ this.addTableViewRow = function(title, description, date, data) {
+
+ if ($(".sv-table-view .sv-no-tableview-data").length) {
+ $(".sv-table-view .sv-no-tableview-data").remove();
+ }
+
+ var newRow = $('<div class="sv-table-view-row"></div>');
+ var titleView = $('<div class="sv-title-view"></div>').html(title);
+ var dateView = $('<div class="sv-date-view"></div>').html(date);
+ var descriptionView = $('<div class="sv-description-view"></div>').html(description);
+
+ this.tableView.append(newRow);
+ newRow.data('sv-linked-data', data);
+ newRow.click(function() {
+ _this._rowClicked($(this));
+ });
+ newRow.append(titleView);
+ newRow.append(dateView);
+ newRow.append(descriptionView);
+ }
+
+ // Empty the table view
+ this.emptyTableView = function() {
+ this.tableView.html('<div class="sv-no-tableview-data">' + this.options.noTableDataMessage + '</div>');
+ }
+
+ // Load a view in the right panel
+ this.loadDetail = function(detailContent) {
+ $('.sv-no-detail-data').remove();
+ this.detailView.html(detailContent);
+ }
+
+ // Private APIs
+ // TableView row clicked
+ this._rowClicked = function(source) {
+ var linkedData = source.data('sv-linked-data');
+ $('.sv-table-view .sv-selected').removeClass('sv-selected');
+ source.addClass('sv-selected');
+ _this.options.rowClicked(linkedData);
+ }
+
+ return this;
+ }
+
+ });
+}(jQuery));

0 comments on commit fa164ab

Please sign in to comment.