Редактирование: FXML
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 1: | Строка 1: | ||
− | + | '''FXML''' (Fork eXtensible Markup Language) — язык разметки документов во Всемирной паутине. Для навигации по таким страницам не требуется мышь или сенсорный экран. Язык '''FXML''' интерпретируется такими приложениями как ForkPlayer, OTT Player, OTT-play. Полученный в результате интерпретации форматированный текст отображается на экране телевизора. | |
− | |||
− | + | Например, следующий код (должен быть валидным JSON): | |
{"title":"COOLTV - портал нового поколения","background-image":"<nowiki>http://cooltv.info/img/tvcool.jpg</nowiki>","typeList":"start","icon":"<nowiki>http://cooltv.info/img/tvcool23.jpg</nowiki>","channels":[{"title":"Вход","logo_30x30":"<nowiki>http://cooltv.info/img/profle22.jpg</nowiki>","playlist_url":"<nowiki>http://cooltv.info/auth</nowiki>"},{"title":"Новости ","logo_30x30":"<nowiki>http://cooltv.info/img/rss-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/news</nowiki>"},{"title":"Поиск ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-search-folder-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/media/search.php</nowiki>"},{"title":"Кинозал ","logo_30x30":"<nowiki>http://cooltv.info/img/1icons8-film-reel-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/media</nowiki>"},{"title":"AceStream ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-wave-arrows-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/vdt/12</nowiki>"},{"title":"Обменник ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-next-100.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/media/obmen/</nowiki>"},{"title":"Сервисы ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8s3-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/vdt/9</nowiki>"},{"title":"IPTV ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-hdtv-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/vdt/8</nowiki>"},{"title":"Мультимедиа ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-documentary-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/vdt/7</nowiki>"},{"title":"Чат ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-chat-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/guest</nowiki>"},{"title":"FAQ ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-info-popup-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/faq/</nowiki>"},{"title":"Копилка","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-bad-piggies-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/copilka</nowiki>"}]} | {"title":"COOLTV - портал нового поколения","background-image":"<nowiki>http://cooltv.info/img/tvcool.jpg</nowiki>","typeList":"start","icon":"<nowiki>http://cooltv.info/img/tvcool23.jpg</nowiki>","channels":[{"title":"Вход","logo_30x30":"<nowiki>http://cooltv.info/img/profle22.jpg</nowiki>","playlist_url":"<nowiki>http://cooltv.info/auth</nowiki>"},{"title":"Новости ","logo_30x30":"<nowiki>http://cooltv.info/img/rss-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/news</nowiki>"},{"title":"Поиск ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-search-folder-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/media/search.php</nowiki>"},{"title":"Кинозал ","logo_30x30":"<nowiki>http://cooltv.info/img/1icons8-film-reel-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/media</nowiki>"},{"title":"AceStream ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-wave-arrows-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/vdt/12</nowiki>"},{"title":"Обменник ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-next-100.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/media/obmen/</nowiki>"},{"title":"Сервисы ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8s3-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/vdt/9</nowiki>"},{"title":"IPTV ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-hdtv-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/vdt/8</nowiki>"},{"title":"Мультимедиа ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-documentary-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/vdt/7</nowiki>"},{"title":"Чат ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-chat-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/guest</nowiki>"},{"title":"FAQ ","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-info-popup-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/faq/</nowiki>"},{"title":"Копилка","logo_30x30":"<nowiki>http://cooltv.info/img/icons8-bad-piggies-96.png</nowiki>","playlist_url":"<nowiki>http://cooltv.info/copilka</nowiki>"}]} | ||
даст такой результат (в ForkPlayer): | даст такой результат (в ForkPlayer): | ||
Строка 12: | Строка 11: | ||
https://github.com/vengo634/kino.pub_forkplayerPHP/blob/master/index.php | https://github.com/vengo634/kino.pub_forkplayerPHP/blob/master/index.php | ||
− | + | Смотреть Исходный код любой страницы можно непосредственно в ForkPlayer | |
[[Файл:VmGe53a9.png|мини|без]] | [[Файл:VmGe53a9.png|мини|без]] | ||
Строка 22: | Строка 21: | ||
==Глобальные теги== | ==Глобальные теги== | ||
− | $_PL[" | + | $_PL["typeList"]="start"; // Плиточный + другой(с использованием $_CH["position"] ) виды страницы |
− | ====Стили сайта | + | ====Стили сайта==== |
− | По умолчанию для вашей страницы задаются такие стили (вы их можете изменить задав | + | По умолчанию для вашей страницы задаются такие стили (вы их можете изменить задав в $_PL["css"] |
− | + | .start { | |
+ | |||
+ | position: relative; | ||
+ | |||
+ | border: 0px; | ||
− | + | text-align: center; | |
− | + | display: inline-block; | |
− | : | + | overflow: hidden; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | text-align: center; | |
− | |||
− | |||
− | |||
− | + | margin-left: 4px; | |
− | |||
− | |||
− | |||
− | + | margin-top: 1px; | |
− | |||
− | |||
− | : | + | height: 101px; |
− | |||
− | |||
− | : | + | width: 10%; |
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.start .rating { | .start .rating { | ||
− | + | ||
− | + | position: absolute; | |
− | + | ||
− | + | display: none; | |
− | + | ||
− | + | text-align: left; | |
− | + | ||
− | + | height: 23px; | |
+ | |||
+ | width: 28px; | ||
+ | |||
+ | padding-top: 5px; | ||
+ | |||
+ | padding-left: 5px; | ||
+ | |||
+ | font-size: 11px; | ||
+ | |||
} | } | ||
+ | |||
.start .icon { | .start .icon { | ||
− | + | ||
− | + | padding: 2px 2px 0px 2px; | |
+ | |||
+ | height: 76%; | ||
+ | |||
} | } | ||
+ | |||
.start .name { | .start .name { | ||
− | + | ||
− | + | font-size: 17px; | |
− | + | ||
− | + | line-height: 0.9; | |
− | + | ||
− | + | position: absolute; | |
+ | |||
+ | bottom: 0px; | ||
+ | |||
+ | width: 100%; | ||
+ | |||
+ | max-height: 50%; | ||
+ | |||
} | } | ||
+ | |||
.start .title { | .start .title { | ||
− | + | ||
− | + | background: rgba(0, 0, 0, 0.65); | |
− | + | ||
− | + | border-radius: 3px; | |
− | + | ||
− | + | width: auto; | |
+ | |||
+ | display: inline-block; | ||
+ | |||
+ | margin: 2px; | ||
+ | |||
+ | padding: 1px 4px 4px 4px; | ||
+ | |||
} | } | ||
+ | |||
.start .side_icon { | .start .side_icon { | ||
− | + | ||
− | + | position: relative; | |
+ | |||
+ | padding: 2px; | ||
+ | |||
} | } | ||
+ | |||
.list { | .list { | ||
− | + | ||
− | + | text-align: left; | |
− | + | ||
− | + | border-radius: 4px 0px 0px 4px; | |
− | + | ||
− | + | cursor: default; | |
+ | |||
+ | margin: 2px 0px; | ||
+ | |||
+ | width: 47.965625%; | ||
+ | |||
+ | height: 35px; | ||
+ | |||
} | } | ||
+ | |||
.list .contmenu { | .list .contmenu { | ||
− | + | ||
− | + | position: relative; | |
− | + | ||
+ | float: right; | ||
+ | |||
+ | display: none; | ||
+ | |||
} | } | ||
+ | |||
.list .numb { | .list .numb { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | float: left; | |
− | + | ||
− | + | padding-top: 2px; | |
− | + | ||
− | + | font-size: 60%; | |
− | + | min-width: 38px; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | text-align: center; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
.default .contmenu { | .default .contmenu { | ||
− | + | ||
+ | display: none; | ||
+ | |||
} | } | ||
+ | |||
.selected .contmenu { | .selected .contmenu { | ||
− | + | ||
+ | display: block; | ||
+ | |||
} | } | ||
+ | |||
.html { | .html { | ||
− | + | ||
− | + | position: relative; | |
− | + | ||
+ | display: inline-block; | ||
+ | |||
+ | vertical-align: top; | ||
+ | |||
} | } | ||
+ | |||
.hlink { | .hlink { | ||
− | + | ||
− | + | position: relative; | |
− | + | ||
− | + | border: 0px solid transparent; | |
− | + | ||
− | + | margin: 0px 4px; | |
+ | |||
+ | border-radius: 4px; | ||
+ | |||
+ | display: inline-block; | ||
+ | |||
+ | overflow: hidden; | ||
+ | |||
} | } | ||
+ | |||
.hlink .title { | .hlink .title { | ||
− | + | ||
− | + | overflow: hidden; | |
− | + | ||
− | + | max-width: 310px; | |
− | + | ||
− | + | font-size: 90%; | |
− | + | ||
+ | padding: 0px 4px; | ||
+ | |||
+ | float: left; | ||
+ | |||
+ | height: 28px; | ||
+ | |||
+ | text-decoration: underline; | ||
+ | |||
} | } | ||
+ | |||
.hlink .icon { | .hlink .icon { | ||
− | + | ||
− | + | float: left; | |
− | + | ||
+ | height: 22px; | ||
+ | |||
+ | padding-top: 5px; | ||
+ | |||
} | } | ||
+ | |||
.fulleditline { | .fulleditline { | ||
− | + | ||
− | + | border: 1px solid transparent; | |
− | + | ||
− | + | width: 80%; | |
− | + | ||
− | + | margin: 1px 9%; | |
+ | |||
+ | border-radius: 4px; | ||
+ | |||
+ | display: inline-block; | ||
+ | |||
+ | overflow: hidden; | ||
+ | |||
} | } | ||
+ | |||
.fulleditline .title { | .fulleditline .title { | ||
− | + | ||
− | + | overflow: hidden; | |
− | + | ||
− | + | font-size: 24px; | |
− | + | ||
− | + | height: 24px; | |
− | + | ||
+ | margin: 3px; | ||
+ | |||
+ | color: #2b2525; | ||
+ | |||
+ | background-color: #eee; | ||
+ | |||
+ | padding: 4px; | ||
+ | |||
} | } | ||
+ | |||
.fulleditline .icon { | .fulleditline .icon { | ||
− | + | ||
− | + | float: right; | |
− | + | ||
+ | height: 22px; | ||
+ | |||
+ | padding-top: 2px; | ||
+ | |||
} | } | ||
+ | |||
.label { | .label { | ||
− | + | ||
− | + | position: relative; | |
− | + | ||
− | + | text-align: left; | |
− | + | ||
− | + | border-radius: 4px; | |
− | + | ||
− | + | margin: -2px 4%; | |
− | + | ||
+ | font-size: 80%; | ||
+ | |||
+ | width: 92%; | ||
+ | |||
+ | display: inline-block; | ||
+ | |||
+ | overflow: hidden; | ||
+ | |||
+ | height: 26px; | ||
+ | |||
} | } | ||
+ | |||
.label .icon { | .label .icon { | ||
− | + | ||
− | + | float: left; | |
+ | |||
+ | height: 20px; | ||
+ | |||
} | } | ||
+ | |||
.default { | .default { | ||
− | + | ||
+ | background: none; | ||
+ | |||
} | } | ||
+ | |||
.selected { | .selected { | ||
− | + | ||
+ | background: rgba(180, 180, 180, 0.7); | ||
+ | |||
} | } | ||
+ | |||
.listselected { | .listselected { | ||
− | + | ||
+ | color: black; | ||
+ | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .rightHalf { | |
− | + | ||
− | + | position: absolute; | |
− | + | ||
− | + | height: 95%; | |
− | + | ||
− | + | overflow-x: hidden; | |
− | + | ||
− | + | overflow-y: auto; | |
+ | |||
+ | display: none; | ||
+ | |||
+ | font-size: 28px; | ||
+ | |||
+ | left: 51%; | ||
+ | |||
+ | width: 47.5%; | ||
+ | |||
+ | word-break: break-word; | ||
− | + | top: 77px; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | === Пример своего стиля (пишите чистый css, он будет преобразован в одну строку) === | |
− | === | + | ==== #content - стиль страницы (без description, описание в плавающем блоке) ==== |
+ | $_PL["css"]="#content {font-size:25px;}"; // Установим размер шрифта | ||
− | ====# | + | ==== #rightHalf- стиль description ==== |
− | $_PL["css"] | + | $_PL["css"]="#content {font-size:25px;} #rightHalf{font-size:27 px;} "; // Установим размер шрифта сайта и описания |
− | + | ==== .selected - стиль при выделении элемента ==== | |
− | |||
− | |||
− | ====.selected - стиль при выделении элемента==== | ||
$_PL["css"]=" .selected { color: black; } "; // Делаем смену цвета выделенного элемента | $_PL["css"]=" .selected { color: black; } "; // Делаем смену цвета выделенного элемента | ||
− | ====.default - стиль невыделенного элемента==== | + | ==== .default - стиль невыделенного элемента ==== |
− | $_PL["css"]=" .default{ color: gray; } "; | + | $_PL["css"]=" .default{ color: gray; } "; |
− | ====.contmenu - визуальная кнопка контекстного меню==== | + | ==== .contmenu - визуальная кнопка контекстного меню ==== |
$_PL["css"]=" .contmenu{ display:none; } "; // Скрываем кнопку контекстного меню | $_PL["css"]=" .contmenu{ display:none; } "; // Скрываем кнопку контекстного меню | ||
− | ====.label, .start, .list, .fulleditline, .hlink, .html - стили(верхний уровень) для разных типов элементов $_CH["position" | + | ==== .label, .start, .list, .fulleditline, .hlink, .html - стили(верхний уровень) для разных типов элементов $_CH["position"] ==== |
Если не задан $_CH["position"] элемента то по умолчанию элементы отображаются на странице списком и классом .list | Если не задан $_CH["position"] элемента то по умолчанию элементы отображаются на странице списком и классом .list | ||
Если при этом задано отображение плиткой ($_PL["typeList"]="start" ) то по умолчанию элементы отображаются с классом .start | Если при этом задано отображение плиткой ($_PL["typeList"]="start" ) то по умолчанию элементы отображаются с классом .start | ||
− | ====.labelselected, .startselected, .listselected, .fulleditlineselected, .hlinkselected, .htmlselected - стили(верхний уровень) для выделенных элементов==== | + | ==== .labelselected, .startselected, .listselected, .fulleditlineselected, .hlinkselected, .htmlselected - стили(верхний уровень) для выделенных элементов ==== |
− | =====Установим цвет для выделенных элементов только .list===== | + | ===== Установим цвет для выделенных элементов только .list ===== |
$_PL["css"]=" .listselected{color: red; }"; | $_PL["css"]=" .listselected{color: red; }"; | ||
− | ====.labeldefault, .startdefault, .listdefault, .fulleditlinedefault, .hlinkdefault, .htmldefault - стили(верхний уровень) для невыделенных элементов==== | + | ==== .labeldefault, .startdefault, .listdefault, .fulleditlinedefault, .hlinkdefault, .htmldefault - стили(верхний уровень) для невыделенных элементов ==== |
− | ====.list - зададим свой вид списка==== | + | ==== .list - зададим свой вид списка ==== |
$_PL["css"]=" .list{color: red; }"; // Меняем цвет | $_PL["css"]=" .list{color: red; }"; // Меняем цвет | ||
− | ====.title .icon .rating .numb вложенные в верхний уровень стили заголовка, иконки, рейтинга(для .start), порядкового номера(для .list)==== | + | ==== .title .icon .rating .numb вложенные в верхний уровень стили заголовка, иконки, рейтинга(для .start), порядкового номера(для .list) ==== |
$_PL["css"]=" .title{color: red; }"; // Меняем цвет заголовков | $_PL["css"]=" .title{color: red; }"; // Меняем цвет заголовков | ||
$_PL["css"]=" .numb { display:none; } "; // Скрываем отображение номера | $_PL["css"]=" .numb { display:none; } "; // Скрываем отображение номера | ||
− | ====Комбинация классов, зададим стиль иконок только для списка (.list)==== | + | ==== Комбинация классов, зададим стиль иконок только для списка (.list) ==== |
$_PL["css"]=" .list .icon{background-color:white; margin:2px;}"; // Зададим белую рамку фона для иконок | $_PL["css"]=" .list .icon{background-color:white; margin:2px;}"; // Зададим белую рамку фона для иконок | ||
Строка 419: | Строка 460: | ||
$_CH["menu"]=$menu; | $_CH["menu"]=$menu; | ||
− | ===position | + | ===position=== |
+ | $_CH["position"]="fulleditline"; //- Поле ввода текста шириной почти на всю страницу | ||
− | + | $_CH["position"]="hlist"; // - горизонтальная ссылка (может быть несколько на одном горизонтальном уровне) | |
− | + | $_CH["position"]="list"; // -обычный вид списка шириной в половину экрана и с description справа | |
− | |||
− | $_CH[" | + | $_CH["position"]="label"; // -невысокая строка на всю ширину экрана |
− | $_CH[" | + | $_CH["position"]="bigtile"; // - Плитка увеличенной в 2 раза высоты (128х215px) |
− | $_CH[" | + | $_CH["position"]=""; // - Плитка обычного размера как в Стартовом меню (128х101px) |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
===location=== | ===location=== | ||
Строка 572: | Строка 596: | ||
Для правильной навигации по странице нужно знать когда у вас там новая строка. Для этого в элементе с которого нужно чтоб начиналась новая строка присваиваем | Для правильной навигации по странице нужно знать когда у вас там новая строка. Для этого в элементе с которого нужно чтоб начиналась новая строка присваиваем | ||
$_CH["br"]=1;// Этот элемент разместится уже на новой строке | $_CH["br"]=1;// Этот элемент разместится уже на новой строке | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
==Вывод результирующей страницы (на PHP)== | ==Вывод результирующей страницы (на PHP)== |