Permalink
Browse files

First commit

  • Loading branch information...
0 parents commit 4f7fe9c6516ebc536390afb5de38fa61efc459cf @huacnlee committed Mar 26, 2010
Showing with 255 additions and 0 deletions.
  1. +18 −0 README.markdown
  2. BIN images/close.gif
  3. BIN images/shadow.png
  4. +60 −0 index.html
  5. +18 −0 jquery.jdialog.css
  6. +159 −0 jquery.jdialog.js
@@ -0,0 +1,18 @@
+# jDialog
+
+jDialog is a popup window plugin for jQuery, It simple to use.
+
+## Example
+
+ <script type="text/javascript">
+ function showChangeLocal(el){
+ $(el).jDialog({
+ title : "Dialog title",
+ content : "<p>This is dialog HTML content</p>",
+ width : 400
+ });
+ return false;
+ }
+ </script>
+ <a href="#" onclick="return showChangeLocal(this);">change local</a>
+
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>jQuery.jDialog demo</title>
+ <link rel="stylesheet" href="jquery.jdialog.css" type="text/css" media="screen" />
+ <style type="text/css" media="screen">
+ * { margin:0; padding:0; }
+ input,button { font-size:12px; }
+ body { background:#DDD; text-align: center; font-size:13px; color:#333; }
+ a { color:#0363D5; }
+ #container { width:800px; margin:20px auto; background:#FFF; border:1px solid #CCC;
+ padding:10px; text-align: left; }
+ .dialog_content a { margin-right:4px; margin-bottom:8px; }
+ .search_box { font-size:12px; }
+ .search_box label { color:#999; }
+ </style>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
+ <script src="jquery.jdialog.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ function changeLocal(el){
+ $(el).jDialog({
+ title : "快速切换",
+ content : '\
+ <div class="dialog_content">\
+ <a href="http://www.javaeye.com/">JavaEye</a> <a href="http://chinaonrails.com">ChinaonRails</a> \
+ <a href="http://www.rubyonrails.org">Rails 官方</a> <a href="http://ruby-lang.org">Ruby</a>\
+ </div>\
+ ',
+ width : 200
+ });
+ return false;
+ }
+
+ function showSearchPanel(el){
+ $(el).jDialog({
+ title : "快速切换",
+ content : $("#hide_contexts .search_box").clone().html(),
+ width : 300
+ });
+ return false;
+ }
+ </script>
+</head>
+<body>
+ <div id="hide_contexts" style="display:none">
+ <div class="search_box form">
+ <p class="row">
+ <label for="search_text">搜索:</label> <select><option value="1">网站</option><option value="2">内容</option></select>
+ <input type="text" name="search[text]" value="" id="search_text" /> <button>搜索</button>
+ </p>
+ </div>
+ </div>
+ <div id="container">
+ <a href="#" onclick="return changeLocal(this);">快速切换</a>
+ <a href="#" onclick="return showSearchPanel(this);">搜索</a>
+ </div>
+</body>
+</html>
@@ -0,0 +1,18 @@
+.jdialog_outterbox { text-align:left; height:0px;left:0px;overflow:visible;position:absolute;top:0px;z-index:100;}
+.jdialog_outterbox .jdialog_dialog_popup{height:0px;overflow:visible;position:relative;}
+.jdialog_outterbox div.dialog_loading{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:10px;}
+.dialog_content .dialog_buttons .inputaux,
+.dialog_content .dialog_buttons .inputsubmit{padding-left:10px;padding-right:10px;}
+.jdialog_outterbox .jdialog_dialog_popup{width:215px;}
+.jdialog_outterbox h2{color:#666; font-weight:normal; font-size:12px;padding-bottom:2px;}
+.jdialog_outterbox .contextual_dialog_shadow { margin-top:2px; margin-left:2px;
+ background:url(images/shadow.png); }
+.jdialog_outterbox .jdialog_close { background:url(images/close.gif) left top no-repeat;
+ width:11px; height:11px; cursor:pointer; top:6px; right:6px; float:right; position:absolute; }
+.jdialog_outterbox .contextual_dialog_content{top:-2px; left:-2px; background:#FFF; position:relative;
+ border:1px solid #CCC; line-height:15px;padding:6px;}
+.jdialog_outterbox a { text-decoration: underline; }
+.jdialog_outterbox a:hover { text-decoration: underline; color:#333; }
+.jdialog_outterbox .dialog_buttons{ display:none; margin-top:5px;}
+.jdialog_outterbox .dialog_buttons input{margin-right:10px; background:#666; padding:0; height:22px; border:1px solid #333; border-top:1px solid #CCC; border-left:1px solid #CCC; color:#FFF; line-height:20px;}
+.jdialog_outterbox .dialog_buttons_msg{float:right;}
@@ -0,0 +1,159 @@
+/*
+ * jDialog v 0.3
+ * Jason Lee <huacnlee@gmail.com> Since 2008-03-26
+ */
+var jDialog = {
+
+ /**
+ * 窗口的所有者,窗口显示出来的位置会以这个所有者为基础
+ */
+ owner : undefined,
+
+ /**
+ * 鼠标处于区域
+ */
+ hovered : false,
+
+ /**
+ * 参数设置
+ */
+ settings : {
+
+ /**
+ * 窗口最外面个框的ID
+ */
+ idName : "paneljDialog",
+ /**
+ * 窗口标题
+ */
+ title : "提示",
+ /**
+ * 提示内容
+ */
+ content : "",
+
+ width : 250
+ },
+
+ /**
+ * 显示jDialog
+ */
+ show : function(settings){
+ var pos = jDialog.getPos();
+ $.extend(jDialog.settings,settings);
+
+ //关闭之前的窗口
+ jDialog.close();
+
+ //创建HTML对象
+ var dialog = $("#"+jDialog.settings.idName);
+
+ if(dialog.size() == 0){
+ var cssArrow = "contextual_arrow_rev";
+ var posTop = pos.top + pos.height + 2;
+ var posLeft = pos.left + 1;
+ var browserHalfSize = jDialog.getBrowserHafeSize();
+
+ if(posLeft > browserHalfSize.width){
+ posLeft = pos.left;
+ cssArrow = "contextual_arrow";
+ }
+
+ var cssPosition = 'top:'+ posTop + 'px;left:'+ posLeft +'px;';
+
+ var html = '';
+ html += '<div id="'+jDialog.settings.idName+'" class="jdialog_outterbox" style="position:absolute;display:none;'+ cssPosition+ '">';
+ html += ' <div class="jdialog_dialog_popup" style="width:'+ jDialog.settings.width +'px">';
+ html += ' <div class="'+ cssArrow +'"></div>';
+ html += ' <div class="contextual_dialog_shadow">'
+ html += ' <div class="contextual_dialog_content">';
+ html += ' <h2><span>'+jDialog.settings.title+'</span></h2>';
+ html += ' <div class="jdialog_close" onclick="jDialog.close();" title="关闭"></div>';
+ html += ' <div class="dialog_content">';
+ html += ' <div class="dialog_body clearfix">';
+ html += ' '+jDialog.settings.content;
+ html += ' </div>';
+ html += ' </div>';
+ html += ' </div>';
+ html += ' </div>';
+ html += ' </div>';
+ html += '</div>';
+
+ $("body").append($(html));
+
+ dialog = $("#"+jDialog.settings.idName);
+ dialog.hover(function(){ jDialog.hovered = true; },function(){ jDialog.hovered = false; });
+ }
+ dialog.show();
+ },
+
+ /**
+ * 更新窗口里面的内容
+ */
+ update : function(content){
+ $("#"+ jDialog.settings.idName +" .dialog_body").html(content);
+ },
+
+ /**
+ * 关闭jDialog
+ */
+ close : function(){
+ var dialog = $("#"+jDialog.settings.idName);
+ dialog.hide();
+ dialog.remove();
+ },
+
+ /**
+ * 取得浏览器的高度和宽度的一半
+ */
+ getBrowserHafeSize : function(){
+ var browserWidth = window.innerWidth || document.documentElement.clientWidth ||
+ document.body.clientWidth;
+ var browserHeight = window.innerHeight || document.documentElement.clientHeight ||
+ document.body.clientHeight;
+ var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+ var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+ return {width: ( browserWidth / 2) - 150 + scrollX,height: ( browserHeight / 2) - 100 + scrollY};
+ },
+
+ /**
+ * 取得owner 在页面上的坐标和它的高度和宽度
+ */
+ getPos : function(){
+ if(jDialog.owner == undefined){
+ return {top : 0, left:0 , width : 0, height : 0};
+ }
+
+ var e = jDialog.owner;
+ var oTop = e.offsetTop;
+ var oLeft = e.offsetLeft;
+ var oWidth = e.offsetWidth;
+ var oHeight = e.offsetHeight;
+ while(e = e.offsetParent)
+ {
+ oTop += e.offsetTop;
+ oLeft += e.offsetLeft;
+ }
+
+ return {
+ top : oTop,
+ left : oLeft,
+ width : oWidth,
+ height : oHeight
+ }
+ }
+
+};
+
+jQuery.fn.jDialog = function(settings){
+ jDialog.owner = this[0];
+ jDialog.show(settings);
+}
+
+jQuery.fn.jDialog.close = function(){
+ jDialog.close();
+}
+
+jQuery.fn.jDialog.update = function(content){
+ jDialog.update(content);
+}

0 comments on commit 4f7fe9c

Please sign in to comment.