diff options
| author | Zaran <zaran.krleza@gmail.com> | 2011-05-13 14:19:26 +0200 |
|---|---|---|
| committer | Zaran <zaran.krleza@gmail.com> | 2011-05-13 14:19:26 +0200 |
| commit | 368ada44db571c46deea674eadd410ac9bc47ebc (patch) | |
| tree | 5b33bc0977b1cba67ff1e973f8e339e5b3718e3f /webclient | |
| parent | 02a4212494e1d42f50d8fb1c8daede32ae9cb744 (diff) | |
| download | alias-368ada44db571c46deea674eadd410ac9bc47ebc.tar.gz | |
Simple dialog plugin.
Test dialog when clicking register link.
Diffstat (limited to 'webclient')
| -rw-r--r-- | webclient/index.html | 11 | ||||
| -rw-r--r-- | webclient/lib/alias.js | 6 | ||||
| -rw-r--r-- | webclient/lib/jquery.dialog.js | 63 | ||||
| -rw-r--r-- | webclient/style/dialog.css | 15 |
4 files changed, 94 insertions, 1 deletions
diff --git a/webclient/index.html b/webclient/index.html index 745c4ff..018514e 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -9,6 +9,7 @@ <script type="text/javascript" src="lib/jquery-1.4.4.js"></script> <script type="text/javascript" src="lib/jquery.tipTip.js"></script> <script type="text/javascript" src="lib/jquery.tabs.js"></script> + <script type="text/javascript" src="lib/jquery.dialog.js"></script> <script type="text/javascript" src="lib/strophe.js"></script> <script type="text/javascript" src="lib/config.js"></script> <script type="text/javascript" src="lib/alias.js"></script> @@ -16,10 +17,16 @@ <link rel="stylesheet" type="text/css" href="style/alias.css" /> <link rel="stylesheet" type="text/css" href="style/tabs.css" /> <link rel="stylesheet" type="text/css" href="style/tipTip.css" /> + <link rel="stylesheet" type="text/css" href="style/dialog.css" /> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> + <div id="dialogs"> + <div id="dialog-overlay"></div> + <div class="dialog" id="register">test</div> + </div> + <div id="header"> <span id="logo">Alias</span> <span id="status"></span> @@ -49,7 +56,9 @@ </div> <div id='left'> - + <div id="register-link"> + <a href="#">Register</a> + </div> <div id='roster'> <h2>Contacts</h2> diff --git a/webclient/lib/alias.js b/webclient/lib/alias.js index 521b492..f5945d7 100644 --- a/webclient/lib/alias.js +++ b/webclient/lib/alias.js @@ -388,6 +388,12 @@ $(document).ready(function(){ $(this).val(''); } }); + + $('#dialogs').dialog(); + + $('#register-link').click(function(){ + $('#dialogs').dialog('show', 'register'); + }); }); diff --git a/webclient/lib/jquery.dialog.js b/webclient/lib/jquery.dialog.js new file mode 100644 index 0000000..1a5679e --- /dev/null +++ b/webclient/lib/jquery.dialog.js @@ -0,0 +1,63 @@ +/** + * jQuery dialog plugin + * + * <div id="dialogs"> + * <div id="#dialog-overlay"></div> + * <div class="dialog" id="dialog1"></div> + * <div class="dialog" id="dialog2"></div> + * </div> + */ +(function( $ ){ + + var methods = { + + init: function(){ + this.data('dialog', {opened: []}); + this.find('#dialog-overlay').bind('click.dialog', function(){ + $(this).parent().dialog('hide'); + }); + }, + + show: function(name){ + var maskHeight = $(document).height(); + var maskWidth = $(window).width(); + var overlay = this.find('#dialog-overlay'); + overlay.css({'width':maskWidth,'height':maskHeight}); + var winH = $(window).height(); + var winW = $(window).width(); + var dialog = this.find('#'+name); + dialog.css('top', winH/2-dialog.height()/2); + dialog.css('left', winW/2-dialog.width()/2); + this.data('dialog').opened.push(name); + overlay.show(); + dialog.show(); + }, + + hide: function(){ + var name = this.data('dialog').opened.pop(); + var dialog = this.find('#'+name); + var overlay = this.find('#dialog-overlay'); + dialog.hide(); + if (this.data('dialog').opened.length === 0){ + overlay.hide(); + } + } + }; + + /* + * Register the 'dialog' method to the jQuery objects + * the first argument of this method is the submethod + * you want to call + */ + $.fn.dialog = function(method) { + if ( methods[method] ) { + return methods[method].apply(this, Array.prototype.slice + .call(arguments, 1)); + } else if ( typeof method === 'object' || !method ) { + return methods.init.apply(this, arguments); + } else { + $.error('Method ' + method + ' does not exist on jQuery.dialog'); + } + }; + +})(jQuery);
\ No newline at end of file diff --git a/webclient/style/dialog.css b/webclient/style/dialog.css new file mode 100644 index 0000000..ea9266e --- /dev/null +++ b/webclient/style/dialog.css @@ -0,0 +1,15 @@ +#dialog-overlay{ + position:absolute; + z-index:9000; + background-color:#575757; + opacity: 0.7; + display:none; +} + +#dialogs .dialog{ + position:absolute; + display:none; + z-index:9999; + padding:5px; + background-color: red; +}
\ No newline at end of file |