wellton/CTAT
1
0
Fork 0
Código Issues Pull Requests Ações Pacotes Projetos Versões Wiki Atividade

Modifed and cleaned up CTATGroupingComponent examples.

Ver Código-Fonte
Esse commit está contido em:
Ringenberg
2016-09-26 11:54:26 -04:00
pai 26d49389d1
commit 4eaa4c4780
2 arquivos alterados com 67 adições e 50 exclusões
Baixar Arquivo de Patch Baixar Arquivo de Diff Expandir todos os arquivos Colapsar todos os arquivos
Examples/CTATGroupingComponent-UseDiv.html
+33 -30
Ver Arquivo
@@ -5,27 +5,30 @@
<link rel="stylesheet" href="css/ctat_example.css"/>
<style>
html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.centered
{
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
.row {
display: table;
margin: 2px;
width: 500px;
height: 30px;
border: 0px solid black;
}
.text {
display: table-cell; width: 250px; height: 25px;
}
.input {
display: table-cell; width: 250px; height: 25px;
}
.input>input[type="text"] {
background-color: white;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctat.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctatloader.js"></script>
<script>
useDebugging=true;
//useDebugging=true;
var myVars =
{
@@ -41,28 +44,28 @@ html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
</head>
<body>
<div id="container" class="centered" style="display: table; width:550px; height:450px; border: 1px solid black; border-spacing: 2px;">
<div id="container" class="tutor_window" style="display: table; width: 550px; background-color: initial;">
<div style="display: table-row; width: 100%; height:100%;">
<div style="width: 100%; height:300px; border: inset; overflow-x: hidden; overflow-y: scroll;">
<div id="row1" class="CTATGroupingComponent" data-ctat-use-componentlist="false" style="background: #eeeeee; display: table; margin: 2px; width: 500px; height: 30px; border: 0px solid black;">
<div id="text1" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input1" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="row1" class="CTATGroupingComponent row">
<div id="text1" class="CTATTextField text"></div>
<div id="input1" class="CTATTextInput input"></div>
</div>
<div id="row2" class="CTATGroupingComponent" data-ctat-use-componentlist="false" style="background: #eeeeee; visibility: hidden; display: table; margin: 2px; width: 500px; height: 30px; border: 0px solid black;">
<div id="text2" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input2" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="row2" class="CTATGroupingComponent row">
<div id="text2" class="CTATTextField text" style="visibility: hidden;"></div>
<div id="input2" class="CTATTextInput input" style="visibility: hidden;"></div>
</div>
<div id="row3" class="CTATGroupingComponent" data-ctat-use-componentlist="false" style="background: #eeeeee; visibility: hidden; display: table; margin: 2px; width: 500px; height: 30px; border: 0px solid black;">
<div id="text3" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input3" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="row3" class="CTATGroupingComponent row">
<div id="text3" class="CTATTextField text" style="visibility: hidden;"></div>
<div id="input3" class="CTATTextInput input" style="visibility: hidden;"></div>
</div>
<div id="row4" class="CTATGroupingComponent" data-ctat-use-componentlist="false" style="background: #eeeeee; visibility: hidden; display: table; margin: 2px; width: 500px; height: 30px; border: 0px solid black;">
<div id="text4" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input4" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="row4" class="CTATGroupingComponent row">
<div id="text4" class="CTATTextField text" style="visibility: hidden;"></div>
<div id="input4" class="CTATTextInput input" style="visibility: hidden;"></div>
</div>
<div id="row5" class="CTATGroupingComponent" data-ctat-use-componentlist="false" style="background: #eeeeee; visibility: hidden; display: table; margin: 2px; width: 500px; height: 30px; border: 0px solid black;">
<div id="text5" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input5" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="row5" class="CTATGroupingComponent row">
<div id="text5" class="CTATTextField text" style="visibility: hidden;"></div>
<div id="input5" class="CTATTextInput input" style="visibility: hidden;"></div>
</div>
</div>
</div>
Examples/CTATGroupingComponent-UseList.html
+34 -20
Ver Arquivo
@@ -5,16 +5,30 @@
<link rel="stylesheet" href="css/ctat_example.css"/>
<style>
html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.row {
display: table;
margin: 2px;
width: 500px;
height: 30px;
border: 0px solid black;
}
.text {
display: table-cell; width: 250px; height: 25px;
}
.input {
display: table-cell; width: 250px; height: 25px;
}
.input>input[type="text"] {
background-color: white;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctat.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctatloader.js"></script>
<script>
useDebugging=true;
//useDebugging=true;
var myVars =
{
@@ -30,33 +44,33 @@ html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
</head>
<body>
<div id="container" class="centered" style="display: table; width:550px; height:450px; border: 1px solid black; border-spacing: 2px;">
<div id="container" class="tutor_window" style="display: table; width:550px; background-color: initial;">
<div style="display: table-row; width: 100%; height:100%;">
<div style="width: 100%; height:300px; border: inset; overflow-x: hidden; overflow-y: scroll;">
<div id="row1" class="CTATGroupingComponent" data-ctat-use-componentlist="true" data-ctat-componentlist="text1,input1">
<div id="row1" class="CTATGroupingComponent" data-ctat-componentlist="text1,input1">
</div>
<div id="text1" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input1" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="text1" class="CTATTextField text"></div>
<div id="input1" class="CTATTextInput input"></div>
<div id="row2" class="CTATGroupingComponent" data-ctat-use-componentlist="true" data-ctat-componentlist="text2,input2">
<div id="row2" class="CTATGroupingComponent" data-ctat-componentlist="text2,input2">
</div>
<div id="text2" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input2" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="text2" class="CTATTextField text"></div>
<div id="input2" class="CTATTextInput input"></div>
<div id="row3" class="CTATGroupingComponent" data-ctat-use-componentlist="true" data-ctat-componentlist="text3,input3">
<div id="row3" class="CTATGroupingComponent" data-ctat-componentlist="text3,input3">
</div>
<div id="text3" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input3" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="text3" class="CTATTextField text"></div>
<div id="input3" class="CTATTextInput input"></div>
<div id="row4" class="CTATGroupingComponent" data-ctat-use-componentlist="true" data-ctat-componentlist="text4,input4">
<div id="row4" class="CTATGroupingComponent" data-ctat-componentlist="text4,input4">
</div>
<div id="text4" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input4" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="text4" class="CTATTextField text"></div>
<div id="input4" class="CTATTextInput input"></div>
<div id="row5" class="CTATGroupingComponent" data-ctat-use-componentlist="true" data-ctat-componentlist="text5,input5">
<div id="row5" class="CTATGroupingComponent" data-ctat-componentlist="text5,input5">
</div>
<div id="text5" class="CTATTextField" style="display: table-cell; width: 250px; height: 25px; border: 0px solid red; "></div>
<div id="input5" class="CTATTextInput" style="display: table-cell; background: #ffffff; width: 250px; height: 25px; border: 0px solid red;"></div>
<div id="text5" class="CTATTextField text"></div>
<div id="input5" class="CTATTextInput input"></div>
</div>
</div>
<div style="display: table-row; height: 125px;">