Tạo chữ hoa đầu dòng cực đỉnh

Html & Javascript 31-5-2015

Trước đây mình có giới thiệu cho các bạn 2 bài viết về tạo chữ hoa đầu dòng là : Kỹ thuật làm chữ hoa đầu dòng (Drop cap) và Cách tạo Drop Cap cho từng bài viết trong WordPress , với 2 bài viết này, chúng ta sử dụng kỹ thuật css để làm. Hôm nay mình xin giới thiệu cho các bạn thêm một cách nữa, đó là sử dụng jQuery plugin : Capital Letter.

Capital Letter, Drop Caps, jQuery Plugins, jQuery, javascript

Đầu tiên, các bạn cần tải plugin này về máy tại đây.

Cách cài đặt :

Ngay sau tải về máy, các bạn đặt đường dẫn đến Plugin ngay sau thư viện jQuery :

<script src="/path/to/capital.min.js"></script>

Cách sử dụng :

Nếu cần chữ hoa đầu dòng ở thẻ html nào, thì các bạn chỉ việc khai báo như sau :

// Apply the pluging to any paragraph in the page

    $('p').CapitalLetter();



    // Apply it to all <p> inside <article>

    $('article p').CapitalLetter();

Ngoài ra các bạn còn có thể chèn những định dạng CSS vào bên trong để định dạng cho chữ hoa đầu dòng như sau :

$('p').CapitalLetter({color: "#02AD08"});

Ví dụ cụ thể

Để các bạn hiểu rõ hơn về cách sử dụng plugin này, chúng ta sẽ làm một ví dụ đơn giản như sau. Giả sử chúng ta có đoạn văn nằm trong các thẻ html như sau :

<div class='article type-1'>

    <h1>Capiral Letter jQuery plugin</h1>

    <p>This examples uses a webfont for the capital letter so it looks much nicer.</p>

</div>



<div class='article  type-2'>

    <h1>Post Title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>

</div>

Và để tạo chữ hoa đầu dòng cho từng đoạn, chúng ta viết câu lệnh jQuery như sau :

$(document).ready(function() {

    $('div.article >  p').CapitalLetter({

        'color': '#02AD08',

        'font-family': 'kaushan_scriptregular',

});

Kết quả sẽ là :

Capital Letter, Drop Caps, jQuery Plugins, jQuery, javascript