SA-MP Forums Archive
[Tool/Web/Other] Dialog Creator - HTML + JAVASCRIPT - Printable Version

+- SA-MP Forums Archive (https://sampforum.blast.hk)
+-- Forum: Non-English (https://sampforum.blast.hk/forumdisplay.php?fid=9)
+--- Forum: Languages (https://sampforum.blast.hk/forumdisplay.php?fid=33)
+---- Forum: Português/Portuguese (https://sampforum.blast.hk/forumdisplay.php?fid=34)
+----- Forum: Lançamentos/Releases (https://sampforum.blast.hk/forumdisplay.php?fid=56)
+----- Thread: [Tool/Web/Other] Dialog Creator - HTML + JAVASCRIPT (/showthread.php?tid=525593)


Dialog Creator - HTML + JAVASCRIPT - kixtz - 12.07.2014

Bom, antes de mais nada queria dizer que comecei me interessar por pawn faz umas duas semanas, entгo ainda falta aprender bastante coisa. Jб tinha visto no fуrum algumas ferramentas para criar diбlogo mas resolvi fazer a minha com html e javascript. Caso encontrem algum bug me avisem.

Como funciona:
Copie o cуdigo fonte e salve no formato html e abra com algum navegador que suporte javascript.

Testado:
Chrome 35.0.1916.153
Firefox 30.0
Internet Explorer 8

Exemplo:


Fonte - Pastebin
Fonte:
HTML Code:
<html>
    <head>
	<meta charset="ISO-8859-1">
        <title>Dialog Creator - KixTz.</title>
        <style>
            #preview{
                background-image: url("https://sampwiki.blast.hk/wroot/images2/a/a1/Dialog_style_msgbox.png");
                width: 367px;
                height: 113px;
            }
        </style>
        <script type="text/javascript">
            /**
             * Author: KixTz.
             * Release date: 12/07/2014
             **/
            var style = {
                DIALOG_STYLE_MSGBOX: 1,
                DIALOG_STYLE_INPUT: 2,
                DIALOG_STYLE_LIST: 3,
                DIALOG_STYLE_PASSWORD: 4
            };
            
            /**
             * Controla a nova linha a ser inserida dos itens do DIALOG_STYLE_LIST.
             * A primeira linha da tabela possui o нndice zero e nгo um.
             * @type int
             */
            var iPosRow;

            /**
             * Gera o cуdigo conforme o estilo selecionado.
             */
            function generateCode() {
                var sPlayerId = document.getElementById("p_id").value;
                var sDialogId = document.getElementById("d_id").value;
                var sTitle    = document.getElementById("title").value;
                var sText     = document.getElementById("main_text").value;
                var sBtn1     = document.getElementById("text_btn_1").value;
                var sBtn2     = document.getElementById("text_btn_2").value;

                var sStyle;
                switch (parseInt(document.getElementById("style").value)) {
                    case style.DIALOG_STYLE_MSGBOX:
                        sStyle = "DIALOG_STYLE_MSGBOX";
                        sOnResponse = getResponseMsgBox(sDialogId);
                        break;
                    case style.DIALOG_STYLE_INPUT:
                        sStyle = "DIALOG_STYLE_INPUT";
                        sOnResponse = getResponseInput(sDialogId);
                        break;
                    case style.DIALOG_STYLE_LIST:
                        sStyle = "DIALOG_STYLE_LIST";

                        if (iPosRow >= 7) {
                            sText = document.getElementById("item0").value;
                            if (iPosRow > 7) {
                                for (var i = 1; i < (iPosRow - 6); i++) {
                                    sText += "\\n" + document.getElementById("item" + i).value;
                                }
                            }
                        }
                        sOnResponse = getResponseList(sDialogId);
                        break;
                    case style.DIALOG_STYLE_PASSWORD:
                        sStyle = "DIALOG_STYLE_PASSWORD";
                        var sDialog = "ShowPlayerDialog(" + sPlayerId + ", " + sDialogId + ", " + sStyle + ", \"" + sTitle + "\", \"" + sText + "\", \"" + sBtn1 + "\", \"" + sBtn2 + "\");";
                        sOnResponse = getResponsePassword(sDialogId, sDialog);
                        break;
                }
                var sFinalCode = "ShowPlayerDialog(" + sPlayerId + ", " + sDialogId + ", " + sStyle + ", \"" + sTitle + "\", \"" + sText + "\", \"" + sBtn1 + "\", \"" + sBtn2 + "\");<br><br>" + sOnResponse;
                var oDivFinalCode = document.getElementById("final_code");
                oDivFinalCode.style.display = "block";
                oDivFinalCode.innerHTML = sFinalCode;
            }

            /**
             * Altera a prй-visualizaзгo e alguns campos conforme estilo selecionado.
             * @param {string} sType - Tipo do estilo
             */
            function onChangeStyle(sType) {
                //Todos os dados de entrada sгo string, portanto devemos converter
                var iType = parseInt(sType);
                var oElMainText = document.getElementById("table_row_main_text");
                switch (iType) {
                    case style.DIALOG_STYLE_MSGBOX:
                        changePreview("https://sampwiki.blast.hk/wroot/images2/a/a1/Dialog_style_msgbox.png", "367px", "113px");
                        oElMainText.style.display = "table-row";
                        deleteOptions();
                        break;
                    case style.DIALOG_STYLE_INPUT:
                        changePreview("https://sampwiki.blast.hk/wroot/images2/d/d5/Dialog_style_input.png", "487px", "146px");
                        oElMainText.style.display = "table-row";
                        deleteOptions();
                        break;
                    case style.DIALOG_STYLE_LIST:
                        changePreview("https://sampwiki.blast.hk/wroot/images2/b/b1/Dialog_style_list.png", "339px", "294px");
                        oElMainText.style.display = "none";
                        firstItem();
                        addRowBtnAdd();
                        break;
                    case style.DIALOG_STYLE_PASSWORD:
                        changePreview("https://sampwiki.blast.hk/wroot/images2/f/f8/Dialog_style_password.png", "658px", "146px");
                        oElMainText.style.display = "table-row";
                        deleteOptions();
                        break;
                }
            }
            
            /**
             * Altera a prй-visualizaзгo conforme parвmetros.
             * @param {string} sUrl    - Caminho que se encontra imagem de fundo
             * @param {string} sWidth  - Largura da imagem
             * @param {string} sHeight - Altura da imagem
             */
            function changePreview(sUrl, sWidth, sHeight) {
                document.getElementById("preview").style.backgroundImage = "url(" + sUrl + ")";
                document.getElementById("preview").style.width = sWidth;
                document.getElementById("preview").style.height = sHeight;
            }

            /**
             * Cria uma nova linha de item quando o estilo for list e habilita o botгo "Delete item" do primeiro item quando esta funзгo for disparada pelo botгo "Add item".
             */
            function createItem() {
                //Й criada essa variбvel novamente para passar no parвmetro do mйtodo deleteOption a linha atual e nгo a referкncia global
                var iPosCurrentRow = iPosRow;
                //Quando inserimos uma nova linha na tabela jб й retornado um objeto html para a variбvel
                var oElRow = document.getElementById("tableEl").insertRow(iPosCurrentRow);
                //Recebe a primeira coluna da linha criada anteriormente
                var oElCelLabel = oElRow.insertCell(0);
                oElCelLabel.style.textAlign = "right";
                var oElSpan = document.createElement("span");
                oElSpan.innerHTML = "Item " + (iPosCurrentRow - 6) + ": ";
                oElCelLabel.appendChild(oElSpan);
                //Receba a segunda coluna da linha criada anteriormente
                var oElCelInput = oElRow.insertCell(1);
                //Vamos criar o input do item
                var oElInput = document.createElement("input");
                oElInput.id = "item" + (iPosCurrentRow - 6);
                oElInput.setAttribute("type", "text");
                //Vamos adicionar um filho(input criado) na coluna
                oElCelInput.appendChild(oElInput);
                oElInput.focus();

                //Vamos criar um botгo para deletar a linha
                var oBtnDelItem = document.createElement("input");
                oBtnDelItem.setAttribute("type", "button");
                oBtnDelItem.id = "btn_del" + iPosCurrentRow;
                //Propriedade criada, nгo existe no html
                oBtnDelItem.row = iPosCurrentRow;
                oBtnDelItem.value = "Deletar item";
                oBtnDelItem.onclick = function() {
                    deleteOption(oBtnDelItem.row);
                };
                oElCelInput.appendChild(oBtnDelItem);

                iPosRow++;
                toggleFirstBtnDel();
            }

            /**
             * Verifica se tem dois itens ou mais, se tiver habilita a opзгo de exclusгo do item da primeira linha, caso contrбrio oculta.
             */
            function toggleFirstBtnDel() {
                if (iPosRow > 7) {
                    document.getElementById("btn_del6").style.display = "inline-block";
                } else {
                    document.getElementById("btn_del6").style.display = "none";
                }
            }

            /**
             * Cria a primeira opзгo dos itens, ocultando o botгo de exclusгo da primeira linha.
             */
            function firstItem() {
                iPosRow = 6;
                createItem();
                document.getElementById("btn_del6").style.display = "none";
            }

            /**
             * Deleta todos os itens, incluindo os botхes de exclusгo e o de "Add item".
             * Й usado quando й trocado o estilo do diбlogo.
             */
            function deleteOptions() {
                //Validaзгo feita para deletar somente as linhas criadas dos itens do DIALOG_STYLE_LIST
                if (iPosRow > 6) {
                    //Vamos incrementar para remover a linha dos botхes
                    iPosRow++;
                    for (var i = iPosRow; i > 6; i--) {
                        iPosRow--;
                        document.getElementById("tableEl").deleteRow(i - 1);
                    }
                }
            }
            
            /**
             * Deleta a linha que disparou a funзгo, atualiza informaзхes dos itens a baixo dela e caso sу existir um item esconde o botгo "Delete item" da primeira linha.
             * @param {int} iRowDel - Nъmero da linha que disparou a funзгo
             */
            function deleteOption(iRowDel) {
                if (iPosRow > 7) {
                    document.getElementById("tableEl").deleteRow(iRowDel);
                    iPosRow--;
                    updateItems(iRowDel);
                    toggleFirstBtnDel();
                }
            }
            
            /**
             * Adiciona a linha com o botгo "add item" quando o estilo for list.
             */
            function addRowBtnAdd() {
                var oBtnAddItem = document.createElement("input");
                oBtnAddItem.setAttribute("type", "button");
                oBtnAddItem.value = "Add item";
                oBtnAddItem.onclick = function() {
                    createItem();
                };

                var oElRowBtnsItems = document.getElementById("tableEl").insertRow(iPosRow);
				
                var oElCelBtns = oElRowBtnsItems.insertCell(0);
                oElCelBtns.colSpan = 2
				oElCelBtns.setAttribute("align", "center");
                oElCelBtns.appendChild(oBtnAddItem);
            }
            
            /**
             * Gera o cуdigo do response do message box.
             * @param {type} sDialogId - ID para diбlogo
             * @returns {string}
             */
            function getResponseMsgBox(sDialogId) {
                var sCode =
                        "public OnDialogResponse(playerid, dialogid, response, listitem, inputtext[]){<br>" +
                        "&nbsp;&nbsp;&nbsp;if(response){<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(dialogid){<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case "+sDialogId+":<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SendClientMessage(playerid, 0xFFFFFF, \"Obrigado por concordar com as regras do servidor!\");<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;}else{<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SendClientMessage(playerid, 0xFFFFFF, \"Vocк deve concordar com as regras do servidor para jogar aqui!\");<br>" +
                        "&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;return 0;<br>" +
                        "}";
                return sCode;
            }
            
            /**
             * Gera o cуdigo do response do input.
             * @param {type} sDialogId - ID para diбlogo
             * @returns {string}
             */
            function getResponseInput(sDialogId) {
                var sCode =
                        "public OnDialogResponse(playerid, dialogid, response, listitem, inputtext[]){<br>" +
                        "&nbsp;&nbsp;&nbsp;if(response){<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(dialogid){<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case "+sDialogId+":<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(algumaFuncao(playerid, inputtext)){<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{<br><br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;}else{<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SendClientMessage(playerid, 0xFFFFFF, \"Vocк deve concordar com as regras do servidor para jogar aqui!\");<br>" +
                        "&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;return 0;<br>" +
                        "}";
                return sCode;
            }
            
            /**
             * Gera o cуdigo do response do list.
             * @param {type} sDialogId - ID para diбlogo
             * @returns {string}
             */
            function getResponseList(sDialogId) {
                var sCode =
                        "public OnDialogResponse(playerid, dialogid, response, listitem, inputtext[]){<br>" +
                        "&nbsp;&nbsp;&nbsp;if(response){<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(dialogid){<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case "+sDialogId+":<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(listitem){<br>";
                for (var i = 0; i < (iPosRow - 6); i++) {
                    sCode += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case " + i + ":<br>";
                    sCode += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>";
                    sCode += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Alguma coisa para o item "+i+"<br>";
                    sCode += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1;<br>";
                    sCode += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>";
                }
                sCode += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                         "&nbsp;&nbsp;&nbsp;}else{<br>" +
                         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SendClientMessage(playerid, 0xFFFFFF, \"Vocк deve concordar com as regras do servidor para jogar aqui!\");<br>" +
                         "&nbsp;&nbsp;&nbsp;}<br>" +
                         "&nbsp;&nbsp;&nbsp;return 0;<br>" +
                         "}";
                return sCode;
            }
            
            /**
             * Gera o cуdigo do response do password.
             * @param {string} sDialogId - ID para diбlogo
             * @param {string} sDialog   - Funзгo usada no ShowPlayerDialog do tipo password
             * @returns {string}
             */
            function getResponsePassword(sDialogId, sDialog) {
                var sCode =
                        "public OnDialogResponse(playerid, dialogid, response, listitem, inputtext[]){<br>" +
                        "&nbsp;&nbsp;&nbsp;if(response){<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(dialogid){<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case "+sDialogId+":<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(CheckPassword(playerid, inputtext)){<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SendClientMessage(playerid, 0xFFFFFF, \"Vocк estб logado!\"); return 1;<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SendClientMessage(playerid, 0xFFFFFF, \"Falha no login.\");<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Mostra o diбlogo do login novamente.<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+sDialog+"<br>"+
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>"+
                         "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;}else{<br>" +
                        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SendClientMessage(playerid, 0xFFFFFF, \"Vocк deve concordar com as regras do servidor para jogar aqui!\");<br>" +
                        "&nbsp;&nbsp;&nbsp;}<br>" +
                        "&nbsp;&nbsp;&nbsp;return 0;<br>" +
                        "}";
                return sCode;
            }
            
            /**
             * Atualiza os itens a baixo da linha passada como parвmetro.
             * @param {int} iStartFrom - Nъmero da linha
             */
            function updateItems(iStartFrom) {
                for (var i = iStartFrom; i < iPosRow; i++) {
                    //Atualiza os labels dos itens
                    document.getElementsByTagName("span")[i - 6].innerHTML = "Item " + (i - 6) + ": ";
                    //Atualiza os id dos botхes de exclusгo dos itens
                    document.getElementById("btn_del" + (i + 1)).id = "btn_del" + i;
                    //Atualiza a linha que estб o botгo
                    document.getElementById("btn_del" + i).row = i;
                    //Atualiza os id dos input dos itens
                    document.getElementById("item" + (i - 5)).id = "item" + (i - 6);
                }
            }
        </script>
    </head>
    <body>
        <div style="text-align:center;font-size:25px;font-weight:bold;border-top:2px solid black;border-bottom:2px solid black;padding:10px;">
            Criador de Diбlogos
        </div>
        <hr>
        <div>Referкncias: <a href="https://sampwiki.blast.hk/wiki/Dialog_Styles">Dialog Styles</a> - <a href="https://sampwiki.blast.hk/wiki/ShowPlayerDialog">ShowPlayerDialog</a> - <a href="https://sampwiki.blast.hk/wiki/OnDialogResponse">OnDialogResponse</a></div>
        <hr>
        <table id="tableEl">
            <tr>
                <td style="text-align:right;">
					O id do jogador para mostrar o diбlogo:
                </td>
                <td>
                    <input type="text" id="p_id" value="playerid">
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
					Um id para atribuir ao diбlogo: 
                </td>
                <td>
                    <input type="text" id="d_id">
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Estilo do diбlogo: 
                </td>
                <td>
                    <select id="style" on‌change="onChangeStyle(this.value)">
                        <option value="1">Message Box</option>
                        <option value="2">Input</option>
                        <option value="3">List</option>
                        <option value="4">Password</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Prй-visualizaзгo: 
                </td>
                <td>
                    <div id="preview"></div>
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Tнtulo: 
                </td>
                <td>
                    <input type="text" id="title" maxlength="64">
                </td>
            </tr>
            <tr id="table_row_main_text">
                <td style="text-align:right;">
                    Texto principal: 
                </td>
                <td>
                    <textarea id="main_text" cols="50" rows="10"></textarea><br>Use \n para comeзar uma nova linha ou \t para tabular.
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Botгo esquerdo: 
                </td>
                <td>
                    <input type="text" id="text_btn_1">
                </td>
            </tr>
            <tr>
                <td style="text-align:right;">
                    Botгo direito: 
                </td>
                <td>
                    <input type="text" id="text_btn_2">
					Deixe em branco para esconder o botгo.
                </td>
            </tr>
            <tr>
                <td style="text-align:center;border:1px solid black;" colspan="2">
                    <input type="button" id="generate" value="Gerar cуdigo !" on‌click="generateCode()">
                </td>
            </tr>
        </table>
        <div id="final_code" style="display:none;"></div>
    </body>
</html>


Re: Dialog Creator - HTML + JAVASCRIPT - MultiKill - 12.07.2014

Gostei do sistema de criar dialogo. Й simples mais utнl, para quem nгo sabe criar. REP+

Re: Dialog Creator - HTML + JAVASCRIPT - iFoox - 12.07.2014

Testado й aprovado +rep

Re: Dialog Creator - HTML + JAVASCRIPT - Faix - 12.07.2014

+REP, show de bola.

Re: Dialog Creator - HTML + JAVASCRIPT - WLSF - 12.07.2014

Legalzinho, nгo entendi a escolha pelo javascript.

Vocк pode estudar fazer sistemas mais complexos, й bem interessante, jб que vocк estб se interessando por isso agora.

+6 rep

Re: Dialog Creator - HTML + JAVASCRIPT - PT - 12.07.2014

Bem interessante isso ai.

Parabйns.

Re: Dialog Creator - HTML + JAVASCRIPT - SampSampa - 12.07.2014

Ficou muito bom, parabens. Apenas acho que poderia trabalhar mais na estйtica, tirando isso ta show.

Re: Dialog Creator - HTML + JAVASCRIPT - 4G4M3N0M - 13.07.2014

isso ira me ajudar muito, obrigado por compartilhar

+rep

ps: terб atualizaзхes ?

Re: Dialog Creator - HTML + JAVASCRIPT - kixtz - 13.07.2014

Quote:
Originally Posted by 4G4M3N0M
View Post
isso ira me ajudar muito, obrigado por compartilhar

+rep

ps: terб atualizaзхes ?
Cite alguma coisa que vocк queria ver em uma atualizaзгo, porque nгo vejo muito o que colocar nesse diбlogo.

Re: Dialog Creator - HTML + JAVASCRIPT - zSuYaNw - 13.07.2014

Nгo entendo a dificuldade em criar um dialog... porйm foi um belo trabalho para uma coisa tгo simples.
Um design, aliamento cairia bem as vezes..


Bom trabalho.