Auto Open and Close jqxDropDownList’s Popup

This blog post will show you how to use the jqxDropDownList’s API to implement auto open/close behavior. The widget’s popup should be opened when the mouse cursor is moved over it and should be closed when the mouse cursor leaves the widget’s bounds. 1. To open the jqxDropDownList’s popup when the mouse enters its bounds, bind to the ‘mouseenter’ event and call the ‘open’ method. In the event handler, we also check whether the popup is already opened, because we don’t want to call a method if it isn’t necessary. 
$("#jqxWidget").bind('mouseenter', function () {
	var isOpened = $("#jqxWidget").jqxDropDownList('isOpened');
	if (!isOpened) {
		$("#jqxWidget").jqxDropDownList('open');
	}
});
2. The close logic is a little bit more difficult, because we need to check whether the mouse cursor is moved outside the widget’s bounds. In order to implement this, we need to trigger the ‘mousemove’ event. On each move of the cursor, we check whether the mouse cursor is inside or outside the widget and based on that, we decide whether to call the ‘close’ method. The jqxDropDownList’s ‘close’ method closes its popup. 
$(document).bind('mousemove', function (event) {
	var isOpened = $("#jqxWidget").jqxDropDownList('isOpened');
	if (isOpened) {
		// enable popup closing on mouse leave only when the mouse cursor is outside the jqxDropDownList.
		var offset = $("#jqxWidget").offset();
		var top = offset.top;
		var left = offset.left;
		canClose = true;
		var dropDownHeight = parseInt($("#jqxWidget").jqxDropDownList('dropDownHeight'));
		if (event.pageY >= top && event.pageY <= top + $("#jqxWidget").height() + dropDownHeight) {
			if (event.pageX >= left && event.pageX < left + $("#jqxWidget").width())
				canClose = false;
		}
		if (canClose) {
			// close popup.
			$("#jqxWidget").jqxDropDownList('close');
		}
	}
});
Below is the full code of the sample: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
     <script type="text/javascript">
		$(document).ready(function () {
			var source = [
				"Affogato",
				"Americano",
				"Bicerin",
				"Breve",
				"Café Bombón",
				"Café au lait",
				"Caffé Corretto",
				"Café Crema",
				"Caffé Latte",
				"Caffé macchiato",
				"Café mélange",
				"Coffee milk",
				"Cafe mocha",
				"Cappuccino",
				"Carajillo",
				"Cortado",
				"Cuban espresso",
				"Espresso",
				"Eiskaffee",
				"The Flat White",
				"Frappuccino",
				"Galao",
				"Greek frappé coffee",
				"Iced Coffee?",
				"Indian filter coffee",
				"Instant coffee",
				"Irish coffee",
				"Liqueur coffee"
			];
			// Create a jqxDropDownList
			$("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25'});
			$("#jqxWidget").bind('mouseenter', function () {
				var isOpened = $("#jqxWidget").jqxDropDownList('isOpened');
				if (!isOpened) {
					$("#jqxWidget").jqxDropDownList('open');
				}
			});
			$(document).bind('mousemove', function (event) {
				var isOpened = $("#jqxWidget").jqxDropDownList('isOpened');
				if (isOpened) {
					// enable popup closing on mouse leave only when the mouse cursor is outside the jqxDropDownList.
					var offset = $("#jqxWidget").offset();
					var top = offset.top;
					var left = offset.left;
					canClose = true;
					var dropDownHeight = parseInt($("#jqxWidget").jqxDropDownList('dropDownHeight'));
					if (event.pageY >= top && event.pageY <= top + $("#jqxWidget").height() + dropDownHeight) {
						if (event.pageX >= left && event.pageX < left + $("#jqxWidget").width())
							canClose = false;
					}
					if (canClose) {
						// close popup.
						$("#jqxWidget").jqxDropDownList('close');
					}
				}
			});
		});
	</script>
</head>
<body>
	<div id='jqxWidget'>
	</div>
</body>
</html>

About admin


This entry was posted in JavaScript, jQuery, jQuery UI, jqxDropDownList and tagged , , , , , , , , , , , , , , . Bookmark the permalink.



Leave a Reply