- 积分
- 85
- 在线时间
- 20 小时
- 主题
- 2
- 注册时间
- 2015-12-29
- 帖子
- 39
- 最后登录
- 2022-7-2
- 帖子
- 39
- 软币
- 291
- 在线时间
- 20 小时
- 注册时间
- 2015-12-29
|
有没有用过Drawer控件的,左侧treeview菜单,右侧加载页面,但是点菜单的时候控件跳出去了。
index.cshtml
-----------------------------------------------------------------------------------------------------------------
<div class="toolbar">
@(Html.DevExtreme().Toolbar()
.Items(items =>
{
items.Add()
.Widget(w => w
.Button()
.Icon("menu")
.OnClick("openButton_click")
)
.Location(ToolbarItemLocation.Before);
})
)
</div>
<div class="drawer">
@(Html.DevExtreme().Drawer()
.ID("drawer")
.OpenedStateMode(DrawerOpenedStateMode.Push)
.Opened(true)
.Height(new JS("height"))
.Position(DrawerPosition.Left)
.RevealMode(DrawerRevealMode.Slide)
.CloseOnOutsideClick(false)
.Content(@<text >
<div id="rightContent"></div>
</text>)
.Template(@<text>
<div class="left-content">
@(Html.DevExtreme().TreeView()
.ID("myTreeViewId")
.DataSource(d=>d.Mvc().Controller("Home").LoadAction("GetMenu"))
.KeyExpr("id")
.ParentIdExpr("parentId")
.ExpandAllEnabled(false)
.FocusStateEnabled(true)
.SelectNodesRecursive(true)
.SelectionMode(NavSelectionMode.Single)
.SelectByClick(true)
.SelectNodesRecursive(true)
.SearchEnabled(true)
.RootValue(String.Empty)
.DataStructure(TreeViewDataStructure.Plain)
.ElementAttr("class", "dx-theme-accent-as-background-color")
.OnItemClick("onItemClick")
)
</div>
</text>)
)
</div>
--------------------------------------------------------------------------------------------
TabPanel.cshtml
@{
Layout = null;
}
@(Html.DevExtreme().TabPanel()
.ID("tabpanel-container")
.DataSource(d => d.Mvc().LoadAction("GetTabList"))
.Height(900)
.Width(1200)
.SelectedIndex(0)
.FocusStateEnabled(true)
//.ScrollByContent(true)
//.ScrollingEnabled(true)
//.Loop(false)
//.AnimationEnabled(true)
//.SwipeEnabled(true)
.ItemTitleTemplate(@<text><%=Title%></text>)
.ItemTemplate(@<text><div id="<%= Template %>"></div>
<script>
var view = '<%= Template %>';
var urlString = "User/" + view.substring(16, 20);
$("#<%= Template %>").load(urlString);
</script>
</text>)
)
------------------------------------------------------------------------------------------------
|
-
菜单初始化
-
点击菜单后
|