ax5ui-layout
Version:
A mediaViewer plugin that works with Bootstrap & jQuery
265 lines (233 loc) • 9.81 kB
HTML
<!--
~ Copyright (c) 2016. tom@axisj.com
~ - github.com/thomasjang
~ - www.axisj.com
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../dist/ax5layout.css"/>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/ax5core/dist/ax5core.js"></script>
<script src="../dist/ax5layout.js"></script>
<style>
html, body {
padding: 10px;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div data-ax5layout="ax2" data-config='{layout:"tab-panel"}' style="height:100%;">
<div data-tab-panel='{label: "Live Status", "active": "false"}' style="background: #eee;">
<div style="padding: 10px;">
<form data-form-id="oci-login-form">
<div class="form-group">
<label>TNS 이름</label>
<div class="row">
<div class="col-md-10">
<select class="form-control"></select>
</div>
<div class="col-md-2">
<button class="btn btn-default" type="button"><span class="sc sc-reload"></span></button>
</div>
</div>
</div>
<div class="form-group">
<label>사용자</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>암호</label>
<input type="password" class="form-control"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 유니코드 사용
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 암호저장
</label>
</div>
<div class="form-group">
<label>접속모드</label>
<select class="form-control inline"></select>
</div>
<div class="form-group">
<label>Oracle 홈</label>
<div class="row">
<div class="col-md-10">
<select class="form-control"></select>
</div>
<div class="col-md-2">
<button class="btn btn-default" type="button">
<span class="sc sc-folder-open"></span>
</button>
</div>
</div>
</div>
<div class="form-group">
<label>문자 집합</label>
<select class="form-control inline"></select>
</div>
<div class="form-group">
<label>날짜 형식</label>
<select class="form-control inline"></select>
</div>
<hr class="split" />
<button type="button" class="btn btn-primary btn-block" data-modal-tool="oci-test">접속테스트</button>
</form>
</div>
</div>
<div data-tab-panel='{label: "Social Network", "active": "false"}' style="background: #ccc;">
<div style="padding: 10px;">
<form data-form-id="oci-login-form">
<div class="form-group">
<label>TNS 이름</label>
<div class="row">
<div class="col-md-10">
<select class="form-control"></select>
</div>
<div class="col-md-2">
<button class="btn btn-default" type="button"><span class="sc sc-reload"></span></button>
</div>
</div>
</div>
<div class="form-group">
<label>사용자</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>암호</label>
<input type="password" class="form-control"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 유니코드 사용
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 암호저장
</label>
</div>
<div class="form-group">
<label>접속모드</label>
<select class="form-control inline"></select>
</div>
<div class="form-group">
<label>Oracle 홈</label>
<div class="row">
<div class="col-md-10">
<select class="form-control"></select>
</div>
<div class="col-md-2">
<button class="btn btn-default" type="button">
<span class="sc sc-folder-open"></span>
</button>
</div>
</div>
</div>
<div class="form-group">
<label>문자 집합</label>
<select class="form-control inline"></select>
</div>
<div class="form-group">
<label>날짜 형식</label>
<select class="form-control inline"></select>
</div>
<hr class="split" />
<button type="button" class="btn btn-primary btn-block" data-modal-tool="oci-test">접속테스트</button>
</form>
</div>
</div>
<div data-tab-panel='{label: "Social Network", "active": "true"}' style="background: #ccc;">
<div style="padding: 10px;">
<form data-form-id="oci-login-form">
<div class="form-group">
<label>TNS 이름</label>
<div class="row">
<div class="col-md-10">
<select class="form-control"></select>
</div>
<div class="col-md-2">
<button class="btn btn-default" type="button"><span class="sc sc-reload"></span></button>
</div>
</div>
</div>
<div class="form-group">
<label>사용자</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>암호</label>
<input type="password" class="form-control"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 유니코드 사용
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 암호저장
</label>
</div>
<div class="form-group">
<label>접속모드</label>
<select class="form-control inline"></select>
</div>
<div class="form-group">
<label>Oracle 홈</label>
<div class="row">
<div class="col-md-10">
<select class="form-control"></select>
</div>
<div class="col-md-2">
<button class="btn btn-default" type="button">
<span class="sc sc-folder-open"></span>
</button>
</div>
</div>
</div>
<div class="form-group">
<label>문자 집합</label>
<select class="form-control inline"></select>
</div>
<div class="form-group">
<label>날짜 형식</label>
<select class="form-control inline"></select>
</div>
<hr class="split" />
<button type="button" class="btn btn-primary btn-block" data-modal-tool="oci-test">접속테스트</button>
</form>
</div>
</div>
</div>
<script>
// todo : panel show & hide
jQuery(document.body).ready(function () {
jQuery('[data-ax5layout="ax2"]').ax5layout({
onResize: function () {
//console.log(this.$target);
//console.log(this);
},
onOpenTab: function () {
console.log(this);
}
});
//$('[data-ax5layout="ax2"]').ax5layout("tabOpen", 0);
console.log($('[data-ax5layout="ax2"]').ax5layout("getActiveTab"));
});
</script>
</body>
</html>