Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

SplitView plugin and example

  • Loading branch information...
commit 98dec41989b84778c44379336e5d58e8a2f50e2f 1 parent cb5e4cd
@sangregoriopaolo sangregoriopaolo authored
View
49 example/data.json
@@ -0,0 +1,49 @@
+{
+ "messages": [
+ {
+ "title": "Example title 1",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ {
+ "title": "Example title 2",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ {
+ "title": "Example title 3",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ {
+ "title": "Example title 4",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ {
+ "title": "Example title 5",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ {
+ "title": "Example title 6",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ {
+ "title": "Example title 7",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ {
+ "title": "Example title 8",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ {
+ "title": "Example title 9",
+ "date": "30/01/2012",
+ "message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+ },
+ ]
+}
View
28 example/index.htm
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" href="../jquery-splitView.css" type="text/css" media="screen" charset="utf-8">
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../jquery-splitView.js" charset="utf-8"></script>
+ </head>
+ <body>
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function() {
+ var splitView = $("#split-view").splitView({
+ noTableDataMessage: "No messages",
+ noDetailDataMessage: "Select an item on the left to show it",
+ tableViewDataSource: "data.json",
+ dataReceived: function(data) {
+ for (i in data.messages) {
+ splitView.addTableViewRow(data.messages[i].title, data.messages[i].message.substr(0, 100), data.messages[i].date, { fullText: data.messages[i].message });
+ }
+ },
+ rowClicked: function(data) {
+ splitView.loadDetail(data.fullText);
+ }
+ });
+ });
+ </script>
+ <div id="split-view"></div>
+ </body>
+</html>
View
12 jquery-splitView.css
@@ -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
87 jquery-splitView.js
@@ -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));
Please sign in to comment.
Something went wrong with that request. Please try again.