<html>
<head>
<meta charset="utf-8">
<title>example</title>
<link href="//cdn.bootcss.com/iview/2.0.0-rc.9/styles/iview.css" rel="stylesheet" type="text/css">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.min.js"></script>
<script src="//cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.1/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<div class="layout-ceiling">
<div class="layout-ceiling-main">
<a href="#">login</a> |
</div>
</div>
<i-Menu mode="horizontal" theme="dark">
<div class="layout-logo"></div>
<div class="layout-nav">
<Menu-item name="1">
<Icon type="wrench"></Icon>
setting
</Menu-item>
</div>
</i-Menu>
<div class="layout-content">
<Row>
<i-col span="2">
<i-Menu theme="light" width="auto" @on-select="showChassis">
<Menu-group title="manager">
<Menu-item v-for="index in num" :key="index" :name="index">
chassis_{{index}}
</Menu-item>
</Menu-group>
</i-Menu>
</i-col>
<i-col span="22">
<div class="layout-content-main">
<router-view name="view"></router-view>
</div>
</i-col>
</Row>
</div>
<div class="layout-copy">
<p>2016-2017 © ZK Technology Co., Ltd.</p>
</div>
<Back-top></Back-top>
</div>
</body>
<script>
Vue.component('my-table', {
template: '\
<div>\
<div :class = "[tableindex % 2 == 0 ? \'doorA\' : \'doorB\']"><strong>{{door}}</strong></div>\
<table>\
<my-tr v-for="index in 8" :key="index" :rowindex="index" :door="door"></my-tr>\
</table>\
</div>\
',
props:['door','tableindex'],
});
Vue.component('my-tr', {
template: '\
<tr>\
<td v-for="index in 20" :key="index" :door="door" :rowindex="rowindex">\
<my-progress :door="door" :rowindex="rowindex" :colindex="index"></my-progress>\
</td>\
</tr>\
',
props:['door','rowindex'],
});
Vue.component('my-progress', {
template: '\
<div class="progress progress-bar-vertical" data-toggle="tooltip" data-placement="top">\
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{height: pgvalue}">{{pgvalue}}\
</div>\
</div>\
',
data : function(){
return {
pgvalue : '50%',
intervalid1:'',
}
},
computed:{
changes : {
get : function(){
return this.pgvalue;
},
set : function(v){
this.pgvalue = v;
}
}
},
mounted : function(){
this.todo()
},
beforeDestroy () {
clearInterval(this.intervalid1)
},
methods : {
todo : function(){
this.intervalid1 = setInterval(function(){
this.changes = ((Math.random() * 100).toFixed(2))+'%';
console.log (this.changes);
}.bind(this), 3000);
}
},
})
const Chassis = {
template : '<div><my-table class="layout-content-main" v-for="(door,index) in doors" :key="index" :door="door" :tableindex="index"></my-table></div>',
data (){
return {
doors:['doorA', 'doorB'],
}
},
};
const routes = [
{ path: '/chassis/:id', components: {view : Chassis} }
];
const router = new VueRouter({
mode: 'history',
routes
});
var vm = new Vue({
router,
el: '#app',
data: {
num : 2, //left sider chassisNum
},
methods: {
showChassis : function(key) {
this.$router.push({ path: '/chassis/' + key })
},
},
});
</script>
</html>
.doorA {
color: red;
text-align: center;
font-size: 30px;
/* font-family: verdana;*/
font-weight: bold;
}
.doorB {
color: blue;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.progress-bar-vertical {
width: 50px;
/*width: 75px;*/
min-height: 100px;
display: flex;
align-items: flex-end;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
/*float: center;*/
}
.progress-bar-vertical .progress-bar {
width: 100%;
height: 0;
transition: height 0.6s ease;
transition: height 0.6s ease;
transition: height 0.6s ease;
}
table {
margin: 0 auto;
border: 1px solid #000;
width: 100%;
}
table td {
border: 1px solid #000;
text-align: center;
}
/*body {
font-family: Verdana;
font-size: 14px;
margin: 0;
}*/
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
background-image:url(/ico/logo.png);
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav{
width: 600px;
margin: 0 auto;
}
.layout-breadcrumb{
padding: 10px 15px 0;
}
.layout-content{
min-height: 200px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.layout-content-main{
padding: 10px;
}
.layout-copy{
text-align: center;
padding: 10px 0 20px;
color: #9ea7b4;
}
.layout-ceiling{
background: #464c5b;
padding: 10px 0;
overflow: hidden;
}
.layout-ceiling-main{
float: right;
margin-right: 15px;
}
.layout-ceiling-main a{
color: #9ba7b5;
}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |