Dropmenu

Simple Dropmenu

click here
Dropmenu/Index.cshtml
<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({ df: 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

a
b
c
click here, or on a card
Shared/Demos/DropmenuItems.cshtml
<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({ df: 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

Shared/Demos/AutocInTxta.cshtml
<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();

$.post('@Url.Action("GetAllMeals", "Data")', function (res) {
items = res;
dd.render();
});

function init() {
if (dd) {
dd.destroy();
}

dd = awem.dropmenu({
df: 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 = 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
replaceInTexarea(txt[0], (useAt ? '@@' : '') + item.c, word);
}

// settings
$('#chkUseAt').change(function () {
useAt = $(this).val() == 'true';
});

$('#txtMinLen').change(function () {
minLen = Number($(this).val());
});

$('#chkFstart').change(function () {
fstart = $(this).val() == 'true';
init();
});
});
</script>



Comments