Các ngôi sao trong xếp hạng không hoạt động. Xếp hạng sao bằng cách sử dụng một ít mã CSS. Vì vậy, hãy chuyển sang tạo xếp hạng sao.
Trong bài viết này, chúng ta sẽ xem xét cách thêm xếp hạng sao cho các bài viết trên trang web.
Việc thêm chức năng này vào hệ thống CMS MODX Revolution có thể được thực hiện bằng tiện ích bổ sung FiveStarRating.
Tiện ích bổ sung FiveStarRatingFiveStarRating là một tiện ích bổ sung bổ sung các thành phần vào hệ thống MODX Revolution mà bạn có thể thực hiện xếp hạng tài nguyên ban đầu bằng cách sử dụng các ngôi sao.
Cài đặt tiện ích bổ sung FiveStarRatingTiện ích bổ sung FiveStarRating nằm trong kho modx.com.
Nó có thể được cài đặt trên hệ thống MODX Revolution trên trang "Quản lý gói".
Sử dụng tiện ích bổ sung FiveStarRating Việc kết nối hệ thống xếp hạng sao với tài nguyên được thực hiện bằng cách thực hiện lệnh gọi đến đoạn mã SimpleRating trong mẫu hoặc nội dung của tài nguyên.
[[!Đánh giá đơn giản]]
Tham số đoạn mã SimpleRating:
- &id - id của tài nguyên mà bạn muốn hiển thị xếp hạng (hiện tại theo mặc định).
- &tpl - đoạn chứa đánh dấu xếp hạng sao HTML (tplSimpleRating mặc định).
Ví dụ về cách gọi đoạn mã SimpleRating cho biết id tài nguyên:
[[!Đánh giá đơn giản? &id = `3` ]]
Một ví dụ về cách gọi đoạn mã SimpleRating cho biết tên đoạn:
[[!Đánh giá đơn giản? &tpl = `tplSimpleRating1` ]]
Đoạn mã SimpleRating thực hiện như sau:
- đăng ký các kiểu và tập lệnh cần thiết ở mặt trước;
- nhận được đánh giá của tài nguyên hiện tại hoặc được chỉ định và hiển thị nó trên trang;
- đặt xếp hạng hoạt động hay không, tùy thuộc vào việc người dùng đã xếp hạng tài nguyên này hay chưa.
Đánh giá được gửi qua ajax. Yêu cầu ajax được xử lý trên máy chủ bằng tệp action.php. Tệp này kiểm tra khả năng xếp hạng tài nguyên của một người dùng nhất định, đặt xếp hạng (ghi thông tin cần thiết vào cơ sở dữ liệu) và trả về kết quả. Sau khi nhận được kết quả từ action.php, tập lệnh JavaScript sẽ hiển thị nó trên trang.
Việc bảo vệ chống gian lận xếp hạng được thực hiện thông qua LocalStorage và địa chỉ IP.
Nếu cần, tính năng bảo vệ địa chỉ IP có thể bị tắt. Điều này được thực hiện bằng cách đặt tham số hệ thống simplelating_ip thành "Không".
Hiển thị các tài nguyên có xếp hạng cao nhất Để kết luận, hãy xem cách bạn có thể hiển thị 10 tài nguyên được xếp hạng cao nhất trên một trang. Để thực hiện tác vụ này, chúng tôi sẽ sử dụng đoạn mã pdoResources từ gói pdoTools.
[[!pdoResources? &loadModels=`đơn giản hóa` &parents=`0` &innerJoin=`( "SimpleRating": ( "class://SimpleRating", "on": "modResource.id = SimpleRating.resource" ) )` &sortby = `("SimpleRating. rating_value:"DESC")` &select=`( "modResource:"id,pagetitle", "SimpleRating": "xếp hạng_value" )` &tpl=`@INLINE
[[+id]]. [[+tiêu đề trang]] - [[+giá trị xếp hạng]]
` ]] Xin chào tất cả các hacker!Một ngày nọ, vào một buổi tối mùa đông lạnh giá, tôi quyết định thêm vào trang web, thay vì xếp hạng toàn sao, điền một phần cho các số phân số (4,5, 3,85, v.v.). Vì vậy, nó dễ nhìn hơn và có nhiều thông tin hơn - cơ sở nào tốt hơn và cơ sở nào tệ hơn. Vì thế tôi và nhóm ngồi xuống để suy nghĩ và đoán.
Cách chúng tôi tìm ra con đường của mình Vì chúng tôi chủ yếu có các cơ sở hàng đầu và xếp hạng trên 3, nên toàn bộ số sao làm mờ đi nhận thức rất nhiều. Nhưng ở đây có một số sắc thái. Cách thực hành phổ biến nhất là chồng các hình ảnh lên nhau. Ngay từ đầu, chúng tôi đã nghĩ đến việc thực hiện mọi thứ bằng cách sử dụng hình ảnh mặt nạ, nhưng than ôi, thiết kế không có nghĩa là các ngôi sao có thể ở cạnh nhau và việc kiểm soát độ rộng của khối điền và kích thước không thuận tiện lắm. kích thước của ngôi sao.
Ở đây Kinopoisk có tất cả 10 ngôi sao - một bức tranh, nơi chúng cũng được dán vào nhau. Điều này giúp họ rất dễ dàng sơn nhiều màu cam như trái tim họ mong muốn.
.starbar .outer ( nền: url(/images/starz.gif) no-repeat; chiều rộng: 219px; chiều cao: 30px; vị trí: tuyệt đối; ) .starbar_w ( hiển thị: khối; chiều rộng: 167.09px; nền: url(/ hình ảnh/starz.gif) 0 -62px không lặp lại; chiều cao: 30px; vị trí: tuyệt đối) Luôn có nơi nào đó để dạo chơi! Tuy nhiên, chúng tôi muốn có một tùy chọn phổ quát và có thể mở rộng, hoàn toàn tuân theo phương pháp BEM. Ngoài ra, không có một sprite nào trong dự án và tất cả các biểu tượng đều được triển khai bằng cách sử dụng bộ biểu tượng của riêng chúng tôi, được tập hợp cẩn thận thành một phông chữ. Nhưng tôi nghĩ chúng ta sẽ nói về điều này trong các bài viết khác;)
Nhìn chung, chúng tôi đã đưa ra một thử nghiệm: tại sao không đặt biểu tượng phông chữ của chúng tôi lên trên biểu tượng phông chữ khác? Vì vậy, chúng tôi đã làm nó.
Mỗi ngôi sao được tạo thành một vật thể riêng biệt, bao gồm .stars__out như một thùng chứa và .stars__in như một điền.
Và đây là CSS:
Cfi.cfi--star ( /* ... */ ) /* tương tự của chúng ta về Font Awesome, vẽ một ngôi sao */ .stars__out ( vị trí: tương đối; lề phải: 5px; /* thụt lề giữa các ngôi sao */ color: grey; z-index: 1; ) .stars__in ( /* chúng ta sẽ đặt phần tô màu của chúng ta làm phần tử con của biểu tượng chính và đặt nó lên trên cùng */ vị trí: tuyệt đối; z-index: 2; màu: cam ; /* cho nó màu nắng */ font -size: kế thừa; /* và kích thước phông chữ của cha mẹ */ /* chúng tôi sẽ cung cấp cho khối các điểm báo cáo liên quan đến cha mẹ */ display: block: left: 0; đáy: 0; cũng đặt chiều rộng thành 0 theo mặc định */ tràn: ẩn chiều rộng: 0;
Tất cả. Tiếp theo, khi chúng ta cần điền nó đến 100% (dấu hoa thị đầy đủ), chúng ta chỉ cần cung cấp cho nó một thuộc tính CSS chiều rộng: 100%.
Nhưng đối với những ngôi sao không hoàn chỉnh, chúng tôi sử dụng một thủ thuật khác. Chúng tôi đặt chiều rộng không x*100% và giá trị theo công thức tính toán đặc biệt.
Đó là tất cả về tâm lý. Chúng ta có xu hướng cảm nhận trực quan tỷ lệ lấp đầy về khối lượng chứ không phải về chiều rộng và vì ngôi sao ở bên trái và bên phải có diện tích rất nhỏ, điều này làm phức tạp nhận thức, chúng tôi đã nảy ra ý tưởng lấp đầy nó theo chiều rộng không -tuyến tính: 
Đối với mô hình phi tuyến, chúng tôi lấy hình sin. Nó mô tả hoàn hảo sự bắt đầu và kết thúc nhanh chóng của quá trình tăng trưởng cũng như sự tăng trưởng suôn sẻ ở giữa.
Chúng tôi mở nó ra, lấy arсsin, ép nó vào khung (0; 1) trên cả hai trục và có được một công thức hay và đơn giản để tính toán “sự viên mãn về mặt tâm lý” của một ngôi sao.
Mã JavaScript:
var y = Math.asin(2 * x - 1) / Math.PI + 0,5;
Hóa ra, nguyên tắc này hoạt động tốt trong các trình duyệt cũ hơn và thậm chí không có gì hoạt động trên IE9. Mọi người đều vui vẻ: các nhà thiết kế, khách hàng và thậm chí cả Cái tôi của tôi, điều đã thôi thúc tôi viết bài này.
Mọi chuyện bắt đầu khi tôi quyết định thay đổi xếp hạng cho các bài đăng trên blog của mình.
Lý do chính cho sự thay đổi xếp hạng là xếp hạng được hiển thị dưới dạng số sao "số nguyên", tối đa là nửa sao có thể được hiển thị. Nghĩa là, nếu xếp hạng cho một bài viết là 4,75 thì cần phải hiển thị 4,5 sao hoặc 5, điều này không phù hợp với tôi lắm.
Do đó, chúng tôi quyết định viết plugin jQuery của riêng mình để tạo xếp hạng sao.
Yêu cầu cơ bản đối với plugin:
- Xếp hạng phải được hiển thị chính xác, tức là nếu xếp hạng của tôi là 4,78 thì số sao được tô bóng sẽ phù hợp.
- Khả năng chọn hiệu ứng khi di chuột qua ngôi sao. Điều này có nghĩa là người dùng có thể đưa ra đánh giá gì. tức là khi di con trỏ chuột lên các ngôi sao, chúng phải được vẽ bằng toàn bộ ngôi sao hoặc nửa ngôi sao hoặc ở các giá trị tuyệt đối theo sau con trỏ chuột
- Khả năng thiết lập các ngôi sao của riêng bạn
- Khả năng chỉ định URL mà kết quả bỏ phiếu sẽ được gửi tới
- Khả năng chỉ định số lượng sao hiển thị trong xếp hạng
- Tự động từ chối kết quả biểu quyết. (Ví dụ: 1 phiếu, 2 phiếu, 5 phiếu)
- Khả năng thiết lập danh từ của riêng bạn cho kết quả bỏ phiếu
- Khả năng đặt giá trị xếp hạng tối thiểu dưới mức mà người dùng sẽ không thể bỏ phiếu
- Khả năng thực hiện chức năng tùy chỉnh khi nhấp vào ngôi sao
Sau khi các yêu cầu về plugin được phát triển, tôi bắt đầu lập trình. Kết quả là, tôi đã nghĩ ra thứ mà tôi cho là một plugin jQuery khá tốt để xếp hạng các ghi chú dưới dạng các ngôi sao mà tôi rất vui được chia sẻ với bạn.
Để sử dụng plugin này trên trang web của bạn, điều đầu tiên bạn cần làm là kết nối thư viện jQuery và chính plugin đó. Chúng tôi sẽ kết nối thư viện jQuery không phải theo cách thông thường mà từ kho lưu trữ của Google.
window.jQuery || document.write("");
Mã này phải được đặt giữa các thẻ trên trang web của bạn.
Bạn có thể đọc về lý do tại sao bạn cần kết nối jQuery từ kho lưu trữ của Google.
Ngoài ra, để plugin hoạt động chính xác, bạn cần kết nối các kiểu sau:
Bạn sẽ tìm thấy tất cả điều này trong mã nguồn.
Sau khi tất cả các kiểu và thư viện cần thiết được kết nối, bạn có thể gọi chính plugin đó. Để làm điều này, bạn cần chèn một div vào đúng vị trí trên trang của mình, ví dụ: với lớp xếp hạng:
Bây giờ bạn có thể gọi plugin trên phần tử này như thế này:
$("div. rating"). rating();
Trong trường hợp này, plugin sẽ được gọi với cài đặt mặc định, dẫn đến việc tạo ra 5 sao chưa lấp đầy.
Để đặt một số lượng sao được tô bóng nhất định, bạn cần chèn trường nhập ẩn với lớp val bên trong phần tử của chúng tôi, trường này sẽ chứa giá trị xếp hạng của bạn:
Nếu bây giờ bạn gọi plugin, xếp hạng sau sẽ được tạo:
Sau khi người dùng nhấp vào ngôi sao mong muốn, xếp hạng sẽ được tự động tính toán lại (số lượng ngôi sao được tô bóng sẽ thay đổi) có tính đến lựa chọn đã đưa ra và số phiếu bầu cũng sẽ thay đổi.
Nếu có một số xếp hạng trên một trang và bạn cần gửi dữ liệu đến máy chủ thì một trường nhập ẩn khác có lớp vote-id sẽ được sử dụng để xác định xếp hạng:
Giá trị của trường này sẽ được gửi đến máy chủ cùng với kết quả biểu quyết. Bằng cách này, bạn có thể xác định xếp hạng và cập nhật giá trị xếp hạng bạn cần!
Bây giờ hãy nói về những cài đặt mà plugin có và cách bạn có thể thay đổi chúng!
| ngoại hối | trôi nổi | Hiệu ứng khi di chuột qua ngôi sao.
|
| hình ảnh | đường dẫn đến hình ảnh ngôi sao. Cần lưu ý rằng hình ảnh phải được thực hiện dưới dạng sprite, tức là. Ở phía trên cùng của hình ảnh có một ngôi sao, ngôi sao này sẽ được hiển thị cho các ngôi sao chưa lấp đầy. Bên dưới nó là một ngôi sao, được hiển thị khi bạn di con trỏ chuột. Và ở phía dưới cùng có một ngôi sao, được hiển thị cho các ngôi sao được tô bóng. Nếu bạn quyết định thay đổi các ngôi sao thì trình tự này sẽ được duy trì. Tôi cũng lưu ý bạn rằng chiều cao và chiều rộng của một ngôi sao phải bằng nhau. Nếu không thì đánh giá sẽ không được hiển thị chính xác |
|
| chiều rộng | 32 | Chiều rộng của một ngôi sao |
| ngôi sao | 5 | Số sao hiển thị trong bảng xếp hạng |
| danh hiệu | [ "tiếng nói", "bỏ phiếu", "phiếu bầu" ] |
Một mảng danh từ sẽ được hiển thị để đếm phiếu |
| chỉ đọc | SAI | Đánh giá chế độ hoạt động. Mặc định này sai. Nếu đặt thành true thì sẽ không thể bình chọn |
| tối thiểu | 0 | Giá trị xếp hạng tối thiểu dưới mức này người dùng sẽ không thể bình chọn |
| địa chỉ | Địa chỉ của trang mà yêu cầu AJAX kèm theo kết quả biểu quyết sẽ được gửi tới |
|
| kiểu | bưu kiện | Loại yêu cầu AJAX. Mặc định là bài đăng. Nếu bạn cần gửi yêu cầu GET đến máy chủ thì hãy đặt giá trị này bằng - get |
| người nạp đạn | Đường dẫn đến hình ảnh sẽ được hiển thị trong khi yêu cầu AJAX được gửi đến máy chủ |
|
| nhấp chuột | Một hàm tùy chỉnh được gọi khi người dùng nhấp vào ngôi sao. Tham số đầu tiên của hàm sẽ là chính đối tượng xếp hạng và tham số thứ hai sẽ là kết quả bình chọn của người dùng |
Định dạng đầu ra tin nhắn tùy chỉnh
Giả sử bạn xử lý một yêu cầu trên máy chủ và cập nhật xếp hạng của ghi chú. Trong trường hợp này, bạn có thể hiển thị thông báo “Thank you. Phiếu bầu của bạn đã được tính”, xây dựng lại xếp hạng sao và cập nhật số lượng người bình chọn trong trình duyệt của người dùng.
Nhưng thông thường, trước khi cập nhật xếp hạng, bạn cần kiểm tra xem người này có bình chọn cho bài viết này hay không. Và nếu một người đã bỏ phiếu cho ghi chú này thì cảnh báo sẽ hiển thị trong trình duyệt của người dùng và không cập nhật giá trị xếp hạng cũng như số lượng người bỏ phiếu.
Do đó, để plugin hoạt động chính xác, máy chủ phải trả về đối tượng json có dạng sau:
Nếu trạng thái bằng giá trị - OK, thì xếp hạng sao sẽ được cập nhật và số lượng người bỏ phiếu sẽ được tính toán lại, nếu không, thông báo cảnh báo sẽ chỉ hiển thị.
Đây là plugin phổ biến mà tôi đã nghĩ ra để hiển thị xếp hạng các ghi chú dưới dạng sao.
Bạn có thể xem bản demo
Chúc một ngày tốt lành thưa quý vị và các bạn. Với sự trợ giúp của bài viết này, tôi muốn làm quen với bạn, đồng thời thử sức mình với tư cách là một tác giả. Và để việc làm quen này không trở nên vô ích, chúng tôi sẽ cùng bạn xem xét một số phương án để tạo ra một công cụ để đánh giá một thứ gì đó. Trên Internet, một yếu tố hình ảnh như “ngôi sao” đã bén rễ:
Ví dụ:
Mặc dù gần đây các công cụ đánh giá từ các dịch vụ của bên thứ ba ngày càng được sử dụng nhiều hơn, chẳng hạn như “lượt thích” từ Facebook hoặc Vkontakte, những công cụ này chỉ cho phép bạn đánh giá tài liệu theo hướng tích cực. Cho dù điều này là tốt hay xấu, chúng tôi sẽ quyết định một số công cụ khác. Bây giờ, chúng ta hãy xem xét một số tùy chọn để triển khai “dấu hoa thị” truyền thống.
Để bắt đầu, chúng ta cần hình ảnh của chính ngôi sao, trạng thái hướng và trạng thái hoạt động của nó cũng là điều mong muốn. Để làm điều này, tôi đã vẽ một ngôi sao như thế này và ngay lập tức kết hợp nó thành một hình sprite.
Sau này, chúng ta có thể chuyển sang bố cục.
Đánh giá thường xuyênHãy bắt đầu với điều đơn giản nhất: 5 sao nguyên khi di chuột, trạng thái của những ngôi sao trước đó cũng sẽ thay đổi. Về mặt ngữ nghĩa, danh sách có thứ tự có lẽ là phù hợp nhất. Tại sao lại ra lệnh? Ở đây mọi thứ đều đơn giản, các ngôi sao đều có “trọng lượng” riêng: từ một đến năm (hoặc bạn có bao nhiêu ngôi sao ở đó :)).
Vì vậy, cấu trúc rất đơn giản:
Hãy suy nghĩ ngay về cách chúng ta có thể đánh dấu các thành phần danh sách trước đó khi di chuột qua một trong số chúng. Chắc hẳn nhiều người biết đến CSS selector “~”. Đối với những người chưa biết, nó cho phép bạn chọn tất cả những người hàng xóm tiếp theo, tức là. hoạt động giống như +, nhưng có đặt trước cho “tất cả mọi người”. Nhưng anh ấy sẽ giúp chúng ta như thế nào? Rốt cuộc, chúng ta cần chọn các phần tử trước đó, không phải phần tử tiếp theo... Ở đây chúng ta sẽ sử dụng sự khéo léo của mình và sau khi sắp xếp các phần tử danh sách theo thứ tự ngược lại, áp dụng float: right cho chúng. Kết quả là chúng ta có được cấu trúc sau:
Đánh giá ( list-style: none; lề: 0; đệm: 0; chiều rộng: 100px; chiều cao: 20px; ) .đánh giá li ( display: block; width: 20px; Height: 20px; float: right; /* float đến phía bên phải chỉ cần thiết để căn chỉnh các phần tử theo thứ tự ngược lại */ text-indent: -9999px; /* ẩn văn bản */ con trỏ: url("stars.png" )
Bây giờ chúng ta cần thêm kiểu cho trạng thái di chuột:
Xếp hạng li:hover, .rated li:hover ~ li ( vị trí nền: 0 -20px; )
Dòng thứ hai thay đổi nền cho tất cả các phần tử trước đó (trừ những phần tử tiếp theo trong cây DOM).
Và tất nhiên, thêm một số phong cách:
Đánh giá li.active, .đánh giá li.active ~ li ( vị trí nền: 0 -40px; )
Nhưng điều này không có nhiều thông tin và tốt hơn là hiển thị xếp hạng dưới dạng phần trăm. Hãy thêm một phần tử khác vào danh sách, phần tử này sẽ chỉ hiển thị khi danh sách có một lớp nhất định - trong trường hợp của chúng tôi là .show-current . Cấu trúc cuối cùng của danh sách có dạng sau:
Để làm cho các ngôi sao của chúng ta trở nên sống động, hãy thêm một chút JS vào đó:
Var $xếp hạng = $(".xếp hạng"); $ rating.on("mouseover", function() ( $(this).removeClass("show-current"); )).on("mouseleave", function() ( $(this).addClass("show- hiện hành"); )); $("li", $ rating).on("click", function() ( Alert("User selected " + $(this).text()); //Mã phức tạp hơn có thể (và nên) được định vị một cách tự nhiên ở đây, ví dụ: gửi kết quả biểu quyết bằng ajax đến máy chủ và sau đó rút ra kết quả biểu quyết));
Tất nhiên, để sử dụng trong sản xuất, bạn vẫn có thể thực hiện một số tối ưu hóa:
ban đầu đặt chiều rộng thành 0 pixel
thêm css-transition thực sự cho hoạt ảnh bằng các công cụ trình duyệt
với một số độ trễ thông qua js đặt chiều rộng hiện tại
hình ảnh có thể được đưa vào css thông qua data:URL, do đó loại bỏ yêu cầu HTTP không cần thiết
Tất nhiên, bạn có thể nghĩ ra một số cải tiến khác, nhưng hãy để lương tâm của bạn quyết định điều đó.
Đánh giá “một nửa”Bạn cũng có thể thường xuyên nhìn thấy khi các ngôi sao không nguyên vẹn mà bị chia thành hai. Để tạo một đánh giá như vậy, bạn có thể sử dụng kỹ thuật tương tự, nhưng bạn sẽ phải sửa các kiểu với lời cảnh báo “nửa vời”. Tôi sẽ không mô tả mọi thứ, tôi sẽ chỉ đưa ra cấu trúc và phong cách cuối cùng kèm theo một số nhận xét.
Các phong cách phức tạp hơn:
Li ( display: block; width: 10px; Height: 20px; float: right; text-indent: -9999px; con trỏ: con trỏ; nền: url("img/stars.png") không lặp lại; ) li.current ( hiển thị: không; ) ul.show-hiện tại( vị trí: tương đối; ) ul.show-hiện tại li ( con trỏ: mặc định; ) ul.show-hiện tại li.current ( vị trí: tuyệt đối; trên cùng: 0; trái: 0; hiển thị : khối; chiều rộng: 0; vị trí nền: 0 -60px; lặp lại nền: lặp lại-x ) ul.show-current li.current:hover, ul.show-current li.current:hover ~ li ( vị trí: 0 -60px; ) ul.show-current li.current span ( display: block; chiều cao: 20px; chiều rộng: 0; nền: kế thừa; vị trí nền: 0 -40px; ) /* phần tử lẻ */ li: nth- child(odd) ( Background-position: -10px 0; ) /* chẵn khi di chuột và tất cả các số chẵn trước đó */ li:nth-child(even):hover, li:nth-child(even):hover ~ li : nth-child(even)( Background-position: 0 -20px; ) /* chẵn khi di chuột và tất cả các số lẻ trước đó */ li:nth-child(even):hover ~ li:nth-child(odd)( nền- vị trí: -10px -20px; ) /* số lẻ khi di chuột và tất cả các số lẻ trước đó */ li:nth-child(odd):hover, li:nth-child(odd):hover ~ li:nth-child(odd) ( nền-position: -10px - 20px; ) /* số lẻ khi di chuột và tất cả các số chẵn trước đó */ li:nth-child(odd):hover ~ li:nth-child(even) ( Background-position: 0 -20px; )
Hỗ trợ trình duyệt:
Tất cả các trình duyệt hiện đại, cộng thêm:
- Đánh giá thông thường - >= IE8
- Đánh giá một nửa - >= IE9 (do sử dụng:nth-child)
Chà, đó có lẽ là tất cả những gì tôi muốn nói với bạn. Đây đương nhiên không phải là lựa chọn triển khai duy nhất; bạn có thể tìm thấy nhiều lựa chọn khác trên Internet. Trong số các phương pháp chính, có 2 phương pháp: dựa trên đầu vào và một tùy chọn với kiểu cài đặt cho từng ngôi sao riêng lẻ, nhưng tôi nghĩ tùy chọn của tôi có quyền tồn tại (đặc biệt là sau khi IE8 khai tử). Thấy bạn.
tái bút. (trong kho lưu trữ, bạn có thể tìm thấy phiên bản ít hơn của css"a)
Tôi chào mừng mọi người đến với bài học tiếp theo về một chủ đề thú vị Xếp hạng sao của JQuery, đó là cái tên mà theo tôi, nên mô tả chính xác hơn tập lệnh này. Và vì vậy, trước hết, hãy bắt đầu với lý do tại sao cần xếp hạng và ý nghĩa của việc sử dụng nó trên các trang web. Đầu tiên, đây là địa vị xã hội của một phản ứng đối với bất kỳ tài liệu nào khơi dậy sự quan tâm, dù tốt hay xấu. Thứ hai, đây là một đánh giá và, giả sử, một cuộc khảo sát nhỏ để xem chủ đề này có thú vị chút nào hay không. Thứ ba, như trên trang web của chúng tôi, mức độ phức tạp của chủ đề, mặc dù ở đây chúng tôi đang tiến hành từ mức độ phức tạp dành riêng cho người mới bắt đầu, bạn nhớ nhé, chứ không phải từ mức độ phức tạp dành cho các nhà phát triển có kinh nghiệm, vì những tài liệu như vậy có thể không thú vị đối với họ và về nguyên tắc là không thú vị, ngoại trừ việc chỉ lấy kịch bản hoàn chỉnh. Vì vậy, đối với cá nhân tôi, đánh giá là đánh giá về tài liệu đã khơi dậy sự quan tâm. Ví dụ: bạn quan tâm đến việc mua một chiếc điện thoại di động hoặc thứ gì đó khác, bạn đến một cửa hàng trực tuyến nào đó và bạn có thể đánh giá mức độ phổ biến của nó dựa trên xếp hạng của nó; đây là nơi thể hiện địa vị xã hội về mức độ phổ biến của sản phẩm.
Bây giờ hãy nói về kịch bản nói chung và về ý tưởng của tôi. Về cơ bản, tôi quyết định chia kịch bản thành hai phần, tôi nghĩ nhiều người sẽ quan tâm đến cả phần một và phần hai, nhưng tôi không gộp chúng lại mà đăng thành hai bài khác nhau. Thứ nhất, bởi vì cả hai phần kết hợp với nhau sẽ khá quan trọng, và thứ hai, tôi muốn xem nhận xét của bạn, hoặc có thể là lời khuyên hoặc câu hỏi, về phần thứ hai, và thứ ba, trong phần thứ hai, nó chắc chắn sẽ không chỉ được sử dụng truy vấn. Nói chung, trong phần đầu tiên tôi muốn kể cho bạn nghe một câu chuyện về trang web nơi bạn có thể truy cập truy vấn plugin cho tập lệnh này và trong phần thứ hai, nhập xếp hạng khi bạn nhấp vào ngôi sao trong cơ sở dữ liệu mà không cần khởi động lại. Vì vậy, nếu bạn quan tâm đến phần thứ hai, tôi rất mong nhận được lượt thích và bình luận của bạn.
Nào, hãy bắt đầu. Đầu tiên, bạn nhất định phải truy cập trang web chính thức của plugin này và tải xuống. Ngoài ra, hãy nghiên cứu kỹ tài liệu về cách tự thiết lập plugin và tối ưu hóa nó để tập lệnh hoạt động bình thường. Sau khi xem xét, bạn sẽ có một tập tin jquery.raty.js, nếu có thể jquery.raty.css, nếu bắt buộc và có ảnh mặc định thì chỉ có 3 ảnh thôi. Một lần nữa, tôi sẽ nói rằng, đây là tất cả theo mặc định và theo tiêu chuẩn!
Phần đầu tiên. Kết nối tập tin js và css. HTML. Hình ảnh.
Theo tiêu chuẩn, chúng tôi bao gồm tệp kiểu demo.css và thư viện cần thiết cho công việc jquery.min.js, cắm vào jquery.raty.js và kịch bản của chúng tôi rate.js.
Sau đó, vào thư mục gốc của tập lệnh, thêm ba ảnh theo mặc định: star-on.png- đánh giá đầy đủ, star-off.png- không có giá, star-half.png- đánh giá một nửa. Nếu bạn có những bức ảnh của riêng mình và muốn sử dụng chúng, bạn có thể tạo chúng, chẳng hạn như tôi đã làm. Tôi đã tạo một thư mục hình ảnh và tải lên hai bức ảnh ở đó: rating_activ.png- ngôi sao hoạt động, rating_passiv.png- ngôi sao không hoạt động.
Bây giờ chúng ta hãy chuyển sang HTML mã số. Và tôi muốn lưu ý ngay rằng chúng tôi sẽ chỉ xuất bản ba ví dụ theo tiêu chuẩn; tất cả những ví dụ còn lại bạn có thể tìm thấy trên trang web chính thức, được nêu trong nguồn tài liệu.
Ví dụ đầu tiên.
Khi click vào dấu hoa thị, ngay lập tức xuất hiện cửa sổ gọi bằng phương thức báo động(), trong đó chúng tôi có thể biết chúng tôi đã nhấp vào ngôi sao nào và chúng tôi đã chọn xếp hạng nào.
Ví dụ thứ hai.
Khi bạn nhấp vào ngôi sao, xếp hạng cũng được tính toán. Để trình diễn, các bức ảnh của tôi đã được cài đặt ở dạng ngôi sao, nằm trong thư mục hình ảnh.
Ví dụ thứ ba.
Điều đáng chú ý là khi bạn nhấp vào, tất cả các ngôi sao sẽ được lưu trong xếp hạng mà bạn đã nhấp vào chúng, nhưng không phải trong cơ sở dữ liệu mà ở phần máy khách. Vì vậy, tôi quyết định thảo luận về phần thứ hai, nơi có thể phát triển tính năng lưu toàn bộ xếp hạng và đếm số lần nhấp chuột nói chung. Nghĩa là, đánh giá tổng thể sẽ được lưu trữ trong cơ sở dữ liệu.
Phần thứ hai. JQuery.
Bây giờ chúng ta có thể xem xét truy vấn một phần về xếp hạng sao chủ đề. Một lần nữa, tôi sẽ sử dụng cách diễn đạt mà chúng ta chỉ xem xét ba ví dụ, vốn là tiêu chuẩn.
Chúng hoạt động như thế nào, cái gì, như thế nào và tại sao, tôi đã mô tả chi tiết ở trên, vì vậy tôi sẽ chỉ tập trung vào những chi tiết mà bạn có thể chưa hiểu rõ.
$(document).ready(function())( $(".rate1").raty(( click: function(score, evt) ( notification("ID: " + this.id + "\nscore: " + point ) ; ) )); $(".rate2").rate(( số: 10, starOff: "img/rated_passiv.png", starOn: "img/rated_activ.png" )); tỷ lệ(( số: 4, target: ".name", gợi ý: ["rất tệ", "xấu", "ok", "tốt", "rất tốt"], ));
Dưới lớp tỷ lệ1, ta chạy hàm với tham số điểm Và sự kiện. Trong đó, đầu tiên chúng ta thu được bằng phương pháp báo động() cái tên, và thứ hai NHẬN DẠNG, đánh giá đã chọn của chúng tôi. Dưới lớp tỷ lệ2, chúng tôi đặt số lượng ngôi sao được hiển thị, hay đúng hơn là sẽ có mười ngôi sao trong số đó và chúng tôi làm cho các hình ảnh có thể áp dụng không phải theo mặc định mà theo chính chúng tôi, trong đó saoTắt- là dấu hoa thị không hoạt động, nhưng ngôi sao trên- tích cực. Dưới lớp tỷ lệ3, chúng tôi đặt số lượng sao được hiển thị và ẩn ngôi sao mặc định khỏi màn hình chung - rất tệ, đặt tổng giá trị trạng thái thành năm.
Phần thứ ba. Thư viện jquery.raty.js.
Hãy thảo luận ngắn gọn về plugin này. Nếu chủ đề này trở nên rất thú vị với bạn hoặc bạn không thể hiểu đầy đủ về nó, thì chúng tôi sẽ phân tích nó một cách riêng biệt và chi tiết, có thể sau phần thứ hai, nếu có hoặc có thể là một phần riêng biệt cho plugin. Chà, thành thật mà nói, chỉ cần đọc một chút tài liệu là đủ và mọi thứ sẽ ngay lập tức trở nên rõ ràng. Điểm chính cần chú ý là cài đặt mặc định.
Hủy: sai, cancelClass: "raty-cancel", cancelGợi ý: "Hủy xếp hạng này!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "left", nhấp chuột: không xác định , một nửa: sai, một nửaHiển thị: đúng, gợi ý: ["xấu", "kém", "bình thường", "tốt", "tuyệt đẹp"], iconRange: không xác định, di chuột: không xác định, di chuột qua: không xác định, noRatedMsg: "Không được xếp hạng chưa!", số: 5, numberMax: 20, đường dẫn: không xác định, độ chính xác: sai, readOnly: false, round: ( down: 0,25, full: 0,6, up: 0,76 ), điểm: không xác định, ScoreName: "score", single: false, space: true, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", target: không xác định, targetFormat: "(điểm)", targetKeep: false, targetScore: không xác định, targetText: "", targetType: "hint"
Một số cài đặt này, như bạn có thể thấy, tôi đã sử dụng trong tập lệnh của mình, hãy chú ý đến điều này! Nếu bạn không hiểu điều gì đó, bạn có thể viết nó trong phần bình luận. Cảm ơn sự quan tâm của bạn, chúc mọi người may mắn phát triển!
