zoukankan      html  css  js  c++  java
  • jquery重写一个对话框

    (原文来自博客园 wuchao.cnblogs.com)

    写一个简单的基于jquery的对话框

    css:

     1 #dialog
     2         {
     3             border:solid 1px #CCC;
     4             width:300px;
     5             height:150px;
     6             background-color:#e5e5e5;
     7             position:fixed;
     8         }
     9         .title
    10         {
    11             width:100%;
    12             height:30px;
    13             background:#dadada;
    14             color:#a68687;
    15             font-size:22px;
    16         }
    17         #TContent
    18         {
    19             line-height:35px;
    20             margin-left:5px;
    21         }
    22         .content
    23         {
    24             height:80px;
    25             width:100%;
    26             text-align:center;
    27         }
    28         #CContent
    29         {
    30             line-height:25px;
    31             font-size:16px;
    32         }
    33         .buttons
    34         {
    35             width:100%;
    36             text-align:center;
    37         }
    38         #TTButton1,#TTButton2
    39         {
    40             cursor:pointer;
    41             width:60px;
    42             height:30px;
    43             margin:0 5px 0 5px;
    44             border:0 none;
    45             color:White;
    46         }

    js:

     1 $.extend({
     2             confirms: function (options) {
     3                 var defaults = {
     4                     title: "Delete Confirmation",
     5                     message: "You are about to delete this item. <br />It cannot be restored at a later time! Continue?",
     6                     buttons: {
     7                         "Yes": { 'class': 'blue', 'action': function () { alert("你点击了Yes"); } },
     8                         "No": { 'class': 'gray', 'action': function () { $("#dialog").remove(); } }
     9                     }
    10                 };
    11                 var opts = $.extend(defaults, options);
    12 
    13                 $("<div id='dialog'><div class='title'><span id='TContent'>" + defaults.title +
    14                  "</span></div><div class='content'><span id=CContent>" + defaults.message +
    15                  "</span></div><div class='buttons'><input id='TTButton1' style='background-color:" +
    16                  defaults.buttons['Yes']['class'] + "' type='button' value='Yes' /><input id='TTButton2' type='button' style='background-color:" +
    17                  defaults.buttons['No']['class'] + "' value='No' /></div></div>").appendTo("body");
    18 
    19                 $("#TTButton1").bind("click", defaults.buttons['Yes']['action']);
    20                 $("#TTButton2").bind("click", defaults.buttons['No']['action']);
    21 
    22                 $("#dialog").css("top", ($(document).height() - $("#dialog").height()) / 2 - 100);
    23                 $("#dialog").css("left", ($(document).width() - $("#dialog").width()) / 2);
    24             }
    25         });
    26         function test() {
    27             $.confirms({
    28                 title: "测试",
    29                 message: "这是一个测试对话框!",
    30                 buttons:{
    31                             "Yes":{'class':'red','action':function () { alert("你对cx说:真2!"); }},
    32                             "No": { 'class': 'gray', 'action': function () { $("#dialog").remove(); } }
    33                         }
    34             });
    35         }

    html测试代码:

    <input id="Button1" type="button" value="button" onclick="test();" />

    简简单单,完成咯

    遇到的问题:$("123").appendTo("p");无效 $("<b>123</b>").appendTo("p");就可以 不知什么原因

  • 相关阅读:
    Spring Data JPA 的作用.
    JavaEE 规范和 SSH 三大框架的关系
    一些疑惑
    Linux学习总结(21)——CentOS7环境下FTP服务器的安装和配置
    Docker学习总结(18)——阿里超大规模Docker化之路
    Maven学习总结(32)——Maven项目部署到Tomcat8中
    Maven学习总结(31)——Maven坐标详解
    猎豹CEO傅盛:与周鸿祎、雷军、马化腾、马云的的相爱相杀
    Java Web学习总结(32)——Java程序员最亲睐的Web框架
    VMWare学习总结(1)——Centos7安装完毕后无法联网的解决方法
  • 原文地址:https://www.cnblogs.com/wuchao/p/3274346.html
Copyright © 2011-2022 走看看