Skip to main content

Keyboard driven menu in Jquery

I had a requirement to operate menu with keyboard just like we do in windows application. Traverse through menus using left/ right arrow keys, up/ down arrow keys should work as well. Further user should be able to navigate when Enter key is pressed. I was not able to find any jquery plugin to use for this purpose until I got this one, https://hanshillen.github.io/jqtest/#goto_menubar





This is what exactly I was looking, thanks a ton to the author. But later I realized it is not that easy to get just menu out of this. So I need to play with it and finally got it working. I am sharing code here so that if anyone ever need such type of menu it will be a quick one. This functionality is created by original author @Hans Hillen, I am just providing this code for simplicity.

Download @ http://jmp.sh/Z3AtfVv



Labels:

Comments

Post a Comment

Popular posts from this blog

Union in Entity Framework

There are certain points we need to take into consideration while performing UNION in Entity Framework. This is an easier way to get entities with different queries and then use Union. As shown in below example, where we are using Union to get result from Texas and Florida states. var floridaEntity = ctx.Orders.Where(o => o.State == "Florida").Select(o => o); var TexasEntity = ctx.Orders.Where(o => o.State == "Texas").Select(o => o); var floridaTexas = floridaEntity.Union(TexasEntity); Another way to use Union is shown below, (from p in Tblpages join pa in Tblpageactions on p.PageId equals pa.PageId join rp in Tblrolepermissions on pa.ActionId equals rp.ActionId into jrs from jrResult in jrs.DefaultIfEmpty() where jrResult.RoleId == 1 select new {
Post a Comment
Read more

Jquery Datatable with Keytable setting focus

Datatable will not have focus by default, we need to set the focus on datatable by using below code, <script src="~/Scripts/js/core/libraries/jquery.min.js"></script> <script type="text/javascript" src="~/Scripts/js/plugins/tables/datatables/datatables.min.js"></script> <script src="~/Scripts/js/plugins/tables/datatables/extensions/key_table.min.js"></script> //make sure you have included KeyTable plugin $(document).ready(function () { // initialise your datatable here, after that we are ready to set focus on datatable so that we can use arrow key for navigation like excel var table = $('#PurchaseorderList').DataTable(); table.cell(':eq(0)').focus(); table.cell(':eq(0)').click(); });
Post a Comment
Read more

Jquery Datatable server side Paging/ Search/ Sort

If we have huge data to bind to Jquery Datatble, server side data binding is a handy option. As we can fetch a set of records and bind only those at time. Further next set of records can be retrieved when requested. e.g, if we have a page size set to 10 records in Datatable, it is a good choice to load only first 10 records in the datatable, when user click on "2" in pagination, we can retrieve 11-20 i.e, next 10 records from database and display in datatable. This will increase noticeable performance for datatable. So let's dive in how we can achieve this, <script src="~/Scripts/js/core/libraries/jquery.min.js"></script> <script type="text/javascript" src="~/Scripts/js/plugins/tables/datatables/datatables.min.js"></script> <script src="~/Scripts/js/plugins/tables/datatables/extensions/key_table.min.js"></script> <!-- here I am using KeyTable (A datatable extension) to navigate through
1 comment
Read more