Tất cả bài báo. Bootstrap
Bước 1. Chuẩn bị nội dung HTML để tạo cấu trúc menu
- THIẾT KẾ WEB
- Photoshop
- Dreamweaver
- DW CS3
- DW CS4
- DW CS5
- DW CS6
- DW CC
- Fireworks
- LẬP TRÌNH WEB
- Lập trình HTML5
- Lập trình CSS3
- Lập trình PHP
- PHP Frameworks
- Zend
- Codeigniter
- Laravel
- CakePHP
- PHP Frameworks
- Lập trình ASP.NET
Bước 2. Sử dụng JQUERY để tạo menu Cây
Bước 3. Định nghĩa CSS cho menu Cây
Bước 4. thư viện bootstrap
Bước 5. JQUERY
- Thẻ
- thực đơn cây
- Tạo menu Cây
- Cách tạo thực đơn
- trình đơn khởi động
- Bootstrap
- JQUERY
Bootstrap Giá Bootstrap Xem [5803] Học thiết kế web giá rẻ
Bước 1. Chuẩn bị nội dung HTML để tạo cấu trúc menu
- THIẾT KẾ WEB
- Photoshop
- Dreamweaver
- DW CS3
- DW CS4
- DW CS5
- DW CS6
- DW CC
- Fireworks
- LẬP TRÌNH WEB
- Lập trình HTML5
- Lập trình CSS3
- Lập trình PHP
- PHP Frameworks
- Zend
- Codeigniter
- Laravel
- CakePHP
- PHP Frameworks
- Lập trình ASP.NET
Bước 2. Sử dụng JQUERY để tạo menu Cây
Bước 3. Định nghĩa CSS cho menu Cây
Bước 4. thư viện bootstrap
Bước 5. JQUERY
Angular Demo
Loading..
var ver = {
ng: '5.2.6'
};
System.config[{
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': '//unpkg.com/'
},
map: {
'app': './src',
'@angular/core': 'npm:@angular/core@' + ver.ng + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@' + ver.ng + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common@' + ver.ng + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler@' + ver.ng + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@' + ver.ng + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ver.ng + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http@' + ver.ng + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@' + ver.ng + '/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@' + ver.ng + '/bundles/forms.umd.js',
'rxjs': 'npm:rxjs@^5.5.2',
'rxjs/operators': 'npm:rxjs@^5.5.2/operators/index.js',
'tslib': 'npm:tslib/tslib.js',
'typescript': 'npm:typescript@2.4.2/lib/typescript.js',
'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0/bundles/ng-bootstrap.js'
},
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
}];
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/app.module.ts';
platformBrowserDynamic[].bootstrapModule[AppModule];
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { TreeViewComponent } from './tree-view.component';
@NgModule[{
declarations: [
AppComponent,
TreeViewComponent
],
imports: [
BrowserModule,
FormsModule,
NgbModule.forRoot[]
],
providers: [],
bootstrap: [AppComponent]
}]
export class AppModule { }
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
template: `
Collapse All
Expand All
Check All
Uncheck All
`,
styles: [`
`]
}]
export class AppComponent {
public treeData = [
{'ID': 1, 'NAME': 'ROOT_1'}, {'ID': 2, 'NAME': 'ROOT_2'},
{'ID': 3, 'NAME': 'ROOT_3', 'PARENT_ID': 2},
{'ID': 4, 'NAME': 'ROOT_4', 'PARENT_ID': 3},
{'ID': 5, 'NAME': 'ROOT_5', 'PARENT_ID': 4},
{'ID': 6, 'NAME': 'ROOT_6', 'PARENT_ID': 7},
{'ID': 7, 'NAME': 'ROOT_7'},
{'ID': 8, 'NAME': 'ROOT_8', 'PARENT_ID': 7},
{'ID': 9, 'NAME': 'ROOT_9', 'PARENT_ID': 7},
{'ID': 10, 'NAME': 'ROOT_10', 'PARENT_ID': 7},
{'ID': 11, 'NAME': 'ROOT_11', 'PARENT_ID': 7},
{'ID': 12, 'NAME': 'ROOT_12', 'PARENT_ID': 7},
{'ID': 13, 'NAME': 'ROOT_13'},
{'ID': 14, 'NAME': 'ROOT_14'},
{'ID': 15, 'NAME': 'ROOT_15', 'PARENT_ID': 4},
{'ID': 16, 'NAME': 'ROOT_16', 'PARENT_ID': 4},
{'ID': 17, 'NAME': 'ROOT_17', 'PARENT_ID': 16},
{'ID': 18, 'NAME': 'ROOT_18', 'PARENT_ID': 16},
{'ID': 19, 'NAME': 'ROOT_19', 'PARENT_ID': 18},
{'ID': 20, 'NAME': 'ROOT_20', 'PARENT_ID': 2},
{'ID': 21, 'NAME': 'ROOT_21', 'PARENT_ID': 2},
{'ID': 22, 'NAME': 'ROOT_22', 'PARENT_ID': 3},
{'ID': 23, 'NAME': 'ROOT_23', 'PARENT_ID': 3},
{'ID': 24, 'NAME': 'ROOT_24', 'PARENT_ID': 3},
{'ID': 25, 'NAME': 'ROOT_25', 'PARENT_ID': 4},
{'ID': 26, 'NAME': 'ROOT_26', 'PARENT_ID': 18}
];
public collapseAll: boolean;
public selectAll: boolean;
click[node: any]{
console.log[node];
}
onChange[data]{
console.log[data];
}
}
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
/**
* The NgbTreeview a simple way to create tree view in html.
*/
@Component[{
selector: 'app-tree-view',
template: `
-
>
●
{{node.NAME}}
`,
styles: [`
.treeview {
list-style-type: none;
}
.treeview .parent {
font-weight: bold;
cursor: pointer;
}
.treeview span {
display: inline-block;
}
.treeview .node-opened {
transform: rotate[90deg];
}
`]
}]
export class TreeViewComponent implements OnInit {
private _collapseAll: boolean;
private _selectAll: boolean;
public nodes: any[] = [];
public collapseAttr: string = 'isCollapsed';
public selectAttr: string = 'isSelected';
public inDeterminateAttr: string = 'isIndeterminate';
/**
* Providen data for tree.
*/
@Input['data'] data: any[];
/**
* A flag indicating data is flatten in array and prepare is required.[Default
* is true].
*/
@Input['prepareData'] prepareData: boolean = true;
/**
* Name of ID property in input data.
*/
@Input['idAttr'] idAttr: string = 'ID';
/**
* Name of parent property in input data.
*/
@Input['parentAttr'] parentAttr: string = 'PARENT_ID';
/**
* Name of children list property in input data.
*/
@Input['childrenAttr'] childrenAttr: string = 'CHILDREN';
/**
* Collapse or expand all parent nodes.
*/
@Input['collapseAll']
set collapseAll[value: boolean] {
this._collapseAll = value;
this._recursiveEdit[
this.nodes, this.childrenAttr, this.collapseAttr, value];
}
/**
* Select or deselect all nodes.
*/
@Input['selectAll']
set selectAll[value: boolean] {
this._selectAll = value;
this._recursiveEdit[this.nodes, this.childrenAttr, this.selectAttr, value];
this._recursiveEdit[
this.nodes, this.childrenAttr, this.inDeterminateAttr, false];
}
/**
* When change a node model this event will be emit.
*/
@Output[] onChange = new EventEmitter[];
/**
* On click node.
*/
@Output[] onClick = new EventEmitter[];
constructor[] {}
ngOnInit[] {
// Clone input data for protect.
const cloned = this.data.map[x => Object.assign[[], x]];
// If data is flat, prepare data with recursive function.
this.nodes = this.prepareData ? this._getPreparedData[cloned] : this.data;
}
onModelChange[node] {
if [node[this.childrenAttr].length] {
this._recursiveEdit[
[node], this.childrenAttr, this.selectAttr, node[this.selectAttr]];
}
this.onChange.emit[node];
}
click[node: any] {
if [node[this.childrenAttr].length] {
node[this.collapseAttr] = !node[this.collapseAttr]
}
this.onClick.emit[node];
}
change[value: any] {
const parent = this.nodes.filter[
[item] => {return item.ID === value[this.parentAttr]}][0];
if [parent] {
let hasDifferent = false, duplicate = {},
isIndeterminate = value[this.inDeterminateAttr] || false;
parent[this.childrenAttr].forEach[[item] => {
duplicate[item[this.selectAttr]] =
[duplicate[item[this.selectAttr]] || 0] + 1;
if [item[this.inDeterminateAttr]] {
isIndeterminate = true;
}
}];
if [Object.keys[duplicate].length === 1 && !isIndeterminate] {
parent[this.inDeterminateAttr] = false;
parent[this.selectAttr] = JSON.parse[Object.keys[duplicate][0]];
this.onChange.emit[parent];
} else {
parent[this.inDeterminateAttr] = true;
this.onChange.emit[parent];
}
}
}
private _recursiveEdit[list, childrenAttr, attr, value] {
if [Array.isArray[list]] {
for [let i = 0, len = list.length; i < len; i++] {
list[i][attr] = value;
if [list[i][childrenAttr].length] {
this._recursiveEdit[list[i][childrenAttr], childrenAttr, attr, value];
}
}
}
}
private _getPreparedData[list] {
let tree = [], lookup = {};
for [let i = 0, len = list.length; i < len; i++] {
lookup[list[i][this.idAttr]] = list[i];
list[i][this.childrenAttr] = [];
list[i][this.collapseAttr] = true;
list[i][this.selectAttr] = false;
list[i][this.inDeterminateAttr] = false;
}
for [let i = 0, len = list.length; i < len; i++] {
if [list[i][this.parentAttr]] {
lookup[list[i][this.parentAttr]][this.childrenAttr].push[list[i]];
} else {
tree.push[list[i]];
}
}
return tree;
};
}