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({ 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

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({ 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>

Mainmenu and sidemenu

open on click:




open on hover:




side menu, open on hover:

File
Meals
Help
Dropmenu/Index.cshtml
<p>open on click:</p>
<div id='menu1'>
<div class="mitem" data-prop="file">File</div>
<div class="mitem" data-prop="meals">Meals</div>
<div class="mitem" data-prop="help">Help</div>
</div>
<br />
<br />
<br />

<p>open on hover:</p>
<div id='menuHov1'>
<div class="mitem" data-prop="file">File</div>
<div class="mitem" data-prop="meals">Meals</div>
<div class="mitem" data-prop="help">Help</div>
</div>

<br />
<br />
<br />
<p>side menu, open on hover:</p>
<div id='sideMenu' style="width: 100px">
<div class="smitem" data-prop="file">File</div>
<div class="smitem" data-prop="meals">Meals</div>
<div class="smitem" data-prop="help">Help</div>
</div>
<div id="log1" style="min-height: 2em;"></div>
<script>
$(function() {
var data = {
file: [
{ c: 'New' },
{ c: 'Save' },
{ c: 'Recent Files',
nv: 1, // non value, clicking on it does nothing
it: [{ c: 'file1' }, { c: 'file2' }, { c: 'file3' } ]},
{ c: 'Quit' }
],
meals: [],
help: [
{c: 'View help'},
{c: 'Feedback'},
{ c: '', cs: "o-litm", nv: 1 }, // horiz line
{c: 'About'}]
};

$.when(cstorg.get('@Url.Action("GetMealsTreeImg", "Data")')).then(function(res) {
data.meals = res;
});

function openMenu(mitem, right) {
var prop = mitem.data('prop');

var dm1 = awem.dropmenu({
dataFunc: function() {
return data[prop];
},
minw: 150,
submenu: true, // tree data as submenu
asmi: prop !== 'meals' ? -1 : 0, // autosearch only for meals
itemFunc: site.imgItem,
select: function(item) {
awe.flash($('#log1').html('click on ' + item.c));
}
});

dm1.open({ opener: mitem, right: right });
return dm1;
}

// open on click menu
$('#menu1').on('click', '.mitem',
function(e) {
var mitem = $(e.target);
openMenu(mitem);
});

// open on hover menu
awem.hovMenu({
hover: $('#menuHov1').find('.mitem'),
open: openMenu
});

// open on hover side menu
awem.hovMenu({
hover: $('#sideMenu'),
hsel: '.smitem',
open: function(opener) { return openMenu(opener, true); }
});
});
</script>

Main menu with a links

File
Other
Dropmenu/Index.cshtml
<script>
$(function () {
var data = {
file: [
{ c: 'Home', k: '' },
{ c: 'About', k: 'Home/About' },
{
c: 'Grid demos',
nv: 1, // non value
it: [
{ c: 'Overview', k: 'GridDemo' },
{ c: 'Filtering', k: 'GridDemo/Filtering' },
{ c: 'Inline Editing', k: 'GridInlineEditDemo' }]
}
],
other: [
{ c: 'aweui', k:'aweui' },
{ c: 'Mailbox', k: 'MailboxDemo' },
{ c: 'Cascade', k: 'MultipleLevelCascadingDemo' },
{ c: '', cs: "o-litm", nv: 1 }, // horiz line
{ c: 'Popup', k:'PopupDemo' }]
};

function openMenu(mitem) {
var prop = mitem.data('prop');

var dm = awem.dropmenu({
dataFunc: function () {
return data[prop];
},
minw: 200,
submenu: true, // tree data as submenu
asmi: -1, // no search
clss: "amenu", // popup div class, .amenu in site.css makes the a occupy the whole li
itemFunc: function(item) {
return item.k != null ? '<a href="' + document.root + item.k + '">' + item.c + '</a>' : item.c;
// document.root is set in _Layout.cshtml
}
});

dm.open({ opener: mitem });
return dm;
}

// open on hover menu
awem.hovMenu({
hover: $('#linkMenu').find('.mitem'),
open: openMenu
});
});
</script>

<div id="linkMenu">
<div class="mitem" data-prop="file">File</div>
<div class="mitem" data-prop="other">Other</div>
</div>

Dropmenu with tree data

click here

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 dm;

init();

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

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

dm = awem.dropmenu({
dataFunc: function() { return items; },
opnlc: txt,
hpos: txt,
select: function(item) {
// func in site.js
site.replaceInTexarea(txt[0], (useAt ? '@@' : '') + item.c, word);
},
clsempt: 1, // close on empty items/search results
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;
}

// 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