Jeditable-jQuery 플러그 인 즉시 편집

홈 페이지
예시:http://www.appelsiini.net/projects/jeditable
실시 간 편집 이란 무엇 입 니까?일반적인 절 차 는 이 렇 습 니 다.사용자 가 웹 페이지 의 문 자 를 클릭 하면 이 문 자 는 편집 상자 에 나타 납 니 다.사용자 가 문 자 를 수정 한 후에 제출 단 추 를 누 르 면 새로운 텍스트 는 서버 에 보 내 고 폼 이 사라 져 최신 편집 문 서 를 표시 합 니 다.
 
기본 적 인 사용 방법 은 다음 과 같다.
우선 html 파일 을 편집 합 니 다.이 단락 을 포함 합 니 다.

1 
2 <div class="edit" id="div_1">Dolor</div>
3 
4 <div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer
5 
6 adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
7 
8 magna aliquam erat volutpat.</div>

그 다음 에 저 희 는 다음 과 같은 JS 코드 를 사용 하여 실시 간 편집 을 실현 합 니 다(Jeditable 플러그 인 을 먼저 도입 해 야 합 니 다).

1 $(document).ready(function() {
2 
3     $('.edit').editable('http://www.example.com/save.php');
4 
5 });

서로 다른 내용 의 편집 과 더 많은 맞 춤 형 항목 을 실현 합 니 다.

 1 $(document).ready(function() {
 2 
 3     $('.edit').editable('http://www.example.com/save.php', {
 4 
 5         indicator : 'Saving...',
 6 
 7         tooltip   : 'Click to edit...'
 8 
 9     });
10 
11     $('.edit_area').editable('http://www.example.com/save.php', {
12 
13         type      : 'textarea',
14 
15         cancel    : 'Cancel',
16 
17         submit    : 'OK',
18 
19         indicator : '<img src="img/indicator.gif">',
20 
21         tooltip   : 'Click to edit...'
22 
23     });
24 
25 });

위의 맞 춤 형 항목 은 단추 의 텍스트,알림 정보,제출 시의 loading 그림 표시 등 을 포함한다.
그렇다면 사용자 가 확인 단 추 를 눌 렀 을 때 서버 에 보 낸 데 이 터 는 무엇 일 까?
데이터 내용 은 편집 상자 의 ID 와 새로운 내용 을 포함 합 니 다:id=elementsid&value=user_edited_content
기본 매개 변수 이름 을 다음 방법 으로 수정 할 수 있 습 니 다.

 1 $(document).ready(function() {
 2 
 3     $('.edit').editable('http://www.example.com/save.php', {
 4 
 5         id   : 'elementid',
 6 
 7         name : 'newvalue'
 8 
 9     });
10 
11 });

수정 후 전 달 된 데이터:elementid=elementsid&newvalue=user_edited_content
만약 한 줄 의 텍스트 상자 가 당신 의 요 구 를 만족 시 키 지 못 한다 면,textarea 여러 줄 의 텍스트 편집 상 자 를 사용 할 수 있 습 니 다:

 1 $(document).ready(function() {
 2 
 3     $('.edit_area').editable('http://www.example.com/save.php', {
 4 
 5         loadurl  : 'http://www.example.com/load.php',
 6 
 7         type    : 'textarea',
 8 
 9         submit  : 'OK'
10 
11     });
12 
13 });

또한 Jeditable 은 드 롭 다운 선택 상자 도 지원 합 니 다:

1 $('.editable').editable('http://www.example.com/save.php', {
2  
3     data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
4  
5     type   : 'select',
6  
7     submit : 'OK'
8  
9 });

또는 서버 에서 선택 한 데이터 내용 을 가 져 올 수 있 습 니 다:

 1 <?php
 2  
 3  /* http://www.example.com/json.php */
 4  
 5  $array['E'] =  'Letter E';
 6  
 7  $array['F'] =  'Letter F';
 8  
 9  $array['G'] =  'Letter G';
10  
11  $array['selected'] =  'F';
12  
13  print json_encode($array);
14  
15 ?>

그리고 loadurl 을 통 해 이 서버 에서 데 이 터 를 출력 할 URL 주 소 를 지정 합 니 다.

1 $('.editable').editable('http://www.example.com/save.php', {
2  
3     loadurl : 'http://www.example.com/json.php',
4  
5     type   : 'select',
6  
7     submit : 'OK'
8  
9 });

구성 요소 에 다른 스타일 을 설정 하고 싶다 면 다음 과 같이 할 수 있 습 니 다.

 1 $('.editable').editable('http://www.example.com/save.php', {
 2  
 3     cssclass : 'someclass'
 4  
 5 });
 6  
 7  
 8  
 9 $('.editable').editable('http://www.example.com/save.php', {
10  
11    loadurl : 'http://www.example.com/json.php',
12  
13    type    : 'select',
14  
15    submit  : 'OK',
16  
17    style   : 'display: inline'
18  
19 });

또는:

 1     $('.editable').editable('http://www.example.com/save.php', {
 2  
 3    loadurl : 'http://www.example.com/json.php',
 4  
 5    type    : 'select',
 6  
 7    submit  : 'OK',
 8  
 9    style   : 'inherit'
10  
11 });

마지막 으로 고 급 스 러 운 내용 을 입력 하 십시오.URL 이 아 닌 JS 함 수 를 사용 하여 제출 을 처리 하고 싶다 면 이렇게 할 수 있 습 니 다.

 1     $('.editable').editable(function(value, settings) {
 2  
 3     console.log(this);
 4  
 5     console.log(value);
 6  
 7     console.log(settings);
 8  
 9     return(value);
10  
11  }, {
12  
13    type    : 'textarea',
14  
15    submit  : 'OK',
16  
17 });

리 셋 처리:

 1 $('.editable').editable('http://www.example.com/save.php', {
 2  
 3    type     : 'textarea',
 4  
 5    submit   : 'OK',
 6  
 7    callback : function(value, settings) {
 8  
 9        console.log(this);
10  
11        console.log(value);
12  
13        console.log(settings);
14  
15    }
16  
17 });

추가 매개 변수 사용:

 1 $(".editable").editable("http://www.example.com/save.php";, {
 2  
 3   submitdata : {foo: "bar"};
 4  
 5 });
 6  
 7 $(".editable").editable("http://www.example.com/save.php";, {
 8  
 9    submitdata : function(value, settings) {
10  
11        return {foo: "bar"};
12  
13    }
14  
15 });

디 스 플레이 내용 을 URL 에서 직접 가 져 옵 니 다:

1 $(".editable").editable("http://www.example.com/save.php";, {
2  
3     loadurl : "http://www.example.com/load.php"
4  
5  
6  
7 });

http://www.appelsiini.net/projects/jeditable/default.html