Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

First commit

  • Loading branch information...
commit 4f7fe9c6516ebc536390afb5de38fa61efc459cf 0 parents
@huacnlee authored
18 README.markdown
@@ -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>
+
BIN  images/close.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/shadow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 index.html
@@ -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>
18 jquery.jdialog.css
@@ -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;}
159 jquery.jdialog.js
@@ -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);
+}
Please sign in to comment.
Something went wrong with that request. Please try again.