• 好用的消息对话框-TipsWindown


    TipsWindow的官网地址为:http://leotheme.cn/javascript/jquery-plugins-tipswindow-2-0.html
    这个是一个爱好者维护的!在这里感谢这位爱好者!
    1、JQ弹出层插件(tipsWindow 3.2)
    ​说明:

    一个基于jQuery的弹出层。

    支持拖拽,支持多窗口。内容为文字,ID,图片,SWF,URL,框架;

    2、使用教程

    一个基于jQuery的弹出层插件。支持多窗口,拖动,最大化最小化,固定定位,相对于某个位置定位,具有简化的Tips模式。可以自定义外观等等,具体的看参数和演示(兼容ie内核、webkit内核、ff、opera等主流浏览器)

    导入js文件和css文件


    注意的地方:

    jquery的版本必须和这个相对应,尽量不要使用其他版本的!

    这里我就介绍一个我用的一个功能,提示框中有单选框,当选中一个单选框时,使用alert提示选中的单选框的id值。

    1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    2. <%
    3. String path = request.getContextPath();
    4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    5. %>
    6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    7. <html>
    8. <head>
    9. <base href="<%=basePath%>">
    10. <title>My JSP 'index.jsp' starting page</title>
    11. <link rel="stylesheet" type="text/css" href="<%=basePath%>images/core.css"/>
    12. <link rel="stylesheet" type="text/css" href="<%=basePath%>images/rest.css"/>
    13. <!--
    14. <link rel="stylesheet" type="text/css" href="styles.css">
    15. -->
    16. <script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.min.js"></script>
    17. <script type="text/javascript" src="<%=basePath%>js/XY_Base.js"></script>
    18. <script type="text/javascript">
    19. Util.loadJS("XY_Dialog.js", function() {
    20. $("#btn").click(function() {
    21. Util.Dialog({
    22. boxID: "XYdialog",
    23. title: "对话框",
    24. width: 250,
    25. height: 100,
    26. fixed: true,
    27. content: "text:<input type='radio' name='rad' id='inputTrans'>输入层<br><input type='radio' name='rad' id='outputTrans'>输出层<br><input type='radio' name='rad' id='obserTrans'>隐藏层",
    28. yesBtn: ["是", function(){
    29. var item = $(":radio:checked");
    30. var len=item.length;
    31. if(len>0){
    32. alert("yes--选中的值为:"+$(":radio:checked").attr("id"));
    33. }
    34. return true;
    35. }],
    36. noBtn: ["不是",function(){
    37. return true;
    38. }],
    39. minBtn: true,
    40. maxBtn: true
    41. });
    42. return false;
    43. });
    44. });
    45. </script>
    46. </head>
    47. <body>
    48. <div>
    49. <br/>
    50. <br/>
    51. <br/>
    52. <input type="text" name="ddd">
    53. <button id="btn">点击</button>
    54. </div>
    55. <div id="tag">
    56. </div>
    57. <input type='radio' name='rad' id='inputTrans'>输入层<br>
    58. <input type='radio' name='rad' id='outputTrans'>输出层<br>
    59. <input type='radio' name='rad' id='obserTrans'>隐藏层
    60. </body>
    61. </html>

    完整教程见http://leotheme.cn/wp-content/uploads/dev/module/Dialog/






  • 相关阅读:
    ubuntu16.04自动删除内核
    禅道服务数据的迁移
    k8s常用命令3
    使用logstash迁移es集群数据
    es集群迁移脚本
    helm常用命令1
    【操作】python2升级到python3
    【推荐】构建脚本之shell编写规范
    【推荐】linux使用zip命令
    Sublime使用大全
  • 原文地址:https://www.cnblogs.com/wang3680/p/31123856bd2afefca946e89c31a9e50c.html
Copyright © 2020-2023  润新知