Урок Выводим HTML страничку по нажатию на "TAB"

Alex_Bardakov

Изучающий
Пользователь
Регистрация
18 Фев 2015
Сообщения
542
Лучшие ответы
0
Репутация
106
Привет, сегодня я покажу вам как выводить HTML страничку по нажатию на "TAB". (CSS, JavaScript также может использоваться).

CSS/JS Будут рассмотрены в следующих уроках.

Давайте начнем.
Создайте папку «ui» в каталоге «packages / keker» (она будет содержать файлы клиента) и файл «web.js» и объявите ее в «packages / keker / index.js», добавив строку:

Сначала откройте файл index.js (По пути: server \ packages \ keker) и добавьте следующую строку:

PHP:
require ('./web');
Это будет включать файл с именем web.js который мы вскоре с вами создадим : (созданный в корневой папке, где находится index.js).

Создайте файл "web.js" в корневой папке, где находится файл "index.js"

Пропишите эти строки в файле "web.js":

PHP:
const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

const OpenType = { // Типы поддерживаемых файлов
		'.ico': 'image/x-icon',
		'.html': 'text/html',
		'.js': 'text/javascript',
		'.json': 'application/json',
		'.css': 'text/css',
		'.png': 'image/png',
		'.jpg': 'image/jpeg',
		'.wav': 'audio/wav',
		'.mp3': 'audio/mpeg',
		'.svg': 'image/svg+xml',
		'.pdf': 'application/pdf',
		'.doc': 'application/msword',
		'.eot': 'appliaction/vnd.ms-fontobject',
		'.ttf': 'aplication/font-sfnt'
	  };

http.createServer(function (req, res) {
	res.setHeader('Access-Control-Allow-Origin', '*'); // Разрешение на междоменные запросы.
	
	let parsedUrl = url.parse(req.url); // чистим URL от мусора (парсим)
  
    let filePath = __dirname+'/ui' + parsedUrl.pathname;

    let ext = path.extname(filePath); // Получаем расширение файлов со страницы

    fs.readFile(filePath, function(error, content) {
      if (error) {
        if(error.code == 'ENOENT'){ // Если нет файла то
          res.writeHead(404, { 'Content-Type': 'text/plain' }); // Выводим ошибку
          res.end('404 Not Found');
        }
        else { // Если не 404 то выводим соответствующий ошибке кодовый номер
          res.writeHead(500);
          res.end('Error: '+error.code+' ..\n');
        }
      }
      else {
        res.writeHead(200, { 'Content-Type': OpenType[ext] || 'text/plain' });
        res.end(content, 'utf-8');
      }
    });
}).listen(8080); // Вешаем страничку на свободный порт "8080"
Теперь добавим папку "ui." (Если вы хотите другое название папки, то и поменяйте его в файле "web.js", в строке "let filePath = __dirname+'/ui' + parsedUrl.pathname;")

Создаем простую страничку с именем "test.html" в папку "ui. (или ваше название)":
PHP:
<div style = "background: black;">TyT ProSTo PySTo!</div>
Теперь добавим в файл main.js:
PHP:
const addr = "http://127.0.0.1:8080/"; // Здесь мы должны указать адрес вашего сервера и порт, на котором висит страничка (указывали выше.)
var pl_enable = false; // Мы собираемся использовать это, чтобы проверить, отображается ли наш HTML-код или нет.

/* 


*** Используйте это, если вы хотите добавить CSS (замените main.css на ваш файл css) ***

var css_el = document.createElement("link"); 
css_el.rel = "stylesheet";
css_el.href = addr+"main.css";

$("head").append(css_el);
*/

$.get( addr+"test.html", function( data ) {  // Загрузите HTML с помощью AJAX
  $("body").append( data ); // помещаем элемент в тело странички
});

$("body").keydown(function( e ) { // В этом примере я буду скрывать / показывать страницу, когда пользователь нажимает TAB
	if(e.which == 9){ // 9 - Номер клавиши "TAB" (В шапке раздела есть тема с обозначением клавишь)
        if(pl_enable) { 
            pl_enable = false;
            $(".myDiv").hide(); // Скрыть div, который мы создали в файле HTML
        } else {
            pl_enable = true;
            $(".myDiv").show(); // Показать div, который мы создали в файле HTML.
        }
        // если вы хотите показать курсор, раскомментируйте эту строку:
		// mp.invoke("focus", pl_enable);
	}
});
Теперь вам просто нужно включить main.js. Это может быть достигнуто в Server \ packages \ keker \ events \ common.js путем вывода тега <script> при подключении игрока (поиск события playerJoin и добавление этого кода :)
PHP:
player.outputChatBox("<script src='http://127.0.0.1:8080/main.js'></script>");
P.S: Урок был основан на материалах взятых с официального форума по Rage MP ( а точнее лог обновлений Rage(что было включено в поддержку))
 
Последнее редактирование:
Сверху Снизу