├── 九宫格
├── logo.jpg
├── 如意九宫格.blp
├── index.html
└── grid.js
└── 图文列表
├── logo.jpg
├── 图文列表.blp
├── ilist.js
└── index.html
/九宫格/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodFrm/bbl/master/九宫格/logo.jpg
--------------------------------------------------------------------------------
/九宫格/如意九宫格.blp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodFrm/bbl/master/九宫格/如意九宫格.blp
--------------------------------------------------------------------------------
/图文列表/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodFrm/bbl/master/图文列表/logo.jpg
--------------------------------------------------------------------------------
/图文列表/图文列表.blp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodFrm/bbl/master/图文列表/图文列表.blp
--------------------------------------------------------------------------------
/九宫格/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
60 |
61 |
62 |
63 |
68 |
69 |
70 |
71 |
72 |
73 |
92 |
93 |
--------------------------------------------------------------------------------
/图文列表/ilist.js:
--------------------------------------------------------------------------------
1 | function 如意图文列表(name, event) {
2 | var el = document.getElementById(name);
3 | var ht = el.getElementsByClassName('header-title')[0];
4 | var items = el;
5 | //组件内部属性，仅供组件内部使用：
6 | this.名称 = name;
7 |
8 | //组件命令:
9 | this.添加 = function (图片, 标题, 左上, 右上) {
10 | var newItem = document.createElement('div');
11 | newItem.className = "item";
12 | newItem.innerHTML = '
' +
13 | (左上 != undefined && 左上 != '' ? '' : '') +
14 | '' + (右上 != undefined && 右上 != '' ? 右上 : '') + '
';
15 | items.appendChild(newItem);
16 | }
17 |
18 | //组件命令:
19 | this.清空 = function () {
20 | while (items.hasChildNodes()) {
21 | items.removeChild(items.firstChild);
22 | }
23 | }
24 |
25 | //组件命令:
26 | this.背景色 = function (color) {
27 | el.style.background = color;
28 | }
29 |
30 | //组件命令:
31 | this.删除 = function (index) {
32 | var item = items.getElementsByClassName('item');
33 | items.removeChild(item[index]);
34 | }
35 |
36 | //组件命令:
37 | this.取项目数 = function (index) {
38 | var item = items.getElementsByClassName('item');
39 | return item.length;
40 | }
41 |
42 | //组件命令：
43 | this.置可视 = function (value) {
44 | if (value == true) {
45 | var div = document.getElementById(this.名称).parentNode;
46 | div.style.display = ""; //显示，也可以设置为block
47 | } else {
48 | var div = document.getElementById(this.名称).parentNode;
49 | div.style.display = "none"; //不占位隐藏
50 | }
51 | document.getElementById().getAttribute
52 | }
53 |
54 | //组件命令：
55 | this.置可视2 = function (value) {
56 | if (value == true) {
57 | var div = document.getElementById(this.名称).parentNode;
58 | div.style.visibility = "visible"; //显示
59 | } else {
60 | var div = document.getElementById(this.名称).parentNode;
61 | div.style.visibility = "hidden"; //占位隐藏
62 | }
63 | }
64 |
65 | this.取标题 = function (index) {
66 | return index.getElementsByClassName('li-title')[0].innerText;
67 | }
68 |
69 | this.置标题 = function (index, str) {
70 | index.getElementsByClassName('li-title')[0].innerText = str;
71 | }
72 |
73 | this.取图片 = function (index) {
74 | return index.getElementsByClassName('item-bg')[0].getAttribute('src');
75 | }
76 |
77 | this.置图片 = function (index, img) {
78 | return index.getElementsByClassName('item-bg')[0].setAttribute('src', img);
79 | }
80 |
81 | //组件事件
82 | if (event != null) {
83 | el.addEventListener("tap", function (a) {
84 | ev(a);
85 | });
86 | el.addEventListener("click", function (a) {
87 | ev(a);
88 | });
89 |
90 | function ev(a) {
91 | a = a.target;
92 | if (a.className != 'item') {
93 | a = a.parentNode;
94 | }
95 | if (a.className != 'item') {
96 | a = a.parentNode;
97 | }
98 | if (a.className == 'item') {
99 | event(a);
100 | }
101 | }
102 | }
103 | }
--------------------------------------------------------------------------------
/九宫格/grid.js:
--------------------------------------------------------------------------------
1 | function 如意九宫格(name, event) {
2 | //name表示组件在被创建时的名称，event表示组件拥有的事件
3 | //如果组件有多个事件，可以在后面继续填写这些事件名称
4 | //例如：function 如意九宫格(name,event1,event2,event3){
5 | var el = document.getElementById(name);
6 | var ht = el.getElementsByClassName('header-title')[0];
7 | var items = el.getElementsByClassName('items')[0];
8 | //组件内部属性，仅供组件内部使用：
9 | this.名称 = name;
10 |
11 | //组件命令：
12 | this.置标题 = function (newTitle) {
13 | if (newTitle == '') {
14 | ht.style.display = 'none';
15 | el.style.borderTop = "0px";
16 | } else {
17 | ht.style.display = 'block';
18 | el.style.borderTop = "1px solid #ddd";
19 | }
20 | ht.innerHTML = newTitle;
21 | }
22 |
23 | //组件命令：
24 | this.取标题 = function () {
25 | return ht.innerHTML;
26 | }
27 |
28 | //组件命令:
29 | this.添加 = function (logo, 标题) {
30 | var newItem = document.createElement('div');
31 | newItem.className = "item";
32 | newItem.innerHTML = '
' + 标题 + '';
33 | items.appendChild(newItem);
34 | //移除前面第3个的底部边框
35 | var tmp = document.getElementsByClassName('item');
36 | //如果是第二个,加右边框
37 | if (tmp.length % 3 == 2) {
38 | newItem.style.borderRight = "1px solid #ddd";
39 | }
40 | if (tmp.length % 3 == 0) {
41 | tmp[tmp.length - 2].style.borderRight = '0px';
42 | }
43 | if (tmp.length < 3) {
44 | ht.style.borderBottom = "1px solid #ddd";
45 | } else {
46 | ht.style.borderBottom = "0px";
47 | tmp = tmp[tmp.length - 4];
48 | tmp.style.borderBottom = "0px";
49 | }
50 | }
51 |
52 | //组件命令:
53 | this.清空 = function () {
54 | while (items.hasChildNodes()) {
55 | items.removeChild(items.firstChild);
56 | }
57 | }
58 |
59 | //组件命令:
60 | this.背景色 = function (color) {
61 | el.style.background = color;
62 | }
63 |
64 | //组件命令:
65 | this.删除 = function (index) {
66 | var item = items.getElementsByClassName('item');
67 | items.removeChild(item[index]);
68 | }
69 |
70 | //组件命令:
71 | this.取项目数 = function (index) {
72 | var item = items.getElementsByClassName('item');
73 | return item.length;
74 | }
75 |
76 | //组件命令：
77 | this.置可视 = function (value) {
78 | if (value == true) {
79 | var div = document.getElementById(this.名称).parentNode;
80 | div.style.display = ""; //显示，也可以设置为block
81 | } else {
82 | var div = document.getElementById(this.名称).parentNode;
83 | div.style.display = "none"; //不占位隐藏
84 | }
85 | }
86 |
87 | //组件命令：
88 | this.置可视2 = function (value) {
89 | if (value == true) {
90 | var div = document.getElementById(this.名称).parentNode;
91 | div.style.visibility = "visible"; //显示
92 | } else {
93 | var div = document.getElementById(this.名称).parentNode;
94 | div.style.visibility = "hidden"; //占位隐藏
95 | }
96 | }
97 |
98 | //组件事件
99 | if (event != null) {
100 | el.addEventListener("tap", function (a) {
101 | ev(a);
102 | });
103 | el.addEventListener("click", function (a) {
104 | ev(a);
105 | });
106 |
107 | function ev(a) {
108 | a = a.target;
109 | if (a.className != 'item') {
110 | a = a.parentNode;
111 | }
112 | if (a.className == 'item') {
113 | console.log(a);
114 | event(a.getElementsByClassName('title')[0].innerText, a.getElementsByClassName('logo')[0].src);
115 | }
116 | }
117 | }
118 | }
--------------------------------------------------------------------------------
/图文列表/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
107 |
高清
108 |
111 |
112 |
113 |
114 |
117 |
高清
118 |
121 |
122 |
123 |
124 |
127 |
高清
128 |
131 |
132 |
133 |
134 |
137 |
高清
138 |
139 |
标题66666666666666666
140 |
141 |
142 |
144 |
145 |
146 |
147 |
148 |
149 |
166 |
167 |
--------------------------------------------------------------------------------