Score
0
Watch 15 Star 28 Fork 5

RockYang / JDialogJavaScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
JDialog 是一个优秀的js弹框插件,开箱即用,交互体验良好,功能齐全。 spread retract

Clone or download
README.md 6.21 KB
Copy Edit Web IDE Raw Blame History
RockYang authored 2017-09-15 11:46 . docs: 更新演示地址

JDialog

JDialog是一个js编写的对话框插件。js弹出框的非常优秀解决方案,操作简单,功能丰富,性能可靠。代码逻辑写得很简单,除去注释的话应该不到500代码。 注释也是相当详细,所以也是也不错的学习组件。 包括以下组件:

  • JDialog.lock 锁屏插件
  • JDialog.msg 信息提示框
  • JDialog.open 弹出框
  • JDialog.loader 加载工具
  • JDialog.alert
  • JDialog.confirm 确认框窗口

插件依赖:

  • jQuery-1.7.1以上版本

在线预览

在线演示: http://d.r9it.com/jdialog/

更新日志:

release-v2.3

  1. 实现 API 的重构, 兼容 layerjs API
  2. 重构了部分代码,把元素定位统一抽取出来,写成 jquery fn,方便在各个组件重复调用
  3. 更改了动画的实现,使用 css3 取代之前的 jquery 实现
  4. 去掉了 window 组件的 border 功能,不再支持设置半透明的边框的功能。
  5. 新增了 laoder 加载器组件。

release-v2.0

  1. 新增了 window 弹框组件
  2. 修复了一些已知的bug

实例代码:

<div class="container">

	<h3>
		<button class="btn btn-primary" onclick="lockScreen();">锁定屏幕</button>
	</h3>

	<h3>JDialog.msg</h3>
	<div>
		<button class="btn btn-success" onclick="tipsuccess();">成功(SUCCESS)</button>
		<button class="btn btn-info" onclick="tipinfo();">一般信息(INFO)</button>
		<button class="btn btn-danger" onclick="tiperror();">错误信息(ERROR)</button>
		<button class="btn btn-warning" onclick="tiploading();">加载等待(LOADING)</button>
	</div>

	<h3>JDialog.open</h3>
	<div>
		<button class="btn btn-primary" onclick="popwin();">弹出对话框(普通)</button>
		<button class="btn btn-info" onclick="popIframe();">弹出对话框(iframe)</button>
	</div>

	<h3>JDialog.alert</h3>
	<div>
		<button class="btn btn-primary" onclick="__alert();">弹出Alert</button>
	</div>

	<h3>JDialog.confirm</h3>
	<div>
		<button class="btn btn-primary" onclick="popConfirm();">弹出确认对话框</button>
	</div>

	<h3>JDialog.loader</h3>
	<div>
		<button class="btn btn-primary" onclick="loader();">加载数据</button>
		<button class="btn btn-primary" onclick="loaderInContainer();">在指定容器中加载</button>
		<div id="loader-container" style="border: 1px solid #00b7ee; width: 600px; height: 200px; margin:10px 0px 0px 100px;"></div>
	</div>

	<h3>项目Git地址</h3>
	<div>
		<a href="http://git.oschina.net/blackfox/JDialog" target="_blank">http://git.oschina.net/blackfox/JDialog</a>
	</div>
</div>

<script language="javascript">

	var __offset = ['cc', 'lt', 'tc', 'rt', 'lc', 'rc', 'lb', 'bc', 'rb'];
	var __effect = ['zoomIn', 'zoomInDown', 'bounceInDown', 'shake', 'flip', 'slideInDown'];
	var __icons = ['warn','ok','edit','bag','ask','minus','italic','unlock','smile','angry','down','remove','msg','mail'];

	//锁定屏幕
	function lockScreen() {
		JDialog.lock({timer : 2000});
	}

	function tipsuccess() {
		JDialog.msg({
			type:'ok',
			content : '恭喜您,注册成功,即将跳转至登录界面',
			lock : false,
			offset : __offset[Math.floor(Math.random() * __offset.length)],
			effect : __effect[Math.floor(Math.random() * __effect.length)]
		});
	}

	function tipinfo() {
		//JDialog.msg("你好,我是默认提示样式");
		JDialog.msg({
			type:'warn',
			content : '一般提示信息',
			offset : [200, 200],
			effect:'bounceInDown'
		});
	}

	function tiperror() {
		JDialog.msg({type:'error', content : '对不起,注册失败,请重试', effect:'shake', offset:'tc'});
	}

	function tiploading() {
		JDialog.msg({type:'loading',  content : '正在努力加载数据,请稍后...', lock : true, effect:'flip'});
	}

	//弹出对话框
	function popwin() {

		JDialog.open({
			title : "普通对话框",
			width : 600,
		    height : 0, //heigth = 0,表示根据内容的高度自适应
			offset : __offset[Math.floor(Math.random() * __offset.length)],
			effect : __effect[Math.floor(Math.random() * __effect.length)],
			content : '<div>这是对话框内容<br/>这是对话框内容<br/>这是对话框内容<br/>这是对话框内容<br/>这是对话框内容<br/>这是对话框内容<br/>这是对话框内容<br/></div>'
		});
	}

	function popIframe() {
		JDialog.open({
			title : "个人博客",
			effect : "zoomIn",
			height : 80,
			maxEnable : true,
			width : 80,
			content :
			'<iframe frameborder="0" height="'+($(window).height() * 0.8)+'" width="100%" src="http://www.r9it.com"></iframe>'
		});
	}

	function __alert() {
		JDialog.alert({
			title : '提示标题',
			content : '你好,您的提现已经成功。',
			icon : __icons[Math.floor(Math.random() * __icons.length)],
		});
	}

	function popConfirm() {

		var win = JDialog.confirm({
			title : "对话框标题",
			width : 600,
			lock : false,
			effect : 1,
//		maxEnable : true,
			content : '<div style="padding-top:13px; font-size:14px;">该操作会删除所有的商品,继续操作吗?强烈建议您将其移动至其他栏目.</div>',
			icon : __icons[Math.floor(Math.random() * __icons.length)],
			offset : __offset[Math.floor(Math.random() * __offset.length)],
			effect : __effect[Math.floor(Math.random() * __effect.length)],

			button : {
				'确认' : function() {
					win.lock();
					setTimeout(function() {
						JDialog.msg({
							type:"ok",
							content:"处理成功.",
							container:"#"+win.getId(),
							timer:1000,
							callback: function() {
								win.close();
							}
						});
					}, 2000)
				},
				'取消' : function() {
					JDialog.msg({type:'error', content : 'fuck ,  你为什么要取消!!', container : ".jdialog_win_box", timer : 2000});
				},

				'不确定' : function() {
					window.alert('shit, 你居然不确定!');
				},
				'很好' : function() {
					window.alert('好什么好啊。SB');
				}
			}
		});
	}

	function loader() {
		JDialog.loader({
			timer : 3000,
			lock : false,
			//offset : __offset[Math.floor(Math.random() * __offset.length)],
			skin : 4
		});
	}

	function loaderInContainer() {
		JDialog.loader({
			timer : 3000,
			lock : false,
			offset : __offset[Math.floor(Math.random() * __offset.length)],
			container : '#loader-container',
			skin : Math.ceil(Math.random()*4)
		});
	}

</script>

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/blackfox/JDialog.git
git@gitee.com:blackfox/JDialog.git
blackfox
JDialog
JDialog
master

Help Search