1. Вступительный анализ
Всем привет! В первых двух статьях мы в основном говорим о том, как разрабатывать плагины в «jQuery's Way» и как разработать плагин, объединяя дизайн процесса с объектно-ориентированным дизайном мышления. Оба метода имеют свои плюсы и минусы, чтобы учиться на своих сильных и слабых сторонах. Хе -хе, давайте поговорим меньше глупости и доймся до сути. Прямо на фактических визуализациях:
Вы можете увидеть это. Это плагин с раскрывающимся меню. В нашем ежедневном развитии система может иногда заставлять нас чувствовать, что она не очень красива и имеет ограниченные функции, заставляя пользователей
Форма опыта и интерактивность пользователя не очень хороши, поэтому сегодня я имирую хе -хе -хе. Давайте подробно проанализируем это ниже.
(Ii), анализ случая
(1) Во -первых, определите, что делает этот плагин. Давайте посмотрим на метод вызова плагина и описание параметра конфигурации. Следующий код:
Кода -копия выглядит следующим образом:
$ (function () {
var itemselector = new itemselector ($ ("#item-selector"), {
CurrentText: «Пожалуйста, выберите элемент»,
предметы: [
{
Текст: "JavaScript",
Значение: "JS",
инвалид: "1"
},
{
Текст: "CSS",
Значение: "CSS",
инвалид: "0"
},
{
Текст: "html",
значение: "html",
инвалид: "0"
}
],
Режим: "0", // Когда "1", он поддерживает режим выбора флажки
изменение: функция (значение) {
// Поместите свой код сюда
}
});
itemelector.init ();
settimeout (function () {
console.log (itemlector.getCurrentValue ()); // тестирование, чтобы сначала получить выбранный элемент
}, 2000);
«var exectionelector = new emiteselector ()» содержит два параметра. Первый-это объект узла DOM, а второй-параметр плагина. «CurrentText» представляет текстовое описание области отображения текста в подключателе «Etemerelector».
«Элементы» - это массив, содержащий свойства элемента «элементы», включая описание текста, значение опции, «отключенное» представляет собой визиблентность ввода списка, 0 представляет дисплей и 1 представляет не отображать.
«Изменение» представляет функцию обратного вызова операции при выборе, и данные опции будут возвращены в форме параметров.
(2) Каковы функции?
Визуализации, которые могут отображаться следующие:
Визуализации, которые не могут быть отображены, следующие:
Разница между ними состоит в том, что данные о неразяшенных состояниях не будут возвращены, и при плавание не будет никакого влияния.
3) Полный код для обучения. Этот код был протестирован, включая структуру каталогов и связанные с ними файлы.
(1), HTML
Кода -копия выглядит следующим образом:
<тело>
<div>
Big Bear {{bb}}-dxj ui ------ emiterselector
</div>
<div>
<div id = "item-selector">
<div>
<div> </div> <pan> ↓ </span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
(2), CSS
Кода -копия выглядит следующим образом:
/ * item-selector */
#item-selector {
Поле: 0 Авто;
Ширина: 220px;
переполнение: скрыто;
Граница: 2PX SOLID #CCC;
}
#item-selector .title {
Пограничный подвод: 1PX SOLID #CCC;
переполнение: скрыто;
}
#item-selector .title div {
Ширина: 190px;
граница: 0px;
Цвет:#999;
Семейство шрифта: ариальная;
размер шрифта: 14px;
Высота: 28px;
высота линии: 28px;
Плавание: осталось;
курсор: указатель;
}
#item-selector .title span {
дисплей: блок;
Высота: 30px;
высота линии: 30px;
Ширина: 29px;
Плавание: осталось;
Текст-альбом: Центр;
РЕМЖА СЛЕДУ: 1PX SOLID #CCC;
курсор: указатель;
}
#item-selector .content {
Ширина: 220px;
переполнение: скрыто;
}
#item-selector .content .items {
переполнение: скрыто;
}
#item-selector .content .items div {
Лебь накладки: 20px;
Ширина: 200px;
Высота: 32px;
высота линии: 32px;
Фондовая семья: «Microsoft Yahei»;
размер шрифта: 14px;
шрифт-вес: жирный шрифт;
курсор: указатель;
}
.Item-Hover {
Фон:#3385ff;
Цвет: #ffff;
}
(3), "itemlector.js"
Кода -копия выглядит следующим образом:
Функция electionelector (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var iSproto = itemselector.protototype;
Isproto.getelem = function () {
вернуть это.elem;
};
Isproto.getopts = function () {
вернуть это.opts;
};
/* Манип данных*/
Isproto._setcurrent = function (current) {
this.getopts () ["current"] = current;
};
Isproto.getCurrentValue = function (current) {
вернуть это.getopts () ["current"];
};
/* Манип данных*/
Isproto.init = function () {
var that = это;
this.getopts () ["current"] = null; // курсор данных
this._setitemvalue (this.getopts () ["currentText"]);
var letsElem = this.getElem (). Найти (". Content .Items");
this.getelem (). Найти (". заголовок div"). On ("click", function () {
itemselem.toggle ();
});
this.getelem (). Найти (". заголовок"). On ("click", function () {
itemselem.toggle ();
});
$.
item ["id"] = (new date (). gettime ()). toString ();
это._render (item);
});
};
Isproto._setitemvalue = function (value) {
this.getelem (). Найти (". заголовок div"). Text (value)
};
Isproto._render = function (item) {
var that = это;
var itemelem = $ ("<div> </div>")
.text (item ["text"])
.attr ("id", item ["id"]);
if ("0" == item ["отключен"]) {
itemelem.on ("click", function () {
var onChange = that.getOpts () ["изменение"];
that.getelem (). Найти (". Content .Items"). Hide ();
that._setitemvalue (item ["text"]);
that._setcurrent (item);
Onchange && onchange (item);
})
.mouseOver (function () {
$ (this) .AdDClass ("Hover");
})
.mouseOut (function () {
$ (this) .RemoveClass ("Hover");
});
}
еще{
itemelem.css ("color", "#ccc"). On ("click", function () {
that.getelem (). Найти (". Content .Items"). Hide ();
that._setitemvalue (item ["text"]);
});
}
itemelem.appendto (this.getelem (). find (". content .items")));
};
(Iv), окончательное резюме
(1) Разумный анализ функциональных требований в объектно-ориентированном образе мышления.
(2), организуйте нашу логику плагина в классе.
(3) Непрерывно реконструировать приведенные выше примеры, как разумно реконструировать это? Не перепроектируйте, будьте спокойны. Рекомендуемый метод состоит в том, чтобы объединить дизайн процесса с объектно-ориентированным дизайном мышления.
(4) Следующая статья будет расширять связанные функции, такие как свойство «Режим». Когда это «1», он поддерживает режим многопользования флажки, но теперь это только раскрывающийся режим по умолчанию.
Эта статья сначала здесь, и мы продолжим обсуждать ее позже. Я надеюсь, что вы сможете насладиться этой серией статей.