MooTools - Fx.Slide
Fx.Slides là một tùy chọn cho phép bạn hiển thị nội dung bằng cách trượt vào chế độ xem. Nó rất đơn giản nhưng nâng cao giao diện của giao diện người dùng của bạn.
Hãy để chúng tôi thảo luận về việc tạo và khởi tạo Fx.Slide, các tùy chọn và phương pháp của nó.
Đầu tiên, chúng ta sẽ khởi tạo lớp Fx.Slide với một cá thể do người dùng định nghĩa. Để làm được điều đó, chúng ta phải tạo và chọn một phần tử HTML. Sau đó, chúng tôi sẽ áp dụng CSS cho các phần tử này. Cuối cùng, chúng ta sẽ bắt đầu một phiên bản mới của Fx.Slide với biến phần tử của chúng ta.
Tùy chọn trượt Fx
Chỉ có hai tùy chọn Fx.Slide - chế độ và trình bao bọc.
Chế độ
Chế độ cung cấp cho bạn hai lựa chọn, 'dọc' hoặc 'ngang'. Hiển thị dọc từ trên xuống dưới và hiển thị ngang từ trái sang phải. Không có tùy chọn nào để đi từ dưới lên trên hoặc từ phải sang trái, tôi hiểu rằng việc hack chính lớp để thực hiện điều này tương đối đơn giản. Theo ý kiến của tôi, đó là một tùy chọn mà tôi muốn xem tiêu chuẩn và nếu ai đó đã hack lớp để cho phép tùy chọn này, vui lòng để lại cho chúng tôi một ghi chú.
Vỏ bánh
Theo mặc định, Fx.Slide ném một trình bao bọc xung quanh phần tử trang trình bày của bạn, tạo cho nó 'tràn': 'ẩn'. Trình bao bọc cho phép bạn đặt một phần tử khác làm trình bao bọc. Giống như tôi đã nói ở trên, tôi không rõ điều này sẽ có ích ở đâu và tôi rất muốn nghe bất kỳ suy nghĩ nào (cảm ơn Horseeweapon tại mooforum.net đã giúp tôi giải quyết vấn đề này).
Phương pháp trượt Fx
Fx.Slide cũng có nhiều phương pháp để hiển thị và ẩn phần tử của bạn.
slideIn ()
Như tên của nó, phương thức này sẽ kích hoạt sự kiện bắt đầu và tiết lộ phần tử của bạn.
slideOut ()
Trượt phần tử của bạn trở lại trạng thái ẩn.
chuyển đổi ()
Thao tác này sẽ trượt phần tử vào trong hoặc ra ngoài, tùy thuộc vào trạng thái hiện tại của nó. Phương pháp rất hữu ích để thêm vào các sự kiện nhấp chuột.
ẩn giấu()
Thao tác này sẽ ẩn phần tử mà không có hiệu ứng trượt.
chỉ()
Điều này sẽ hiển thị phần tử mà không có hiệu ứng trượt.
Phím tắt Fx.Slide
Lớp Fx.Slide cũng cung cấp một số phím tắt tiện dụng để thêm hiệu ứng vào một phần tử.
set ('slide')
Thay vì bắt đầu một lớp mới, bạn có thể tạo một phiên bản mới nếu bạn 'đặt' trang chiếu trên một phần tử.
Syntax
slideElement.set('slide');thiết lập các tùy chọn
Bạn thậm chí có thể đặt các tùy chọn bằng phím tắt -
Syntax
slideElement.set('slide', {duration: 1250});cầu trượt()
Khi slide là .set (), bạn có thể khởi tạo nó bằng phương thức .slide ().
Syntax
slideElement.slide('in');.slide sẽ chấp nhận -
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
… Mỗi tương ứng với các phương thức trên.
Example
Hãy để chúng tôi lấy một ví dụ giải thích về Fx.Slide. Hãy xem mã sau đây.
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #F9E79F;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var slideElement = $('slideA');
var slideVar = new Fx.Slide(slideElement, {
//Fx.Slide Options
mode: 'horizontal', //default is 'vertical'
//wrapper: this.element, //default is this.element
//Fx Options
link: 'cancel',
transition: 'elastic:out',
duration: 'long',
//Fx Events
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide().show().hide(); //note, .hide and .show do not fire events
$('openA').addEvent('click', function(){
slideVar.slideIn();
});
$('closeA').addEvent('click', function(){
slideVar.slideOut();
});
//EXAMPLE B
var slideElementB = $('slideB');
var slideVarB = new Fx.Slide(slideElementB, {
//Fx.Slide Options
mode: 'vertical', //default is 'vertical'
link: 'chain',
//Fx Events
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){
slideVarB.slideIn();
});
$('closeB').addEvent('click', function(){
slideVarB.slideOut();
});
});
</script>
</head>
<body>
<div id = "start" class = "ind">Start</div>
<div id = "cancel" class = "ind">Cancel</div>
<div id = "complete" class = "ind">Complete</div>
<button id = "openA">open A</button>
<button id = "closeA">close A</button>
<div id = "slideA" class = "slide">Here is some content - A. Notice the delay
before onComplete fires. This is due to the transition effect, the onComplete
will not fire until the slide element stops "elasticing." Also, notice that
if you click back and forth, it will "cancel" the previous call and give the
new one priority.</div>
<button id = "openB">open B</button>
<button id = "closeB">close B</button>
<div id = "slideB" class = "slide">Here is some content - B. Notice how
if you click me multiple times quickly I "chain" the events. This slide is
set up with the option "link: 'chain'"</div>
</body>
</html>Output
Bấm vào các nút - openA, closeA, openB và closeB. Quan sát các thay đổi, hiệu ứng và thông báo sự kiện trên các chỉ số.