KendoUI系列:PanelBar
<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即可在加载完成时默认展开。
KendoUI系列:PanelBar的更多相关文章
- KendoUI系列:Window
1.基本使用 <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css") ...
- KendoUI系列:MultiSelect
1.基本使用 1>.创建Input <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common. ...
- KendoUI系列:DatePicker
1.基本使用 <link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css" ...
- KendoUI系列:DropDownList
1.基本使用 1>.创建Input <input id="dropDownList" /> <link href="@Url.Content(&q ...
- [转]KendoUI系列:Grid
本文转自:http://www.cnblogs.com/libingql/p/3774879.html 1.基本使用 <div id="grid"></div&g ...
- KendoUI系列:TreeView
1.加载本地数据 <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css" ...
- KendoUI系列:TabStrip
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" ...
- KendoUI系列:AutoComplete
1.基本使用 <link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css" ...
- KendoUI系列:Grid
1.基本使用 <div id="grid"></div> <link href="@Url.Content("~/Content/ ...
随机推荐
- Global文件编译发布,代码不执行的问题与解决
问题:在Application_BeginRequest添加防止跨站点注入的过滤代码,VS2005编译成DLL发布后发现代码不会被执行: 环境:windows server 2008 r2 x64位 ...
- Notes for Studying Django
Once you added a new application to INSTALLED_APPS, the database tables need to be updated, thus you ...
- cocos2d-x 3.0 版本 骨骼动画设置shader
因为骨骼动画是由多个sprite组成, 所以需要遍历每个sprite 才能修改整体, 开头这样设置,在游戏中发现走路状态没问题,攻击状态就有部分sprite没效果 for (auto & ob ...
- [转]mysql drop、truncate和delete比较
一.drop table tb drop将表格直接删除,没有办法找回. 立刻释放磁盘空间 ,不管是 Innodb和MyISAM . 二.truncate (table) tb 该命令可以清空一个表里的 ...
- 【转】【Linux】 临界区,互斥量,信号量,事件的区别
原文地址:http://blog.itpub.net/10697500/viewspace-612045/ Linux中 四种进程或线程同步互斥的控制方法1.临界区:通过对多线程的串行化来访问公共资源 ...
- JavaScript 基础第三天
一.前言 在前天的内容我们提到了有关于JS的一些语言结构,这些语言结构都是语法中最为基本的内容必须予以熟记并可以灵活掌握. 二.引入 在今天内容中我们将讨论两个很重要的概念,数组与函数. 三.重点内容 ...
- WIN8 隐私声明
隐私权声明 本应用连接网络仅为控制硬件设备,不会收集你的个人信息,也不共享你个个人信息. 应用名称 CrossMedia可视化控制系统(服务器版) 关于本应用 本应仅为控制设备应用,不关注任何配置相关 ...
- ajax500错误
昨天做一个需求,原先使用form提交的东西,领导说要改成使用ajax提交.嗯,听起来好像很简单很简单哦,可惜我已经很少敲代码了.擦,这工作让人槽点无数.果断写代码. var fm=document.g ...
- 【设计模式之装饰者模式InJava】
需求:定义一个操作系统OS接口,安装Windows10操作系统,在上面安装虚拟机VMWare,虚拟机里装Linux; 然后在Linux中安装虚拟机VMware,再在虚拟机里安装MacOS操作系统. 实 ...
- 高亮 TRichEdit 当前行
var gStart, gLength, gCol: Integer; procedure SetRichEdit(aRichEdit: TRichEdit); var fRow, fCol: ...