Awesome ASP.net Web-Forms Controls
Dropmenu
Simple Dropmenu
Dropmenu.aspx
<div id="area1" class="area"> <div class="msg">click here</div> </div> <script> $(function () { var div = $('#area1'); var msg = div.find('.msg'); var items = [{ k: 1, c: 'item 1' }, { k: 2, c: 'item 2' }, { k: 3, c: 'item 3' }]; var dd = awem.dropmenu({ dataFunc: getData, select: select }); div.click(function (e) { dd.open({ xy: { y: e.clientY, x: e.clientX } }); }); function select(it) { msg.html('you clicked ' + it.c); } function getData() { return items; } }); </script>
Dropmenu with different items depending on what is clicked
DropMenu.aspx
<div class="area" id="area2"> <div class="card"> <div class="big">a</div> </div> <div class="card"> <div class="big">b</div> </div> <div class="card"> <div class="big">c</div> </div> <div class="msg">click here, or on a card</div> </div> <script> $(function () { var div = $('#area2'); var items = []; var msg = div.find('.msg'); var dd = awem.dropmenu({ dataFunc: getData, select: select }); div.click(function (e) { var card = $(e.target).closest('.card'); items = [{ k: 1, c: 'item 1' }, { k: 2, c: 'item 2' }]; if (card.length) { items.push({ k: 'hide', c: 'hide card ' + card.find('.big').html(), i: card.index() }); } if (div.find('.card:hidden').length) { items.push({ k: 'all', c: 'show all' }); } dd.render(); dd.open({ xy: { y: e.clientY, x: e.clientX } }); }); function select(it) { msg.html('you clicked ' + it.c); if (it.k == 'hide') { div.find('.card').eq(it.i).hide(); } else if (it.k == 'all') { div.find('.card').show(); } } function getData() { return items; } }); </script>
Autocomplete in textarea
Use
min len:
filter using starts with:
DropMenu.aspx
<textarea id="text1" style="width: 100%" placeholder="try mango onion banana"></textarea> <script> $(function () { var useAt = 0; var minLen = 1; var txt = $('#text1'); var items = []; var word = ''; var fstart; var dd; init(); $.get('<%=Page.Url().Action("GetAllMeals", "Data") %>', function (res) { items = res; dd.render(); }); function init() { if (dd) { dd.destroy(); } dd = awem.dropmenu({ dataFunc: getData, opnlc: txt, hpos: txt, select: select, clsempt: 1, flts: fstart, // filter using startsWith srctxt: txt, gterm: getSrcTerm, combo: 1 }); } function getSrcTerm() { // func in site.js word = site.getCaretWord(txt[0]); var res = -1; if (word.length >= minLen) { if (useAt) { if (word[0] == '@') { res = word.substr(1); } } else { res = word; } } return res; } function getData() { return items; } function select(item) { // func in site.js site.replaceInTexarea(txt[0], (useAt ? '@' : '') + item.c, word); } // settings $('#<%=ChkUseAt.ClientID %>').change(function () { useAt = $(this).val() == 'true'; }); $('#<%=TxtMinLen.ClientID %>').change(function () { minLen = Number($(this).val()); }); $('#<%=ChkFstart.ClientID %>').change(function () { fstart = $(this).val() == 'true'; init(); }); }); </script>
Open Popup
Comments