Awesome ASP.net Core and MVC Controls

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();

$.get('@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 = 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').change(function () {
useAt = $(this).val() == 'true';
});

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

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



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.