1. Вступительный анализ
Привет, ты все еще помнишь предыдущую статью? В основном он рассказывает, как плагин «вкладка» организует код и реализует его, и как дизайн процесса сочетается с объектно-ориентированным дизайном мышления.
Как разработать плагин? Эти два метода имеют свои преимущества и недостатки, чтобы учиться у сильных и слабых сторон друг друга. Эта серия статей ориентирована на обучение, и все решают, как использовать конкретные сценарии. Из этой статьи мы все еще сосредотачиваемся на этом экземпляре «Tab».
Продолжайте расширять связанные функции. Хе -хе, скажем, меньше ерунды, дойди до сути. Прямо на фактических визуализациях:
Вы видели это, и была добавлена новая функция. Если количество записей нашего элемента информации о конфигурации модуля, когда мы инициализируем, больше, чем мы указываем, он будет отображаться в «Больше модулях»
В скрытом списке элементов операции наша конфигурация параметра инициализации также была вновь скорректирована, например, дополнительный «DisplayMax», чтобы указать количество записей при инициализации и атрибут элемента «Статус»
Во время инициализации конфигурация не требуется. Динамическая конфигурация генерируется в программе, которая увеличивает гибкость программы. Давайте подробно проанализируем это ниже.
(Ii), анализ случая
(1) Во -первых, определите, что делает этот плагин. Давайте посмотрим на метод вызова плагина и описание параметра конфигурации. Следующий код:
Кода -копия выглядит следующим образом:
{
ButtonText: «Добавить модуль»,
результат: [
{
Текст: «Волшебник
URL: "help.html",
ShowClose: "0"
},
{
Текст: «Информация студента»,
URL: "info.html",
ShowClose: "1"
},
{
Текст: «Классификация студентов»,
URL: "Category.html",
ShowClose: "1"
},
{
Текст: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1"
},
{
Текст: «модуль бета -тестирования»,
URL: "test.html",
ShowClose: "1"
},
{
Текст: «Три жирных мужчина»,
URL: "help.html",
ShowClose: "1"
},
{
Текст: «Четыре лысых мужчин»,
URL: "help.html",
ShowClose: "1"
}
],
DisplayMax: 5 // максимальные элементы отображения
}
"BigBear.ui.createTab" содержит два параметра. Первый-это объект узла DOM, а второй-параметр плагина. «ButtonText» представляет текстовое описание кнопки «Операция» в плагине «Вкладка».
«Результат» - это массив, который содержит свойства элемента вкладки, включая описание текста, URL -адрес, используемый для его запроса при нажатии на элемент вкладки, «ShowClose» представляет, отображает ли параметр вкладки кнопку «Закрыть».
«Состояние» также удаляется во время инициализации и не требует конфигурации, а конфигурация динамически генерируется в программе. Там может быть закрытое состояние, которое выражается в виде: 1-дезора дисплея, статуса 0-офф и 2-чем количество записей по умолчанию.
(2) Функции вводятся в шагах
1 ---, инициализируйте плагин через дополнительные параметры:
Кода -копия выглядит следующим образом:
$ (function () {
bigbear.ui.createtab ($ ("#tab"), {
ButtonText: «Добавить модуль»,
результат: [
{
Текст: «Волшебник
URL: "help.html",
ShowClose: "0"
},
{
Текст: «Информация студента»,
URL: "info.html",
ShowClose: "1"
},
{
Текст: «Классификация студентов»,
URL: "Category.html",
ShowClose: "1"
},
{
Текст: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1"
},
{
Текст: «модуль бета -тестирования»,
URL: "test.html",
ShowClose: "1"
},
{
Текст: «Три жирных мужчина»,
URL: "help.html",
ShowClose: "1"
},
{
Текст: «Четыре лысых мужчин»,
URL: "help.html",
ShowClose: "1"
}
],
DisplayMax: 5 // максимальные элементы отображения
});
});
2 ---, рендеринг и полное обязательство по времени и связанная с ними бизнес-логика, такая как проверка количества записей во время инициализации.
Кода -копия выглядит следующим образом:
tabproto.init = function () {
if (this._isemptyresult ()) {
this._setContent ("еще нет модуля!");
}
var that = это;
this.getelem (). Найти (".
.Text (" +" + this.getopts () ["buttontext"])
.on ("click", function () {
that.getelem (). Найти (".. Консоль-панель"). slidetoggle (function () {
это._renderconsolepanel ("0");
});
});
$.
if (that._isdisplaymax (i + 1)) {
that._saveorupdatestatus (item, "1");
}
еще{
that._saveorupdatestatus (item, "2");
}
это._render (item);
});
if (! that._isdisplaymax (this.getopts () ["result"]. Length)) {
this.getelem (). Find (".
$ (this) .find (". Tag"). On ("click", function () {
var root = $ (this) .next ();
root.empty ();
$.
$ ("<div> </div>"). Text (data ["text"])
.on ("click", function () {
if (that._getitemlistbystatus ("1"). length <that.getopts () ["displaymax"]) {
that.getelem (). Find (". Title .Items Div"). EQ (DATA ["index"]). FADEIN (function () {
что.
});
}
еще{
оповещение («Модули не могут быть добавлены, в настоящее время это максимальное число!»);
}
})
.appendto (root);
});
root.toggle ();
});
});
}
this.getelem (). Найти (".
.eq (0)
.trigger ("Щелкни"); // Предположим, что должен быть один, иначе плагин не будет иметь большого смысла!
};
3 ---, переключение вкладок и операции содержимого данных.
Кода -копия выглядит следующим образом:
tabproto._setcurrent = function (index) {
var elects = this.getElem (). Найти (".
item.eq (index) .addclass ("active");
var cOntEns = this.getElem (). Найти (". Content .c"). Hide ();
Содержимое.eq (index) .show ();
};
Кода -копия выглядит следующим образом:
item.on ("click", function () {
that._setcurrent ($ (this) .index ());
that._getContent (data ["url"]). Dode (function (result) {
that._setContent (результат);
})
.fail (function () {
Бросьте новую ошибку («сетевая ошибка!»);
});
})
Кода -копия выглядит следующим образом:
tabproto._setcontent = function (html) {
this.getelem (). Найти (". Content"). Html (html);
};
tabproto._getContent = function (url) {
return $ .ajax ({
URL: URL
});
};
4 ---, метод работы вспомогательных данных Core не включает DOM.
Кода -копия выглядит следующим образом:
/ * Время обновления 2015 1/26 15:36 */
tabproto._isdisplaymax = function (size) {
var displaymax = this.getopts () ["displaymax"] || 5;
вернуть (size <= displaymax)? Верно: Неверно;
};
tabproto._isemptyresult = function () {
if (! this.getopts () ["result"]. Length) {
вернуть ложь;
}
вернуть истину;
};
tabproto._saveorupdatestatus = function (item, status) {
item ["status"] = status;
};
tabproto._getitemlistbystatus = function (status) {
var list = [];
var result = this.getopts () ["result"];
$.
if (status == item ["status"]) {
list.push (item);
}
});
вернуть список;
};
tabproto._getstatusbyindex = function (index) {
var status = null;
var result = this.getopts () ["result"];
$.
if (index == item ["index"]) {
status = item ["status"];
}
});
Статус возврата;
};
(Iii), Полный код для обучения , этот код был протестирован, включая структуру каталогов и связанные с ним файлы.
1, html
Кода -копия выглядит следующим образом:
<тело>
<div>
Big Bear {{BB}}-DXJ UI ------ вкладка
</div>
<div>
<div id = "tab">
<div>
<div>
+ Добавить информацию о студенте
</div>
<div>
<!-<div> <pran> x </span> приветствующая страница </div>
<div> <pan> x </span> управление пользователями </div>
<div> <pan> x </span> bigbear </div>->
</div>
<div>
<div> больше модулей </div>
<div>
</div>
</div>
</div>
<div>
</div>
<div>
<!-<div>
<div> <pan> Имя: </span> <input type = "text"/> </div>
<div> <pan> Примечание: </span> <textarea> </textarea> </div>
</div> <div> <input type = "button" value = "save"/> </div>
->
</div>
</div>
</div>
</body>
2, CSS
Кода -копия выглядит следующим образом:
.dxj-ui-hd {
Заполнение: 0px;
Поле: 0 Авто;
маржинальная версия: 30px;
Ширина: 780px;
Высота: 60px;
высота линии: 60px;
Фон: #3385ff;
Цвет: #ffff;
Фондовая семья: «Microsoft Yahei»;
размер шрифта: 28px;
Текст-альбом: Центр;
шрифт-вес: жирный шрифт;
}
.dxj-ui-bd {
Заполнение: 0px;
Поле: 0 Авто;
Ширина: 778px;
надоеволок: 30px;
надоеволос: 30px;
переполнение: скрыто;
Граница: 1PX SOLID #3385FF;
}
.dxj-ui-bd #tab {
Заполнение: 0px;
Поле: 0 Авто;
Ширина: 720px;
переполнение: скрыто;
позиция: относительно;
}
.dxj-ui-bd #tab .title {
Ширина: 720px;
переполнение: скрыто;
Пограничный подвод: 2PX SOLID #3385FF;
}
.dxj-ui-bd #tab .title .adder {
Ширина: 160px;
Высота: 32px;
высота линии: 32px;
Фон: #DC143C;
Цвет: #ffff;
Фондовая семья: «Microsoft Yahei»;
размер шрифта: 14px;
Текст-альбом: Центр;
шрифт-вес: жирный шрифт;
Плавание: осталось;
курсор: указатель;
}
.dxj-ui-bd #tab .title. more-mod {
переполнение: скрыто;
Граница: 1px solid #dc143c;
Ширина: 70px;
позиция: абсолютно;
Справа: 0;
Право маржи: 6px;
дисплей: нет;
}
.dxj-ui-bd #tab .title. more-mod .tag {
Высота: 32px;
высота линии: 32px;
Ширина: 70px;
Фон: #DC143C;
Цвет: #ffff;
Семейство шрифта: ариальная;
размер шрифта: 12px;
Текст-альбом: Центр;
курсор: указатель;
}
.dxj-ui-bd #tab .title. more-mod .mods {
переполнение: скрыто;
Ширина: 70px;
дисплей: нет;
}
.dxj-ui-bd #tab .title. more-mod .mods div {
Высота: 24px;
высота линии: 24px;
Ширина: 62px;
Семейство шрифта: ариальная;
размер шрифта: 12px;
курсор: указатель;
Лебь накладки: 10px;
}
.dxj-ui-bd #tab .title .items {
Высота: 32px;
Ширина: 480px;
переполнение: скрыто;
Плавание: осталось;
}
.dxj-ui-bd #tab .title .Items div {
Заполнение: 0px;
Полевая левая: 10px;
Ширина: 84px;
Высота: 32px;
высота линии: 32px;
Фон: #3385ff;
Цвет: #ffff;
Семейство шрифта: ариальная;
размер шрифта: 12px;
Текст-альбом: Центр;
позиция: относительно;
Плавание: осталось;
курсор: указатель;
}
.dxj-ui-bd #tab .title .items div span.del {
Ширина: 16px;
Высота: 16px;
высота линии: 16px;
дисплей: блок;
Фон: #DC143C;
позиция: абсолютно;
Справа: 0;
Верх: 0;
курсор: указатель;
}
.dxj-ui-bd #tab .content {
Ширина: 716px;
надоеволок: 30px;
переполнение: скрыто;
Граница: 2PX SOLIT #3385FF;
Пограничная топ: 0PX;
Мин-высот: 130px;
Текст-альбом: Центр;
}
.dxj-ui-bd #tab .content table {
Поле: 0 Авто;
}
.dxj-ui-bd #tab .content div.c {
надоеволок: 20px;
Лебь накладки: 20px;
Фон: #EEE;
Высота: 140px;
}
.dxj-ui-bd #tab .content div.c .Input-content {
маржинальная версия: 10px;
Семейство шрифта: ариальная;
размер шрифта: 12px;
}
.dxj-ui-bd #tab .console-panel {
Ширина: 716px;
надоеволок: 20px;
надоеволос: 20px;
переполнение: скрыто;
Граница: 2PX SOLIT #3385FF;
Пограничная топ: 0PX;
Пограничный подвод: 2PX SOLID #3385FF;
Фон: #fff;
дисплей: нет;
}
.active {
шрифт-вес: жирный шрифт;
}
3, bigbear.js
Кода -копия выглядит следующим образом:
(function ($) {
var win = wind;
var bb = win.bigbear = win.bigbear || {
UI: {}
};
var ui = bb.ui = {};
var tab = function (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var tabproto = tab.prototype;
/ * Время обновления 2015 1/26 15:36 */
tabproto._isdisplaymax = function (size) {
var displaymax = this.getopts () ["displaymax"] || 5;
вернуть (size <= displaymax)? Верно: Неверно;
};
tabproto._isemptyresult = function () {
if (! this.getopts () ["result"]. Length) {
вернуть ложь;
}
вернуть истину;
};
tabproto._saveorupdatestatus = function (item, status) {
item ["status"] = status;
};
tabproto._getitemlistbystatus = function (status) {
var list = [];
var result = this.getopts () ["result"];
$.
if (status == item ["status"]) {
list.push (item);
}
});
вернуть список;
};
tabproto._getstatusbyindex = function (index) {
var status = null;
var result = this.getopts () ["result"];
$.
if (index == item ["index"]) {
status = item ["status"];
}
});
Статус возврата;
};
tabproto._renderconsolepanel = function (status) {
var that = это;
var root = that.getelem (). find (".. Консоль-панель");
this._resetconsolepanel ();
$.
var elem = $ ("<div style = 'float: left';> </div>"). appendto (root);
$ ("<input type = 'radio' name = 'addMod' />")
.data ("item", item)
.appendto (elem);
$ ("<pan> </span>"). Текст (элемент ["text"]). appendto (elem);
});
if (root.find ("div"). size ()) {
$ ("<<input type = 'button' value = 'add module' style = 'margin-left: 20px'/>")
.on ("click", function () {
var data = root.find ("input [type = radio]: проверено"). data ("item");
if (that._getitemlistbystatus ("1"). length <that.getopts () ["displaymax"]) {
that.getelem (). Find (". Title .Items Div"). EQ (DATA ["index"]). FADEIN (function () {
что.
})
.trigger ("Щелкни");
}
еще{
that._saveorupdatestatus (data, "2");
}
that.getelem (). Find (". Title .Adder"). Trigger ("click");
})
.appendto (root);
}
еще{
root.text («нет элементов, чтобы добавить!»);
}
};
/ * Время обновления 2015 1/26 15:36 */
tabproto._setcurrent = function (index) {
var elects = this.getElem (). Найти (".
item.eq (index) .addclass ("active");
var cOntEns = this.getElem (). Найти (". Content .c"). Hide ();
Содержимое.eq (index) .show ();
};
tabproto.getelem = function () {
вернуть это.elem;
};
tabproto.getopts = function () {
вернуть это.opts;
};
tabproto._resetcontent = function () {
this.getelem (). Найти (". Content"). html ("");
};
tabproto._setcontent = function (html) {
this.getelem (). Найти (". Content"). Html (html);
};
tabproto._getContent = function (url) {
return $ .ajax ({
URL: URL
});
};
tabproto._deleteitem = function (elem) {
var that = это;
this.getelem (). Найти (".
.eq (elem.index ())
.fadeOut (function () {
that._resetContent ();
that._saveorupdatestatus (elem.data ("item"), "0");
that._triggeritem (elem.index () + 1);
});
};
tabproto._triggeritem = function (Далее) {
var nextStatus = this._getStatusByindex (Next);
var elects = this.getElem (). Найти (". Title .Items div");
Next = item.eq (Далее);
if (next.size () && "1" == NextStatus) {// Последующий узел DOM существует
Next.Trigger ("Щелкни");
}
еще{
items.eq (0) .trigger ("click");
}
};
tabproto._resetconsolepanel = function () {
this.getelem (). Найти (".. Консоль-панель"). empty ();
};
tabproto.init = function () {
if (this._isemptyresult ()) {
this._setContent ("еще нет модуля!");
}
var that = это;
this.getelem (). Найти (".
.Text (" +" + this.getopts () ["buttontext"])
.on ("click", function () {
that.getelem (). Найти (".. Консоль-панель"). slidetoggle (function () {
это._renderconsolepanel ("0");
});
});
$.
if (that._isdisplaymax (i + 1)) {
that._saveorupdatestatus (item, "1");
}
еще{
that._saveorupdatestatus (item, "2");
}
это._render (item);
});
if (! that._isdisplaymax (this.getopts () ["result"]. Length)) {
this.getelem (). Find (".
$ (this) .find (". Tag"). On ("click", function () {
var root = $ (this) .next ();
root.empty ();
$.
$ ("<div> </div>"). Text (data ["text"])
.on ("click", function () {
if (that._getitemlistbystatus ("1"). length <that.getopts () ["displaymax"]) {
that.getelem (). Find (". Title .Items Div"). EQ (DATA ["index"]). FADEIN (function () {
что.
});
}
еще{
оповещение («Модули не могут быть добавлены, в настоящее время это максимальное число!»);
}
})
.appendto (root);
});
root.toggle ();
});
});
}
this.getelem (). Найти (".
.eq (0)
.trigger ("Щелкни"); // Предположим, что должен быть один, иначе плагин не будет иметь большого смысла!
};
tabproto._render = function (data) {
var that = это;
var item = $ ("<div> </div>"). Text (data ["text"]). appendTo (this.getElem (). Найти (". title .Items")));
data ["index"] = item.index ();
item.on ("click", function () {
that._setcurrent ($ (this) .index ());
that._getContent (data ["url"]). Dode (function (result) {
that._setContent (результат);
})
.fail (function () {
Бросьте новую ошибку («сетевая ошибка!»);
});
})
.data ("item", data);
if ("2" == data ["status"]) {
item.hide ();
}
if ("1" == data ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("click", function () {
if (win.confirm ("Этот пункт будет удален?")) {
that._deleteitem (item);
вернуть ложь; // Остановить пузырьки
}
})
.appendto (item);
}
};
ui.createtab = function (elem, opts) {
var tab = new Tab (elem, opts);
tab.init ();
Вернуть вкладку;
};
}) (jQuery);
(Iv), окончательное резюме
(1) Разумный анализ функциональных требований в объектно-ориентированном образе мышления.
(2), организуйте нашу логику плагина в классе.
(3) Непрерывно реконструировать приведенные выше примеры, как разумно реконструировать это? Не перепроектируйте, будьте спокойны. Рекомендуемый метод состоит в том, чтобы объединить дизайн процесса с объектно-ориентированным дизайном мышления.