是时候写个自己的dialog了
组件下载地址:http://pan.baidu.com/s/1pJFVfej
最近做的项目需要用到对话框,但是原生的弹出框你是知道的。如果有时间,还是自己尝试一下,也是可以的。
一个简单图
里面的输入框是定制的,可以自己定制
最干净的对话框应该是这样的
很干净的对话框,如果没有信息的话。
其实对话框基本就三个部分
1.标题信息
2.提示信息
3.确认按钮
那么html组件结构就好写了。
<!--dialog-->
<div id="dialog" class="dialog">
<div class="dia_inner">
<h1 class="dia_title"></h1>
<div class="dia_msg"></div>
<div class="dia_btn"></div>
</div>
</div>
<!--dialog-->
所有对话框都是这样的结构,不需要改动,上面提到的三个信息,在js中添加进去。
先引入组件的css和js文件
<link href="css/dialog.css" rel="stylesheet" /> <script src="js/jquery-1.8.0.min.js"></script>
<script src="js/dialog.js"></script>
需要jquery是因为query比较方便
然后书写自己的js
上一个demo的代码
$(function(){
var dialog1 = new dialog({id:"dialog"});
$("#btn").click(function(){
dialog1.openDialog();
dialog1.clickbtn();
});
});
dialog()中的参数有四个
id:id
title:title
msg:msg
btntext:btntext
其中id是必填的,其他参数有默认值,就是上面第二个图的样子
现在上dialog.js的源码,如果你正好闲着,可以拷贝过去试试
/*
2015年5月22日10:51:10
QQ:503305196
*/ //对话框对象
function dialog(options){
this.init(options);//初始化方法
this.obj = $("#"+options.id);
this.closebtn();
} dialog.prototype = { init:function(options){
var title = options.title||"title";
var msg = options.msg||"msg";
var btntext = options.btntext||"btntext";
$("#"+options.id+" .dia_title").html(title+"<span class='dia_close'>×</span>");
$("#"+options.id+" .dia_btn").html("<button>"+btntext+"</button>");
},
/*打开回话框*/
openDialog: function(){
this.obj.animate({top:100},200);
},
/*关闭对话框*/
closeDialog: function(){
this.obj.animate({top:-300},200);
}, /*右上角关闭按钮*/
closebtn: function(){ var _obj = this.obj;
_obj.find(".dia_close").click(function(){
_obj.animate({top:-300},200);
});
},
/*点击确认按钮*/
clickbtn: function(fn){
var _obj = this.obj;
_obj.find(".dia_btn").click(function(){
_obj.animate({top:-300},200,fn);
}); }, /*自动隐藏对话框*/
autohide: function(dely){//dely延时多长时间自动隐藏 1000
var _obj = this.obj;
setTimeout(function(){
_obj.animate({top:-300},200);
},dely);
},
/*设置对画框的文本提示信息*/
setmsg:function(msg){
this.obj.find(".dia_msg").html(msg);
},
settitle:function(title){
this.obj.find(".dia_title").html(title+"<span class='dia_close'>×</span>");
}
}
希望大家给意见,本人也是js菜鸟。写得不好的地方希望大牛指出来。
第一个图中输入框的写法给予参考
dia1.setmsg("<input type='text' id='tel'/>");
其实就是在setmsg中换成标签就可以了。这样很简单。
是时候写个自己的dialog了的更多相关文章
- Easyui的Dialog的toolbar的自定义添加
最近一直在写快速定制Web表格,基于Easyui,整个过程使用了大量的Easyui的dialog,每个dialog的代码大部分都雷同,感觉代码出现了很大程度的重复,然后想写一个通用的dialog设置函 ...
- Easyui 创建dialog的两种方式,以及他们带来的问题
$('#yy').dialog('open');//打开dialog 这地方要注意,加入你关闭窗口的地方使用$('#yy').dialog('destroy');那么你这个dialog就只能使用一次, ...
- 简化MonoTouch.Dialog的使用
读了一位园友写的使用MonoTouch.Dialog简化iOS界面开发,我来做个补充: 相信使用过DialogViewController(以下简称DVC)的同学都知道它的强大,但是缺点也是明显的,应 ...
- Android开发技巧——使用Dialog实现仿QQ的ActionSheet菜单
最近看到有人用Dialog来实现QQ的仿ActionSheet的自定义菜单,对于自己没实现过的一些控件,看着也想实现一下.于是动手了一下,发现也不难,和大家分享一下. 本文原创,转载请注明出处:htt ...
- android 开发 实现一个activity变成dialog对话框
效果图: 首先说说为什么需要大费周章的去用activity实现一个dialog,明明android系统已经提供了一个更方便的dialog了.原因如下: 1.activity模式的dialog可以实现更 ...
- Android软件开发之盘点全部Dialog对话框大合集(一)
对话框大合集 今天我用自己写的一个Demo和大家具体介绍一个Android中的对话框的使用技巧. 1.确定取消对话框 个button 通过调用setPositiveButton方法和 setNeg ...
- 怎样使Dialog像Activity一样随心所欲的使用?
怎样使Dialog像Activity一样随心所欲的使用? android中的Dialog像是寄生在Activity中.在弹出Dialog时.因受到系统风格定义,导致Dialog怎么也不能如意,那么今天 ...
- 【Bugly干货分享】手把手教你逆向分析 Android 程序
很多人写文章,喜欢把什么行业现状啊,研究现状啊什么的写了一大通,感觉好像在写毕业论文似的,我这不废话,先直接上几个图,感受一下. 第一张图是在把代码注入到地图里面,启动首页的时候弹出个浮窗,下载网络的 ...
- 可拖动的DIV
在做WEB UI设计的时候,拖动某个HTML元素已经成为一种不能忽视的用户界面模式,比较典型的应用例子就是Dialog,一个元素是怎么实现拖动的呢?其实原理非常简单,要想实现首先得了解几个基本知识. ...
随机推荐
- (20)sopel算法
基础知识的理论,主要看这个博客:https://blog.csdn.net/github_38140310/article/details/68959931 然后代码展示: #include &quo ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-tags
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Node.js NPM 包(Package)
章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json 包是打 ...
- TRUNC()函数——oracle
使用trunc()函数获取不同的日期: select trunc(sysdate) from dual; --今天的日期 select trunc(sysdate,'dd') from dual; - ...
- P 1022 D进制的A+B
转跳点 :
- CCCC L3-015. 球队“食物链”(dfs+剪枝)
题意: 某国的足球联赛中有N支参赛球队,编号从1至N.联赛采用主客场双循环赛制,参赛球队两两之间在双方主场各赛一场. 联赛战罢,结果已经尘埃落定.此时,联赛主席突发奇想,希望从中找出一条包含所有球队的 ...
- 下页小希学MVC5+EF6.2 学习记录三
目的:1 学习mvc+ef 2 写下日记也是对自己的督促 期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型 ...
- 五、CI框架之通过带路径的view视图路径访问
一.如果需要现在的某个目录的View界面,需要在controller中写入文件路径 二.访问http://127.0.0.1/CodeIgniter-3.1.10/index.php/显示如下: 不忘 ...
- mini2440 裸机程序下载到 sdram 不能运行。
今天在 写了个简单的 led 的汇编程序,下载到 mini2440 的 nand flash 里面可以正常运行,但是下载到 sdram 里面不能运行. 后来发现有几个注意点, 要在 sdram 中运行 ...
- POJ 1840:Eqs 哈希求解五元方程
Eqs Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 14169 Accepted: 6972 Description ...