HTML \ jQuery ui - 单击按钮显示多个对话框

时间:2014-05-06 02:29:55

标签: javascript jquery html html5 jquery-ui

我有一个问题。

我正在删除一些代码来简化页面,但我必须删除一些重要的行,代码必须打开三个对话框(dialogadddialogerrdialogfind)。 但我无法找到错误的位置。请帮忙。 谢谢 安德烈

通过点击4个不同的按钮

,打开4个不同形式的工作和更正代码
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../css/styleprod.css" type="text/css" media="screen">
    <link rel="stylesheet" href="../images/custom-theme/jquery.ui.all.css" type="text/css" media="screen">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="../scripts/jquery-1.8.3.js"></script>
    <script src="../scripts/jquery.bgiframe-2.1.2.js"></script>
    <script src="../scripts/jquery-ui-1.9.2.custom.js"></script>
    <script src="../scripts/ui/jquery.ui.core.js"></script>
    <script src="../scripts/ui/jquery.ui.widget.js"></script>
    <script src="../scripts/ui/jquery.ui.mouse.js"></script>
    <script src="../scripts/ui/jquery.ui.draggable.js"></script>
    <script src="../scripts/ui/jquery.ui.position.js"></script>
    <script src="../scripts/ui/jquery.ui.resizable.js"></script>
    <script src="../scripts/ui/jquery.ui.dialog.js"></script>
    <script src="../scripts/ui/jquery.ui.effect.js"></script>
    <script src="../scripts/ui/jquery.ui.effect-blind.js"></script>
    <script type="text/javascript" src="../scripts/vscontext.jquery.js"></script>
    <script type="text/javascript" src="../scripts/menu_action.js"></script>
    <div id="dialogadd" title="Aggiungi" width="420" height="470">
        <iframe src="f/addform.php" width="400" height="430" frameborder="none" scrolling="none"></iframe>
    </div>
    <div id="dialogspecs" title="Specifiche" width="420" height="470">
        <iframe src="f/specs.html" width="400" height="430" frameborder="none" scrolling="none"></iframe>
    </div>
    <div id="dialogfind" title="Cerca">
        <input id="search" autocomplete placeholder="Testo da Cercare"><button action="search" class="ui-icon ui-icon-search" id="findbutt"/>
    </div>
    <div id="dialogerr" title="Errore" width="320" height="270">
        <img src="../images/error.png" id="errorimg"/><h6 id="error"> Occorre selezionare prima il prodotto.</h6>
    </div>
    <script type="text/javascript">
        $.fx.speeds._default = 500;
        $(function() {
            $( "#dialogadd" ).dialog({
                autoOpen: false,
                show: "blind",
                hide: "blind",
                height: 422,
                width: 402,
                modal: true,
                resizable: false,
            });
            $( "#dialogspecs" ).dialog({
                autoOpen: false,
                show: "blind",
                hide: "blind",
                height: 450,
                width: 400,
                modal: true,
                resizable: false,
            });
            $( "#dialogerr" ).dialog({
                autoOpen: false,
                show: "blind",
                hide: "blind",
                height: 100,
                width: 300,
                modal:true,
                resizable: false,
            });
            $( "#dialogfind" ).dialog({
                autoOpen: false,
                show: "blind",
                hide: "blind",
                height: 80,
                width: 250,
                modal: true,
                resizable: false,
            });

            $( "#openeradd" ).click(function() {
                $( "#dialogadd" ).dialog( "open" );
                return false;
            });
            $( "#openerfind" ).click(function() {
                $( "#dialogfind" ).dialog( "open" );
                return false;
            });
            $( "#openerspecs" ).click(function() {
                $( "#dialogspecs" ).dialog( "open" );
                return false;
            });
            $( "#openererr" ).click(function() {
                $( "#dialogerr" ).dialog( "open" );
                return false;
            });
            $( "#openererr2" ).click(function() {
                $( "#dialogerr" ).dialog( "open" );
                return false;
            });

        });

    </script>
    <style type="text/css" >
        @import "../css/vscontext.css";
    </style>
    <style type="text/css" >
        body{
            padding-left: 15px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 13px;
        }
        #context{
            width: 100%;
            height: 100%;
            border:0px solid #ECECEC;
            background: transparent;
        }
    </style>
     <style type="text/css">
    #dialogadd  {overflow:hidden;}
    #dialogerr  {overflow:hidden;}
    #dialogspecs {overflow:hidden;}
    #dialogfind  {overflow:hidden;}
    .ui-autocomplete-category {font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5;}
    #error {vertical-align:center;margin-top:14px;left:35px;position: absolute;}
    #errorimg {position:absolute;top:2px;left:2px;}
    #findbutt {width: 20px; height: 20px; position:absolute; right: 8px; top: 6px;}
    </style>

<body>
         <div class="vs-context-menu">
    <ul>
        <li class="cut seprator"><a href="javascript:cut();" id="menu_1">Taglia</a></li>
        <li class="copy"><a href="javascript:copy();" id="menu_2">Copia</a></li>
        <li class="paste seprator"><a href="javascript:paste();" id="menu_3">Incolla</a></li>
        <li class="edit"><a href="javascript:edit();" id="menu_4">Modifica</a></li>
        <li class="delete"><a href="javascript:del();" id="menu_5">Elimina</a></li>
    </ul>
</div>
<?php include '../languages/common.php'; ?>
            <center>
        <div id="wrapper">                                                      
            <div width="100%">
                <table width="80%" align="center" cell-spacing="2px">
                    <tr align="center" width="80%">
                        <td width="14%" nowrap="nowrap" class="buttonlink">
                            <a href="#" id="openeradd"><?php echo $lang['LISTS_ADD']; ?></a>
                        </td>
                        <td width="14%" nowrap="nowrap" class="buttonlink">
                            <a href="#" id="openererr"><?php echo $lang['LISTS_MOD']; ?></a>
                        </td>
                        <td width="14%" nowrap="nowrap" class="buttonlink">
                            <a href="#" id="openererr2"><?php echo $lang['LISTS_DEL']; ?></a>
                        </td>
                        <td width="14%" nowrap="nowrap" class="buttonlink">
                            <a href="#" id="openerspecs"><?php echo $lang['LISTS_SPEC']; ?></a>
                        </td>
                        <td  width="14%" nowrap="nowrap" class="buttonlink">
                            <a href="#" id="openerfind"><?php echo $lang['LISTS_FIND']; ?></a>
                        </td>
                    </tr>
                </table>           
            </div>
            <br>

0 个答案:

没有答案