组件下载地址: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了的更多相关文章

  1. Easyui的Dialog的toolbar的自定义添加

    最近一直在写快速定制Web表格,基于Easyui,整个过程使用了大量的Easyui的dialog,每个dialog的代码大部分都雷同,感觉代码出现了很大程度的重复,然后想写一个通用的dialog设置函 ...

  2. Easyui 创建dialog的两种方式,以及他们带来的问题

    $('#yy').dialog('open');//打开dialog 这地方要注意,加入你关闭窗口的地方使用$('#yy').dialog('destroy');那么你这个dialog就只能使用一次, ...

  3. 简化MonoTouch.Dialog的使用

    读了一位园友写的使用MonoTouch.Dialog简化iOS界面开发,我来做个补充: 相信使用过DialogViewController(以下简称DVC)的同学都知道它的强大,但是缺点也是明显的,应 ...

  4. Android开发技巧——使用Dialog实现仿QQ的ActionSheet菜单

    最近看到有人用Dialog来实现QQ的仿ActionSheet的自定义菜单,对于自己没实现过的一些控件,看着也想实现一下.于是动手了一下,发现也不难,和大家分享一下. 本文原创,转载请注明出处:htt ...

  5. android 开发 实现一个activity变成dialog对话框

    效果图: 首先说说为什么需要大费周章的去用activity实现一个dialog,明明android系统已经提供了一个更方便的dialog了.原因如下: 1.activity模式的dialog可以实现更 ...

  6. Android软件开发之盘点全部Dialog对话框大合集(一)

    对话框大合集 今天我用自己写的一个Demo和大家具体介绍一个Android中的对话框的使用技巧. 1.确定取消对话框 个button   通过调用setPositiveButton方法和 setNeg ...

  7. 怎样使Dialog像Activity一样随心所欲的使用?

    怎样使Dialog像Activity一样随心所欲的使用? android中的Dialog像是寄生在Activity中.在弹出Dialog时.因受到系统风格定义,导致Dialog怎么也不能如意,那么今天 ...

  8. 【Bugly干货分享】手把手教你逆向分析 Android 程序

    很多人写文章,喜欢把什么行业现状啊,研究现状啊什么的写了一大通,感觉好像在写毕业论文似的,我这不废话,先直接上几个图,感受一下. 第一张图是在把代码注入到地图里面,启动首页的时候弹出个浮窗,下载网络的 ...

  9. 可拖动的DIV

    在做WEB UI设计的时候,拖动某个HTML元素已经成为一种不能忽视的用户界面模式,比较典型的应用例子就是Dialog,一个元素是怎么实现拖动的呢?其实原理非常简单,要想实现首先得了解几个基本知识. ...

随机推荐

  1. (20)sopel算法

    基础知识的理论,主要看这个博客:https://blog.csdn.net/github_38140310/article/details/68959931 然后代码展示: #include &quo ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-tags

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. Node.js NPM 包(Package)

    章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json 包是打 ...

  4. TRUNC()函数——oracle

    使用trunc()函数获取不同的日期: select trunc(sysdate) from dual; --今天的日期 select trunc(sysdate,'dd') from dual; - ...

  5. P 1022 D进制的A+B

    转跳点 :

  6. CCCC L3-015. 球队“食物链”(dfs+剪枝)

    题意: 某国的足球联赛中有N支参赛球队,编号从1至N.联赛采用主客场双循环赛制,参赛球队两两之间在双方主场各赛一场. 联赛战罢,结果已经尘埃落定.此时,联赛主席突发奇想,希望从中找出一条包含所有球队的 ...

  7. 下页小希学MVC5+EF6.2 学习记录三

      目的:1 学习mvc+ef 2  写下日记也是对自己的督促 期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型 ...

  8. 五、CI框架之通过带路径的view视图路径访问

    一.如果需要现在的某个目录的View界面,需要在controller中写入文件路径 二.访问http://127.0.0.1/CodeIgniter-3.1.10/index.php/显示如下: 不忘 ...

  9. mini2440 裸机程序下载到 sdram 不能运行。

    今天在 写了个简单的 led 的汇编程序,下载到 mini2440 的 nand flash 里面可以正常运行,但是下载到 sdram 里面不能运行. 后来发现有几个注意点, 要在 sdram 中运行 ...

  10. POJ 1840:Eqs 哈希求解五元方程

    Eqs Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 14169   Accepted: 6972 Description ...