DoraCMS

您现在的位置是:首页>文档内容页

文档详情

移动端组件——弹出框(block)

doramart 2015-10-20 15:12:52 插件225408
基于Jquery响应式弹出框,适合移动端应用。近期会总结一些之前做过的简单的移动端小插件,都比较简单,但是还不够完善,后面会进一步优化。

  基于Jquery响应式弹出框,适合移动端应用。近期会总结一些之前做过的简单的移动端小插件,都比较简单,但是还不够完善,后面会进一步优化。


   需要引用的文件:

<script src="js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="css/dora.css"/>
<script src="js/dora.js"></script>

注意:

1、jquery是基础文件

2、dora.css 是组件相关样式

3、dora.js 是组件所涉及到的js


使用方法:

$('#blockMe').click(function(){
		$.block({
			message : $('#blockContent'),
			overClass : 'block-a'
		});
	});


示例:

<script>
	$(function(){
		$('#blockMe').click(function(){
			$.block({
				message : $('#blockContent'),
				overClass : 'block-a'
			});
		});

		$('#yes').click(function(){
			alert('confirm ok')
		});

		$('#no').click(function(){
			$.unblock();
		})

	})
</script>

<div id="blockContent" class="block-content" style="display: none;">
    <h3>弹窗标题</h3>
    <p>自定义弹窗内容...</p>
    <div class="block-footer">
        <button type="button" class="btn btn-default" id="no">取消</button>
        <button type="button" class="btn btn-primary" id="yes">继续</button>
    </div>
</div>
<button type="button" class="btn btn-default" id="blockMe">打开block窗口</button>


参数配置:

参数
说明必须
message传入弹框对象,必须是jquery对象(通过ID获取)
overClass重写弹框样式







功能方法接口:


方法名
使用示例
说明
unblock$.unblock();关闭弹窗


文章评论

取消回复
登录 参与评论

评论列表(