장기간 순례자, 첫 번째 포스터. 나는 내 고객 중 하나의 제품의 제어판을 모방 특정 기능과 상호 작용하는 인터넷 기반 GUI를 만들려고 해요,하지만 정확히을 할 점점 많은 행운이 없었어요같은 행에서 강조 표시된 텍스트 필드의 행 선택 및 강조 표시
무엇 내가 원하는. 그 대답은 저 밖에 있다는 것을 압니다. 너무 성숙하지 않고 성취하려는 것을 설명하기 위해 최선을 다할 것입니다. 정말로, 그러나, 포크를 조사하는 것은 단지 그것을 가장 잘 설명한다.
내가 원하는 것은 사용자가 디스플레이에서 행을 선택할 수있게하는 것입니다.이 경우에는 "디스플레이"가 html/css 버튼을 사용하여 정렬되지 않은 목록으로 렌더링됩니다. 그 외에도 텍스트 상자의 값을 늘리거나 줄이기를 원합니다. 키커가 있습니다. 텍스트 상자가 강조 표시 될 때만 값을 늘리거나 줄이기를 원합니다. 내가 가지고있는 문제는 각 텍스트 상자를 늘리거나 줄일 수 없다는 것입니다. 나는 오직 첫 번째 것을 바꿀 수있다. 바라기를 그 설명이 충분히 명확하지만, 제발, Plunker 최고의 이해를 확인해보십시오. 당신이 그것을 볼 때 훨씬 더 명확해질 것입니다.
나는 많은 다른 초안/버전을 만들었으며 테이블을 사용해 보았지만 이것이 가장 가까이에 있습니다. 이제 나는 고비를 극복해야합니다. 나는 완전히 다른 방식으로 이것을 열어두고 있지만, 이것을 얻으려면 여기저기서 비틀기가 필요합니다. 정렬되지 않은 목록이나 목록 항목을 사용하지 않고 강조 표시를 실행하기 위해 여백과 패딩이 포함 된이 게시물을 만들면서 아이디어를 얻었습니다. 나는 아직 그것을 시도하지 않았다.
jsfiddle에서이 설정을 시도했지만 내 코드가 작성된 방식으로 뭔가가 소프트웨어에서 발생하지 않으므로 Plunker를 시도해 보았습니다. 어느 쪽이든, 여기에 바이올린이 있습니다 : http://jsfiddle.net/brettroby/f5jrL/, 여기 Plunker가 있습니다 : http://plnkr.co/edit/BMSh19?p=preview. 누군가가 그 바이올린에서 일하기를 원한다면 왜 그것이 작동하지 않는지 알려주십시오. 그러나 Plunker는 그대로 잘 작동합니다.
다른 사소한 문제가 있으며 주요 문제가 해결 된 후에도 논의 할 수 있습니다.
도움을 주신 모든 분들께 감사드립니다!
추신 : 모든 코드 작성자 덕분에 코드를 빌려 와서이 코드를 얻을 수있었습니다. 나는 stackoverflow없이 물 속에서 죽을거야.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#wrapper {
width: 800px;
height: 400px;
padding: 10px;
border: 1px solid #474747;
}
#screen-container {
float: left;
background: #6799ea;
width: 485px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
color: #ffffff;
}
#d-pad {
position: relative;
float: right;
width: 300px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
}
ul {
margin: 20px 10px 0 -30px;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
font-size: 1.5em;
}
li {
list-style-type: none;
line-height: 50px;
}
li:selected {
color: #000;
}
#up {
position: absolute;
margin: 5px 0 0 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
}
#down {
position: absolute;
margin: 0 0 5px 0;
bottom: 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: s-resize;
}
#left {
position: absolute;
left: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: w-resize;
}
#right {
position: absolute;
right: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: e-resize;
}
.number-input {
float: right;
width: 50px;
font-size: 1.5em;
text-align: right;
color: #ffffff;
background-color: 6799ea;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
SBoxPtr += amt;
if (SBoxPtr < 0) { SBoxPtr = 0; }
if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
for (var i=0; i<sel.length; i++) {
if (i == SBoxPtr) { sel[i].style.backgroundColor = 'cyan'; }
else { sel[i].style.backgroundColor = '6799ea'; }
}
}
document.onkeyup = changeChars;
function changeChars(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode; // alert(KeyID);
if (KeyID == 187) { SBoxPrevNext(1); } // Key '+'
if (KeyID == 189) { SBoxPrevNext(-1); } // Key '-'
if (KeyID == 40) { SBoxPrevNext(1); } // Key 'DownArrow'
if (KeyID == 38) { SBoxPrevNext(-1); } // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
document.getElementById("up").onclick=function(){SBoxPrevNext(-1)}
document.getElementById("down").onclick=function(){SBoxPrevNext(1)}
}
</script>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number').value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="screen-container">
<ul>
<li>Program Line 1 <input class="number-input" type="number" min="0" max="80" value="0" id="number"></li>
<li>Program Line 2 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 3 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 4 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 5 <input class="number-input" type="number" min="0" max="80" value="0" ></li>
</ul>
</div>
<div id="d-pad">
<div id="up"><p>▲</div><div id="down"><p>▼</div>
<div id="left" onclick="decrementValue()"><p style="">◄</p></div><div id="right" onclick="incrementValue()"><p>►</div>
</div>
</div><!-- end wrapper -->
</body>
</html>
와우. 그것은 빨랐다. .. 그리고 훌륭했다. 당신은 완전히 그것을 찍었어! 내 데모는 당신이 이해하고 이해할 수있을 정도로 명확했기 때문에 기쁩니다. 대단히 감사합니다. 이것은 완벽하게 작동합니다. 이제 이미지로 옷을 입혀 "실제"컨트롤 패널처럼 보입니다. –
그건 그렇고, 나는 아직 충분한 평판이 없기 때문에 당신의 제안/해결책에서 위로 화살표를 누를 수 없습니다. 죄송합니다. 다행히 누군가 내게 와서 그것을 할 수 있습니다 (또는 관리자가 나를 승인 할 수 있습니다). 왜냐하면 당신이 내 문제를 완벽하게 해결했기 때문입니다. 나는 완벽하게 의미한다. –
이제 다른 문제를 해결할 수 있습니다. 텍스트가 강조 표시되면 텍스트의 스타일을 처리합니다. 색상을 변경하기 위해 강조 표시된 텍스트를 가져올 수 없습니다. 어떻게해야합니까? 나는이 부분의 텍스트를 엉망으로 만들었다. "if (i == SBoxPtr) {sel [i] .style.backgroundColor = 'cyan';}"하지만 추가 마크 업을 추가하는 방법을 알 수 없었다. 어떤 아이디어? –