Bày tỏ IT

Với một loạt các Carousels ra khỏi đó, nhiều người cho Mootools là tốt, tôi vẫn quyết định viết Lớp Carousel của riêng tôi, đối với một số lý do tốt
1. Muốn một tính năng phân trang (có thể nhảy một slide đặc biệt / bước trong carousel).
2. Wanted tự do với vị trí của các nút LEFT, RIGHT / liên kết, nơi đã bao giờ tôi vui lòng.
3. Kiểm soát các bước trượt.

Tôi đã quản lý để tạo ra một Carousel mới, với các tính năng trên ... như dưới đây ... Hãy đề nghị bất kỳ sửa đổi bạn sẽ yêu cầu!!!

Ví dụ của tôi trông như thế này ... [ Xem Demo ]

Xem Demo | Tải về Mootools Carousel Với 1,0 Phiên bản Paging (tải về 1.990 lần)

1. Carousel Paging

Bạn có thể dễ dàng thêm các phân trang carousel của bạn, chỉ đơn giản bằng cách thiết lập lá cờ phân trang, mà là mới parater trôi qua trong khi tạo thể hiện của các MooCarousel đúng sự thật (muốn phân trang) hoặc sai (donot muốn phân trang).

carousel1 var = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true); / / ns = số ảnh, sss = trượt kích thước bước

Và ofcourse bạn có thể thay đổi giao diện-n-cảm nhận của những achors phân trang như bạn vui lòng bằng cách thay đổi CSS của họ.

Carousel_paging {text-align: right; margin: 5px 10px 0 0;}.
Carousel_paging hiện tại, trang carousel_paging {outline: none; chiều rộng:.. 15px; chiều cao: 15px; line-height: 15px; text-align: center; màn hình hiển thị: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

Carousel_paging 1: hover, carousel_paging hiện tại {background: # 4D4D9B; color: # ffffff;}.

Vâng! có một vấn đề nhỏ, mặc dù neo phân trang nếu đặt, sau đó nó sẽ được tạo ra luôn luôn sau khi các thành phần Carousel. Tôi muốn làm cho nó năng động, nhưng sau đó chỉ để giữ cho các Script thổi ra tỷ lệ, tôi quyết định bỏ qua nó.
Nhưng bạn biết Javascript, bạn có thể dễ dàng thay đổi mã thế hệ phân trang trong lớp MooCarousel để làm hài lòng nhu cầu của bạn.

2. Customising các biểu tượng phải & trái

Bạn có thể thay đổi ĐẶT, HÌNH ẢNH hoặc bất kỳ tài sản displat của các nút trái và bên phải chỉ đơn giản bằng cách chơi xung quanh với CSS. để có thể thay đổi vị trí của các buttoms trái và bên phải là lý do thực sự cho tôi để phải Lớp Carousel của chúng tôi.
Kể từ khi lớp MooCarousel này, chấp nhận id của các nút này, bạn thực sự có thể đặt các nút này bất cứ nơi nào trên trang web, nếu bạn xin vui lòng ... nó không phải là trong hệ thống phân cấp yếu tố, như trong ví dụ của tôi.

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true);

CSS
Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; vị trí: tương đối; width: 23px; chiều cao: 20px; float: left; con trỏ: con trỏ;}

Carousel_container_r {background-position: 0-38px;}.

Carousel_container_l {vị trí: 0-58px;}.

3. Customising bước trượt

TÔI CÓ NGHĨA LÀ BƯỚC SLIDE CUSTOMISING CỦA TÔI?
Hầu hết Carousels trượt đầy đủ với các cửa sổ có thể nhìn thấy. Vì vậy, nói rằng bạn đã có bốn mục (như trong mẫu của tôi ở trên), nó sẽ trượt tất cả bốn mục. Với phần Carousel, vượt qua số lượng các slide và kích thước các bước của sự lựa chọn của bạn.

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true);
c_ns = số của slide, c_sss = trượt kích thước bước

Ngoài ra, trong example1 của tôi, tôi đã calcuted kích thước bước trượt, dựa trên luận lý mà, tôi biết số hạng mục, chiều rộng trên mỗi mục và biên độ đã được đưa ra sau khi mỗi mục trong CSS của tôi.

/ * Đối với tiệc tùng 1 * /

var c1_w = 92; / / tiệc tùng khoản Rộng

var c1_n = 10; / / Tổng số khoản uống rượu say So sánh

var c1_pp = 4 / / Số perpage So sánh mục uống rượu say

var c1_marginFactor = 51;

var c1_sss = c1_w c1_pp; / / sss = slide kích thước bước

Các var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = số slide

c1_sss + = c1_marginFactor; / / sss = trượt bước kích thước, 51 cho lợi nhuận

Yêu cầu: Mootools 1,2

Xem Demo | Tải về Mootools Carousel Với 1,0 Phiên bản Paging (tải về 1.990 lần)

Các Mootools MooRating là một (qua trình duyệt, tất nhiên là nó sử dụng sức mạnh của thư viện MooTools) đơn giản, nhẹ và xuất sắc dựa trên giải pháp đánh giá. Nó không được gọi là "Đánh giá Star", đơn giản chỉ vì, hình ảnh đánh giá có thể được như bạn chọn (tôi đã cung cấp Stars, Bars và Hearts tải về, nhưng bạn có thể tạo ra nhiều của riêng bạn và chỉ cần thả nó trong).

Làm thế nào để nó trông giống như:

	Mootools Rating với hình ảnh khác nhau Xem Demo
	Rating Mootools với các giá trị Tỷ lệ phần trăm Xem Demo
	Rating Mootools với các giá trị Fractional Xem Demo

Tải về Mootols Star Rating Script (tải về 718 lần)

Đánh giá dữ liệu: Toàn bộ số thập phân hoặc Tỷ lệ phần trăm
Hiện tại, kịch bản được thiết kế để hiển thị các dữ liệu đánh giá như giá trị toàn bộ (1,2,3,4,5), trong số thập phân (1,24, 3,45 vv) hoặc tỷ lệ phần trăm (12%, 55% ...). Sự lựa chọn để hiển thị dữ liệu trong bất kỳ các định dạng được đề cập có thể được thiết lập chỉ đơn giản bằng cách thay đổi một số giá trị cờ trong javascript (moorating.js)
Về cơ bản có 2 e hai lá cờ để chơi với, để hiển thị các giá trị trong các định dạng của sự lựa chọn của bạn ...

var inpercent = false; / / Thiết lập lá cờ này cho đúng sự thật, nếu bạn yêu cầu tỷ lệ phần trăm giá trị được hiển thị
var isFractional = false / / Thiết lập này cho đúng, nếu bạn muốn giá trị phân đoạn như 1,24, 1,25, 4,56 chứ không phải là 1,2 ... 5

Và tôi không nghĩ rằng có bất kỳ lời giải thích cần thiết cho việc này. Hơn nữa. Kịch bản là rất đơn giản. Nếu bạn biết một javascripting, bạn có thể thay đổi kịch bản để có được bất kỳ loại giá trị hiển thị. Đối với ví dụ nếu bạn muốn ba chữ số thập phân sẽ được hiển thị ... chỉ cần tinh chỉnh các kịch bản như dưới đây ...

nếu (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);} / / 2 được thay đổi đến 3
moostartval [i] innerHTML = Math.round (x).

Cập nhật giá Rating:
Tôi havent phiền bằng văn bản bất kỳ kịch bản AJAX để cập nhật các giá trị Ratings, bởi vì tôi biết từ kinh nghiệm của tôi mà không luôn luôn làm điều đó có ý định cập nhật ĐÁNH GIÁ như ngay sau khi một cái gì đó tỷ lệ người sử dụng. Bạn được tự do để làm bất cứ điều gì bạn muốn với giá trị đánh giá, cập nhật nó bằng cách sử dụng AJAX hoặc Gửi hoặc Thiết lập một giá trị hình thức lĩnh vực tiềm ẩn, được gửi cùng với toàn bộ hình thức.

updateRating chức năng (id, rating) {
/ / Alert (id + "," + Đánh giá);
/ / DO WHATEVER VỚI CÁC ĐÁNH GIÁ
}

Có chức năng trong javascript được gọi là "updateRating". Chức năng này đã được thông qua ID của Div Bình, để xác định để xếp hạng (nếu có là một xếp hạng trên trang web) đã được cập nhật và giá trị của các đánh giá [updateRating (id, rating). Bạn có thể chọn bất cứ điều gì bạn muốn với các giá trị này, như tôi đã đề cập trước đó.

Đánh giá hình ảnh: Sao, Hearts, quán rượu, hoặc bất cứ điều gì bạn vui lòng
Thay đổi sự đánh giá của các loại trên (ngôi sao, trái tim ...) là rất đơn giản. Chỉ cần tạo ra một hình ảnh tương tự như một trong những được cung cấp và thả nó. Ghi, nếu bạn thay đổi tên của hình ảnh, không làm thay đổi cần thiết trong file CSS, xem dưới đây.

Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; chiều cao: 20px; float: left; background: url ('stars.gif') repeat-x;}.
Moostar khoảng {float: left; margin: 0px; padding: 0px; màn hình hiển thị: block; width: 84px; chiều cao: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}.
.. Moostar curr {background: url ('stars.gif') để lại 25px;}

Xếp hạng hầu hết các vật dụng sử dụng hình ảnh ngôi sao và một nửa sao với con chuột qua các sự kiện trên mỗi ngôi sao. Moo Ratings sử dụng một hình ảnh đơn giản ma như là một hình nền để đạt được các hiệu ứng hình ảnh theo yêu cầu với một chi phí rất thấp.

Yêu cầu: Mootools 1,2
Tải về Mootols Star Rating Script (tải về 718 lần)

Tôi đã được tìm kiếm một thanh trượt gắn đôi nắp trượt với hai nút bấm, tối thiểu và tối đa bằng cách sử dụng mootools. Mặc dù, tôi đã tìm thấy một thanh trượt thực hiện vài đôi pin trong diễn đàn mootools, vấn đề duy nhất là tất cả những dint thanh trượt có các điểm đánh dấu phạm vi lựa chọn. Cuối cùng! Tôi quyết định để tạo của riêng tôi. Vâng! Tôi đã sử dụng mã ban đầu và sửa đổi nó để có một nền tảng trượt mà chỉ ra phạm vi lựa chọn trực quan, như trong ví dụ của tôi dưới đây. Các khu vực Blue cho biết phạm vi giá trị lựa chọn.

Phiên bản 2.2 Demo | các Mootools Tải về đôi Pinned trượt Phiên bản 2.2 (tải về 11719 lần)

Bạn có thể dễ dàng thay đổi giao diện và cảm nhận của chỉ số phạm vi (màu xanh trong ví dụ trên), núm thanh trượt, thanh trượt theo dõi bằng cách sửa đổi các slider.css theo yêu cầu.

Đừng thả một bình luận nếu bạn tìm thấy nó hữu ích.

Nếu bạn là một trong những kẻ (như tôi), những người thường xuyên kiểm tra CSS của trang HTML cũng được thực hiện, để có được cảm hứng hoặc bất cứ điều gì, sau đó bạn có thể đã nhận thấy rằng chúng tôi đã sử dụng định vị giả (như đã đề cập trong bài viết trước của tôi Chúng tôi là bằng cách sử dụng Faux định vị tuyệt đối: Một CCS Brilliant Layout )

Chúng tôi đã làm một số công việc trên mẫu này, do đó, nghĩ rằng nó sẽ tốt đẹp để chia sẻ .... Tải về WordPress Theme (tải về 196 lần)