처리 2.0 javaScript 모드에 대한 예제 variableInputs은 어떻게 작동합니까? 비틀는 방법?

Question

Processing.org를 사용하여 javaScript 모드에서 variableInputs 예제를 볼 수 있습니다. 온라인에서는 찾을 수 없지만 다운로드에는 포함되어 있습니다. java 및 jj 두 개의 탭이 있습니다. 그리고 둘 다에 데이터를 전달하는 방법에 대한 멋진 예입니다. 첫 번째 탭에는 HTML/CSS가 주석 처리되어 있습니다. 그 페이지를 구축하고 있습니다 ... 어떻게 작동합니까? 예를 들어 두 개 이상의 드롭 다운 메뉴 (선택기)를 나란히 배치 할 수 있습니까? 나는 그럭저럭 그럭저럭 가질 수 있었다. 그러나 항상 다른 것의 아래의 하나. 첫 번째 탭에서 html을 편집하려면 어떻게해야합니까? 도움?

여기에 예제를 복사하여 붙여 넣으시겠습니까?

[편집]

내가 수출의 PDE 수출 칠 때 :

index.html을

processing.js // (라이브러리 그 자체를)

interface.js// (PDE에 두 번째 탭)

sketchName.pde // (일반적인 PDE)

코드 위의 html 태그가 index.html에 포함되어 있으므로 여기에서 편집 할 수 있습니다. 이것이 html 페이지에 삽입되었지만 확실하지 않습니다. 따라서 메뉴를 나란히 배치하는 것은 HTML 질문으로 드러났습니다 ... 어떻게 해야할지 모르겠지만 :)

[편집 2] 아니면 자바 스크립트 질문 ... 인터페이스를 만드는 interface.js와 마찬가지로 ... 컨트롤을 어떻게 제어합니까? 또 아래에 하나의 측 inatead 의해 일부 메뉴 측면을 가지고

는 [EDIT3]도 아직도 ... ID 폼 형태 일 통해 <form id="form-form"><!-- empty --></form> 링크를하고 광고 것을 을 툰스 것이 가능하다?

Answer 1

bfavaretto가 제안한대로 실제로 CSS/HTML 문제입니다. 요청하신 작업을 수행하려면 다음을 수행하십시오.

스타일 섹션의 주석 (자바 탭), 본질적으로 두 개의 드롭 다운의 너비를 더 작게 (45 %) 만들고 css 해킹으로 인라인을 가져와야합니다 :) (다른 ctrl.addMenu 추가 좌우

* <style>textarea,input,label,select{display:block;width:95%}select{width:45%;clear:none;float:left} 
* input[type=checkbox],input[type=radio]{width: auto}textarea{height:5em},</style> 

마지막 setController() 메소드; 같은 :이 후

element = ctlr.addMenu("theMenu", menuItems); 
element = ctlr.addMenu("theMenau", menuItems); 

문제는 두 개의 레이블 인라인 오는 두 개의 메뉴를 차단하는 것입니다, 따라서 당신은 아마 이러한 요소에서 제거하고 수동으로 추가해야합니다. 아웃 라인 (157) 자바 스크립트 탭 댓글에서 :

//form.appendChild(label); 

이 줄 = 함수 (L, O) 함수에 this.addSelection {