add tab.html
This commit is contained in:
张磊
parent
f42099af62
commit
0003183e14
|
|
@ -126,11 +126,13 @@ Nuclear._mixObj = function (obj) {
|
|||
for (; i < refLen; i++) {
|
||||
var ref = one._nuclearRef[i];
|
||||
ref.node = one.node.querySelector('*[data-nuclearId="' + ref._nuclearId + '"]');
|
||||
ref._nuclearRenderInfo.refreshPart = ref.node.querySelectorAll('*[nc-refresh]');
|
||||
ref._nuclearRenderInfo.parent = ref.node.parentNode;
|
||||
if (ref.onRefresh) ref.onRefresh();
|
||||
if (ref.installed) ref.installed();
|
||||
this._nuclearFixOne(ref)
|
||||
if (ref.node) {
|
||||
ref._nuclearRenderInfo.refreshPart = ref.node.querySelectorAll('*[nc-refresh]');
|
||||
ref._nuclearRenderInfo.parent = ref.node.parentNode;
|
||||
if (ref.onRefresh) ref.onRefresh();
|
||||
if (ref.installed) ref.installed();
|
||||
this._nuclearFixOne(ref)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tab</title>
|
||||
<style>
|
||||
.nuclear-tab-nav {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.nuclear-tab a {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
border: 2px solid rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.nuclear-tab .nuclear-tab-navActive {
|
||||
background: #c8c6c6;
|
||||
border: 2px solid #515050;
|
||||
border-bottom: none;
|
||||
-moz-border-radius: 5px 5px 0px 0px;
|
||||
-webkit-border-radius: 5px 5px 0px 0px;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.nuclear-tab-content > div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nuclear-tab-content .nuclear-tab-contentActive {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nuclear-tab-content {
|
||||
background-color: #c8c6c6;
|
||||
border: 2px solid #515050;
|
||||
min-height: 200px;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tabContainer"></div>
|
||||
<script src="../dist/nuclear.js"></script>
|
||||
<script type="text/javascript">
|
||||
var Tab = Nuclear.create({
|
||||
|
||||
onRefresh: function () {
|
||||
this.tabs = this.node.querySelectorAll('.nuclear-tab-nav a');
|
||||
var self = this;
|
||||
Nuclear.addEvent(this.tabs, "click", function () {
|
||||
self.option.selectedIndex = Nuclear.getNodeIndex(this);
|
||||
});
|
||||
},
|
||||
render: function () {
|
||||
var tpl = '<div class="nuclear-tab">\
|
||||
<div class="nuclear-tab-nav">';
|
||||
var content = "";
|
||||
this.option.tabs.map(function (tab, index) {
|
||||
var isSelected = this.option.selectedIndex === index;
|
||||
tpl += '<a class="' + (isSelected ? "nuclear-tab-navActive" : "") + '">' + tab.title + '</a>';
|
||||
content += '<div class="' + (isSelected ? "nuclear-tab-contentActive" : "") + '">' + tab.content + '</div>'
|
||||
}.bind(this));
|
||||
tpl += '</div>\
|
||||
<div class="nuclear-tab-content">'
|
||||
+content+
|
||||
'</div>\
|
||||
</div>';
|
||||
return tpl;
|
||||
}
|
||||
})
|
||||
new Tab({ tabs: [{ title: "tab-1", content: "tab1-content" }, { title: "tab-2", content: "tab2-content" }, { title: "tab-3", content: "tab3-content" }], selectedIndex: 0 }, "#tabContainer");
|
||||
</script>
|
||||
<a href="https://github.com/AlloyTeam/Nuclear" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="http://alloyteam.github.io/AlloyRenderingEngine/asset/img/github.png" alt="" />
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tab</title>
|
||||
<style>
|
||||
.nuclear-tab-nav {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.nuclear-tab a {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
border: 2px solid rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.nuclear-tab .nuclear-tab-navActive {
|
||||
background: #c8c6c6;
|
||||
border: 2px solid #515050;
|
||||
border-bottom: none;
|
||||
-moz-border-radius: 5px 5px 0px 0px;
|
||||
-webkit-border-radius: 5px 5px 0px 0px;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.nuclear-tab-content > div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nuclear-tab-content .nuclear-tab-contentActive {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nuclear-tab-content {
|
||||
background-color: #c8c6c6;
|
||||
border: 2px solid #515050;
|
||||
min-height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tabContainer"></div>
|
||||
<script src="../dist/nuclear.js"></script>
|
||||
<script type="text/javascript">
|
||||
var Tab = Nuclear.create({
|
||||
install: function () {
|
||||
this.helloMessage = new HelloMessage({ name: "Nuclear" });
|
||||
this.todoApp = new TodoApp({ items: [] });
|
||||
},
|
||||
installed: function () {
|
||||
|
||||
},
|
||||
onRefresh: function () {
|
||||
this.tabs = this.node.querySelectorAll('.nuclear-tab-nav a');
|
||||
var self = this;
|
||||
Nuclear.addEvent(this.tabs, "click", function () {
|
||||
self.option.selectedIndex = Nuclear.getNodeIndex(this);
|
||||
});
|
||||
},
|
||||
render: function () {
|
||||
var tpl = '<div class="nuclear-tab">\
|
||||
<div class="nuclear-tab-nav">';
|
||||
var content = "";
|
||||
this.option.tabs.map(function (tab, index) {
|
||||
var isSelected = this.option.selectedIndex === index;
|
||||
tpl += '<a class="' + (isSelected ? "nuclear-tab-navActive" : "") + '">' + tab.title + '</a>';
|
||||
|
||||
|
||||
if (isSelected) {
|
||||
index === 0 && (content = this.helloMessage.render());
|
||||
index === 1 && (content = this.todoApp.render());
|
||||
index === 2 && (content = tab.content);
|
||||
}
|
||||
}.bind(this));
|
||||
tpl += '</div>\
|
||||
<div class="nuclear-tab-content">\
|
||||
<div class="nuclear-tab-contentActive">' + content + '</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
return tpl;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
var HelloMessage = Nuclear.create({
|
||||
render: function () {
|
||||
return '<div>Hello , {{name}} !</div>';
|
||||
}
|
||||
})
|
||||
|
||||
var TodoApp = Nuclear.create({
|
||||
onRefresh: function () {
|
||||
this.form = this.node.querySelector("form");
|
||||
this.textBox = this.node.querySelector("input");
|
||||
this.form.addEventListener("submit", function (evt) {
|
||||
evt.preventDefault();
|
||||
this.option.items.push(this.textBox.value);
|
||||
}.bind(this), false);
|
||||
},
|
||||
render: function () {
|
||||
return '<div>\
|
||||
<h3>TODO</h3>\
|
||||
<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\
|
||||
<form >\
|
||||
<input type="text" />\
|
||||
<button>Add #{{items.length}}</button>\
|
||||
</form>\
|
||||
</div>';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
var tab= new Tab({ tabs: [{ title: "tab-1", content: "" }, { title: "tab-2", content: "" }, { title: "tab-3", content: "tab3-content" }], selectedIndex: 0 }, "#tabContainer");
|
||||
</script>
|
||||
<a href="https://github.com/AlloyTeam/Nuclear" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="http://alloyteam.github.io/AlloyRenderingEngine/asset/img/github.png" alt="" />
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -107,11 +107,13 @@ Nuclear._mixObj = function (obj) {
|
|||
for (; i < refLen; i++) {
|
||||
var ref = one._nuclearRef[i];
|
||||
ref.node = one.node.querySelector('*[data-nuclearId="' + ref._nuclearId + '"]');
|
||||
ref._nuclearRenderInfo.refreshPart = ref.node.querySelectorAll('*[nc-refresh]');
|
||||
ref._nuclearRenderInfo.parent = ref.node.parentNode;
|
||||
if (ref.onRefresh) ref.onRefresh();
|
||||
if (ref.installed) ref.installed();
|
||||
this._nuclearFixOne(ref)
|
||||
if (ref.node) {
|
||||
ref._nuclearRenderInfo.refreshPart = ref.node.querySelectorAll('*[nc-refresh]');
|
||||
ref._nuclearRenderInfo.parent = ref.node.parentNode;
|
||||
if (ref.onRefresh) ref.onRefresh();
|
||||
if (ref.installed) ref.installed();
|
||||
this._nuclearFixOne(ref)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue