script.aculo.us - Chỉnh sửa Tại chỗ

Chỉnh sửa tại chỗ là một trong những điểm nổi bật của các ứng dụng Web 2.0.style.

Chỉnh sửa tại chỗ là việc lấy nội dung không thể chỉnh sửa, chẳng hạn như một <p>, <h1> hoặc <div> và cho phép người dùng chỉnh sửa nội dung của nó bằng cách chỉ cần nhấp vào nó.

Điều này biến phần tử tĩnh thành một vùng có thể chỉnh sửa (đơn hoặc nhiều dòng) và bật lên các nút gửi và hủy (hoặc liên kết, tùy thuộc vào tùy chọn của bạn) để người dùng cam kết hoặc quay lại sửa đổi.

Sau đó, nó đồng bộ hóa phần chỉnh sửa ở phía máy chủ thông qua Ajax và làm cho phần tử không thể chỉnh sửa lại.

Để sử dụng khả năng chỉnh sửa tại chỗ của script.aculo.us, bạn cần tải các mô-đun control.js và Effects.js cùng với mô-đun prototype.js. Vì vậy, tải tối thiểu của bạn cho script.aculo.us sẽ trông như thế này -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Tạo một trình soạn thảo văn bản tại chỗ

Toàn bộ cú pháp xây dựng như sau:

new Ajax.InPlaceEditor(element, url [ , options ] )

Hàm tạo cho Ajax.InPlaceEditor chấp nhận ba tham số:

  • Phần tử đích có thể là một tham chiếu đến chính phần tử đó hoặc là id của phần tử đích.

  • Tham số thứ hai cho Ajax.InPlaceEditor chỉ định URL của tập lệnh phía máy chủ được liên hệ khi một giá trị được chỉnh sửa hoàn tất.

  • Các tùy chọn thông thường băm.

Tùy chọn

Bạn có thể sử dụng một hoặc nhiều tùy chọn sau trong khi tạo đối tượng Ajax.InPlaceEditor của mình.

Sr.No Tùy chọn & Mô tả
1

okButton

Giá trị Boolean cho biết nút "ok" có được hiển thị hay không. Giá trị mặc định là true.
2

okText

Văn bản được đặt trên nút ok. Mặc định là "ok".
3

cancelLink

Giá trị Boolean cho biết liệu liên kết hủy có được hiển thị hay không. Giá trị mặc định là true.
4

cancelText

Văn bản của liên kết hủy bỏ. Mặc định là "hủy bỏ".
5

savingText

Chuỗi văn bản được hiển thị dưới dạng giá trị của điều khiển trong khi thao tác lưu (yêu cầu bắt đầu bằng cách nhấp vào nút ok) đang xử lý. Mặc định là "Đang lưu".
6

clickToEditText

Chuỗi văn bản xuất hiện dưới dạng "chú giải công cụ" điều khiển khi di chuột qua.
7

rows

Số hàng sẽ xuất hiện khi điều khiển chỉnh sửa hoạt động. Bất kỳ số nào lớn hơn 1 đều khiến phần tử vùng văn bản được sử dụng thay vì phần tử trường văn bản. Mặc định là 1.
số 8

cols

Số cột khi ở chế độ hoạt động. Nếu bỏ qua, không có giới hạn cột nào được áp dụng.
9

size

Tương tự như cols nhưng chỉ áp dụng khi các hàng là 1.
10

highlightcolor

Màu áp dụng cho nền của phần tử văn bản khi di chuột qua. Mặc định là màu vàng nhạt.
11

highlightendcolor

Màu mà màu nổi bật mờ dần theo hiệu ứng.

Note - hỗ trợ dường như còn thiếu trong một số trình duyệt.
12

loadingText

Văn bản xuất hiện trong điều khiển trong quá trình hoạt động tải. Mặc định là "Đang tải".
13

loadTextURL

Chỉ định URL của tài nguyên phía máy chủ được liên hệ để tải giá trị ban đầu của trình chỉnh sửa khi nó chuyển sang chế độ hoạt động. Theo mặc định, không có hoạt động tải phụ trợ nào diễn ra và giá trị ban đầu là văn bản của phần tử đích.
14

externalControl

Một phần tử đóng vai trò là "điều khiển bên ngoài" kích hoạt việc đặt trình chỉnh sửa vào chế độ hoạt động. Điều này hữu ích nếu bạn muốn một nút khác hoặc phần tử khác kích hoạt chỉnh sửa điều khiển.
15

ajaxOptions

Một đối tượng băm sẽ được chuyển cho đối tượng Ajax Nguyên mẫu bên dưới để sử dụng làm băm tùy chọn của nó.

Tùy chọn gọi lại

Ngoài ra, bạn có thể sử dụng bất kỳ hàm gọi lại nào sau đây trong tham số tùy chọn

Sr.No Mô tả chức năng
1

onComplete

Một hàm JavaScript được gọi khi hoàn thành thành công yêu cầu lưu. Mặc định áp dụng hiệu ứng đánh dấu cho trình chỉnh sửa.
2

onFailure

Một hàm JavaScript được gọi khi yêu cầu lưu không thành công. Mặc định đưa ra một cảnh báo hiển thị thông báo lỗi.
3

callback

Một hàm JavaScript được gọi ngay trước khi gửi yêu cầu lưu để lấy chuỗi truy vấn được gửi đến yêu cầu. Hàm mặc định trả về một chuỗi truy vấn bằng tham số truy vấn "giá trị" với giá trị trong điều khiển văn bản.

Tùy chọn tạo kiểu CSS và id DOM

Bạn cũng có thể sử dụng một trong các tùy chọn sau để kiểm soát hành vi của trình chỉnh sửa tại chỗ -

Sr.No Tùy chọn & Mô tả
1

savingClassName

Tên lớp CSS được áp dụng cho phần tử trong khi thao tác lưu đang diễn ra. Lớp này được áp dụng khi yêu cầu đối với URL lưu được thực hiện và bị xóa khi phản hồi được trả lại. Giá trị mặc định là "inplaceeditor-Saving".
2

formClassName

Tên lớp CSS áp dụng cho biểu mẫu được tạo để chứa phần tử trình soạn thảo. Mặc định là "inplaceeditor-form".
3

formId

Id áp dụng cho biểu mẫu được tạo để chứa phần tử trình soạn thảo.

Thí dụ

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind'
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>		
   </body>
</html>

Khi hiển thị, hãy nhấp và chỉnh sửa văn bản. Tập lệnh PHP khá tầm thường này chuyển đổi giá trị của một tham số truy vấn với khóa "giá trị" thành chữ hoa tương đương của nó và ghi kết quả trở lại phản hồi.

Đây là nội dung của tập lệnh convert.php.

<?php
   if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
   }
?>

Điều này sẽ tạo ra kết quả sau:

Tùy chọn trình chỉnh sửa bộ sưu tập tại chỗ

Có một đối tượng nữa được gọi là Ajax.InPlaceCollectionEditor, hỗ trợ chỉnh sửa tại chỗ và cung cấp cho bạn tùy chọn để chọn một giá trị từ các tùy chọn đã cho.

Toàn bộ cú pháp xây dựng như sau:

new Ajax.InPlaceCollectionEditor(element, url [ , options ] )

Hàm tạo cho Ajax.InPlaceCollectionEditor chấp nhận ba tham số:

  • Phần tử đích có thể là một tham chiếu đến chính phần tử đó hoặc id của phần tử đích

  • Tham số thứ hai cho Ajax.InPlaceEditor chỉ định URL của tập lệnh phía máy chủ được liên hệ khi một giá trị được chỉnh sửa hoàn tất.

  • Các tùy chọn thông thường băm.

Tùy chọn

Ngoài việc bổ sung tùy chọn tập hợp, danh sách các tùy chọn cho Trình chỉnh sửa tập hợp tại chỗ là một tập hợp con của các tùy chọn được kế thừa từ Trình chỉnh sửa văn bản tại chỗ.

Sr.No Tùy chọn & Mô tả
1

okButton

Giá trị Boolean cho biết nút "ok" có được hiển thị hay không. Giá trị mặc định là true.
2

okText

Văn bản được đặt trên nút ok. Mặc định là "ok".
3

cancelLink

Giá trị Boolean cho biết liệu liên kết hủy có được hiển thị hay không. Giá trị mặc định là true.
4

cancelText

Văn bản của liên kết hủy bỏ. Mặc định là "hủy bỏ".
5

savingText

Chuỗi văn bản được hiển thị dưới dạng giá trị của điều khiển trong khi thao tác lưu (yêu cầu bắt đầu bằng cách nhấp vào nút ok) đang xử lý. Mặc định là "Đang lưu".
6

clickToEditText

Chuỗi văn bản xuất hiện dưới dạng "chú giải công cụ" điều khiển khi di chuột qua.
7

Highlightcolor

Màu áp dụng cho nền của phần tử văn bản khi di chuột qua. Mặc định là màu vàng nhạt.
số 8

Highlightendcolor

Màu mà màu nổi bật mờ dần theo hiệu ứng.

Note - hỗ trợ dường như còn thiếu trong một số trình duyệt.
9

Collection

Một mảng các mục sẽ được sử dụng để điền các tùy chọn phần tử đã chọn.
10

loadTextUrl

Chỉ định URL của tài nguyên phía máy chủ được liên hệ để tải giá trị ban đầu của trình chỉnh sửa khi nó chuyển sang chế độ hoạt động. Theo mặc định, không có hoạt động tải phụ trợ nào diễn ra và giá trị ban đầu là văn bản của phần tử đích. Để tùy chọn này có ý nghĩa, nó phải trả về một trong các mục được cung cấp trong tùy chọn tập hợp được đặt làm giá trị ban đầu của phần tử được chọn.
11

externalControl

Một phần tử đóng vai trò là "điều khiển bên ngoài" kích hoạt việc đặt trình chỉnh sửa vào chế độ hoạt động. Điều này hữu ích nếu bạn muốn một nút khác hoặc phần tử khác kích hoạt chỉnh sửa điều khiển.
12

ajaxOptions

Một đối tượng băm sẽ được chuyển cho đối tượng Ajax Nguyên mẫu bên dưới để sử dụng làm băm tùy chọn của nó.

Tùy chọn gọi lại

Ngoài ra, bạn có thể sử dụng bất kỳ hàm gọi lại nào sau đây trong tham số tùy chọn -

Sr.No Mô tả chức năng
1

onComplete

Một hàm JavaScript được gọi khi hoàn thành thành công yêu cầu lưu. Mặc định áp dụng hiệu ứng đánh dấu cho trình chỉnh sửa.
2

onFailure

Một hàm JavaScript được gọi khi yêu cầu lưu không thành công. Mặc định đưa ra một cảnh báo hiển thị thông báo lỗi.

Tùy chọn tạo kiểu CSS và id DOM

Bạn cũng có thể sử dụng một trong các tùy chọn sau để kiểm soát hành vi của trình chỉnh sửa tại chỗ -

Sr.No Tùy chọn & Mô tả
1

savingClassName

Tên lớp CSS được áp dụng cho phần tử trong khi thao tác lưu đang diễn ra. Lớp này được áp dụng khi yêu cầu đối với URL lưu được thực hiện và bị xóa khi phản hồi được trả lại. Giá trị mặc định là "inplaceeditor-Saving".
2

formClassName

Tên lớp CSS áp dụng cho biểu mẫu được tạo để chứa phần tử trình soạn thảo. Mặc định là "inplaceeditor-form".
3

formId

Id áp dụng cho biểu mẫu được tạo để chứa phần tử trình soạn thảo.

Thí dụ

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceCollectionEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind',
                  collection: ['one','two','three','four','five']
               }
            );
         }
      </script>
   </head>
   
   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>
		
      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

Đây là nội dung của tập lệnh convert.php.

<?php
   if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
   }
?>

Đây là nội dung của tập lệnh convert.php.

<?php
   if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
   }
?>

Khi hiển thị, hãy nhấp và chọn một trong các tùy chọn được hiển thị. Tập lệnh PHP khá tầm thường này chuyển đổi giá trị của tham số truy vấn với khóa "value" thành chữ hoa tương đương của nó và ghi kết quả trở lại phản hồi.

Sử dụng trình biên dịch trực tuyến của chúng tôi để hiểu rõ hơn về mã với các tùy chọn khác nhau được thảo luận trong bảng trên.

Điều này sẽ tạo ra kết quả sau:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved