1. Analisis pembukaan
Dalam dua artikel sebelumnya, kami terutama berbicara tentang cara mengembangkan plug-in di jQuery, dan cara menggabungkan desain proses dengan desain pemikiran yang berorientasi objek.
Bagaimana cara merancang plug-in? Kedua metode ini memiliki kelebihan dan kekurangannya sendiri untuk belajar dari kekuatan dan kelemahan masing -masing. Rangkaian artikel ini berorientasi pada pembelajaran, dan semua orang memutuskan cara menggunakan skenario spesifik. Jadi mulai dari artikel ini hari ini, kami akan menggunakan contoh untuk mengembangkan perpustakaan plug-in kami sendiri dari dangkal ke dalam. Hehehe, katakan lebih sedikit omong kosong, sampai ke intinya. Langsung pada rendering yang sebenarnya:
Anda bisa melihatnya. Ini adalah plugin tab. Kami mungkin menemukannya ketika kami membuat aplikasi satu halaman ("spa") setiap hari. Mari kita ambil contoh hari ini.
Kami membangun sistem berdasarkan struktur BS, yang akan terdiri dari beberapa modul, yang merupakan semua komponen dari sistem konstruksi. Melalui plug-in ini, kami dapat secara efektif mengelola modul kami
Mari kita analisis formulir pengalaman dan interaktivitas pengguna secara rinci di bawah ini.
(Ii), analisis kasus
(1) Pertama, tentukan apa yang dilakukan plugin ini. Mari kita lihat metode panggilan plug-in dan deskripsi parameter konfigurasi. Kode berikut:
Salinan kode adalah sebagai berikut:
bigbear.ui.createTab ($ ("#tab"), {
Buttontext: "Tambahkan Modul",
hasil: [
{
Teks: "Wizard Prompt",
URL: "Help.html",
Tunjukkan: "0",
Status: "1"
},
{
Teks: "Informasi Siswa",
URL: "info.html",
Tunjukkan: "1",
Status: "1"
},
{
Teks: "Klasifikasi Siswa",
URL: "Category.html",
Tunjukkan: "1",
Status: "1"
},
{
Teks: "Big Bear {{BB}}",
URL: "BB.html",
Tunjukkan: "1",
Status: "1"
},
{
Teks: "Modul Tes Beta",
URL: "test.html",
Tunjukkan: "1",
Status: "1"
}
]
});
"Bigbear.ui.createTab" berisi dua parameter. Yang pertama adalah objek DOM Node dan yang kedua adalah opsi parameter plug-in. "Buttontext" mewakili deskripsi teks dari tombol operasi di plug-in "tab".
"Hasil" adalah array yang berisi properti item tab, termasuk deskripsi teks, URL yang digunakan untuk memintanya saat mengklik item tab, "Showclose" mewakili apakah opsi tab menampilkan tombol tutup.
"Status" mewakili status opsi, yang merupakan status ON secara default, dan mungkin ada keadaan tertutup, yang dinyatakan sebagai: 1-terbuka dan 0-terbuka masing-masing.
(2) Apa fungsi yang terlibat?
Melalui parameter opsional, entri opsi yang relevan dihasilkan secara dinamis, sebagai berikut:
Salinan kode adalah sebagai berikut:
bigbear.ui.createTab ($ ("#tab"), {
Buttontext: "Tambahkan Modul",
hasil: [
{
Teks: "Analisis Kode Sumber JQuery",
URL: "Help.html",
Tunjukkan: "0",
Status: "1"
},
{
Teks: "Big Bear {{BB}}}",
URL: "BB.html",
Tunjukkan: "1",
Status: "1"
}
]
});
Efeknya adalah sebagai berikut:
Anda dapat dengan bebas menambahkan dan menghapus opsi entri, seperti yang ditunjukkan pada efek berikut:
Gambar di atas menunjukkan salah satu situasi ini. Ketika tidak ada modul, pesan akan diminta.
Ini adalah kasus kedua, dan yang sebelumnya dihapus dapat dipulihkan.
(Iii), kode lengkap untuk pembelajaran , kode ini telah diuji, termasuk struktur direktori dan file terkait.
(1), html
Salinan kode adalah sebagai berikut:
<body>
<div>
Big Bear {{bb}}-dxj ui ------ tab
</div>
<div>
<Div id = "tab">
<div>
<div>
+ Tambahkan informasi siswa
</div>
<div>
<!-<div> <span> x </span> Halaman selamat datang </div>
<div> <span> x </span> Manajemen Pengguna </div>
<verv> <span> x </span> Bigbear </div>->
</div>
</div>
<div>
</div>
<div>
<!-<div>
<span> <span> Nama: </span> <input type = "text"/> </div>
<div> <span> Catatan: </span> <textarea> </textarea> </div>
</div> <div> <input type = "tombol" value = "save"/> </div>
->
</div>
</div>
</div>
</body>
(2), kode file CSS
Salinan kode adalah sebagai berikut:
.dxj-ui-hd {
padding: 0px;
margin: 0 otomatis;
margin-top: 30px;
Lebar: 780px;
Tinggi: 60px;
Line-Height: 60px;
Latar belakang: #3385ff;
Warna: #FFFF;
Font-Family: "Microsoft Yahei";
Ukuran font: 28px;
Teks-Align: tengah;
font-weight: tebal;
}
.dxj-ui-bd {
padding: 0px;
margin: 0 otomatis;
Lebar: 778px;
Padding-top: 30px;
padding-bottom: 30px;
meluap: tersembunyi;
Perbatasan: 1px solid #3385ff;
}
.dxj-ui-bd #tab {
padding: 0px;
margin: 0 otomatis;
Lebar: 720px;
meluap: tersembunyi;
}
.dxj-ui-bd #tab .title {
Lebar: 720px;
meluap: tersembunyi;
Border-Bottom: 2px Solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
Lebar: 160px;
Tinggi: 32px;
Line-Height: 32px;
Latar Belakang: #DC143C;
Warna: #FFFF;
Font-Family: "Microsoft Yahei";
Ukuran font: 14px;
Teks-Align: tengah;
font-weight: tebal;
float: kiri;
kursor: pointer;
}
.dxj-ui-bd #tab .title .items {
Tinggi: 32px;
margin-kiri: 20px;
Lebar: 540px;
meluap: tersembunyi;
float: kiri;
}
.dxj-ui-bd #tab .title .items div {
padding: 0px;
margin-kiri: 10px;
Lebar: 96px;
Tinggi: 32px;
Line-Height: 32px;
Latar belakang: #3385ff;
Warna: #FFFF;
Font-Family: Arial;
font-size: 12px;
Teks-Align: tengah;
Posisi: kerabat;
float: kiri;
kursor: pointer;
}
.dxj-ui-bd #tab .title .items div span.del {
Lebar: 16px;
Tinggi: 16px;
Line-Height: 16px;
Tampilan: Blok;
Latar Belakang: #DC143C;
Posisi: Absolute;
Kanan: 0;
TOP: 0;
kursor: pointer;
}
.dxj-ui-bd #tab .content {
Lebar: 716px;
Padding-top: 30px;
meluap: tersembunyi;
Perbatasan: 2px Solid #3385ff;
Border-top: 0px;
Min-height: 130px;
Teks-Align: tengah;
}
.dxj-ui-bd #tab. Tabel konten {
margin: 0 otomatis;
}
.dxj-ui-bd #tab .content div.c {
Padding-top: 20px;
Padding-left: 20px;
Latar Belakang: #EEE;
Tinggi: 140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
margin-top: 10px;
Font-Family: Arial;
font-size: 12px;
}
.dxj-ui-bd #tab .console-panel {
Lebar: 716px;
Padding-top: 20px;
padding-bottom: 20px;
meluap: tersembunyi;
Perbatasan: 2px Solid #3385ff;
Border-top: 0px;
Border-Bottom: 2px Solid #3385ff;
Latar belakang: #FFF;
Tampilan: Tidak Ada;
}
.active {
font-weight: tebal;
}
(3), kode JS adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
$ (function () {
bigbear.ui.createTab ($ ("#tab"), {
Buttontext: "Tambahkan Modul",
hasil: [
{
Teks: "Wizard Prompt",
URL: "Help.html",
Tunjukkan: "0",
Status: "1"
},
{
Teks: "Informasi Siswa",
URL: "info.html",
Tunjukkan: "1",
Status: "1"
},
{
Teks: "Klasifikasi Siswa",
URL: "Category.html",
Tunjukkan: "1",
Status: "1"
},
{
Teks: "Big Bear {{BB}}",
URL: "BB.html",
Tunjukkan: "1",
Status: "1"
},
{
Teks: "Modul Tes Beta",
URL: "test.html",
Tunjukkan: "1",
Status: "1"
}
]
});
});
(function ($) {
var win = window;
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 itu = ini;
this.getelem (). find (". title .items div")
.eq (item ["index"])
.fadeout (function () {
itu._resetContent ();
that._updatestatus (item);
that._triggerItem (item ["index"] + 1);
that.getelem (). find (". judul .adder"). pemicu ("klik");
});
};
TabProto._TriggerItem = function (NEXT) {
var nextstatus = this._getstatus (next);
var item = this.geteLem (). find (". title .items div");
next = item.eq (NEXT);
if (next.size () && "1" == nextstatus) {// node dom berikutnya ada
next.trigger ("klik");
}
kalau tidak{
item.eq (0) .trigger ("klik");
}
};
tabproto._getstatus = function (index) {
status var = "";
$ .each (this.getopts () ["result"], function (i, item) {
if (index == item ["index"]) {
status += item ["status"];
mengembalikan false;
}
});
status pengembalian;
};
TABPROTO._UPDATESTATUS = function (item) {
status var = item ["status"];
item ["status"] = ("1" == status)? "0": "1";
};
tabproto.init = function () {
var itu = ini;
this.getelem (). find (". judul .adder")
.text (" +" + this.getopts () ["buttontext"])
.on ("klik", function () {
itu._toggleconsolepanel (function () {
var root = that.getElem (). find (". Console-panel"). kosong ();
$ .each (that.getopts () ["result"], function (i, item) {
if ("0" == item ["status"]) {
var elem = $ ("<div style = 'float: left';> </div>")
.data ("item", item)
.Appendto (root);
$ ("<input type = 'Radio' name = 'addmod' />").appendto(elem);
$ ("<span> </span>"). Teks (item ["teks"]). AppendTo (elem);
}
});
if (root.find ("div"). size ()) {
$ ("<input type = 'tombol' value = 'Tambahkan modul' style = 'margin-left: 20px'/>")
.on ("klik", function () {
var data = root.find ("input [type = radio]: checked"). parent (). data ("item");
that._updatestatus (data);
that.getelem (). find (". title .items div"). eq (data ["index"]). fadein (). pemicu ("klik");
that.getelem (). find (". judul .adder"). pemicu ("klik");
})
.Appendto (root);
}
kalau tidak{
root.text ("Belum ada item untuk ditambahkan!");
}
});
});
$ .each (this.getopts () ["result"], function (i, item) {
item ["index"] = i;
that._render (item);
});
this.getelem (). find (". title .items div")
.eq (0)
.trigger ("klik"); // Asumsikan bahwa harus ada satu, jika tidak plug-in tidak akan masuk akal!
};
TABPROTO._TOGGLECONSOLEPANEL = function (callback) {
this.getelem (). find (". console-panel"). slidetoggle (function () {
$ .isfunction (callback) && callback ();
});
};
TabProto._resetContent = function () {
this.getelem (). find (". content"). html ("");
};
TabProto._SetContent = function (html) {
this.getelem (). find (". content"). html (html);
};
tabproto._getContent = function (url) {
mengembalikan $ .Ajax ({
URL: URL
});
};
tabproto._render = function (data) {
var itu = ini;
var item = $ ("<div> </div>")
.text (data ["teks"])
.on ("klik", function () {
that._setCurrent (data ["index"]);
itu._getContent (data ["url"]). Done (function (hasil) {
that._setContent (hasil);
})
.fail (function () {
melempar kesalahan baru ("Kesalahan bersih!");
});
})
.Appendto (this.getelem (). find (". title .items")));
if ("1" == data ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("klik", function () {
if (win.confirm ("Apakah item ini dihapus?")) {
that._deleteItem (data);
mengembalikan false; // Hentikan gelembung
}
})
.Appendto (item);
}
};
TabProto._SetCurrent = function (index) {
var item = this.getelem (). find (". title .items div"). RemoveClass ("Active");
item.eq (indeks) .addclass ("aktif");
var contents = this.getElem (). find (". Content .c"). hide ();
konten.eq (index) .show ();
};
tabproto.getelem = function () {
kembalikan ini.elem;
};
tabproto.getopts = function () {
kembalikan ini.
};
ui.createTab = function (elem, opts) {
var tab = tab baru (elem, opts);
tab.init ();
Tab Return;
};
}) (jQuery);
(Iv), ringkasan akhir
(1) Analisis yang wajar dari persyaratan fungsional dalam cara berpikir yang berorientasi objek.
(2), atur logika plug-in kami dengan cara kelas.
(3) terus merekonstruksi contoh -contoh di atas, bagaimana cara merekonstruksinya secara wajar? Jangan merancang berlebihan, merasa nyaman. Metode yang disarankan adalah menggabungkan desain proses dengan desain berpikir yang berorientasi objek.
(4) Pikirkan apakah opsi dalam tab dapat secara independen diklasifikasikan ke dalam kelas terpisah dalam contoh di atas? Misalnya, "item", lalu bagaimana memodifikasi kelas "tab"? Pikirkan dengan pertanyaan. . .
Di atas adalah seluruh konten artikel ini. Kami akan terus meningkatkan plug-in ini di masa depan. Jika Anda menyukai artikel ini, tolong beri saya jempol.