jsdk-offical
Version:
JSDK is the most comprehensive TypeScript framework, like JDK.
157 lines (142 loc) • 3.95 kB
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-cache,no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>JSDK Example</title>
<link rel="shortcut icon" href="#" />
<script src="/jsdk/dist/jscore.js"></script>
<script src="/jsdk/dist/jsdk-config.js?_=25"></script>
</head>
<style>
.container div[id^="btn"],
div[id^="icon"],
div[id^="color"],
div[id^="sta"],
div[id^="size"],
div[id^="face"],
div[id^="bdg"],
div[id^="out"] {
display: inline-block;
}
.my-button button{
width: 200px;
height: 50px;
font-weight: 900;
color: white;
border: 1px solid black;
background: black;
}
.my-button button:hover{
color: black ;
background: white ;
}
</style>
<body>
<div class="container">
<hr>
<h5>Colors</h5>
<div id="color1"></div>
<div id="color2"></div>
<div id="color3"></div>
<div id="color4"></div>
<div id="color5"></div>
<div id="color6"></div>
<div id="color7"></div>
<div id="color8"></div>
<div id="color9"></div>
<div id="color10"></div>
<hr>
<h5>Outline Buttons</h5>
<div id="out1"></div>
<div id="out2"></div>
<div id="out3"></div>
<div id="out4"></div>
<div id="out5"></div>
<div id="out6"></div>
<div id="out7"></div>
<div id="out8"></div>
<div id="out9"></div>
<div id="out10"></div>
<hr>
<h5>States</h5>
<div id="sta1-1"></div>
<div id="sta1-2"></div>
<br />
<div id="sta2-1"></div>
<div id="sta2-2"></div>
<br />
<div id="sta3-1"></div>
<div id="sta3-2"></div>
<br />
<div id="sta4-1"></div>
<div id="sta4-2"></div>
<br />
<div id="sta5-1"></div>
<div id="sta5-2"></div>
<br />
<div id="sta6-1"></div>
<div id="sta6-2"></div>
<br />
<div id="sta7-1"></div>
<div id="sta7-2"></div>
<br />
<div id="sta8-1"></div>
<div id="sta8-2"></div>
<br />
<div id="sta9-1"></div>
<div id="sta9-2"></div>
<br />
<div id="sta10-1"></div>
<div id="sta10-2"></div>
<br />
<hr>
<h5>Sizes</h5>
<div id="sizes"></div>
<hr>
<h5>Square/Round/Pill/Shadow Button</h5>
<div id="face1"></div>
<div id="face2"></div>
<div id="face3"></div>
<div id="face4"></div>
<hr>
<h5>Icon Buttons</h5>
<div id="icon1"></div>
<div id="icon2"></div>
<div id="icon3"></div>
<div id="icon4"></div>
<hr>
<h5>Badge</h5>
<div id="bdg1"></div><br/><br/>
<div id="bdg2"></div><br/><br/>
<div id="bdg3"></div><br/><br/>
<div id="bdg4"></div><br/><br/>
<hr>
<h5>DropDown Buttons</h5>
<div id="dd1"></div>
<br />
<div id="dd2"></div>
<br />
<div id="dd3"></div>
<br />
<div id="dd4"></div>
<br />
<div id="dd5"></div>
<br />
<div id="dd6"></div>
<br />
<hr>
<h5>Custom Style</h5>
<div id="btn1"></div>
<hr>
<h5>Custom Vars</h5>
<div id="btn2"></div>
</div>
<script src="../../env.js"></script>
<script src="button-style.js"></script>
</body>
</html>