Công cụ thành viên

Công cụ trang web


programming5:theme:meo-chen-css-js-trong-tpl

Đây là một phiên bản cũ của tài liệu!


Mẹo chèn CSS và Javascript trong TPL

Không cần phải gọi CSS và Js ở biến $my_head hoặc $my_footer giờ đây nhà phát triển có thể viết trực tiếp vào bất ky file TPL nào. Ví dụ

<link rel="stylesheet" href="{$NV_BASE_SITEURL}{$NV_ASSETS_DIR}/js/select2/select2.min.css">
<script src="{$NV_BASE_SITEURL}{$NV_ASSETS_DIR}/js/select2/select2.min.js"></script>
<script src="{$NV_BASE_SITEURL}{$NV_ASSETS_DIR}/js/select2/i18n/{$NV_LANG_INTERFACE}.js"></script>
<script>
$(document).ready(function() {
    $(".select2").select2({
        width: "100%",
        containerCssClass: "select2-sm"
    });
});
</script>

Khi xuất ra trình duyệt, hệ thống tự động trích xuất các file css lên trên thẻ head, các file js đưa xuống cuối trang.

Đối với các file CSS

Hệ thống sẽ viết lại CSS theo đúng thứ tự mà nó được tìm thấy HTML thô khi xuất ra trình duyệt. Trong một số trường hợp nhà phát triển muốn sắp xếp thứ tự xuất hiện của các file CSS có thể sử dụng thuộc tính data-offset. Ví dụ

<link data-offset="0" rel="stylesheet" href="{$NV_BASE_SITEURL}{$NV_ASSETS_DIR}/js/select2/select2.min.css">

Số càng nhỏ thì file CSS càng ưu tiên xuất hiện trước. Ví dụ:

<link rel="stylesheet" href="/themes/admin_nv5/fonts/fonts.css">
<link data-offset="3" rel="stylesheet" href="/themes/admin_nv5/libs/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/themes/admin_nv5/libs/perfect-scrollbar/css/perfect-scrollbar.css">
<link data-offset="0" rel="stylesheet" href="/themes/admin_nv5/libs/gritter/css/jquery.gritter.css">
<link rel="stylesheet" href="/themes/admin_nv5/css/nv.core.css">

Sẽ cho ra trình duyệt:

<link rel="stylesheet" href="/themes/admin_nv5/libs/gritter/css/jquery.gritter.css">
<link rel="stylesheet" href="/themes/admin_nv5/libs/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/themes/admin_nv5/fonts/fonts.css">
<link rel="stylesheet" href="/themes/admin_nv5/libs/perfect-scrollbar/css/perfect-scrollbar.css">
<link rel="stylesheet" href="/themes/admin_nv5/css/nv.core.css">
Các file không có thuộc tính data-offset thì mặc định nó là 10000
programming5/theme/meo-chen-css-js-trong-tpl.1536542990.txt.gz · Sửa đổi lần cuối: 2018/09/10 01:29 bởi hoaquynhtim99