kivi.popup_dialog: auf jQuery UI basierende Popupdialoge

diff --git a/css/kivitendo/jquery-ui.custom.css b/css/kivitendo/jquery-ui.custom.css
index be4d593..be1686b 100644 (file)
--- a/css/kivitendo/jquery-ui.custom.css
+++ b/css/kivitendo/jquery-ui.custom.css
@@ -1,3 +1,9 @@
+/* UI widgets in general */
+.ui-widget-content {
+  background: white;
+}
+
+/* Tab widget */
 .tabwidget {
   background: white;
   position: relative;
@@ -89,3 +95,26 @@
 }
 
 .ui-tabs .ui-tabs-nav li a { padding: .2em .7em; }
+
+/* Dialog */
+.ui-dialog {
+  border: 1px solid black;
+}
+
+.ui-dialog .ui-dialog-titlebar {
+  -khtml-border-radius:0.4em; /* Konqueror */
+  -moz-border-radius:0.4em; /* Firefox */
+  -webkit-border-radius:0.4em; /* Safari, Chrome */
+  background: #006400;
+  behavior:url(border-radius.htc);
+  border-radius:0.4em; /* CSS3 */
+  border-style: none;
+  border-width: thin;
+  color: #FFFFFF;
+  font-weight: bolder;
+  margin: 5px;
+  padding: 0.5em;
+  position: relative;
+  text-align: left;
+  font-size:125%;
+}

diff --git a/css/lx-office-erp/jquery-ui.custom.css b/css/lx-office-erp/jquery-ui.custom.css
index e1c2603..cc66e7b 100644 (file)
--- a/css/lx-office-erp/jquery-ui.custom.css
+++ b/css/lx-office-erp/jquery-ui.custom.css
@@ -1,3 +1,11 @@
+/* UI widgets in general */
+.ui-widget-content {
+  background-image: url("../../image/fade.png");
+  background-repeat: repeat-x;
+  background-color: #fff;
+}
+
+/* Tab widget */
 .tabwidget {
   background: none;
   position: relative;
@@ -91,3 +99,22 @@
 }
 
 .ui-tabs .ui-tabs-nav li a { padding: .2em .7em; }
+
+/* Dialog */
+.ui-dialog {
+  border: 1px solid black;
+}
+
+.ui-dialog .ui-dialog-titlebar {
+  background: rgb(236,233,216);
+  border-color: black;
+  border-style: dashed;
+  border-width: thin;
+  color: black;
+  font-size: 10pt;
+  font-weight: bolder;
+  margin: 5px;
+  padding: 5px;
+  position: relative;
+  text-align:left;
+}

diff --git a/js/kivi.js b/js/kivi.js
index 5901c89..2be0301 100644 (file)
--- a/js/kivi.js
+++ b/js/kivi.js
@@ -48,6 +48,47 @@ namespace("kivi", function(ns) {
       return window[name];
     return namespace(parts[1])[ parts[2] ];
   };
+
+  // Open a modal jQuery UI popup dialog. The content is loaded via AJAX.
+  //
+  // Parameters:
+  // - id: dialog DIV ID (optional; defaults to 'jqueryui_popup_dialog')
+  // - url, data, type: passed as the first three arguments to the $.ajax() call
+  // - dialog: an optional object of options passed to the $.dialog() call
+  ns.popup_dialog = function(params) {
+    var dialog;
+
+    params            = params        || { };
+    var id            = params.id     || 'jqueryui_popup_dialog';
+    var dialog_params = $.extend(
+      { // kivitendo default parameters:
+          width:  800
+        , height: 500
+        , modal:  true
+      },
+        // User supplied options:
+      params.dialog || { },
+      { // Options that must not be changed:
+        close: function(event, ui) { dialog.remove(); }
+      });
+
+    $('#' + id).remove();
+
+    dialog = $('<div style="display:none" class="loading" id="' + id + '"></div>').appendTo('body');
+    dialog.dialog(dialog_params);
+
+    $.ajax({
+      url:     params.url,
+      data:    params.data,
+      type:    params.type,
+      success: function(new_html) {
+        dialog.html(new_html);
+        dialog.removeClass('loading');
+      }
+    });
+
+    return true;
+  };
 });
 
 kivi = namespace('kivi');