현장 편집을 분해 가능하게 만드는 방법에 대한 아이디어가 있습니까?

StackOverflow https://stackoverflow.com/questions/153061

문제

저는 현재 MooTools용 위치 내 편집 스크립트를 작성하고 있는데 일부 기능을 유지하면서 JavaScript 없이도 우아하게 성능을 저하시킬 수 있는 방법에 대해 조금 당황스럽습니다.나는 어떤 방식으로든 점진적인 향상을 사용하고 싶습니다.나는 코드를 찾고 있는 것이 아니라 상황에 어떻게 접근할지에 대한 개념을 찾고 있습니다.아이디어가 있거나 정상적으로 성능이 저하되는 내부 편집 스크립트에 대해 알고 있다면 공유해 주세요.

도움이 되었습니까?

해결책

잘못된 방향에서 이것에 접근하는 것 같습니다. 편집장을 만들고 잘 분해하는 대신 (우아한 열화 각도) 편집을위한 javaScript 버전을 작성한 다음 페이지로드 후 JavaScript를 사용하여 편집장을 추가해야합니다. ~처럼 진보적 인 향상.

이를위한 두 가지 옵션이 있습니다. JavaScript없이 작동하는 제출 버튼이있는 양식으로 디스플레이를 작성 한 다음 JavaScript를 사용하여 입력을 편집 장소를 수행하는 일부 종류의 레이블로 바꾸십시오. 라벨과 ID 속성의 조합을 사용하여 작업 편집 구현을위한 올바른 속성을 선택할 수 있어야합니다. 기본적으로 양식을 표시하지 않으려면 다른 옵션은 버튼/링크가있는 값을 서버 측 처리를 사용하여 양식으로 전환 한 다음 편집을 추가하는 것입니다.

다른 팁

JavaScript 없이는 전혀 편집 할 수 없으므로 우아한 열화는 사용자가 JavaScript를 사용할 수 없을 때 해당 항목을 여전히 편집 할 수 있도록 구성됩니다.

따라서 문제의 전체 항목을 편집 한 다음 페이지로드에서 JavaScript에서 편집 컨트롤을 작성하여 사용자가 편집을 사용하는 대신 편집 링크를 숨기는 링크가 있습니다. 가능할 때.

텍스트 콘텐츠 인 경우 컨텐츠 캡션과 함께 편집 가능한 컨텐츠를 입력 유형 제출 버튼으로 표시 할 수 있습니다. 클릭하면 전체 양식을 제출하고 다른 값을 보존하고 편집 대화 상자를 표시합니다. 그 후 양식 값을 복원 할 수 있습니다.

아마도 편집장이있는 각 요소 아래에서 DIV에 입력을 넣을 수 있습니다. 페이지가로드되면 JavaScript를 사용하여 해당 DIV를 숨 깁니다. 그렇게하면 JavaScript가 발사되지 않는 경우에만 사용할 수 있습니다.

나는 당신이하려는 일이 다음 시나리오와 같다고 가정합니다.

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

여기서 <a>는 <span>을 <input>으로 대체하여 편집할 수 있는 버튼입니다.이를 우아하게 저하시키는 방법에는 몇 가지가 있습니다(즉, 자바스크립트 없이 작동).

이론에 의하면:

CSS를 사용하면 의사 선택기를 사용하여 수행할 수 있습니다.:active는 onclick 이벤트와 다소 유사하므로 <li>에 숨겨진 <input>을 중첩하면 이 CSS는 <span>을 숨기고 li를 클릭할 때 <input>을 표시합니다.

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

이는 귀하가 선호하는 브라우저에서는 작동할 수 있지만 IE에서는 작동하지 않는다는 사실을 의심할 여지 없이 발견하게 될 것입니다.

실제로:

링크를 사용하세요.<a>를 이 입력/범위 대체가 서버 측에서 수행된 페이지로 이동하는 실제 링크로 만드세요.다음과 같이 MooTools를 사용하여 JS를 사용하는 사람들의 클릭 이벤트를 취소하는 이벤트 핸들러를 <a>에 추가합니다. 

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

스타일의 입력 텍스트를 사용해보십시오. 페이지로드 후 readonly 속성을 사용하여 읽기로 만들어줍니다. 클릭하면 Readonly 속성을 제거하고 Onblur가 다시 읽기 위해 다시 만듭니다. "저장"버튼을 클릭하거나 OnBlur 이벤트를 클릭하면 AJAX 요청이 서버에서 데이터를 저장합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top