12.07.2014, 21:05
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:
![](http://i62.tinypic.com/35kv9cj.png)
Fonte - Pastebin
Fonte:
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:
![](http://i62.tinypic.com/35kv9cj.png)
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>" + " if(response){<br>" + " switch(dialogid){<br>" + " case "+sDialogId+":<br>" + " {<br>" + " SendClientMessage(playerid, 0xFFFFFF, \"Obrigado por concordar com as regras do servidor!\");<br>"+ " return 1;<br>"+ " }<br>" + " }<br>" + " }else{<br>" + " SendClientMessage(playerid, 0xFFFFFF, \"Vocк deve concordar com as regras do servidor para jogar aqui!\");<br>" + " }<br>" + " 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>" + " if(response){<br>" + " switch(dialogid){<br>" + " case "+sDialogId+":<br>" + " {<br>" + " if(algumaFuncao(playerid, inputtext)){<br>"+ " return 1;<br>"+ " }else{<br><br>"+ " }<br>"+ " }<br>" + " }<br>" + " }else{<br>" + " SendClientMessage(playerid, 0xFFFFFF, \"Vocк deve concordar com as regras do servidor para jogar aqui!\");<br>" + " }<br>" + " 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>" + " if(response){<br>" + " switch(dialogid){<br>" + " case "+sDialogId+":<br>" + " {<br>" + " switch(listitem){<br>"; for (var i = 0; i < (iPosRow - 6); i++) { sCode += " case " + i + ":<br>"; sCode += " {<br>"; sCode += " //Alguma coisa para o item "+i+"<br>"; sCode += " return 1;<br>"; sCode += " }<br>"; } sCode += " }<br>" + " }<br>" + " }<br>" + " }else{<br>" + " SendClientMessage(playerid, 0xFFFFFF, \"Vocк deve concordar com as regras do servidor para jogar aqui!\");<br>" + " }<br>" + " 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>" + " if(response){<br>" + " switch(dialogid){<br>" + " case "+sDialogId+":<br>" + " {<br>" + " if(CheckPassword(playerid, inputtext)){<br>"+ " SendClientMessage(playerid, 0xFFFFFF, \"Vocк estб logado!\"); return 1;<br>"+ " }else{<br>"+ " SendClientMessage(playerid, 0xFFFFFF, \"Falha no login.\");<br>"+ " // Mostra o diбlogo do login novamente.<br>"+ " "+sDialog+"<br>"+ " }<br>"+ " }<br>" + " }<br>" + " }else{<br>" + " SendClientMessage(playerid, 0xFFFFFF, \"Vocк deve concordar com as regras do servidor para jogar aqui!\");<br>" + " }<br>" + " 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" onchange="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 !" onclick="generateCode()"> </td> </tr> </table> <div id="final_code" style="display:none;"></div> </body> </html>