Редактирование: 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|мини|без]] | ||
Строка 36: | Строка 35: | ||
==Глобальные теги== | ==Глобальные теги== | ||
− | $_PL[" | + | $_PL["typeList"]="start"; // Плиточный + другой(с использованием $_CH["position"] ) виды страницы |
====Стили сайта по умолчанию==== | ====Стили сайта по умолчанию==== | ||
Строка 47: | Строка 46: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
− | + | .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; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Строка 342: | Строка 391: | ||
====#content - стиль страницы (без description)==== | ====#content - стиль страницы (без description)==== | ||
− | $_PL["css"] | + | $_PL["css"]="#content {font-size:25px;}"; // Установим размер шрифта |
====#rightHalf- стиль description==== | ====#rightHalf- стиль description==== | ||
− | $_PL["css"]="#content {font-size:25px;} #rightHalf{font-size: | + | $_PL["css"]="#content {font-size:25px;} #rightHalf{font-size:27 px;} "; // Установим размер шрифта сайта и описания |
====.selected - стиль при выделении элемента==== | ====.selected - стиль при выделении элемента==== | ||
Строка 351: | Строка 400: | ||
====.default - стиль невыделенного элемента==== | ====.default - стиль невыделенного элемента==== | ||
− | $_PL["css"]=" .default{ color: gray; } "; | + | $_PL["css"]=" .default{ color: gray; } "; |
====.contmenu - визуальная кнопка контекстного меню==== | ====.contmenu - визуальная кнопка контекстного меню==== | ||
Строка 502: | Строка 551: | ||
Элементы будут выстраиваться в ряд и навигация по ним будет предполагать что они в одном ряду | Элементы будут выстраиваться в ряд и навигация по ним будет предполагать что они в одном ряду | ||
− | ===== | + | =====В месте где навигация должна перейти на новую строку задайте $_CH["br"]=1;===== |
− | В месте где навигация должна перейти на новую строку задайте $_CH["br"]=1; | + | <br /> |
====$_CH["position"]="fulleditline"; //- Поле ввода текста шириной почти на всю страницу==== | ====$_CH["position"]="fulleditline"; //- Поле ввода текста шириной почти на всю страницу==== | ||
Строка 652: | Строка 701: | ||
Для правильной навигации по странице нужно знать когда у вас там новая строка. Для этого в элементе с которого нужно чтоб начиналась новая строка присваиваем | Для правильной навигации по странице нужно знать когда у вас там новая строка. Для этого в элементе с которого нужно чтоб начиналась новая строка присваиваем | ||
$_CH["br"]=1;// Этот элемент разместится уже на новой строке | $_CH["br"]=1;// Этот элемент разместится уже на новой строке | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
==Вывод результирующей страницы (на PHP)== | ==Вывод результирующей страницы (на PHP)== |