On 14/01/2015 07:51, Wen Wang wrote:
1) Add sample for widget 2) Add messagebar as widget
Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/messagebar-flat.css | 63 +++++++++++++++++++++++++++++ ui/js/widgets/messagebar-flat.js | 65 ++++++++++++++++++++++++++++++ ui/js/widgets/samples/messagebar-flat.html | 29 +++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 ui/css/theme-default/messagebar-flat.css create mode 100644 ui/js/widgets/messagebar-flat.js create mode 100644 ui/js/widgets/samples/messagebar-flat.html
diff --git a/ui/css/theme-default/messagebar-flat.css b/ui/css/theme-default/messagebar-flat.css new file mode 100644 index 0000000..86605cd --- /dev/null +++ b/ui/css/theme-default/messagebar-flat.css
diff --git a/ui/js/widgets/messagebar-flat.js b/ui/js/widgets/messagebar-flat.js new file mode 100644 index 0000000..d72682d --- /dev/null +++ b/ui/js/widgets/messagebar-flat.js @@ -0,0 +1,65 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2015 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + /* + + $(".selector").messagebarFlat({ + content: "This is a test", //text that is going to be shown to user + color: "red" //color that we pre-defined, current are "red", "yellow" and "green" + }); + + */ +(function($) { + $.widget("kimchi.messagebarFlat", { + options : { + content : null, + color : "red", + }, + + _create: function() { + var now = this._getTime(); + var that = this; + $("<div class='messagebar'><span class='messageHead'></span>" + + "<span class='messagebar-text'> " + this.options.content +": " + now + "</span></div>") + .addClass(this.options.color) + .appendTo(that.element); + $(".messageHead").addClass("dark-" + this.options.color); + $("<span class='messagebar-close icon-cancel-circled'></span>").on("click", function() { + that.destroy(); + }).appendTo($(".messagebar")); + setTimeout(function() { + that.destroy() + }, 3000); + },
Also maybe put the date and time in the begging is more common [15/01/2014 08:00:00AM] Message here.
+ + _getTime: function() { + var CT = new Date(); + var currentDate = CT.getDate() + "/" + CT.getMonth()+1 + "/" +CT.getFullYear(); + var currentTime = CT.getHours() + ":" + CT.getMinutes() + ":" + CT.getSeconds(); + var now = currentDate + " " + currentTime; + return now; + }, + + destroy: function() { + var that = this; + that.element.fadeOut("normal", function() { + that.element.remove(); + }); + } + }); +})(jQuery); \ No newline at end of file diff --git a/ui/js/widgets/samples/messagebar-flat.html b/ui/js/widgets/samples/messagebar-flat.html new file mode 100644 index 0000000..1b1ce0b --- /dev/null +++ b/ui/js/widgets/samples/messagebar-flat.html @@ -0,0 +1,29 @@ +<!--Sample code --> +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Kimchi</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css"> + <link rel="stylesheet" href="../../../css/fontello/css/fontello.css"> + <link rel="stylesheet" href="../../../css/fontello/css/animation.css"> + <link rel="stylesheet" href="../../../css/theme-default/messagebar-flat.css"> + <script src="../../../libs/jquery-1.10.0.min.js"></script> + <script src="../../../libs/jquery-ui.min.js"></script> + <script src="../messagebar-flat.js"></script> + </head> + <body> + <div class="message"></div> + <script> + $(document).ready(function() { + $(".message").messagebarFlat({ + content: "This is a test", + color: "red" + }); + }); + </script> + </body> + +</html>