开始使用菜单
本指南演示了如何使用jQuery菜单的剑道UI。
完成本指南后，您将能够达到以下最终结果:
< ul id = "菜单" > < / ul > <脚本> $(文档)时(函数(){$(" #菜单”)。kendoMenu({dataSource: {data: [{title: "家具"，项目:[{title: "桌椅"}，{title: "沙发"}，{title: "偶尔的家具"}]}，{title: "Decor"，项目:[{title: "床上用品"}，{title: "窗帘和窗帘"}，{title: "地毯"}]}，dataTextField: "title"，动画:{open:{效果:"slideIn:up"}}，});});> < /脚本1.创建一个ul元素
首先，创建一个< ul >元素，将从该元素初始化Menu组件。
< ul id = "菜单" > < / ul >2.初始化菜单
在这一步中，您将初始化Menu< ul >元素。在初始化组件时，该组件的所有设置都将在脚本语句中提供。你必须用JavaScript描述它的布局、配置和事件处理程序。
< ul id = "菜单" > < / ul > <脚本> $(" #菜单”).kendoMenu ({});> < /脚本3.配置数据源
菜单项可以从JSON数据数组中加载。要使用此方法，请配置数据源设置。
< ul id = "菜单" > < / ul > <脚本> $(文档)时(函数(){$(" #菜单”)。kendoMenu({数据源:{数据:[{标题:“家具”，项目:[{标题:“桌椅”}，{标题:“沙发”}，{标题:“临时家具”}]}，{标题:“装饰”，项目:[{标题:“床上用品”}，{标题:“窗帘和百叶窗”}，{标题:“地毯”}]});});> < /脚本4.指定DataTextField
的dataTextField配置必须指向数据源数据。
< ul id = "菜单" > < / ul > <脚本> $(文档)时(函数(){$(" #菜单”)。kendoMenu({dataSource: {data: [{title:“家具”，项目:[{title:“桌椅”}，{title:“沙发”}，{title:“偶尔的家具”}]}，{title:“装饰”，项目:[{title:“床上用品”}，{title:“窗帘和窗帘”}，{title:“地毯”}]}]}，dataTextField:“title”，//菜单项的文本将从数据源中的“title”字段中检索。});});> < /脚本5.修改动画
菜单允许您修改默认的打开和关闭动画。
< ul id = "菜单" > < / ul > <脚本> $(文档)时(函数(){$(" #菜单”)。kendoMenu({dataSource: {data: [{title: "Furniture"， items: [{title: "Tables & Chairs"}， {title: "沙发"}，{title: " interim Furniture"}]}， {title: "Decor"， items: [{title: "Bed Linen"}， {title: " curtain & Blinds"}， {title: "Carpets"}]}， dataTextField: "title"， animation: {open: {effects: "slideIn:up"}) //当菜单项悬停时，菜单将向上滑动而不是向下滑动。}});});> < /脚本