script.aculo.us - Hướng dẫn nhanh
Script.aculo.us là gì?
script.aculo.us là một thư viện JavaScript được xây dựng trên Khung JavaScript Nguyên mẫu, nâng cao GUI và mang lại trải nghiệm Web 2.0 cho người dùng web.
script.aculo.us được phát triển bởi Thomas Fuchs và lần đầu tiên nó được ra mắt công chúng vào tháng 6 năm 2005.
script.aculo.us cung cấp các hiệu ứng hình ảnh động và các phần tử giao diện người dùng thông qua Mô hình Đối tượng Tài liệu (DOM).
Khung JavaScript Nguyên mẫu là một khung JavaScript được tạo bởi Sam Stephenson, cung cấp một khung Ajax và các tiện ích khác.
Làm thế nào để cài đặt script.aculo.us?
Việc cài đặt thư viện script.aculo.us khá đơn giản. Nó có thể được thiết lập trong ba bước đơn giản -
Truy cập trang tải xuống để tải xuống phiên bản mới nhất trong một gói tiện lợi.
Giải nén gói đã tải xuống và bạn sẽ tìm thấy các thư mục sau:
lib - chứa tệp nguyên mẫu.js.
src - chứa 8 tệp sau -
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- sound.js
- unittest.js
test - chứa các tệp cho mục đích thử nghiệm.
CHANGELOG - Tệp chứa lịch sử của tất cả các thay đổi.
MIT-LICENSE - Tệp mô tả các điều khoản cấp phép.
README - Tập tin mô tả gói cài đặt bao gồm hướng dẫn cài đặt.
Bây giờ, hãy đặt các tệp sau vào một thư mục của trang web của bạn, ví dụ: / javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js
NOTE - Các tệp sound.js và unittest.js là tùy chọn
Làm thế nào để sử dụng Thư viện script.aculo.us?
Bây giờ bạn có thể bao gồm tập lệnh script.aculo.us như sau:
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
</head>
<body>
........
</body>
</html>Theo mặc định, scriptaculous.js tải tất cả các tệp JavaScript khác cần thiết cho các hiệu ứng, kéo và thả, thanh trượt và tất cả các tính năng script.aculo.us khác.
Nếu bạn không cần tất cả các tính năng, bạn có thể giới hạn các tập lệnh bổ sung được tải bằng cách chỉ định chúng trong danh sách được phân tách bằng dấu phẩy, ví dụ:
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
</head>
<body>
........
</body>
</html>Các tập lệnh có thể được chỉ định là:
- effects
- dragdrop
- builder
- controls
- slider
NOTE - Một số tập lệnh yêu cầu tải những tập lệnh khác để hoạt động bình thường.
Làm thế nào để gọi một hàm thư viện script.aculo.us?
Để gọi một hàm thư viện script.aculo.us, hãy sử dụng các thẻ tập lệnh HTML như được hiển thị bên dưới:
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
<script type = "text/javascript" language = "javascript">
// <![CDATA[
function action(element){
new Effect.Highlight(element,
{ startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00", duration: 8 });
}
// ]]>
</script>
</head>
<body>
<div id = "id" onclick = "action(this);">
Click on this and see how it change its color.
</div>
</body>
</html>Ở đây chúng tôi đang sử dụng mô-đun Hiệu ứng và chúng tôi đang áp dụng hiệu ứng Nổi bật trên một phần tử.
Điều này sẽ tạo ra kết quả sau:
Một cách dễ dàng khác để gọi chức năng của bất kỳ mô-đun nào là bên trong các trình xử lý sự kiện như sau:
<html>
<head>
<title>script.aculo.us examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
</head>
<body>
<div onclick = "new Effect.BlindUp(this, {duration: 5})">
Click here if you want this to go slooooow.
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
script.aculo.us được chia thành các mô-đun, mỗi mô-đun có tệp JavaScript riêng. Các mô-đun này được giải thích ở đây -
Các hiệu ứng
Mô-đun hiệu ứng đi kèm với hơn 25 hiệu ứng hình ảnh và bảy chế độ chuyển tiếp.
Kéo và thả
Bạn sẽ sử dụng mô-đun kéo và thả để làm cho bất kỳ phần tử nào có thể kéo được , biến nó thành một vùng thả hoặc thậm chí làm cho toàn bộ một loạt các phần tử có thể sắp xếp để bạn có thể sắp xếp lại chúng bằng cách kéo và thả.
Thanh trượt
Thanh trượt là một loại đường ray hoặc đường ray nhỏ, dọc theo đó bạn có thể trượt một tay cầm. Nó chuyển thành một giá trị số. Với script.aculo.us, bạn có thể tạo các thanh trượt như vậy với nhiều quyền kiểm soát.
Tự động hoàn thành
Các điều khiển tự động hoàn thành cho phép các trường nhập văn bản tự động hoàn thành kiểu Google-Suggest, cục bộ và do máy chủ cung cấp.
Chỉnh sửa tại chỗ
Bạn có thể chỉnh sửa bất kỳ văn bản hoặc tập hợp mục nào tại chỗ bằng cách chỉ cần nhấp vào nó.
Người xây dựng
Một người trợ giúp để tạo các phân đoạn DOM trong JavaScript. Đây là một công cụ dành cho nhà phát triển giúp tạo DOM dễ dàng hơn đáng kể.
Âm thanh
Phiên bản 1.7.1 đã giới thiệu một hệ thống âm thanh cho phép bạn phát âm thanh dễ dàng, xếp chúng vào hàng đợi, sử dụng nhiều bản nhạc, v.v.
Các hiệu ứng script.aculo.us được chia thành hai nhóm -
Hiệu ứng cốt lõi
Sáu hiệu ứng cốt lõi sau đây là nền tảng của thư viện JavaScript script.aculo.us Visual Effects.
Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel
Tất cả các hiệu ứng cốt lõi hỗ trợ các thông số chung khác nhau cũng như các thông số cụ thể cho hiệu ứng và những tên hiệu ứng này có phân biệt chữ hoa chữ thường.
Tất cả các Tham số Chung dành riêng cho hiệu ứng đã được thảo luận trong hướng dẫn này cùng với các hiệu ứng.
Hiệu ứng kết hợp
Tất cả các hiệu ứng kết hợp đều dựa trên năm Hiệu ứng cốt lõi và được coi là ví dụ để cho phép bạn viết các hiệu ứng của riêng mình.
Thông thường những hiệu ứng này dựa vào sự thực hiện song song, đồng bộ của các hiệu ứng khác. Việc thực thi như vậy có sẵn, do đó việc tạo các hiệu ứng kết hợp của riêng bạn rất dễ dàng. Đây là danh sách các Hiệu ứng Kết hợp -
Effect.Appear
Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown
Effect.BlindUp
Effect.SlideDown
Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink
Ngoài ra, có Effect.toggle phương pháp tiện ích cho các phần tử bạn muốn hiển thị tạm thời với hoạt ảnh Xuất hiện / Làm mờ, Trang trình bày hoặc Mù.
Effect.toggle
Tệp Thư viện Cần thiết cho Hiệu ứng
Để sử dụng khả năng hiệu ứng của script.aculo.us, bạn sẽ cần tải mô-đun hiệu ứng. Vì vậy, tải tối thiểu của bạn cho script.aculo.us sẽ giống như sau:
<html>
<head>
<title>script.aculo.us effects</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/"effects.j"></script>
</head>
<body>
...
</body>
</html>Chức năng Hiệu ứng Cuộc gọi
Cách thích hợp để bắt đầu một hiệu ứng cốt lõi thường là với newnhà điều hành. Tùy thuộc vào sở thích của bạn, bạn có thể sử dụng một trong hai cú pháp:
Cú pháp
new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])Hai cú pháp này là tương đương về mặt kỹ thuật. Lựa chọn giữa hai loại này chủ yếu là về cảm giác cá nhân của bạn về thẩm mỹ mã.
Thí dụ
Đây là hai lệnh gọi tương đương, vì vậy bạn có thể thấy các cú pháp có liên quan như thế nào, chúng có thể hoán đổi cho nhau rất nhiều -
new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });Tính năng phổ biến nhất của giao diện Web 2.0 là cơ sở kéo và thả. May mắn thay script.aculo.us đi kèm với một khả năng cố hữu để hỗ trợ kéo và thả.
Để sử dụng khả năng kéo của script.aculo.us, bạn sẽ cần tải dragdrop mô-đun này cũng yêu cầu effectsmô-đun. Vì vậy, tải tối thiểu của bạn cho script.aculo.us sẽ giống như sau:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Kéo những thứ xung quanh
Rất đơn giản để tạo một mục có thể kéo bằng script.aculo.us. Nó yêu cầu tạo một thể hiện của lớp Draggable và xác định phần tử được tạo ra có thể kéo được.
Cú pháp có thể kéo
new Draggable( element, options );Tham số đầu tiên của hàm tạo xác định phần tử sẽ được tạo ra có thể kéo được dưới dạng id của phần tử hoặc một tham chiếu đến phần tử. Tham số thứ hai chỉ định thông tin tùy chọn về cách hoạt động của phần tử có thể kéo.
Tùy chọn có thể kéo
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 có thể kéo của mình.
| Lựa chọn | Sự miêu tả | Ví dụ |
|---|---|---|
| hoàn nguyên | Nếu được đặt thành true , phần tử sẽ trở lại vị trí ban đầu khi quá trình kéo kết thúc. Đồng thời chỉ định liệu lệnh gọi lại hiệu ứng hoàn nguyên sẽ được gọi khi thao tác kéo dừng lại. Giá trị mặc định là false . | Thí dụ |
| chụp nhanh | Được sử dụng để làm cho một người có thể kéo dính vào lưới hoặc hạn chế chuyển động của nó. Nếu sai (mặc định), không xảy ra hiện tượng bắt hoặc ràng buộc.
|
Thí dụ |
| zindex | Chỉ định CSS z-index sẽ được áp dụng cho phần tử trong một thao tác kéo. Theo mặc định, chỉ số z của phần tử được đặt thành 1000 trong khi kéo. | Thí dụ |
| bóng ma | Boolean xác định xem có nên sao chép bản sao để kéo hay không, giữ nguyên bản gốc cho đến khi bản sao bị bỏ. Giá trị mặc định là false . | Thí dụ |
| hạn chế | Một chuỗi được sử dụng để giới hạn các hướng có thể kéo, theo chiều ngang hoặc chiều dọc . Mặc định là null có nghĩa là chuyển động tự do. | Thí dụ |
| xử lý | Chỉ định một phần tử được sử dụng làm tay cầm để bắt đầu thao tác kéo. Theo mặc định, một phần tử là tay cầm của chính nó. | Thí dụ |
| hình sao | Một hiệu ứng được gọi trên phần tử khi bắt đầu kéo. Theo mặc định, nó thay đổi độ mờ của phần tử thành 0,2 trong 0,2 giây. | Thí dụ |
| hồi âm | Một hiệu ứng được gọi trên phần tử khi kéo được hoàn nguyên. Đặt mặc định cho một trang chiếu mượt mà về vị trí ban đầu của phần tử. Chỉ được gọi nếu hoàn nguyên là đúng. | Thí dụ |
| endeffect | Một hiệu ứng được gọi trên phần tử khi quá trình kéo kết thúc. Theo mặc định, nó thay đổi độ mờ của phần tử thành 1,0 trong 0,2 giây. | Thí dụ |
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 -
| Chức năng | Sự miêu tả | Ví dụ |
|---|---|---|
| băt đâu | Được gọi khi bắt đầu kéo. | Thí dụ |
| onDrag | Được gọi nhiều lần khi chuột di chuyển, nếu vị trí chuột thay đổi so với lần gọi trước. | Thí dụ |
| thay đổi | Được gọi giống như onDrag (là cách gọi lại ưu tiên). | Thí dụ |
| vào cuối | Được gọi khi kết thúc kéo. | Thí dụ |
Ngoại trừ lệnh gọi lại "thay đổi", mỗi lệnh gọi lại này chấp nhận hai tham số: đối tượng Draggable và đối tượng sự kiện chuột.
Ví dụ có thể kéo
Ở đây, chúng ta xác định 5 phần tử có thể kéo được: ba phần tử <div>, một phần tử <img> và một phần tử <span>. Mục đích của ba phần tử <div> khác nhau là để chứng minh rằng bất kể một phần tử bắt đầu bằng quy tắc định vị tĩnh (mặc định), tương đối hoặc tuyệt đối, hành vi kéo vẫn không bị ảnh hưởng.
<html>
<head>
<title>Draggables Elements</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
// Take all the elements whatever you want to make Draggable.
var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
elements.each(function(item) { new Draggable(item, {});});
}
</script>
</head>
<body>
<div id = "normaldiv">
This is a normal div and this is dragable.
</div>
<div id = "relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>
<div id = "absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id = "image" src = "/images/scriptaculous.gif"/>
<p>Let part <span id = "span" style = "color: blue;">
This is middle part</span> Yes, only middle part is dragable.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bỏ những thứ đã kéo
Một phần tử được chuyển đổi thành mục tiêu thả thông qua lời gọi phương thức add () trong không gian tên được gọi là Droppables .
Không gian tên Droppables có hai phương thức quan trọng: add () để tạo mục tiêu thả và remove () để xóa mục tiêu thả.
Cú pháp
Đây là cú pháp của phương thức add () để tạo mục tiêu thả. Phương thức add () tạo một mục tiêu thả ra khỏi phần tử được truyền làm tham số đầu tiên của nó, bằng cách sử dụng các tùy chọn trong hàm băm được truyền làm tham số thứ hai.
Droppables.add( element, options );Cú pháp cho remove () thậm chí còn đơn giản hơn. Phương thức remove () loại bỏ hành vi mục tiêu thả khỏi phần tử đã truyền.
Droppables.remove(element);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 có thể kéo của mình.
| Lựa chọn | Sự miêu tả | Ví dụ |
|---|---|---|
| Hoverclass | Tên của một lớp CSS sẽ được thêm vào phần tử khi có thể kéo xuống đang hoạt động (có thể kéo có thể chấp nhận được khi di chuột qua nó). Giá trị mặc định là null. | Thí dụ |
| Chấp nhận | Một chuỗi hoặc một mảng các chuỗi mô tả các lớp CSS. Trình có thể kéo xuống sẽ chỉ chấp nhận các trình kéo có một hoặc nhiều lớp CSS này. | Thí dụ |
| Chứa đựng | Chỉ định một phần tử hoặc mảng các phần tử, phải là phần tử cha của một mục có thể kéo để nó được mục tiêu thả chấp nhận. Theo mặc định, không có ràng buộc ngăn chặn nào được áp dụng. | Thí dụ |
| Chồng chéo | Nếu được đặt thành 'ngang' hoặc 'dọc', có thể thả xuống sẽ chỉ phản ứng với một Draggable nếu nó chồng chéo hơn 50% theo hướng nhất định. Được sử dụng bởi Sortables, sẽ được thảo luận trong chương tiếp theo. | |
| tham | Nếu đúng (mặc định), nó sẽ dừng di chuột qua các tệp có thể kéo xuống khác, bên dưới tệp có thể kéo sẽ không được tìm kiếm. | Thí dụ |
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 -
| Chức năng | Sự miêu tả | Ví dụ |
|---|---|---|
| onHover | Chỉ định chức năng gọi lại được kích hoạt khi một mục có thể kéo phù hợp di chuột qua mục tiêu thả. Được sử dụng bởi Sortables, sẽ được thảo luận trong chương tiếp theo. | |
| onDrop | Chỉ định một hàm gọi lại được gọi khi một phần tử có thể kéo phù hợp được thả vào mục tiêu thả. | Thí dụ |
Thí dụ
Ở đây, phần đầu tiên của ví dụ này tương tự như ví dụ trước của chúng tôi, ngoại trừ việc chúng tôi đã sử dụng hàm $ A () tiện dụng của Prototype để chuyển đổi danh sách nút của tất cả các phần tử <img> trong phần tử có id là draggables thành một mảng .
<html>
<head>
<title>Drag and Drop Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) {
new Draggable(item, {revert: true, ghosting: true});
});
Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
// Set drop area by default non cleared.
$('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nhiều khi, bạn cần cung cấp cho người dùng khả năng sắp xếp lại thứ tự các phần tử (chẳng hạn như các mục trong danh sách) bằng cách kéo chúng.
Nếu không có tính năng kéo và thả, việc sắp xếp lại thứ tự có thể là một cơn ác mộng, nhưng script.aculo.us cung cấp hỗ trợ sắp xếp lại thứ tự mở rộng thông qua lớp Sortable . Phần tử trở thành Có thể sắp xếp được chuyển đến phương thức create () trong không gian tên Có thể sắp xếp.
Có thể sắp xếp bao gồm các phần tử mục trong phần tử vùng chứa. Khi bạn tạo một Sortable mới, nó sẽ đảm nhận việc tạo các Draggables và Droppables tương ứng .
Để sử dụng khả năng Sắp xếp của script.aculo.us, bạn sẽ cần tải dragdrop mô-đun này cũng yêu cầu effectsmô-đun. Vì vậy, tải tối thiểu của bạn cho script.aculo.us sẽ như thế này -
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Cú pháp có thể sắp xếp
Đây là cú pháp của phương thức create () để tạo một mục có thể sắp xếp. Phương thức create () lấy id của một phần tử vùng chứa và sắp xếp chúng dựa trên các tùy chọn đã chuyển.
Sortable.create('id_of_container',[options]);Sử dụng Sortable.destroy để loại bỏ hoàn toàn tất cả các trình xử lý sự kiện và các tham chiếu đến một Sortable được tạo bởi Sortable.create.
NOTE- Một lệnh gọi đến Sortable.create, ngầm định gọi Sortable.destroy nếu phần tử được tham chiếu đã là một Sortable. Đây là cú pháp đơn giản để gọi hàm hủy.
Sortable.destroy( element );Tùy chọn có thể sắp xếp
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 Có thể sắp xếp của mình.
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | tag Chỉ định loại của các phần tử trong vùng chứa có thể sắp xếp được có thể sắp xếp thông qua kéo và thả. Mặc định là 'li'. |
| 2 | only Chỉ định tên lớp CSS hoặc một mảng tên lớp mà một mục có thể kéo phải có để được mục tiêu thả chấp nhận. Điều này tương tự với tùy chọn chấp nhận của Draggable. Theo mặc định, không có ràng buộc tên lớp nào được áp dụng. |
| 3 | overlap Một trong những sai, ngang hoặc dọc . Kiểm soát thời điểm kích hoạt sắp xếp lại. Mặc định là dọc . |
| 4 | constraint Một trong những sai, ngang hoặc dọc . Hạn chế chuyển động của các phần tử có thể sắp xếp được kéo. Mặc định là dọc . |
| 5 | containment Cho phép kéo và thả giữa các Bảng sắp xếp. Lấy một mảng các phần tử hoặc id phần tử. Lưu ý quan trọng: Để đảm bảo rằng có thể kéo hai chiều giữa các vùng chứa, hãy đặt tất cả các lệnh gọi Sortable.create sau các phần tử vùng chứa. |
| 6 | handle Giống như tùy chọn Draggable cùng tên, chỉ định một phần tử được sử dụng để bắt đầu các hoạt động kéo. Theo mặc định, mỗi phần tử là một xử lý riêng của nó. |
| 7 | hoverclass Chỉ định tên lớp CSS sẽ được áp dụng cho các phần tử có thể sắp xếp không kéo khi phần tử được kéo đi qua chúng. Theo mặc định, không có tên lớp CSS nào được áp dụng. |
| số 8 | ghosting Tương tự như tùy chọn Draggable cùng tên, If true, tùy chọn này làm cho phần tử gốc của thao tác kéo giữ nguyên vị trí trong khi bản sao nửa trong suốt của phần tử được di chuyển cùng với con trỏ chuột. Giá trị mặc định là false . Tùy chọn này không hoạt động với IE. |
| 9 | dropOnEmpty Nếu đúng, nó cho phép đưa các phần tử có thể sắp xếp vào một danh sách trống. Giá trị mặc định là false . |
| 10 | scroll Nếu vùng chứa có thể sắp xếp sở hữu thanh cuộn do cài đặt thuộc tính tràn CSS, tùy chọn này cho phép tự động cuộn danh sách ngoài các phần tử hiển thị. Giá trị mặc định là false . |
| 12 | scrollSensitivity Khi kích hoạt tính năng cuộn, nó sẽ điều chỉnh thời điểm kích hoạt cuộn. Mặc định là 20. |
| 13 | scrollSpeed Khi tính năng cuộn được bật, nó sẽ điều chỉnh tốc độ cuộn. Mặc định là 15. |
| 14 | tree Nếu đúng, nó cho phép sắp xếp với các phần tử con trong phần tử có thể sắp xếp. Giá trị mặc định là false. |
| 15 | treeTag Nếu tùy chọn cây được bật, nó sẽ chỉ định loại phần tử vùng chứa của phần tử con mà phần tử con của chúng tham gia vào hành vi có thể sắp xếp. Mặc định là 'ul'. |
Bạn có thể cung cấp các lệnh gọi lại sau trong tham số tùy chọn -
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | onChange Một hàm sẽ được gọi bất cứ khi nào thứ tự sắp xếp thay đổi trong khi kéo. Khi kéo từ Có thể sắp xếp này sang Có thể sắp xếp khác, lệnh gọi lại được gọi một lần trên mỗi Có thể sắp xếp. Lấy phần tử bị ảnh hưởng làm tham số của nó. |
| 2 | onUpdate Một chức năng sẽ được gọi khi kết thúc hoạt động kéo dẫn đến thay đổi thứ tự phần tử. |
Sắp xếp Ví dụ
Bản demo này đã được xác minh là hoạt động trên IE 6.0. Nó cũng hoạt động trong phiên bản mới nhất của Firefox.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('namelist',{tag:'li'});
}
</script>
<style type = "text/css">
li { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop list items to sort them out</p>
<ul id = "namelist">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Botany</li>
<li>Sociology</li>
<li>English</li>
<li>Hindi</li>
<li>Sanskrit</li>
</ul>
</body>
</html>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:
Lưu ý việc sử dụng thẻ: 'li' . Tương tự, bạn có thể sắp xếp danh sách hình ảnh có sẵn sau đây trong <div> -
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('imagelist',{tag:'div'});
}
</script>
<style type = "text/css">
div { cursor: move; }
img { border: 1px solid red; margin:5px; }
</style>
</head>
<body>
<p>Drag and drop list images to re-arrange them</p>
<div id = "imagelist">
<div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
<div><img src = "/images/javascript.gif" alt="JS" /></div>
<div><img src = "/images/html.gif" alt="HTML" /></div>
<div><img src = "/images/css.gif" alt="CSS" /></div>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Sắp xếp thứ tự các yếu tố có thể sắp xếp
Đối tượng Sortable cũng cung cấp một hàm Sortable.serialize () để sắp xếp thứ tự cho Sortable ở định dạng phù hợp với các yêu cầu HTTP GET hoặc POST. Điều này có thể được sử dụng để gửi thứ tự của Sắp xếp thông qua một cuộc gọi Ajax.
Cú pháp
Sortable.serialize(element, options);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 Có thể sắp xếp của mình.
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | tag Đặt loại thẻ sẽ được tuần tự hóa. Điều này sẽ tương tự như những gì được sử dụng trong Sortable.create . |
| 2 | name Đặt tên của khóa sẽ được sử dụng để tạo các cặp khóa / giá trị để tuần tự hóa ở định dạng HTTP GET / POST. Vì vậy, nếu tên là xyz, chuỗi truy vấn sẽ giống như sau: xyz [] = value1 & xyz [] = value2 & xyz [] = value3 Nơi các giá trị được lấy từ các phần tử con theo thứ tự xuất hiện trong vùng chứa. |
Nối tiếp các ví dụ
Trong ví dụ này, đầu ra của tuần tự hóa sẽ chỉ cung cấp các số sau dấu gạch dưới trong ID mục danh sách.
Để thử, hãy để các danh sách theo thứ tự ban đầu, nhấn nút để xem tuần tự của các danh sách. Bây giờ, hãy sắp xếp lại một số yếu tố và nhấp lại vào nút.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('namelist',{tag:'li'});
}
function serialize(container, name){
$('display').innerHTML = 'Serialization of ' +
$(container).id +
' is: <br/><pre>' +
Sortable.serialize( container,{ name:name} ) +
'</pre>';
}
</script>
<style type = "text/css">
li { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop list items to sort them out properly</p>
<ul id = "namelist">
<li id = "list1_1">Physics</li>
<li id = "list1_2">Chemistry</li>
<li id = "list1_3">Maths</li>
<li id = "list1_4">Botany</li>
<li id = "list1_5">Sociology</li>
<li id = "list1_6">English</li>
</ul>
<p>Click following button to see serialized list which can be
passed to backend script, like PHP, AJAX or CGI</p>
<button type = "button" value = "Click Me"
onclick = "serialize('namelist', 'list')"> Serialize
</button>
<div id = "display" style = "clear:both;padding-top:32px"></div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Di chuyển các mục giữa các bảng sắp xếp
Ví dụ sau đây cho thấy cách di chuyển các mục từ danh sách này sang danh sách khác.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});
Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
}
</script>
<style type = "text/css">
li { cursor: move; }
ul {
width: 88px;
border: 1px solid blue;
padding: 3px 3px 3px 20px;
}
</style>
</head>
<body>
<p>Drag and drop list items from one list to another list</p>
<div style = "float:left">
<ul id = "List1">
<li>Physics</li>
<li>Chemistry</li>
<li>Botany</li>
</ul>
</div>
<div style = "float:left;margin-left:32px">
<ul id = "List2">
<li>Arts</li>
<li>Politics</li>
<li>Economics</li>
<li>History</li>
<li>Sociology</li>
</ul>
</div>
</body>
</html>Lưu ý rằng tùy chọn chứa cho mỗi vùng chứa liệt kê cả hai vùng chứa dưới dạng các phần tử ngăn chặn. Bằng cách đó, chúng tôi đã cho phép các phần tử con được sắp xếp trong ngữ cảnh của phần tử gốc của chúng; Nó cũng cho phép chúng được di chuyển giữa hai thùng chứa.
Chúng tôi đặt dropOnEmpty thành true cho cả hai danh sách. Để xem tác dụng của tùy chọn này đối với danh sách đó, hãy di chuyển tất cả các phần tử từ danh sách này sang danh sách khác để một danh sách trống. Bạn sẽ thấy rằng nó cho phép thả phần tử vào danh sách trống.
Điều này sẽ tạo ra kết quả sau:
Ràng buộc với Ajax
Tất nhiên, onUpdate là một ứng cử viên hàng đầu để kích hoạt thông báo Ajax tới máy chủ, ví dụ: khi người dùng sắp xếp lại danh sách việc cần làm hoặc một số tập dữ liệu khác. Kết hợp Ajax.Request và Sortable.serialize làm cho hoạt động bền bỉ trở nên đơn giản -
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('List' ,
{
onUpdate: function() {
new Ajax.Request('file.php',
{
method: "post",
parameters: {data:Sortable.serialize('List')}
}
);
}
}
);
}
</script>
<style type = "text/css">
li { cursor: move; }
ul {
width: 88px;
border: 1px solid blue;
padding: 3px 3px 3px 20px;
}
</style>
</head>
<body>
<p>When you will change the order, AJAX Request
will be made automatically.</p>
<div style = "float:left">
<ul id = "List">
<li id = "List_1">Physics</li>
<li id = "List_2">Chemistry</li>
<li id = "List_3">Maths</li>
<li id = "List_4">Botany</li>
</ul>
</div>
</body>
</html>Sortable.serialize tạo ra một chuỗi như: List [] = 1 & List [] = 2 & List [] = 3 & List [] = 4, trong đó các số là phần định danh của id phần tử danh sách sau dấu gạch dưới.
Bây giờ chúng ta cần viết mã file.php , nó sẽ phân tích dữ liệu đã đăng dưới dạng parse_str ($ _ POST ['data']); và bạn có thể làm bất cứ điều gì bạn muốn với dữ liệu được sắp xếp này.
Để tìm hiểu thêm về AJAX, vui lòng xem qua Hướng dẫn Ajax đơn giản của chúng tôi .
Thanh trượt là các rãnh mỏng có một hoặc nhiều tay cầm trên chúng mà người dùng có thể kéo dọc theo đường.
Mục tiêu của thanh trượt là cung cấp một phương thức nhập thay thế để xác định giá trị số; thanh trượt đại diện cho một phạm vi và trượt một chốt dọc theo đường đi sẽ xác định một giá trị trong phạm vi này.
Thanh trượt có thể theo hướng ngang hoặc dọc. Khi nằm ngang, phần cuối bên trái của bản nhạc thường biểu thị giá trị thấp nhất, trong khi theo hướng dọc, phần cuối của bản chiếu thường là giá trị thấp nhất.
Để sử dụng khả năng trượt của script.aculo.us, bạn sẽ cần tải mô-đun slider.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ẽ như thế này -
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>Tạo điều khiển thanh trượt
Việc tạo thanh trượt, như thường lệ, là vấn đề xây dựng một đối tượng tùy chỉnh trên một vài phần tử hiện có trong DOM của trang của bạn. Bạn sẽ cần hai yếu tố ở đây, một cho tay cầm và một cho bản nhạc như sau:
new Control.Slider(handle, track [ , options ] );Phần tử track thường là <div> và phần tử xử lý là <div> hoặc <span> bên trong phần tử track. Cả hai đều có thể được chuyển bằng id = hoặc bằng tham chiếu DOM trực tiếp, như thường lệ.
Tùy chọn thanh trượt
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 Slider của mình.
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | Axis Xác định hướng của điều khiển là ngang hoặc dọc . Hướng mặc định là nằm ngang . |
| 2 | Range Xác định phạm vi của các giá trị thanh trượt như một thể hiện của đối tượng Prototype ObjectRange. Mặc định từ 0 đến 1. |
| 3 | Values Xác định bộ giá trị rời rạc mà thanh trượt có thể nhận được. Nếu bị bỏ qua, tất cả các giá trị trong phạm vi có thể được đặt. |
| 4 | sliderValue Đặt giá trị ban đầu của thanh trượt. Nếu bị bỏ qua, giá trị được biểu thị bằng cạnh ngoài cùng bên trái (hoặc trên cùng) của thanh trượt là giá trị ban đầu. |
| 5 | Disabled Nếu đúng, nó tạo ra một trang chiếu bị tắt ban đầu. Rõ ràng là mặc định sai. |
| 6 | setValue Sẽ cập nhật giá trị của thanh trượt và do đó di chuyển tay cầm thanh trượt đến vị trí thích hợp. |
| 7 | setDisabled Sẽ đặt thanh trượt ở trạng thái tắt (đã tắt = true). |
| số 8 | setEnabled Sẽ đặt thanh trượt ở trạng thái đã bật (đã tắt = sai). |
Bạn có thể cung cấp các lệnh gọi lại sau trong tham số tùy chọn -
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | onSlide Được gọi bất cứ khi nào Thanh trượt được di chuyển bằng cách kéo. Hàm được gọi nhận giá trị thanh trượt làm tham số của nó. |
| 2 | onChange Được gọi bất cứ khi nào Thanh trượt đã di chuyển xong hoặc giá trị của nó đã thay đổi thông qua hàm Giá trị setSlider. Hàm được gọi nhận giá trị thanh trượt làm tham số của nó. |
Ví dụ về thanh trượt
<html>
<head>
<title>Sliders Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
<script type = "text/javascript">
window.onload = function() {
new Control.Slider('handle1' , 'track1',{
range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){ $('changed').innerHTML = 'Changed Value : '+v;
},
onSlide: function(v) {
$('sliding').innerHTML = 'Sliding Value: '+v; } }); new Control.Slider('handle2' , 'track2', { range: $R(1,100),
axis:'vertical',
sliderValue: 1,
onChange: function(v){
$('changed').innerHTML = 'Changed Value : '+v; } onSlide: function(v) { $('sliding').innerHTML = 'Sliding Value: '+v;
}
});
}
</script>
<style type = "text/css">
h1{ font-size: 1.5em; }
.track {
background-color: #aaa;
position: relative;
height: 0.5em; width: 10em;
cursor: pointer; z-index: 0;
}
.handle {
background-color: red;
position: absolute;
height: 1em; width: 0.25em; top: -0.25em;
cursor: move; z-index: 2;
}
.track.vertical {
width: 0.5em; height: 10em;
}
.track.vertical .handle {
width: 1em; height: 0.25em; top: 0; left: -0.25em;
}
</style>
</head>
<body>
<h1>Simple sliders</h1>
<div id = "track1" class = "track" style = "width: 20em;" >
<div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
</div>
<p id = "sliding" ></p>
<p id = "changed" ></p>
<div id = "track2" class = "track vertical" style = "position: absolute; left: 25em; top: 3em;" >
<div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
</div>
</body>
</html>Những điểm cần lưu ý -
Bạn có thể thay đổi hình ảnh thanh trượt của bất kỳ thanh trượt nào bằng CSS. Sử dụng thuộc tính CSS background-image: url (track.gif) và background-repeat: no-repeat để đặt hình ảnh thanh trượt.
Giá trị phạm vi có thể được chỉ định bằng cách sử dụng $R(minValue, MaxValue). For example, $R (1, 100).
Giá trị phạm vi có thể được chỉ định theo các giá trị cụ thể. Ví dụ giá trị: [1,25,50,75,100]. Trong trường hợp này, thanh trượt sẽ chỉ đạt được các giá trị rời rạc được liệt kê khi tay cầm được di chuyển.
Tại bất kỳ thời điểm nào, giá trị của thanh trượt có thể được đặt dưới sự điều khiển của chương trình bằng cách gọi phương thức setValue () của cá thể thanh trượt, như trong: sliderInstance.setValue (50);
Điều này sẽ tạo ra kết quả sau:
Ngoài ra, script.aculo.us hỗ trợ hai nguồn để tự động hoàn thành -
- Các nguồn từ xa (lấy thông qua Ajax),
- Nguồn cục bộ (mảng chuỗi trong tập lệnh trang web của bạn).
Tùy thuộc vào nguồn bạn định sử dụng, bạn sẽ khởi tạo Ajax.Autocompleter hoặc Autocompleter.Local tương ứng. Mặc dù được trang bị các tùy chọn cụ thể, hai đối tượng này chia sẻ một bộ tính năng lớn và cung cấp trải nghiệm người dùng đồng nhất.
Có bốn điều bạn sẽ luôn chuyển cho những đối tượng này trong khi xây dựng chúng -
Trường văn bản bạn muốn tạo tự động hoàn thành. Như thường lệ, bạn có thể chuyển chính trường hoặc giá trị của thuộc tính id = của nó.
Vùng chứa cho các lựa chọn tự động hoàn thành, cuối cùng sẽ chứa một danh sách <ul> </li> Các tùy chọn để chọn. Một lần nữa, chuyển trực tiếp phần tử hoặcid =. Phần tử này thường là một <div>.</p> </li> đơn giản
Nguồn dữ liệu, sẽ được thể hiện, tùy thuộc vào loại nguồn, dưới dạng một mảng chuỗi JavaScript hoặc dưới dạng URL đến nguồn từ xa.
Cuối cùng là các tùy chọn. Như mọi khi, chúng được cung cấp dưới dạng băm và cả hai đối tượng tự động hoàn thành đều có thể thực hiện mà không có tùy chọn tùy chỉnh; có các giá trị mặc định phù hợp cho mọi thứ.
Để sử dụng khả năng tự động hoàn thành của script.aculo.us, bạn sẽ 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 trình hoàn thành tự động Ajax
Cú pháp xây dựng như sau:
new Ajax.Autocompleter(element, container, url [ , options ] )Hàm tạo cho Ajax.Autocompleter chấp nhận bốn tham số:
Tên phần tử hoặc tham chiếu đến trường văn bản sẽ được điền với lựa chọn dữ liệu.
Tên phần tử hoặc tham chiếu đến phần tử <div> sẽ được điều khiển sử dụng làm menu lựa chọn.
URL của tài nguyên phía máy chủ sẽ cung cấp các lựa chọn.
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 khi tạo đối tượng Ajax.Autocompleter.
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | paramName Tên của tham số truy vấn có chứa nội dung của trường văn bản được đăng lên tài nguyên phía máy chủ. Mặc định là tên của trường văn bản. |
| 2 | minChars Số ký tự phải được nhập trước khi có thể thực hiện yêu cầu lựa chọn phía máy chủ. Mặc định là 1. |
| 3 | Frequency Khoảng thời gian, tính bằng giây, giữa các lần kiểm tra nội bộ để xem liệu yêu cầu tới tài nguyên phía máy chủ có được đăng hay không. Mặc định là 0,4. |
| 4 | Indicator Id hoặc tham chiếu đến một phần tử sẽ được hiển thị trong khi yêu cầu lựa chọn phía máy chủ đang được thực hiện. Nếu bỏ qua, không có phần tử nào được tiết lộ. |
| 5 | Parameters Chuỗi văn bản chứa các tham số truy vấn bổ sung sẽ được chuyển đến tài nguyên phía máy chủ. |
| 6 | updateElement Một chức năng gọi lại sẽ được kích hoạt khi người dùng chọn một trong các lựa chọn được trả về từ máy chủ thay thế chức năng nội bộ cập nhật trường văn bản với giá trị đã chọn. |
| 7 | afterUpdateElement Một hàm gọi lại sẽ được kích hoạt sau khi hàm updateElement đã được thực thi. |
| số 8 | Tokens Một chuỗi văn bản hoặc một mảng chuỗi văn bản cho biết mã thông báo được sử dụng làm dấu phân tách để cho phép nhiều phần tử được nhập vào trường văn bản, mỗi phần tử có thể được tự động hoàn thành riêng lẻ. |
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.Autocompleter(
'autoCompleteTextField',
'autoCompleteMenu',
'/script.aculo.us/serverSideScript.php', {}
);
}
</script>
</head>
<body>
<p>Type something in this box and then select suggested option from the list </p>
<div>
<label>Text field:</label>
<input type = "text" id = "autoCompleteTextField"/>
<div id = "autoCompleteMenu"></div>
</div>
</body>
</html>Bây giờ, chúng ta cần một phía máy chủ để truy cập trang này và cung cấp URL nguồn dữ liệu (serverSideScript.php). Bạn sẽ giữ một logic hoàn chỉnh để hiển thị các đề xuất trong tập lệnh này.
Ví dụ: chúng tôi đang giữ một văn bản HTML đơn giản trong serverSideScript.php . Bạn có thể viết tập lệnh của mình bằng CGI, PHP, Ruby hoặc bất kỳ tập lệnh phía máy chủ nào khác để chọn các đề xuất phù hợp và định dạng chúng dưới dạng <ul><<ul><ul><ul> <li> và chuyển lại vào chương trình người gọi.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>Điều này sẽ tạo ra kết quả sau:
với các tùy chọn khác nhau được thảo luận trong bảng trên.
Tạo trình hoàn thành tự động cục bộ
Việc tạo bộ tự động hoàn thành cục bộ gần giống với việc tạo bộ tự động hoàn thành Ajax như chúng ta đã thảo luận trong phần trước.
Sự khác biệt chính nằm ở cách xác định bộ dữ liệu sao lưu để sử dụng cho quá trình tự động hoàn thành đối với bộ điều khiển.
Với trình tự động hoàn thành Ajax, chúng tôi đã cung cấp URL của tài nguyên phía máy chủ sẽ thực hiện lọc cần thiết, cung cấp đầu vào của người dùng và chỉ trả về các phần tử dữ liệu phù hợp. Với Local Autocompleter, chúng tôi cung cấp danh sách đầy đủ phần tử dữ liệu thay vào đó, dưới dạng một mảng Chuỗi JavaScript và bản thân điều khiển thực hiện thao tác lọc trong mã máy khách của chính nó.
Toàn bộ cú pháp xây dựng thực tế như sau:
new Autocompleter.Local(field, container, dataSource [ , options ] );Hàm tạo cho Autocompleter.Local chấp nhận bốn tham số:
Tên phần tử hoặc tham chiếu đến trường văn bản sẽ được điền với lựa chọn dữ liệu.
Tên phần tử hoặc tham chiếu đến phần tử <div> được điều khiển sử dụng làm menu lựa chọn
Đối với tham số thứ ba, thay vì URL như với trình tự động hoàn thành do máy chủ hỗ trợ, chúng tôi cung cấp một mảng Chuỗi nhỏ, chứa tất cả các giá trị có thể có.
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 Autocompleter.Local.
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | Choices Số lượng lựa chọn để hiển thị. Mặc định là 10. |
| 2 | partialSearch Cho phép đối sánh ở đầu các từ được nhúng trong chuỗi hoàn thành. Giá trị mặc định là true. |
| 3 | fullSearch Cho phép khớp ở bất kỳ đâu trong chuỗi hoàn thành. Giá trị mặc định là false. |
| 4 | partialChars Xác định số ký tự phải được nhập trước khi thử đối sánh từng phần. Mặc định là 2. |
| 5 | ignoreCase Bỏ qua chữ hoa khi đối sánh. Giá trị mặc định là true. |
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 Autocompleter.Local(
'autoCompleteTextField',
'autoCompleteMenu',
['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
{ignoreCase:false}
);
}
</script>
</head>
<body>
<p>Type something in this box and then select suggested option from the list </p>
<div>
<label>Text field:</label>
<input type = "text" id = "autoCompleteTextField"/>
<div id = "autoCompleteMenu"></div>
</div>
</body>
</html>Khi được hiển thị và sau khi ký tự 'a' được nhập vào hộp văn bản, nó sẽ hiển thị tất cả các tùy chọn phù hợp.
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:
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 sẽ 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 của 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 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 liệu 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ố lượng 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 sẽ 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 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 được á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 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 của 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 bộ sưu tập, danh sách các tùy chọn cho Trình chỉnh sửa Bộ sưu tậ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 liệu 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 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 được á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";
}
?>Khi được 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: