MyPopup

Версия 0.1.23

MyCMS (MyPopup) — это простой, но не примитивный инструмент.

MyPopup — это просто. MyPopup похож на alert, confirm и prompt: он просто показывает диалоговое окно, а всё остальное делегирует функциям обратного вызова yes и no или вашей собственной функции обработки событий. Но MyPopup может гораздо больше. В большинстве случаев вам не нужно беспокоиться о том, где, как широко или как высоко будет отображаться MyPopup: он сам принимает эти решения и отображает себя.

MyPopup — это компонент всплывающего окна JavaScript (js). Он следует логике JavaScript, прост для понимания и лёгок в использовании. MyPopup не только имитирует alert, confirm, prompt и т. д., но и расширяет их функциональность с помощью tip (небольшое всплывающее окно), loading (загрузка), iframe (фрейм), open (обычное всплывающее окно) и blank (пустое всплывающее окно).

Особенно мне нравится метод tip(), который прикрепляет небольшое всплывающее окно к цели. Метод tip() разумно определяет положение и направление всплывающего окна в зависимости от цели. На основе метода tip() MyPopup можно легко расширить до компонента раскрывающегося меню. У маленького всплывающего окна есть четыре стиля: zhi (с прямоугольным хвостом), zhi1 (с рамкой и прямоугольным хвостом), jian (с острым хвостом) и noTail (без хвоста). Вызов метода выглядит так: MyCMS.popup.tip("Привет от MyCMS!", {tipStyle: "zhi"}).

Простое использование

Позвольте мне немного рассказать о MyPopup. MyPopup совместим как с настольными компьютерами, так и с мобильными устройствами. Использование MyPopup аналогично использованию alert, confirm или prompt. Большинство плагинов для всплывающих окон и других плагинов или функций JavaScript имеют низкую степень связывания с MyPopup, что делает его легко интегрируемым в другие фреймворки JavaScript. Теоретически MyPopup можно использовать без изменений в любом фреймворке JavaScript, хотя я сам не использовал ни один из них.

После распаковки файла вы найдёте папку css, MyPopup и файл index.html. Просто переместите MyPopup в свой проект, а остальные файлы являются демонстрационными документами.

В верхней части страницы импортируйте основной файл MyPopup.js из папки MyPopup.

//Вызов MyPopup:
MyCMS.popup.alert("MyCMS приветствует вас!", {width: "100%", top: 0, left: 0 и т.д.});
MyCMS.popup.propmt("MyCMS приветствует вас!", "По умолчанию, я не знаю, зачем это нужно, но оно есть", options); //options - это {width: "100%", top: 0, left: 0 и т.д.}
MyCMS.popup.confirm("MyCMS приветствует вас!");

//Сокращаем MyCMS:
var p = MyCMS.popup;
p.tip("MyCMS приветствует вас!", {border: "1px solid red"}); //Содержимое представляет собой строку
p.tip(document.getElementById("myDiv"), {tipStyle: "zhi1"}); //Содержимое получено из HTML-элемента
var c = document.createElement("div");
var d = document.createElement("div");
var t = document.createTextNode("MyCMS приветствует вас!");
d.appendChild(t); //Содержимое получено из динамически созданного элемента
c.appendChild(d);
p.tip(c, document.getElementById("target"), {color: red}); //document.getElementById("target") - цель всплывающего окна

//MyPopup возвращает ссылку на всплывающее окно. Вы можете закрыть всплывающее окно с помощью MyCMS.popup.colse().
var p = MyCMS.popup.loading();
MyCMS.popup.close(p);

Параметры конфигурации

MyPopup предоставляет параметры размера width и height, параметры позиционирования position ("fix", "absolute"), top ("30px"), right ("10%"), bottom, left, direction ("vertical", "horizontal" и т. д.), определяющие, как будет выглядеть маленькое всплывающее окно относительно цели (follow или target), tipPosition ("follow", "target", определяющий, будет ли маленькое всплывающее окно следовать за мышью или целью при активации), параметры стиля color, bgColor, titleColor, titleBgColor, contentBgColor, buttonColor, buttonBgcolor, border, tipStyle, функции обратного вызова yes, no, параметры кнопки buttons ({buttons: ["Ты хороший"], {buttons: "Ты плохой"}, {buttons: [], []} не отображает кнопки, в настоящее время обрабатывает только два массива элементов, лишние элементы игнорируются, только одно значение (строка или массив элементов) является кнопкой «ОК»), closeBtn (отображать ли кнопку закрытия, true или false), параметр времени закрытия time ({time: 5.8}, параметр — число с плавающей запятой, единица измерения — секунды), заголовок title, наличие маски shade, закрытие всплывающего окна при клике вне окна outerClick (кроме alert, confirm, propmt по умолчанию true), эффект для мобильных устройств tipType ({tipType: "larger"}, используется только для маленьких всплывающих окон, имитирует всплывающие окна Baidu Baike для мобильных устройств), внешний вид всплывающего окна theme ({theme: "myThenme"}, настраиваемый внешний вид), если всплывающее окно пустое и получено из DOM-элемента, то будет ли оно отделено isOut ({isOut: true}, по умолчанию false, т. е. не отделяется). Это все доступные интерфейсы, и если предоставленный интерфейс не соответствует вашим потребностям, вы можете напрямую изменить стиль всплывающего окна.

Новые дополнения (2019/1/31)

Добавлен элемент func, {func: function(index){//Делать то, что вы хотите сделать}}. В функции func вы можете делать некоторые вещи, связанные со всплывающим окном.

Изменения (2019/2/13)

Исправлена ошибка в написании слова larger в параметре tipType. Из исходного lager изменено на larger. Синхронно обновлён упрощённый документ, в котором также была исправлена ошибка написания larger.

Изменения (2019/2/14)

Полностью исправлена ошибка, обнаруженная 13 числа.

Пользовательский стиль

Что касается пользовательского стиля, он находится в папке theme в MyPopup. Имя файла темы совпадает с именем стиля (например, myTheme), а имя таблицы стилей — myPopup.css. Все стили объявляются в классе с именем темы (например, .myTheme .popup{...}). Вызов выглядит следующим образом:

//Глобальный вызов (после этого весь стиль страницы применяется к этому стилю):
MyCMS.popup.init("myTheme");
MyCMS.popup.alert("Глобальная настройка стиля моего всплывающего окна");

//Локальный вызов (необходимо добавить параметр theme в конкретное всплывающее окно, например {theme: "myTheme"}):
MyCMS.popup.alert("Я хочу выделиться", {theme: "myTheme"});

MyPopup совместим с ПК и мобильными устройствами

MyPopup совместим как с ПК, так и с мобильными устройствами. MyCMS интеллектуально определяет тип системы и применяет соответствующий стиль. MyPopup не зависит ни от одной библиотеки JavaScript.

На данный момент это всё, что я могу сказать. Я буду постепенно улучшать документацию.

Разное

Сегодня, когда Интернет развивается быстрыми темпами, существует множество всплывающих компонентов, похожих на шерсть коровы. Это всего лишь моё хобби. Я начал писать MyPopup после того, как случайно наткнулся на layer во время поиска в Интернете, и вскоре забросил его. Недавно я вернулся к нему и закончил его. MyPopup — новорождённый, и я надеюсь на вашу помощь в чтении и использовании. В эпоху, когда всё будет связано, способ чтения не изменится кардинально, а JavaScript и весь фронт веб-разработки будут только развиваться.

MyPopup использует открытый исходный код Apache. Мы будем постепенно улучшать функциональность и решать проблемы совместимости. Плавающий круглый значок закрытия — это последнее, что было сделано в спешке. Он не был тщательно настроен и улучшен, и его внешний вид не так красив и гармоничен. Пожалуйста, простите меня. Если у вас есть какие-либо проблемы или предложения во время чтения и использования, пожалуйста, оставьте сообщение в группе QQ 154340308.

Скачать: http://www.mycms.xyz/MyPopup/MyPopup.rar

Демонстрация: http://www.mycms.xyz/MyPopup/

Изображения:

• Эффект MyPopup js всплывающего окна: https://images.gitee.com/uploads/images/2019/0214/120257_2771aca2_1480837.png "Эффект MyPopup js всплывающего окна_20190122_142531.png")
• Имитация эффекта всплывающего окна Baidu Baike на мобильном устройстве: https://images.gitee.com/uploads/images/2019/0214/120337_a970bdc9_1480837.png
• Имитация эффекта всплывающего окна Baidu Baike на мобильном устройстве: https://images.gitee.com/uploads/images/2019/0214/120443_7ee0c8f4_1480837.png