Skip to content

Z
zui

易企天创 / zui
大约 1 年 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 c8462834 编写于 作者: C Catouse
浏览文件
操作

+ added dashboard.

上级 f173f743
隐藏空白更改
内联 并排
Showing with 576 addition and 1 deletion
dist/css/zui.css
浏览文件 @ c8462834
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
examples/dashboard.html 0 → 100644
浏览文件 @ c8462834
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ZUI，一个简单吸引人的前端框架。">
<meta name="author" content="Zentao">
<title>ZUI</title>
<link href="../dist/css/zui.css" rel="stylesheet">
<link href="../assets/css/example.css" rel="stylesheet">
<script src="../dist/js/jquery.js"></script>
<script src="../dist/js/zui.min.js"></script>
<script src="../src/js/debug.js"></script>
<script src="../src/js/dashboard.js"></script>
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond.js"></script>
<![endif]-->
<script src="../assets/js/example.js"></script>
<script>
$(function()
{
$('#dashboard').dashboard();
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ZUI</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="alerts.html">alerts</a></li>
<li><a href="article.html">article</a></li>
<li><a href="breadcrumb.html">breadcrumb</a></li>
<li><a href="button-groups.html">button-groups</a></li>
<li><a href="buttons.html">buttons</a></li>
<li><a href="cards.html">cards</a></li>
<li><a href="carousel.html">carousel</a></li>
<li><a href="chosen.html">chosen</a></li>
<li><a href="collapse.html">collapse</a></li>
<li><a href="colorset.html">colorset</a></li>
<li><a href="comment.html">comment</a></li>
<li><a href="dashboard.html">dashboard</a></li>
<li><a href="dropdowns.html">dropdowns</a></li>
<li><a href="forms.html">forms</a></li>
<li><a href="grid.html">grid</a></li>
<li><a href="icons.html">icons</a></li>
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
<li><a href="navbars.html">navbars</a></li>
<li><a href="navs.html">navs</a></li>
<li><a href="pager.html">pager</a></li>
<li><a href="panels.html">panels</a></li>
<li><a href="popovers.html">popovers</a></li>
<li><a href="progress.html">progress</a></li>
<li><a href="tables.html">tables</a></li>
<li><a href="tabs.html">tabs</a></li>
<li><a href="textbox.html">textbox</a></li>
<li><a href="tooltip.html">tooltip</a></li>
<li><a href="type.html">type</a></li>
</ul>
</li>
<li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
</ul>
</div>
</nav>
<article>
<h1>Dashboard</h1>
<div class="segment" style='max-width: 1600px; width: inherit; padding: 80px 50px; background: #3280fc'>
<div id="dashboard" class="dashboard dashboard-draggable" data-height="300">
<header></header>
<section class='row'>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">
<div class="panel-actions">
<button class="btn btn-mini"><i class="icon-refresh"></i></button>
<div class="dropdown">
<button role="button" class="btn btn-mini" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
<li><a href="#"><i class="icon-remove"></i> 移除</a></li>
</ul>
</div>
</div><i class="icon-list-ul"></i> Html Panel : dl
</div>
<div class="panel-body">
<dl>
<dt>Lorem.</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
<dt>Ut.</dt>
<dd>Necessitatibus, fugit repellat fugiat a.</dd>
<dt>Aliquam.</dt>
<dd>Obcaecati cum suscipit consequuntur voluptas?</dd>
<dt>Minima!</dt>
<dd>Esse soluta iure corporis porro.</dd>
<dt>Sunt.</dt>
<dd>Delectus quos amet quidem eaque!</dd>
</dl>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">
<div class="panel-actions">
<a href="#"><i class="icon-refresh"></i></a>
<div class="dropdown">
<a href='#' role="button" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
<li><a href="#"><i class="icon-remove"></i> 移除</a></li>
</ul>
</div>
</div><i class="icon-list-ul"></i> Html Panel : ul
</div>
<div class="panel-body">
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Corrupti, hic illo a doloribus!</li>
<li>Magnam consequatur veniam ullam temporibus.</li>
<li>Dolores, nobis ratione dolorem voluptate.</li>
<li>Nulla, ratione dignissimos nesciunt sequi.</li>
<li>Praesentium, dicta accusamus laborum laboriosam!</li>
<li>Facere commodi dolor quasi. Nihil.</li>
<li>Esse, similique nulla doloremque dolorum.</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">Html Panel : ol<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button><button class="btn btn-mini btn-danger"><i class="icon-remove"></i></button></div></div>
<div class="panel-body">
<ol>
<li>Lorem ipsum dolor sit amet.</li>
<li>Corrupti, hic illo a doloribus!</li>
<li>Magnam consequatur veniam ullam temporibus.</li>
<li>Dolores, nobis ratione dolorem voluptate.</li>
<li>Nulla, ratione dignissimos nesciunt sequi.</li>
<li>Praesentium, dicta accusamus laborum laboriosam!</li>
<li>Facere commodi dolor quasi. Nihil.</li>
<li>Esse, similique nulla doloremque dolorum.</li>
</ol>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">Panel heading<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">Table<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
<div class="panel-body">
<table class="table">
<tr>
<td>Lorem ipsum.</td>
<td>Debitis, consectetur.</td>
<td>Ullam, asperiores.</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Saepe, mollitia.</td>
<td>Placeat, vel!</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Amet, architecto!</td>
<td>Natus, quis!</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Quam, nesciunt.</td>
<td>Perspiciatis, vel!</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Et, aut!</td>
<td>Molestias, necetatibus?</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Fugit, fuga?</td>
<td>Iure, officiis.</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Saepe, neque!</td>
<td>Deserunt, voluptates?</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Praesentium, eum!</td>
<td>Numquam, molestias.</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">Panel heading<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">Panel heading<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">Panel heading<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">Panel heading<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
<div class="panel-body"></div>
</div>
</div>
</section>
</div>
</div>
</article>
</body>
</html>
src/js/dashboard.js 0 → 100644
浏览文件 @ c8462834
/* Dashboard */
+function($, window, document, Math)
{
"use strict";
var Dashboard = function(element, options)
{
this.$ = $(element);
this.options = this.getOptions(options);
this.draggable = this.$.hasClass('dashboard-draggable') || this.options.draggable;
this.init();
};
Dashboard.DEFAULTS = {height: 360};
Dashboard.prototype.getOptions = function (options)
{
options = $.extend({}, Dashboard.DEFAULTS, this.$.data(), options);
return options;
};
Dashboard.prototype.handleDraggable = function()
{
var dashboard = this.$;
var afterOrdered = this.options.afterOrdered;
this.$.addClass('dashboard-draggable');
this.$.find('.panel-actions').mousedown(function(event)
{
event.preventDefault();
event.stopPropagation();
console.log('h');
});
this.$.find('.panel-heading').mousedown(function(event)
{
var panel = $(this).closest('.panel');
var dPanel = panel.clone().addClass('panel-dragging-shadow');
var pos = panel.offset();
var dPos = dashboard.offset();
dashboard.addClass('dashboard-dragging');
panel.addClass('panel-dragging').parent().addClass('dragging-col');
dPanel.css(
{
left : pos.left - dPos.left,
top : pos.top - dPos.top,
width : panel.width(),
height : panel.height()
}).appendTo(dashboard).data('mouseOffset', {x: event.pageX - pos.left + dPos.left, y: event.pageY - pos.top + dPos.top});
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
event.preventDefault();
function mouseMove(event)
{
var offset = dPanel.data('mouseOffset');
dPanel.css(
{
left : event.pageX-offset.x,
top : event.pageY-offset.y
});
dashboard.find('.dragging-in').removeClass('dragging-in');
dashboard.find('.panel').each(function()
{
var p = $(this);
var pP = p.offset(), pW = p.width(), pH = p.height();
var pX = pP.left - pW / 2, pY = pP.top;
var mX = event.pageX, mY = event.pageY;
if(mX > pX && mY > pY && mX < (pX + pW) && mY < (pY + pH))
{
p.parent().addClass('dragging-in');
return false;
}
});
event.preventDefault();
}
function mouseUp(event)
{
var draggingIn = dashboard.find('.dragging-in');
if(panel.data('order') != draggingIn.data('order'))
{
panel.parent().insertBefore(draggingIn);
var newOrder = 1;
var newOrders = {};
dashboard.find('.panel').each(function()
{
$(this).data('order', newOrder++);
newOrders[$(this).attr('id')] = $(this).data('order');
});
if(afterOrdered && $.isFunction(afterOrdered))
{
afterOrdered(newOrders);
}
}
dPanel.remove();
dashboard.find('.dragging-col').removeClass('dragging-col');
dashboard.find('.panel-dragging').removeClass('panel-dragging');
draggingIn.removeClass('dragging-in');
dashboard.removeClass('dashboard-dragging');
$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
event.preventDefault();
}
});
};
Dashboard.prototype.handlePanelPadding = function()
{
this.$.find('.panel-body > table, .panel-body > .list-group').closest('.panel-body').addClass('no-padding');
};
Dashboard.prototype.handlePanelHeight = function()
{
var dHeight = this.options.height;
this.$.find('.row').each(function()
{
var row = $(this);
var panels = row.find('.panel');
var height = row.data('height') || dHeight;
if(typeof height != 'number')
{
height = 0;
panels.each(function()
{
height = Math.max(height, $(this).innerHeight());
});
}
panels.each(function()
{
var $this = $(this);
$this.find('.panel-body').css('height', height - $this.find('.panel-heading').outerHeight() - 2);
});
});
};
Dashboard.prototype.init = function()
{
this.handlePanelHeight();
this.handlePanelPadding();
if(this.draggable) this.handleDraggable();
var orderSeed = 0;
this.$.find('.panel').each(function()
{
var $this = $(this);
$this.data('order', ++orderSeed);
if(!$this.attr('id'))
{
$this.attr('id', 'panel' + orderSeed);
}
});
}
$.fn.dashboard = function(option)
{
return this.each(function()
{
var $this = $(this);
var data = $this.data('zui.dashboard');
var options = typeof option == 'object' && option;
if (!data) $this.data('zui.dashboard', (data = new Dashboard(this, options)));
if (typeof option == 'string') data[option]();
})
};
$.fn.dashboard.Constructor = Dashboard;
}(jQuery,window,document,Math);
src/less/views/dashboard.less 0 → 100644
浏览文件 @ c8462834
.dashboard
{
position: relative;
.panel-heading
{
font-weight: bold;
padding: 6px;
white-space: nowrap;
text-overflow: ellipsis;
height: 34px;
&:hover
{
> .panel-actions
{
> .btn,
> .dropdown > .btn,
> .dropdown > a,
> a
{
.opacity(1);
}
}
}
> [class^='icon-']
{
.opacity(0.7);
}
}
.panel-actions
{
float: right;
.dropdown
{
display: inline-block;
}
.dropdown-menu
{
min-width: 80px;
> li > a
{
padding: 3px 10px;
}
}
.btn
{
margin-top: -4px;
}
> a,
> .dropdown > a
{
color: @color-gray;
display: inline-block;
:hover
{
text-decoration: none;
}
> .caret
{
line-height: 20px;
}
}
> .btn,
> .dropdown > .btn,
> .dropdown > a,
> a
{
.opacity(0.7);
}
.btn + .btn
{
margin-left: 4px;
}
}
.panel-body
{
padding: 6px 10px;
overflow: auto;
&.no-padding
{
padding: 0;
}
> dl
{
margin: 0;
}
> ul,
> ol
{
padding-left: 20px;
margin: 0;
}
}
&.dashboard-draggable
{
.panel-heading
{
cursor: move;
}
}
.panel-dragging
{
border: 1px solid rgba(255,255,255,0.1);
background:rgba(0,0,0,0.3);
box-shadow: none!important;
color:#fff;
> * {.opacity(0.1)}
}
.panel-dragging-shadow
{
position: absolute;
border: 2px solid rgba(255,255,255,0.9);
box-shadow: 2px 0 25px rgba(0,0,0,0.8)!important;
background: rgba(255,255,255,0.5);
}
.dragging-in:before {box-sizing: content-box; content:' '; display: block; position: absolute; left: -2px; top: -10px; width: 2px; height: 100%; background-color: rgba(255,255,255, 0.5); border: 1px solid #fff;}
.dragging-in.dragging-col:before {display: none;}
}
src/less/zui.less
浏览文件 @ c8462834
......@@ -94,6 +94,7 @@
@import "views/cards.caption.less";
@import "views/cards.condensed.less";
@import "views/cards.reveal.less";
@import "views/dashboard.less";
//
// TESTS
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或