Tabs

Tabs using html helper

content for tab 1
content for custom tab
Tabs/Index.cshtml
@(Html.Awe().Tabs().Name("tab1")
.Add("tab 1", "content for tab 1", "expl")
.Add(@<text>
<button type="button" class="awe-tab-btn">
<span>custom button <b>tab</b></span>
</button>
</text>,
@<text> content for custom tab</text>, "expl")
.Add("tab 3", @<text> @await Html.PartialAsync("Part1") </text>, "tab3")
.Add(@<text>
<button type="button" class="awe-tab-btn tabx">
<span>tabx</span>
<div class="darrw"> <i class="o-caret"></i></div>
</button>
</text>))

<script>
// tabx dropmenu
$(function () {
function openMenu(opener) {
var dm = awem.dropmenu({
dataFunc: function () {
return [{ c: 'tab A' }, { c: 'tab B' }];
},
minw: 150,
select: function (item) {
var sact = 'awe-active';
var tabs = opener.closest('.awe-tabs');
tabs.find('.' + sact).removeClass(sact);
opener.addClass(sact);
tabs.find('.awe-tab').hide();
tabs.find('.tabd').remove();
var tabd = $('<div/>').addClass('awe-tab tabd expl');
tabs.find('.awe-tabscontent').append(tabd);
tabd.html(item.c + ' conent');
}
});

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

$('.tabx').click(function () {
openMenu($(this));
});
});
</script>
<style>
.tab3 {
padding: 2em;
background: azure;
color: green;
}

.darrw {
display: inline-block;
width: 24px;
position: relative;
vertical-align: middle;
}
</style>

Tabs using aweui

content for tab1
content for tab2
content for tab3
Tabs/Index.cshtml
<script>
$(function () {
aweui.tabs({ elm: $('#tabs2') });
});
// tabx code from previous demo affects this demo as well (tabx menu)
</script>
<div id="tabs2">
<div data-caption="tab1" class="expl">
content for tab1
</div>
<div>
<button type="button" class="awe-tab-btn">
<span>custom button <b>tab</b></span>
</button>
<div class="expl">
content for tab2
</div>
</div>
<div data-caption="tab 3" class="tab3">
content for tab3
</div>
<div>
<button type="button" class="awe-tab-btn tabx">
<span>tabx</span>
<div class="darrw"> <i class="o-caret"></i></div>
</button>
</div>
</div>



Comments