+ added messager.

0d36903c · Catouse · 3aea8d73 · 0d36903c · 0d36903c · 0d36903c
隐藏空白更改
内联并排

Showing with 288 addition and 0 deletion

examples/messager.html examples/messager.html +103 -0

src/js/messager.js src/js/messager.js +76 -0

src/less/modules/messager.less src/less/modules/messager.less +109 -0

未找到文件。
--- a/examples/messager.html
+++ b/examples/messager.html
+<!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>
+  <!--[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()
+    {
+        // messager.success('这是一条测试消息', 'top', 5000);
+    });
+  </script>
+  <style>
+    .messager-example{position: relative; margin-bottom: 20px;}
+  </style>
+</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="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>
+    <section id="buttons" class="page-section">
+      <div class="segment">
+        <div class="messager messager-example messager-default"><div class="messager-content">普通提示消息</div><button class="close-messager">&times;</button></div>
+        <div class="messager messager-example messager-primary"><div class="messager-content">提示消息：主要</div><button class="close-messager">&times;</button></div>
+        <div class="messager messager-example messager-info"><div class="messager-content">提示消息：信息</div><button class="close-messager">&times;</button></div>
+        <div class="messager messager-example messager-danger"><div class="messager-content">提示消息：危险</div><button class="close-messager">&times;</button></div>
+        <div class="messager messager-example messager-success"><div class="messager-content">提示消息：成功</div><button class="close-messager">&times;</button></div>
+        <div class="messager messager-example messager-warning"><div class="messager-content">提示消息：警告</div><button class="close-messager">&times;</button></div>
+        <div class="messager messager-example messager-important"><div class="messager-content">提示消息：重要</div><button class="close-messager">&times;</button></div>
+        <div class="messager messager-example messager-special"><div class="messager-content">提示消息：特别</div><button class="close-messager">&times;</button></div>
+      </div>
+    </section>
+  </article>
+</body>
+</html>
--- a/src/js/messager.js
+++ b/src/js/messager.js
+/* Messager: show messager float on your page */
+function($, window, document, Math)
+{
+    "use strict";
+
+    var id       = 0;
+    var template = '<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-content">{message}</div><button class="close-messager">&times;</button></div>';
+
+    function Messager()
+    {
+        this.show = function(message, type, placement, time, parent)
+        {
+            $('.messager').hide();
+
+            id++;
+            type = type || 'default';
+            time = time || 2000;
+            parent = parent || 'body';
+            placement = placement || 'top';
+            var msg = $(template.format({message: message, type: type, placement: placement, id: id})).appendTo(parent);
+            msg.find('.close-messager').click(function(){$(this).closest('.messager').fadeOut();});
+
+            if(placement == 'top' || placement == 'bottom')
+            {
+                msg.css('left', ($(parent).width() - msg.width() - 50)/2);
+            }
+
+            msg.fadeIn();
+
+            setTimeout(function(){$('#messager' + id).fadeOut(function(){$(this).remove()});}, time);
+
+            return msg;
+        }
+
+        this.primary = function(message, placement, time, parent)
+        {
+            return this.show(message, 'primary', placement, time, parent);
+        }
+
+        this.success = function(message, placement, time, parent)
+        {
+            return this.show('<i class="icon-ok-sign icon"></i> ' + message, 'success', placement, time, parent);
+        }
+
+        this.info = function(message, placement, time, parent)
+        {
+            return this.show('<i class="icon-info-sign icon"></i> ' + message, 'info', placement, time, parent);
+        }
+
+        this.warning = function(message, placement, time, parent)
+        {
+            return this.show('<i class="icon-warning-sign icon"></i>' + message, 'warning', placement, time, parent);
+        }
+
+        this.danger = function(message, placement, time, parent)
+        {
+            return this.show('<i class="icon-exclamation-sign icon"></i>' + message, 'danger', placement, time, parent);
+        }
+
+        this.important = function(message, placement, time, parent)
+        {
+            return this.show(message, 'important', placement, time, parent);
+        }
+
+        this.special = function(message, placement, time, parent)
+        {
+            return this.show(message, 'special', placement, time, parent);
+        }
+    }
+
+    var messager = new Messager();
+
+    window.messager = messager;
+
+
+}(jQuery,window,document,Math);
--- a/src/less/modules/messager.less
+++ b/src/less/modules/messager.less
+.messager
+{
+  position: fixed;
+  color: @color-light;
+  background-color: @color-dark;
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 20px;
+  padding-right: 50px;
+  max-width: 80%;
+  z-index: 99999;
+
+  &.top
+  {
+    top: 20px;
+  }
+
+  &.top-left
+  {
+    top: 20px;
+    left: 20px;
+  }
+
+  &.top-right
+  {
+    top: 20px;
+    right: 20px;
+  }
+
+  &.bottom
+  {
+    bottom: 20px;
+  }
+
+  &.bottom-left
+  {
+    bottom: 20px;
+    left: 20px;
+  }
+
+  &.bottom-right
+  {
+    bottom: 20px;
+    right: 20px;
+  }
+}
+
+.messager-content
+{
+  padding: 10px 20px;
+
+  > [class^='icon-']
+  {
+     display: inline-block;
+     margin-right: 8px;
+  }
+}
+
+.close-messager
+{
+  position: absolute;
+  right: 10px;
+  top: 5px;
+  background: none;
+  border: none;
+  color: #fafafa;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 20px;
+
+  &:hover
+  {
+    color: #fff;
+  }
+}
+
+.messager-primary
+{
+  background-color: @state-primary-inverse-bg;
+}
+
+.messager-success
+{
+  background-color: @state-success-inverse-bg;
+}
+
+.messager-info
+{
+  background-color: @state-info-inverse-bg;
+}
+
+.messager-warning
+{
+  background-color: @state-warning-inverse-bg;
+}
+
+.messager-danger
+{
+  background-color: @state-danger-inverse-bg;
+}
+
+.messager-important
+{
+  background-color: @state-important-inverse-bg;
+}
+
+.messager-special
+{
+  background-color: @state-special-inverse-bg;
+}
+