First version

tryshchenko · Jan 24, 2016 · 2b5c8d2 · 2b5c8d2
1 parent faef08e
commit 2b5c8d2
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
-# ash-jquery-plugin
+# ASH jQuery Plugin
 Avoid Selectors Hell - is extremely tiny jquery plugin to simplify work with columns in tables
diff --git a/ash.js b/ash.js
@@ -0,0 +1,68 @@
+(function ($) {
+	/**
+	 * Cell action logic exported here
+	 * @param  {object} subject   [your table]
+	 * @param  {string} method    [which function should be applied to object]
+	 * @param  {integer} number    [number from zero]
+	 * @param  {any} parameter [you can pass any parameter compatible with target method]
+	 */
+	var cellApply = function (subject, method, number, parameter) {
+        var rows = subject.find('tr');
+		for (var i = 0; i < rows.length; i++) {
+        	$(rows[i]).find('th:eq(' + number + '), td:eq(' + number  + ')')[method](parameter);
+        }
+	}
+
+	/**
+	 * Get column function
+	 * @param  {integer} number [from zero]
+	 * @return {object} jQuery object
+	 */
+	$.fn.getColumn = function(number) {
+    	var result = this.find('tr').find('th:eq(' + number + '), td:eq(' + number  + ')');
+    	return result;
+    };
+
+    /**
+     * Function to hide column
+     * @param  {integer} number from zero]
+     * @param  {any} parameter [you can pass any parameter compatible with target method]
+     * @return {object}           [this]
+     */
+    $.fn.hideColumn = function(number, parameter) {
+        cellApply(this, 'hide', number, parameter);
+        return this;
+    };
+
+    /**
+     * Function to toggle column
+     * @param  {integer} number from zero]
+     * @param  {any} parameter [you can pass any parameter compatible with target method]
+     * @return {object}           [this]
+     */
+    $.fn.toggleColumn = function(number, parameter) {
+    	cellApply(this, 'toggle', number, parameter);
+        return this;
+    };
+
+    /**
+     * Function to show column
+     * @param  {integer} number from zero]
+     * @param  {any} parameter [you can pass any parameter compatible with target method]
+     * @return {object}           [this]
+     */
+    $.fn.showColumn = function(number, parameter) {
+    	cellApply(this, 'show', number, parameter);
+        return this;
+    };
+
+    /**
+     * Function to show all columns
+     * @param  {any} parameter [you can pass any parameter compatible with target method]
+     * @return {object}           [this]
+     */
+    $.fn.showAllColumns = function(parameter) {
+    	this.find('th, td').show(parameter);
+    	return this;
+    };
+}(jQuery));
diff --git a/ash.min.js b/ash.min.js
diff --git a/example.html b/example.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>ASH demo</title>
+	<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+	<script src="ash.js"></script>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+</head>
+<body>
+	<div class="row">
+		<div class="container">
+			<h1>ASH jQuery plugin example</h1>
+			<table class="table table-striped">
+				<thead>
+					<th>#</th>
+					<th>Name</th>
+					<th>Surname</th>
+					<th>Gender</th>
+				</thead>
+				<tbody>
+					<tr>
+						<td>1</td>
+						<td>Issac</td>
+						<td>Newton</td>
+						<td>Male</td>
+					</tr>
+					<tr>
+						<td>2</td>
+						<td>Nicolaus</td>
+						<td>Copernicus</td>
+						<td>Male</td>
+					</tr>
+					<tr>
+						<td>3</td>
+						<td>Nikola</td>
+						<td>Tesla</td>
+						<td>Male</td>
+					</tr>
+					<tr>
+						<td>4</td>
+						<td>Dennis</td>
+						<td>Ritchie</td>
+						<td>Male</td>
+					</tr>
+					<tr>
+						<td>5</td>
+						<td>Johannes</td>
+						<td>Kepler</td>
+						<td>Male</td>
+					</tr>
+				</tbody>
+			</table>
+
+		</div>
+		<div class="container">
+			<button class="btn btn-primary" id="hideName">Hide name</button>
+			<button class="btn btn-primary" id="showName">Show name</button>
+			<button class="btn btn-success" id="toggleName">Toggle name</button>
+			<button class="btn btn-success" id="showAll">Show all</button>
+
+		</div>
+	</div>
+
+
+	<script>
+		$(document).ready(function(){
+			$('table').hideColumn(3);
+			$('table').getColumn(2).css('text-decoration', 'underline');
+		});
+		$('#hideName').click(function() {
+		 	$('table').hideColumn(1, 'fast');
+		})
+		$('#showName').click(function() {
+		 	$('table').showColumn(1, 'fast');
+		})
+		$('#toggleName').click(function() {
+		 	$('table').toggleColumn(1, 'fast');
+		})
+		$('#showAll').click(function() {
+			$('table').showAllColumns('fast');
+		})
+
+	</script>
+
+</body>
+</html>