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

Merge pull request #4 from CMUCTAT/CTAT4_1

Ver Código-Fonte 
Modifed and cleaned up CTATGroupingComponent examples.
Esse commit está contido em:
Sandy Demi
2017-01-04 10:55:40 -05:00
commit de GitHub
pai 5341e6dfd7 825915dbab
commit 7f6e4f1b3f
2 arquivos alterados com 65 adições e 48 exclusões
Baixar Arquivo de Patch Baixar Arquivo de Diff Expandir todos os arquivos Colapsar todos os arquivos
Examples/CTATGroupingComponent-UseDiv.html
+32 -29
Ver Arquivo
@@ -5,19 +5,22 @@
<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://cdn.ctat.cs.cmu.edu/releases/latest/jquery.min.js"></script>
@@ -25,7 +28,7 @@ html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
<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
+33 -19
Ver Arquivo
@@ -5,8 +5,22 @@
<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://cdn.ctat.cs.cmu.edu/releases/latest/jquery.min.js"></script>
@@ -14,7 +28,7 @@ html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
<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;">