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.991 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.991 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ề 11752 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.

Trước khi chúng tôi đã phải đối phó với CSS để tạo ra bố cục trang của chúng tôi, việc sắp xếp một số nội dung bên trong một ô trong bảng dường như chỉ trẻ em chơi. Đơn giản chỉ cần thiết lập "align" tài sản "valign" của bảng để có sự liên kết của sự lựa chọn của bạn, mảnh bánh!
Với bố trí CSS, mặc dù chúng tôi có "theo chiều dọc-align" tài sản cho các yếu tố, nó không có vẻ như đơn giản như "sắp xếp" hoặc tài sản "valign". Để được specifiic nhiều hơn "theo chiều dọc-align" không bao giờ có vẻ như để giải quyết bất kỳ vấn đề của bạn, đặc biệt là nếu được viết một phần của qua trình duyệt CSS.

Nếu không có việc sử dụng các bảng HTML, VẤN ĐỀ trung vào đối tượng, là một hình ảnh hoặc một số văn bản trong một bộ phận chứa, có thể được tất cả các UI / CSS phát triển cơn ác mộng tại một số điểm. Vấn đề này tiếp tục ngoại suy lo lắng của bạn sắp xếp, nếu các đối tượng được làm trung tâm năng động trong tự nhiên, tức là khi chiều cao của nó là biến (không rõ chiều cao).

Mặc dù có là không có giải pháp được gọi thẳng về phía trước sẽ làm việc trên phạm vi của các trình duyệt chúng ta phải đối phó với các giải pháp mà tôi đã cố gắng để đi đến không có vẻ làm việc trong các trình duyệt mà tôi đã thử nó trong (IE6, IE 7 , FF).

GIẢI PHÁP:
Trong các trình duyệt như Mozilla, Opera và Safari, lạ hành xử "theo chiều dọc-align" tài sản có thể được đưa đến giác quan của nó, chỉ đơn giản bằng cách thiết lập "hiển thị" tài sản của các bộ phận có chứa tế bào bảng "(display: table-cell) .

Vấn đề vẫn còn với gia đình của các trình duyệt IE, người, nhưng dường như không hiểu những gì với tài sản "bàn di động" và không biết gì như họ, họ chỉ cần bỏ qua nó. Các giải pháp đưa ra dưới đây, mặc dù đơn giản, quảng cáo một DOM vài yếu tố HTML của bạn để làm cho mọi việc xảy ra.

CSS và HTML trông như thế này
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> views: 3456 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

xem demo ở đây | Tải tập tin Source (tải về 452 lần)

TOP Align CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> views: 1234 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

BOTTOM Align CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> views: 1234 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

xem demo ở đây | Tải về tại đây

Có vẻ như lứa tuổi, kể từ khi tôi đã cố gắng tìm một giải pháp hợp lý cho vấn đề này liên kết. Nhưng bây giờ với giải pháp này, tôi cảm thấy hòa bình ít.

Với hy vọng rằng một ngày nào đó

• tài sản liên kết dọc trong CSS sẽ làm việc như nó bên trong một ô trong bảng, KHÔNG phải đánh bại nhiều quanh co
• Ít nhất, thiết lập margin-top: tự động và lề dưới: tự động, sẽ cho kết quả tương tự như với margin-left và thiết lập lề bên phải để tự động
• Cuộc chiến trình duyệt sẽ có một ngày nào đó.
• Có chỉ ONE trình duyệt cho tất cả.

Tải về CSS và HTML của các giải pháp trên đây (tải về 452 lần) ... cho dễ hiểu, CSS không được tối ưu hóa

PS: Và bằng cách này, đó là hình thu nhỏ của một số hình ảnh tôi đã nhấp vào ...

Không phải là chỉ có một lightbox vài điều mà bạn có thể tìm thấy khi bạn google. Vấn đề với hầu hết các của các lightboxes mà tôi tìm thấy là tất cả họ dường như sử dụng một khuôn khổ cân nặng JAVASCRIPT khác như jQuery, Prototype, MooTools và thích. Họ là tất cả các mát mẻ và khoe khoang tìm kiếm. Nhưng nếu yêu cầu của bạn là "NHƯNG TÔI MUỐN Một SCRIPT lightbox Đơn giản và nhẹ cho SITE CỦA TÔI", sau đó ở đây là;

Một số tính năng tốt đẹp của lightbox này

1. Rất nhẹ
   a. 4KB của kịch bản khi đóng gói (8 kb giải nén)
   b. 2 kb của CSS
   c. Vài dòng mã HTML chứa lightbox
2. Đơn giản để hiểu và thực hiện
3. Có thể có Lightboxes nhiều trên cùng một trang.
4. Lightbox cùng một container được sử dụng để hiển thị nội dung khác nhau (một cách riêng biệt bao gồm như là những bộ phận ẩn trong trang), tùy thuộc vào liên kết / tùy chọn mà được nhấp.
5. Tự động trung tâm, xem xét tất cả các yếu tố như chiều cao và chiều rộng cửa sổ (màn hình độ phân giải), trang số tiền di chuyển và chiều cao của các nội dung của lightbox
6. Thử nghiệm trong IE 7 & FF

Xem Demo |
Tải về Lightbox Source Zip (tải về 1.804 lần)

jo.js, jo_pack.js [đóng gói phiên bản]: - một tập hợp đơn giản của JAVASCRIPT ĐỐI TƯỢNG [JO], trong đó có yếu tố, cửa sổ và các kịch bản định vị tài liệu. Bạn có thể mở JO.JS nếu bạn muốn để có được bàn tay của bạn bẩn với một số Javascripting nâng cao, tạo ra các chức năng trừu tượng, mở rộng các thuộc tính yếu tố và như vậy. Nếu bạn không quá nhiều trong Javascripting, Để lại nó một mình.

lightbox.js, lightbox_pack.js [phiên bản đóng gói: - Thành phần các kịch bản quản lý hộp ánh sáng. Nếu bạn là nhà thiết kế trang, cũng chịu trách nhiệm với việc thực hiện các lightbox trên trang web, bạn cần hiểu LightBoxManager. LightBoxManager về cơ bản có hai chức năng showLightBox và closeLightBox.

lightbox.css: - Nếu bạn biết CSS, bạn có thể chơi xung quanh với lightbox.css để tùy chỉnh giao diện-n-cảm thấy lightbox.css

index.html: thực hiện mẫu của lightbox với hai nội dung khác nhau

lb_underlay_bkg.png: - Đây là hình ảnh ánh sáng / Simi trong suốt được sử dụng nền cho underlay lightbox [Underlay là lớp dưới đây lighbox, trong đó ngăn chặn người sử dụng từ cách nhấp vào bất kỳ thực thể khác trên trang, trong khi lightbox là mở]. Bạn có thể sử dụng bất kỳ hình ảnh hoặc thậm chí là một màu cho mục đích này, tùy thuộc vào thiết kế trang và yêu cầu.

icon_lb_close.gif: - hình ảnh để xử lý lightbox gần phía trên bên phải của hộp ánh sáng. Có thể sử dụng bất kỳ hình ảnh theo thiết kế

Xem Demo |
Tải về Lightbox Source Zip (tải về 1.804 lần)

Xin vui lòng cho chúng tôi có ý kiến và phản hồi của bạn ...

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)