bootstrap collapse MVC .net漂亮的折叠List
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Blog</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
</head>
<body>
<div style="margin-top: 55px;">
<style>
.list-group {
margin-bottom: 0px;
}
.Title {
cursor: pointer;
margin: 1px 0;
padding: 5px 0;
} h2 {
margin-top: 0px;
}
</style>
<div class="col-md-2">
<div href="#collapseOne"
data-toggle="collapse" aria-controls="collapseOne" class="text-center btn-primary Title">
Classification<div style="float: right; margin-right: 5px;">
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
</div>
<ul id="collapseOne" class=" list-group panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<li class="list-group-item"><span class="badge">1</span> <a onclick="collapseOneFind()" href="#">测试类型</a></li>
</ul>
<br />
<div data-toggle="collapse" style="cursor: pointer;" href="#collapseTwo" aria-controls="collapseTwo" class="Title text-center btn-primary">
Tag<div style="float: right; margin-right: 5px;">
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
</div>
<ul id="collapseTwo" class=" list-group panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
</ul>
<br />
<div data-toggle="collapse" style="cursor: pointer;" href="#collapseThree" aria-controls="collapseThree" class="text-center btn-primary Title">
Date<div style="float: right; margin-right: 5px;">
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
</div>
<ul id="collapseThree" class=" list-group panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
</ul>
<br />
</div>
<div class="col-md-10"> </div> </div>
<script>
function InitBlog(data) {
var strTemp = "";
for (var i = 0; i < data.length; i++) {
strTemp += ' <div class="btn-primary">';
strTemp += ' <h2>' + data[i].BlogTitle + '</h2>';
strTemp += ' </div>';
strTemp += '<div class="panel-body">';
strTemp += ' <div>';
strTemp += '<span style="color: #999;">' + data[i].CreateTime + '</span>';
if (data[i].Classifications!='') {
var ClassificationArr = data[i].Classifications.split(',');
for (var j = 0; j < ClassificationArr.length; j++) {
strTemp += ' |<a style="color: #999; text-decoration: none;" href="#">' + ClassificationArr[0] + '</a>'
}
}
strTemp += ' </div>';
strTemp += '<div style="margin:5px 0">';
strTemp += data[i].Content;
strTemp += ' </div>';
strTemp += ' </div>';
strTemp += ' <div>';
if (data[i].Tag.indexOf(',') > 0) {
var TagArr = data[i].Tag.split(',');
for (var k = 0; k < TagArr.length; k++) {
strTemp += ' <button type="button" class="btn btn-default btn-xs">';
strTemp += ' <span class="glyphicon glyphicon-star" aria-hidden="true"></span>' + TagArr[k];
strTemp += ' </button> ';
}
}
strTemp += ' </div>';
}
return strTemp;
} function ClassificationFind(obj) {
$.ajax({
type: 'get', async: true, url: '/Blog/ClassificationFind', dataType: 'JSON', data: { Str: $(obj).text() }, cache: false, success: function (data) {
$("#Content").html(InitBlog(data));
}
});
}
function TagFind(obj) {
$.ajax({
type: 'get', async: true, url: '/Blog/TagFind', dataType: 'JSON', data: { Str: $(obj).text() }, cache: false, success: function (data) {
$("#Content").html(InitBlog(data));
}
});
} function DateFind(obj) {
$.ajax({
type: 'get', async: true, url: '/Blog/DateFind', dataType: 'JSON', data: { Str: $(obj).text() }, cache: false, success: function (data) {
$("#Content").html(InitBlog(data));
}
});
}
$(document).ready(function () {
//绑定折叠List 数据源
$.ajax({
type: 'get', async: true, url: '/Blog/GetClassification', cache: false, dataType: 'JSON', success: function (data) {
var strTemp = "";
for (var i = 0; i < data.length; i++) {
strTemp += ' <li class="list-group-item"> <span class="badge">' + data[i].Num + '</span> <a onclick="ClassificationFind(this)" href="#">' + data[i].ClassificationName + '</a></li>';
}
$("#collapseOne").html(strTemp);
}
});
$.ajax({
type: 'get', async: true, url: '/Blog/GetTagName', cache: false, dataType: 'JSON', success: function (data) {
var strTemp = "";
for (var i = 0; i < data.length; i++) {
strTemp += ' <li class="list-group-item"> <span class="badge">' + data[i].Num + '</span> <a onclick="TagFind(this)" href="#">' + data[i].TagName + '</a></li>';
}
$("#collapseTwo").html(strTemp);
}
}); $.ajax({
type: 'get', async: true, url: '/Blog/GetCreateDate', cache: false, dataType: 'JSON', success: function (data) {
var strTemp = "";
for (var i = 0; i < data.length; i++) {
strTemp += ' <li class="list-group-item"> <span class="badge">' + data[i].Num + '</span> <a onclick="DateFind(this)" href="#">' + data[i].CreateDate + '</a></li>';
}
$("#collapseThree").html(strTemp);
}
}); $.ajax({
type: 'get', async: true, url: '/Blog/GetBlog', cache: false, dataType: 'JSON', success: function (data) {
var r = $("#Content").html();
$("#Content").html(r + InitBlog(data));
}
});
});
$(".Title").click(function () {
var r = $(this).attr('class');
if (r.indexOf("collapsed") > 0) {
$(this).find("span").attr("class", "glyphicon glyphicon-chevron-up");
} else {
$(this).find("span").attr("class", "glyphicon glyphicon-chevron-down");
}
});
</script>
</body>
</html>
bootstrap collapse MVC .net漂亮的折叠List的更多相关文章
- bootstrap插件学习-bootstrap.collapse.js
先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...
- bootstrap collapse 无法收回
$(function () { //修复collapse不能正常折叠的问题 $(".collapsed").click(function () { var itemHref = $ ...
- TextBoxFor控件的扩展---Bootstrap在mvc上的应用
TextBoxFor控件的问题: 1:自带了样式,再用bootstrap样式会有冲突. 2:要加水印,js事件,限制输入长度比较麻烦. 因此需要对textboxfor控件进行扩展. 目标: 1:能使用 ...
- Bootstrap for MVC：Html.Bootstrap().TextBoxFor(model=>model.Name)
在上篇博文中提到最近比较忙,也打过招呼Orchard系列文章更新速度可能会放缓,但还是会继续写下去,主要原因在最近想着开发一个新的东西(系统?组件?),等有一定成果时会跟大家分享一些相关的东西,今天介 ...
- Bootstrap Collapse使用
参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse http://www.w3resource.com/twi ...
- Bootstrap 学习笔记11 按钮和折叠插件
复选框: <div class="btn-group" data-toggle="buttons"> <label for="se ...
- Android分享一款漂亮的折叠书架菜单
一个Android折叠书架菜单,效果极佳,给人的视觉感觉很好,便于使用. FoldingMenu
- 添加Bootstrap 到MVC项目中（vs2010）
环境:Visual Studio 2010 ASP.NET MVC3 手动添加: 下载地址:http://twitter.github.com/bootstrap/ 一个js,两个css,两张图 ...
- bootstrap ace MVC
<<html lang="en"><head> <meta charset="utf-8" /> <title& ...
随机推荐
- 七牛对用户使用webp图片格式的使用建议
Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...
- apache-maven-3.2.1设备
maven 是一个项目管理工具,并建立自己主动.本文所讲apache-maven-3.2.1设备. 它的下载: http://maven.apache.org/download.cgi ,选apach ...
- Swift UI学习UITableView and protocol use
Models: UserModel.swift Views: UserInfoCell.swift Controllers: RootViewController.swift, DetailViewC ...
- 如何成为游戏的生产者——第二章:如何开始你的编程(开发环境的搭建、C++语言适应)
如何成为游戏的生产者--文章二章:怎样開始你的编程 小故事:上节说到我六年级打开了那本C语言的书,然后其实我还是没看懂.好像看懂了一些printf语句.之后遇到了史无前例的困难--怎么让代码执行起来. ...
- OpenCV（C++接口)学习笔记1-图像读取、显示、保存
OpenCV在2.0加入版本号之后C++接口函数,学习前C语言的接口功能.现在OpenCV它已被发展到2.4.9版本号,所以,我决定学习C++接口函数,与步伐. 1.创建图像 cv::Mat imag ...
- capturing self strongly in this block is likely to lead to a retain cycle
一个用Block实例变量语法,当有一个参考的实例变量,常引起retain cycle. capturing self strongly in this block is likely to lead ...
- DBA查询命令积累——不断更新
原文:DBA查询命令积累--不断更新 一.服务器配置: 1.兼容级别:兼容级别只影响指定数据库中的行为,而不会影响整个服务器上的行为. 1.1.查看数据库兼容级别及更改兼容级别: SELECT com ...
- Python标准库09 当前进程信息 (部分os包)
原文:Python标准库09 当前进程信息 (部分os包) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们在Linux的概念 ...
- [linux]scp指令（转）
Linux scp命令用于Linux之间复制文件和目录,具体如何使用这里好好介绍一下,从本地复制到远程.从远程复制到本地是两种使用方式.这里有具体举例: ================== Linu ...
- REST WebService
REST WebService 前置技能 ① 使用maven来管理java项目 这个技能必须点一级,以便快速配置项目. 本文实际上是我学习Spring的过程中搬的官网上的demo,使用maven配置项 ...