KendoUI系列:PanelBar
2024-08-25 08:34:38
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
<ul id="panelbar">
<li>
<h2>Season</h2>
<div>
<ul>
<li>Spring</li>
<li>Summer</li>
<li>Autumn</li>
<li>Winter</li>
</ul>
</div>
</li>
<li class="k-state-active">
<h2>Weekday</h2>
<div>
<ul>
<li> Sunday</li>
<li>Monday</li>
<li> Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
</div>
</li>
<li>
<h2>Direction</h2>
<div>
<ul>
<li>East</li>
<li>South</li>
<li>West</li>
<li>North</li>
</ul>
</div>
</li>
</ul>
<script type="text/javascript">
$(function () {
$("#panelbar").kendoPanelBar({
expandMode: "single" // 设置展开模式只能展开单个
});
});
</script>
效果预览:
说明:将需要展开项中的class设置为k-state-active即可在加载完成时默认展开。
最新文章
- css 使容器宽度适应内容宽
- 一、Daily Scrum Meeting【Alpha】------Clover
- C++ 用RGB 三种颜色绘图
- j技术方案
- java集合 之 set 集合
- 学习js之类的使用
- POJ 3254 Corn Fields(状态压缩DP)
- java 文件text的写入
- 也谈一下Activiti工作流节点的自由跳转
- jquery插件下载地址
- Oracle数据库之PL/SQL触发器
- 杂题 UVAoj 107 The Cat in the Hat
- Bootstrap 静态分页 和 jquery_pagination插件 动态分页
- VS2005快捷键
- MySQL中select * for update锁表的问题(转)
- C控制语句:循环
- XBMC源代码分析 3:核心部分(core)-综述
- SAP CRM 忠诚度相关表的关系图
- MongoDB--连接客户端和服务
- WPF 颜色渐变
热门文章
- FMX下Edit只能输入数字
- c1ctf2016 wp
- Linux环境变量配置
- 【C++】DDX_Control、SubclassWindow和SubclassDlgItem的区别
- UWP开发随笔——UWP新控件!AutoSuggestBox!
- DNS拾遗(二)
- [问题解决]安装 SQL Server 无法开启NetFx3.5 的错误
- 自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药
- mysql --prompt
- Git学习笔记(7)——多人协作