ax5ui / ax5ui-docker Goto Github PK
View Code? Open in Web Editor NEWhttp://ax5.io/ax5ui-docker/
License: MIT License
http://ax5.io/ax5ui-docker/
License: MIT License
패널 탭라벨에 드래그 over했을때 CSS 효과수정. (이쁘게)
{
onResize: function(){
// 이정도
}
}
// todo : row > stack 구현 -- ok
// todo : stack 패널 active change -- ok
// todo : 패널삭제하기 -- ok ~ active 패널 정리.. -- ok
// todo : 패널추가하기 -- ok
// todo : 패널 스플릿 리사이즈 -- ok
// todo : stack tab overflow 처리. -- ok
// todo : 탭 포커싱와 탭 목록 메뉴 처리 -- ok
// todo : 패널 drag & drop -- ok
// todo : update panels -- ok (setPanels)
myDocker.setConfig({
target: $('[data-ax5docker="docker1"]'),
icons: {
close: '<i class="fa fa-times" aria-hidden="false"></i>',
more: '<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>'
},
panels: [
{
type: "stack", // type : row, column, stack
panels: [
{
type: "panel",
name: "지도",
moduleName: "content",
moduleState: {
data1: "지도입니다.1",
data2: "지도입니다.2",
data3: "지도입니다.3"
}
}
]
}
],
disableClosePanel: false,
disableDragPanel: true,
control: {
before: function (that, callback) {
if (that.controlType === "destroy") {
if (confirm("삭제 하시겠습니까?")) {
setTimeout(function () {
callback();
}, 300);
return;
}
} else {
callback();
return;
}
}
}
});
myDocker.onResize = function (e) {
console.log(e);
};
myDocker.addModule({
"content": {
init: function (container, state) {
container["$element"].html(JSON.stringify(state)); },
active: function (container, state) {
// console.log(state, "active");
},
deactive: function (container, state) {
// console.log(state, "deactive");
},
destroy: function (container, state) {
// console.log(state, "destroy");
}
}
});
myDocker.repaint(); // play docker
이렇게 구성한 docker에서
myDocker.addPanel('0.0', 'stack', {type:'panel', name:menuNm, moduleName: 'content'});
위와 같이 패널을 추가 했을 경우 active상태가 첫번째 패널에 고정 됩니다.
안녕하세요. 또 문의 드립니다.
docker를 이용하여 탭페이지처럼 구성하고 있습니다.
예를 들어
1번탭은 고정탭입니다.
1번탭에서 상세보기를 클릭 하면 2번탭에 상세보기화면을 띄우고 있습니다.
2번탭이 생성되어 있지 않은 경우에는 myDocker.addPanel('0.0', 'stack', {type:'panel', name:menuNm, moduleName: 'content', active: true}); 와 같이 처리 하 때문에 상관 없지만
2번탭이 이미 생성 되어 있는 경우에
1번탭에서 상세보기를 클릭 하면 2번탭에 상세보기 화면을 갱신 하는데 까지는 문제가 없으나 2번탭을 활성화 할 수 없습니다.
그래서 changeActiveStackPanel을 사용 해 보려 했으나 myDocker.changeActiveStackPanel()로 해도
myDocker.changeActiveStackPanel은 function이 아니라거나 define되지 않았다고 합니다.
1번탭(패널) 안에서 버튼클릭으로 2번탭(다른 패널)를 활성화 시킬 수 있는 방법이 있을까요?
냉무
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.