1. Вступительный анализ
В двух предыдущих статьях мы в основном говорили о том, как разрабатывать плагины в jQuery и как объединить дизайн процесса с объектно-ориентированным дизайном мышления.
Как разработать плагин? Эти два метода имеют свои преимущества и недостатки, чтобы учиться у сильных и слабых сторон друг друга. Эта серия статей ориентирована на обучение, и все решают, как использовать конкретные сценарии. Таким образом, начиная с этой статьи сегодня, мы будем использовать примеры для разработки нашей собственной библиотеки плагинов с неглубоких до глубоких. Хе -хе, скажем, меньше ерунды, дойди до сути. Прямо на фактических визуализациях:
Вы можете увидеть это. Это плагин вкладок. Мы можем столкнуться с этим, когда делаем одностраничные приложения («Спа») каждый день. Давайте возьмем сегодняшний пример.
Мы строим систему, основанную на структуре BS, которая будет состоять из нескольких модулей, которые являются компонентами строительной системы. Через этот плагин мы можем эффективно управлять нашими модулями
Давайте подробно проанализируем форму опыта и интерактивность пользователя ниже.
(Ii), анализ случая
(1) Во -первых, определите, что делает этот плагин. Давайте посмотрим на метод вызова плагина и описание параметра конфигурации. Следующий код:
Кода -копия выглядит следующим образом:
bigbear.ui.createtab ($ ("#tab"), {
ButtonText: «Добавить модуль»,
результат: [
{
Текст: «Волшебник
URL: "help.html",
ShowClose: "0",
Статус: "1"
},
{
Текст: «Информация студента»,
URL: "info.html",
ShowClose: "1",
Статус: "1"
},
{
Текст: «Классификация студентов»,
URL: "Category.html",
ShowClose: "1",
Статус: "1"
},
{
Текст: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1",
Статус: "1"
},
{
Текст: «модуль бета -тестирования»,
URL: "test.html",
ShowClose: "1",
Статус: "1"
}
]
});
"BigBear.ui.createTab" содержит два параметра. Первый-это объект узла DOM, а второй-параметр плагина. «ButtonText» представляет текстовое описание кнопки «Операция» в плагине «Вкладка».
«Результат» - это массив, который содержит свойства элемента вкладки, включая описание текста, URL -адрес, используемый для его запроса при нажатии на элемент вкладки, «ShowClose» представляет, отображает ли параметр вкладки кнопку «Закрыть».
«Статус» представляет собой статус опции, который по умолчанию, и может быть закрытое состояние, которое выражается как: 1-открытие и 0-отпен соответственно.
(2) Каковы функции?
Благодаря дополнительным параметрам соответствующие записи опций генерируются следующим образом:
Кода -копия выглядит следующим образом:
bigbear.ui.createtab ($ ("#tab"), {
ButtonText: «Добавить модуль»,
результат: [
{
Текст: «Анализ исходного кода jQuery»,
URL: "help.html",
ShowClose: "0",
Статус: "1"
},
{
Текст: "Big Bear {{bb}}}",
URL: "bb.html",
ShowClose: "1",
Статус: "1"
}
]
});
Эффект заключается в следующем:
Вы можете свободно добавлять и удалять параметры записей, как показано в следующем эффекте:
На рисунке выше показана одна из этих ситуаций. Когда модуль нет, будет предложено сообщение.
Это второй случай, и те, которые были ранее удалены, могут быть восстановлены.
(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> <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 .items {
Высота: 32px;
Полевая левая: 20px;
Ширина: 540px;
переполнение: скрыто;
Плавание: осталось;
}
.dxj-ui-bd #tab .title .Items div {
Заполнение: 0px;
Полевая левая: 10px;
Ширина: 96px;
Высота: 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), код JS выглядит следующим образом:
Кода -копия выглядит следующим образом:
$ (function () {
bigbear.ui.createtab ($ ("#tab"), {
ButtonText: «Добавить модуль»,
результат: [
{
Текст: «Волшебник
URL: "help.html",
ShowClose: "0",
Статус: "1"
},
{
Текст: «Информация студента»,
URL: "info.html",
ShowClose: "1",
Статус: "1"
},
{
Текст: «Классификация студентов»,
URL: "Category.html",
ShowClose: "1",
Статус: "1"
},
{
Текст: "Big Bear {{bb}}",
URL: "bb.html",
ShowClose: "1",
Статус: "1"
},
{
Текст: «модуль бета -тестирования»,
URL: "test.html",
ShowClose: "1",
Статус: "1"
}
]
});
});
(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;
tabproto._deleteitem = function (item) {
var that = это;
this.getelem (). Найти (".
.eq (item ["index"])
.fadeOut (function () {
that._resetContent ();
that._updatestatus (item);
that._triggeritem (item ["index"] + 1);
that.getelem (). Find (". Title .Adder"). Trigger ("click");
});
};
tabproto._triggeritem = function (Далее) {
var nextStatus = this._getStatus (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._getstatus = function (index) {
var status = "";
$.
if (index == item ["index"]) {
статус += item ["status"];
вернуть ложь;
}
});
Статус возврата;
};
tabproto._updatestatus = function (item) {
var status = item ["status"];
item ["status"] = ("1" == Статус)? "0": "1";
};
tabproto.init = function () {
var that = это;
this.getelem (). Найти (".
.Text (" +" + this.getopts () ["buttontext"])
.on ("click", function () {
это._toggleconsolepanel (function () {
var root = that.getelem (). find (".. Консоль-панель"). empty ();
$.
if ("0" == item ["status"]) {
var elem = $ ("<div style = 'float: left';> </div>")
.data ("item", item)
.appendto (root);
$ ("<input type = 'radio' name = 'addMod' />").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]: проверено"). parent (). data ("item");
that._updatestatus (data);
that.getelem (). Find (". Title .Items Div"). EQ (DATA ["index"]). FADEIN (). Trigger ("Щелк");
that.getelem (). Find (". Title .Adder"). Trigger ("click");
})
.appendto (root);
}
еще{
root.text («нет элементов, чтобы добавить!»);
}
});
});
$.
item ["index"] = i;
это._render (item);
});
this.getelem (). Найти (".
.eq (0)
.trigger ("Щелкни"); // Предположим, что должен быть один, иначе плагин не будет иметь большого смысла!
};
tabproto._toggleconsolepanel = function (обратный вызов) {
this.getelem (). Найти (".. Консоль-панель"). slidetoggle (function () {
$ .isfunction (обратный вызов) && callback ();
});
};
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._render = function (data) {
var that = это;
var item = $ ("<div> </div>")
.Text (data ["text"])
.on ("click", function () {
that._setcurrent (data ["index"]);
that._getContent (data ["url"]). Dode (function (result) {
that._setContent (результат);
})
.fail (function () {
Бросьте новую ошибку («сетевая ошибка!»);
});
})
.appendto (this.getelem (). Find (". Title .Items")));
if ("1" == data ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("click", function () {
if (win.confirm ("Этот пункт будет удален?")) {
that._deleteitem (data);
вернуть ложь; // Остановить пузырьки
}
})
.appendto (item);
}
};
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;
};
ui.createtab = function (elem, opts) {
var tab = new Tab (elem, opts);
tab.init ();
Вернуть вкладку;
};
}) (jQuery);
(Iv), окончательное резюме
(1) Разумный анализ функциональных требований в объектно-ориентированном образе мышления.
(2), организуйте нашу логику плагина в классе.
(3) Непрерывно реконструировать приведенные выше примеры, как разумно реконструировать это? Не перепроектируйте, будьте спокойны. Рекомендуемый метод состоит в том, чтобы объединить дизайн процесса с объектно-ориентированным дизайном мышления.
(4) Подумайте о том, можно ли независимо классифицировать варианты в вкладке в отдельные классы в примере выше? Например, «элемент», а затем как изменить класс «вкладка»? Подумайте с вопросами. Полем Полем
Вышеуказанное - все содержание этой статьи. Мы продолжим улучшать этот плагин в будущем. Если вам нравится эта статья, пожалуйста, дайте мне большие пальцы.