移动端组件——弹出框(block)
基于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(); | 关闭弹窗 |
很赞哦! ( 0
)
相关文章
- nodeJs基础教程系列(7)——generator
- [转]让你的 Node.js 应用跑得更快的 10 个技巧
- Node.js API实例——Node.js 控制台
- Node.js 入门
- nodeJs基础教程系列(3)——建立githubs项目
- nodeJs基础教程系列(1)——安装Node.js
- nodeJs基础教程系列(6)——Promise 模式的Q库
- Atom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器
- bootstrap 3.3 模态框垂直居中问题
- js字符串操作
- js鼠标滑轮滚动事件绑定(兼容主流浏览器)
- 视频:Windows 安装FTP服务 (基于Windows2008 IIS配置FTP站点 )