Create modal component; Change the fieldset class to remove window. Other little changes...
This commit is contained in:
vinibiavatti
@@ -16,7 +16,7 @@
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Form</legend>
|
||||
Text.......: <input class="tui-input" value="text" /><br>
|
||||
Number.....: <input class="tui-input" type="number" value="25" /><br>
|
||||
|
||||
35
examples/modal.html
Normal file
35
examples/modal.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Modal Example</title>
|
||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body class="center">
|
||||
<div style="margin-top: 300px"></div>
|
||||
|
||||
<!-- Button -->
|
||||
<button class="tui-button tui-modal-button" data-modal="modal">◄ Click ►</button>
|
||||
|
||||
<!-- Overlap -->
|
||||
<div class="tui-overlap"></div>
|
||||
|
||||
<!-- Modal window -->
|
||||
<div id="modal" class="tui-modal">
|
||||
<div class="tui-window red-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="red-255 yellow-255-text">Alert</legend>
|
||||
This is an example of a modal window.
|
||||
<br><br>
|
||||
<div class="tui-divider"></div>
|
||||
<br>
|
||||
<button class="tui-button cyan-168 white-255-text tui-modal-close-button right" data-modal="modal">close</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,7 +13,7 @@
|
||||
<div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
|
||||
<div class="center" style="margin-top: 100px;">
|
||||
<div class="tui-window white-168">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend align="center">Pocket Calculator</legend>
|
||||
<input id="display" class="tui-input blue-168 white-255-text" style="text-align: right;" disabled value="872.9000" />
|
||||
<br><br>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Progress</legend>
|
||||
0% ............:
|
||||
<div class="tui-progress-bar inline-block valign-middle">
|
||||
|
||||
126
examples/register.html
Normal file
126
examples/register.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Register Example</title>
|
||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
ul li {
|
||||
display: inline-block;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered white-168 tui-bg-blue-black center">
|
||||
|
||||
<div class="tui-window full-width tui-no-shadow left-align">
|
||||
<fieldset class="tui-fieldset no-legend">
|
||||
<ul>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Tables</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Reports</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Print</a></li>
|
||||
<li><a class="white-255-hover black-text-hover cursor-pointer inline">Admin</a></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tui-window left-align" style="margin-top: 60px;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="white-255-text center">Register</legend>
|
||||
<div style="display: inline-block; width: 500px">
|
||||
<span class="yellow-255-text">N</span>umber.....:
|
||||
<input style="width: 100px" class="tui-input" type="number" value="106" /><br>
|
||||
<span class="yellow-255-text">D</span>ocument...:
|
||||
<input style="width: 150px" class="tui-input" value="1.504.00.1-00" /><br>
|
||||
<span class="yellow-255-text">F</span>irst Name.:
|
||||
<input style="width: 250px" class="tui-input" value="Robert" /><br>
|
||||
<span class="yellow-255-text">S</span>econd Name:
|
||||
<input style="width: 250px" class="tui-input" value="Munique Steffens" /><br>
|
||||
<span class="yellow-255-text">C</span>ity.......:
|
||||
<input style="width: 150px" class="tui-input" value="Blumenau" /><br>
|
||||
S<span class="yellow-255-text">t</span>ate......:
|
||||
<input style="width: 50px" class="tui-input" value="SC" /><br>
|
||||
C<span class="yellow-255-text">o</span>ntry.....:
|
||||
<input style="width: 100px" class="tui-input" value="Brazil" /><br><br>
|
||||
P<span class="yellow-255-text">h</span>one......:
|
||||
<input style="width: 200px" class="tui-input" value="(47) 3 3784-2134" /><br>
|
||||
F<span class="yellow-255-text">a</span>x........:
|
||||
<input style="width: 200px" class="tui-input" value="" /><br>
|
||||
E<span class="yellow-255-text">m</span>ail......:
|
||||
<input style="width: 250px" class="tui-input" value="robert@email.com" /><br><br>
|
||||
<span class="yellow-255-text">G</span>roup......:
|
||||
<select class="tui-input">
|
||||
<option>Awner</option>
|
||||
<option>Administrators</option>
|
||||
<option>Common Users</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 200px; vertical-align: top">
|
||||
<span>Locale</span>
|
||||
<div class="cyan-168">
|
||||
<label class="tui-radio black-255-text"> en-US
|
||||
<input type="radio" name="locale" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> pt-BR
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> ch-CH
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="locale">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>...Cod:</span><input style="width: 30px" class="tui-input">
|
||||
</div>
|
||||
<br><br>
|
||||
<span>Currency</span>
|
||||
<div class="cyan-168 black-255-text">
|
||||
<label class="tui-radio black-255-text"> USD
|
||||
<input type="radio" name="currency" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> R$
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio black-255-text"> none
|
||||
<input type="radio" name="currency">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
Registered at: 09/06/2019 09:38:00 PM
|
||||
</div>
|
||||
<br><br>
|
||||
<button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">d</span>el</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
|
||||
<button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
|
||||
<br><br>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tui-statusbar blue-255 white-255-text absolute left-align">
|
||||
<ul>
|
||||
<li><a>09/06/2019</a></li>
|
||||
<li><a>Service Orders Count: 2</a></li>
|
||||
<li><a>10:43:00 PM</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -43,8 +43,8 @@
|
||||
<br>
|
||||
<div>
|
||||
<span class="cyan-255-text">75% complete</span>
|
||||
<span class="tui-progress right tui-texturized-blue-black" style="width: 550px; ">
|
||||
<span style="width: 75%" class="yellow-255"></span>
|
||||
<span class="tui-progress-bar right tui-bg-blue-black" style="width: 550px; ">
|
||||
<span class="tui-progress" style="width: 75%" class="yellow-255"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<body class="center" style="padding: 50px">
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table</legend>
|
||||
<table class="tui-table" style="width: 700px">
|
||||
<thead>
|
||||
@@ -93,10 +93,10 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div><br>
|
||||
|
||||
<div class="tui-window" style="text-align: left;">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Table hover</legend>
|
||||
<table class="tui-table tui-table-hover" style="width: 700px">
|
||||
<thead>
|
||||
|
||||
135
examples/turbo-vision.html
Normal file
135
examples/turbo-vision.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Turbo Vision Example</title>
|
||||
<script src="plugins/jquery-3.4.1.min.js"></script>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered tui-bg-blue-black">
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="tui-nav absolute">
|
||||
<span class="tui-date" data-format="h:m:s"></span>
|
||||
<ul>
|
||||
<li class="tui-dropdown"><a class="red-168-text">≡</a></li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">F</span>ile
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">N</span>ew
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">O</span>pen...
|
||||
<span class="tui-shortcut">F3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>ave
|
||||
<span class="tui-shortcut">F2</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
S<span class="red-168-text">a</span>ve as...
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
Save a<span class="red-168-text">l</span>l
|
||||
</a>
|
||||
</li>
|
||||
<div class="tui-black-divider"></div>
|
||||
|
||||
<!-- SUBMENU EXAMPLE -->
|
||||
|
||||
<li class="tui-dropdown block">
|
||||
<span class="right">►</span>
|
||||
<span class="red-168-text">M</span>ore
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">C</span>hange dir...
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>rint
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">D</span>OS shell
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">Q</span>uit
|
||||
<span class="tui-shortcut">F10</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">E</span>dit
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">E</span>dit Styled
|
||||
</li>
|
||||
<li class="tui-dropdown">
|
||||
<span class="red-168-text">H</span>elp
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Edit panel -->
|
||||
<div class="tui-window full-width tui-no-shadow" style="margin-top: 20px;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">MYAPP.CPP</legend>
|
||||
<span class="tui-fieldset-button"><span class="green-255-text">↕</span></span>
|
||||
<span class="tui-fieldset-button left"><span class="green-255-text">■</span></span>
|
||||
<span class="tui-fieldset-statusbar-top right" style="margin-right: 50px">1</span>
|
||||
<span class="tui-fieldset-statusbar" style="margin-left: 50px;"> 1:1 </span>
|
||||
<textarea class="tui-textarea full-width" style="height: 493px; overflow: scroll;">#include <iostream>
|
||||
using namespace std;
|
||||
|
||||
int main()
|
||||
{
|
||||
cout << "Hello, World!";
|
||||
return 0;
|
||||
}</textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div class="tui-statusbar absolute">
|
||||
<ul>
|
||||
<li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F2</span> Save</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
|
||||
<li><a href="#!"><span class="red-168-text">Alt+F9</span> Compile</a></li>
|
||||
<span class="tui-statusbar-divider"></span>
|
||||
<li><a href="#!"><span class="red-168-text">F10</span> Menu</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -26,7 +26,7 @@
|
||||
<!-- Simple window -->
|
||||
<div class="info-text">Simple window</div>
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend>Window</legend>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
|
||||
Curabitur id vestibulum libero, id fermentum lorem.<br>
|
||||
@@ -45,7 +45,7 @@
|
||||
<!-- Scrool window -->
|
||||
<div class="info-text">Scrool window</div>
|
||||
<div class="tui-window white-168 black-255-text">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="white-255-text">Window</legend>
|
||||
<div style="overflow: scroll; height: 200px; width: 400px; white-space: nowrap;">
|
||||
<span class="tui-shadow">The Lorem Ipsum </span><br><br>
|
||||
@@ -74,7 +74,7 @@
|
||||
<!-- Fieldset features -->
|
||||
<div class="info-text">Fieldset features</div>
|
||||
<div class="tui-window orange-168 black-255-text">
|
||||
<fieldset class="tui-window-fieldset tui-border-solid white-border">
|
||||
<fieldset class="tui-fieldset tui-border-solid white-border">
|
||||
<legend class="center white-255-text">Window</legend>
|
||||
<button class="tui-fieldset-button left"><span class="green-255-text">↑</span></button>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
|
||||
@@ -98,7 +98,7 @@
|
||||
<!-- Item select -->
|
||||
<div class="info-text">Item select</div>
|
||||
<div class="tui-window purple-168">
|
||||
<fieldset class="tui-window-fieldset no-legend tui-border-solid" style="width: 300px">
|
||||
<fieldset class="tui-fieldset no-legend tui-border-solid" style="width: 300px">
|
||||
<ul>
|
||||
<li class="cyan-255-hover black-255-text-hover">
|
||||
<a href="#!">
|
||||
@@ -125,7 +125,7 @@
|
||||
<!-- Window textarea -->
|
||||
<div class="info-text">Window textarea</div>
|
||||
<div class="tui-window">
|
||||
<fieldset class="tui-window-fieldset">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">MYAPP.CPP</legend>
|
||||
<button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
|
||||
<button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
|
||||
|
||||
Reference in New Issue
Block a user