[Dspace Tuts – hiển thị tài liệu mới cập nhật theo kiểu tự động chạy scroller ]
Bài viết này sử dụng plugin scroller jQuery để hiển thị tài liệu mới theo kiểu chuyển động và có tích hợp thêm nút để người dùng có thể di chuyển qua lại các tài liệu mới ngay trên trang chủ.
* Đầu tiên cần phải download plugin jQuery này về: jQuery Plugin
* Sau khi tải về, giải nén và copy file jquery.bootstrap.newsbox.min.js (nằm trong thư mục scripts) vào thư mục js (đường dẫn C:\dspace\webapps\jspui\static) của thư mục dspace đã cài.
* Tiếp theo mở file header-default.jsp ( đường dẫn C:\dspace\webapps\jspui\layout), thêm đoạn code sau để gọi file jquery.bootstrap.newsbox.min.js chạy.
<script type=”text/javascript” src=”<%= request.getContextPath() %>/static/js/jquery.bootstrap.newsbox.min.js”> </script>
* Tiếp tục download code hiển thị tài liệu mới cập nhật (được đặt tên tailieumoi.jsp) tại đây, sau khi tải về copy vào thư bỏ vào mục discovery ( đường dẫn C:\dspace\webapps\jspui\discovery)
* Mở file tailieumoi.jsp lên bạn sẽ thấy đoạn code hiển thị tài liệu mới (có thể tùy chỉnh cách hiển thị tài liệu mới trong file này), tuy nhiên có thêm đoạn code javascript sau cần lưu ý:
<script type=”text/javascript”>
$(function () {
$(“.recentsub-home”).bootstrapNews({
newsPerPage: 5, // số tài liệu hiển thị
autoplay: true, // tự động chạy
pauseOnHover:true, // dừng lại khi đưa con trỏ chuột vào
direction: ‘up’, // kiểu chạy dưới lên
newsTickerInterval: 4000, // thời gian tự động chạy
onToDo: function () {
//console.log(this);
}
});
});
</script>
* Mở tiếp file dspace.cfg (đường dẫn C:\dspace\config), tìm đoạn recent.submissions.count = 10, thay đổi để số lượng hiển thị này phải lớn hơn newsPerPage ở code javascript trên (ecent.submissions.count > newsPerPage).
* Tiếp theo mở dspace-theme.css để định dạng lại cho vị trí này , ví dụ:
/* getRecentSubmissions */
.panel-footer{
background:#fff;
}
* Cuối cùng mở home.jsp (đường dẫn C:\dspace\webapps\jspui), thêm đoạn code sau vào vị trí tùy chọn, ví dụ dưới Duyệt theo các đơn vị:
<%@ include file=”discovery/tailieumoi.jsp” %>
* Giải thích
Code hiển thị tài liệu mới ra trang chủ vẫn có thể chèn trực tiếp ngay file home.jsp, tuy nhiền để dễ dàng chỉnh sửa code mình tách ra thành một file , đặt nó nằm trong thư mục discovery sau đó dùng hàm include gọi ra .
Để cấu hình thêm cho plugin scroller jQuery, bạn có thể mở file hướng dẫn How to use it.doc nằm cùng với thư mục chứa plugin scroller jQuery đã tải về.
Bài viết sẽ có sai sót , rất mong các bạn góp ý để hoàn thiện hơn, chúc các bạn thành công.
