菜单增加序号显示与菜单类别,支持响应式布局

This commit is contained in:
Argo-Lenovo 2016-12-20 16:55:41 +08:00
parent 1edf470bae
commit 33f8382a3e
2 changed files with 25 additions and 4 deletions

View File

@ -184,10 +184,31 @@
.dd3-content > span {
position: absolute;
right: 15px;
top: 6px;
}
.dd3-content .menuOrder {
right: 15px;
}
.dd3-content .menuType {
right: 45px;
}
@media (max-width: 480px) {
.dd3-content .menuType {
display: none;
}
li[data-category="1"] .dd3-content .menuOrder {
color: green;
}
}
li[data-category="1"] .dd3-content .menuType {
color: green;
}
.dd-dragel > .dd3-item > .dd3-content {
margin: 0;
}

View File

@ -3,10 +3,10 @@
var html = "";
$.each(menus, function (index, menu) {
if (menu.Menus.length == 0) {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span>{4}</span></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category, menu.Order);
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span class="menuType">{5}</span><span class="menuOrder">{4}</span></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category, menu.Order, menu.CategoryName);
}
else {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{5}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span>{5}</span></div><ol class="dd-list">{4}</ol></li>', menu.ID, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus), menu.Order);
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{5}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span class="menuType">{6}</span><span class="menuOrder">{5}</span></div><ol class="dd-list">{4}</ol></li>', menu.ID, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus), menu.Order, menu.CategoryName);
}
});
return html;
@ -15,7 +15,7 @@
var cascadeSubMenu = function (menus) {
var html = ""
$.each(menus, function (index, menu) {
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span>{4}</span></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category, menu.Order);
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-order="{4}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label><span class="menuType">{5}</span><span class="menuOrder">{4}</span></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category, menu.Order, menu.CategoryName);
});
return html;
};