demos/jQuery.html

<!doctype html>
<html lang="en">

	<meta charset="utf-8">
	<title>basicContext Demo</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
	<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
	<link rel="stylesheet" href="../dist/basicContext.min.css">
	<link rel="stylesheet" href="../dist/themes/default.min.css">

	<style>

		html {
			width: 100%;
			height: 100%;
		}

		body {
			text-align: center;
			min-height: 100%;
			font-size: 14px;
		}

		a {
			display: inline-block;
			margin: 50px 0;
			padding: 6px 10px;
			background: #4393e6;
			color: #fff;
			text-decoration: none;
			border-radius: 3px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

	</style>

	<a href="#" class="click">Click me!</a>

	<a href="#" class="context">Right-Click me!</a>

	<a href="#" class="touchend">Touch me! (mobile only)</a>

	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="../dist/basicContext.min.js"></script>

	<script>

		var onClick = function(e) {

			var clicked = function() { alert('Item clicked!') }

			var items = [
				{ title: 'Add Sites', icon: 'ion-plus-round', fn: clicked },
				{ title: 'Reset Login', icon: 'ion-person', fn: clicked },
				{ title: 'Help', icon: 'ion-help-buoy', fn: clicked },
				{ title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true },
				{ title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false },
				{ },
				{ title: 'Logout', icon: 'ion-log-out', fn: clicked }
			]

			basicContext.show(items, e.originalEvent)

		}

		$(document).ready(function() {

			$('.click').on('click', onClick)
			$('.context').on('contextmenu', onClick)
			$('.touchend').on('touchend', onClick)

		})

	</script>

</html>