组件下载地址: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. [题解] LuoguP4827 [国家集训队] Crash 的文明世界

    传送门 这个题......我谔谔 首先可以考虑换根\(dp\),但到后来发现二项式定理展开过后需要维护\(k\)个值,同时每个值也要\(O(k)\)的时间按二项式定理算 当然fft优化过后就是k lo ...

  2. 实验吧-密码学-try them all(加salt的密码)、robomunication(摩斯电码)、The Flash-14(闪电侠14集)

    try them all(加salt的密码) 首先,要了解什么事加salt的密码. 加salt是一种密码安全保护措施,就是你输入密码,系统随机生成一个salt值,然后对密码+salt进行哈希散列得到加 ...

  3. ROS2学习日志:TurtleSim测试日志(基于ROS2 Eloquent Elusor)

    TurtleSim测试日志(基于ROS2 Eloquent Elusor) 1.ros2 run 1.1 ros2 run turtlesim turtlesim_node --ros-args -- ...

  4. HDFS 中文件操作的错误集锦

    问题1  Java ApI执行追加写入时:无法写入 问题描述: ①当前数据节点无法写入,②追加文件需要再次请求. 问题2  命令行执行追加写入时:无法写入 问题描述: 当前数据节点无法写入 问题3   ...

  5. 51nod 1006:最长公共子序列Lcs

    1006 最长公共子序列Lcs 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). ...

  6. Dubbo与SpringCloud

    dubbo和springcloud都是微服务框架,各自有各自的注册中心. dubbo监控中心:zookeeper,redis 提供高性能和透明化的RPC远程调用方案,SOA服务治理方案. 核心部分: ...

  7. MySLQ排序后标记排行

    查询排行及所有(表名.*) 1. ; AS top, customer.* FROM customer 2. AS top, customer.* ) r, customer ORDER BY cus ...

  8. 解决fixed布局里内容不滚动问题

    //注意给父级加上 (1)横向滚动 left:0; right:0; 然后想要横向滚动的话 overflow-x:scroll; overflow-y:hidden; (2)竖直方向滚动top:0;b ...

  9. swiper用axios异步请求后 循环失效

    解决方案 使用ajax动态获取数据  当数据还没有收到的时候,swiper组件收到的是跟组件data传过来的空数组,会造成渲染问题 这个时候可以给swiper组件 设置一个  v-if='list.l ...

  10. Linux-课后练习(第二章命令)20200217-1