Plugin này được viết bởi Kenneth Auchenberg thuộc Podio Lab. Trước đây nó là một dự án đóng nhưng tới thời điểm này nó được open-source để cộng đồng cùng phát triển. Các bạn có thể truy cập vào repo của jquery.mentionsInput tại đây. Plugin dùng event input của HTML5 mỗi khi ta gõ text Cách sử dụng khá đơn giản: Trước tiên khai báo sử dụng Jquery.mentionsInput: 1
Tìm đến bất cứ input nào thêm class tên mention vào. 1
Khởi tại event với data có sẵn
`$('textarea.mention').mentionsInput({`7 Khởi tại event với data lấy từ CSDL 1 2 3 4 5 6 7 8 9 `$('textarea.mention').mentionsInput({`8
`$('textarea.mention').mentionsInput({`7 Dữ liệu data phải có dạng JSON và cấu trúc như sau: 1 2 3 4 5 6 7 `onDataRequest:function (mode, query, callback) {`2
`$('textarea.mention').mentionsInput({`6 Trong đó: id: số nguyên định danh bất kỳ name: chính là tên gợi ý ra để chọn avatar: hình ảnh trước tên icon: tên class để style cho avatar type: chính là dạng dữ liệu sẽ dùng để hiển thị gợi ý Dạng dữ liệu của text gợi ý nếu bạn muốn lấy: Ví dụ: 1 ``4 Một số thuộc tính có thể khai báo thêm khi khởi tạo: triggerChar: @ – dùng để chỉ định khi gõ ký tự nào sẽ hiển thị mention minChars: integer – chỉ định bao nhiêu ký tự sau khi gõ triggerChar thì mention sẽ hiển thị ra showAvatars: true|false – hiển thị avatar hay không Một số phương thức có thể dùng để lấy dữ liệu đã nhập: init(): dùng để khởi tạo mention trên một input nào đó reset(): xóa bỏ tất cả các text mention đã chèn ở một input nào đó val(callback): trả về giá trị gồm cả text lẫn mention ở một input nào đó getMentions(callback): chỉ trả về cấu trúc dữ liệu của mention ở một input nào đó đã chèn Cách sử dụng các phương thức: 1 2 3 ``5
`$('textarea.mention').mentionsInput({`7 Trong đó textarea.mention: tên element nào đó val: chính là tên phương thức (bạn có thể dùng 1 trong 4 phương thức bên trên) Lưu ý: là chỉ 2 phương thức có callback mới dùng function để xử lý data nhé. Tương thích: Jquery.mentionsInput có thể chạy trên Firefox 6+, Chrome 15+, và Internet Explorer 8+ và yêu cầu jQuery (1.6+) trở lên. Trong ví dụ trên có dùng thêm underscore.js để sử dụng function _.filter Ngoài ra có thể dùng thêm plugin jquery.elastic.js để làm cho mục gợi ý co giãn để phù hợp với chiều rộng của input Các chuyên đề loading trước đây cho chúng ta biết được cách tạo một hiệu ứng loading như thế nào, với chuyên đề này sẽ giúp các bạn biết được cách sử dụng để tạo thực tế hiệu ứng loading. Chi tiết Đoạn code sau đây sẽ giúp chúng ta sử dụng các thành phần khác đối xử như một radio style. Chi tiết Một lúc nào đó bạn cần những button đối ứng như một checkbox, thì đoạn code sau đây sẽ giúp bạn. Chi tiết Cũng tương tự như input, chúng ta cũng có thể sử dụng cho textarea. Chi tiết Placeholder hiện nay được sử dụng khá dễ dàng với html5, tuy nhiên đối với html hay xhtml thì việc dùng js hay jquery lại khá quan trọng. Chi tiết Đôi khi trong một số trường hợp ta dùng liên kết để upload file thay vì dùng mặc định từ input type=”file” Chi tiết Việc lấy ngày tháng không phải là việc kho nếu bạn nắng vững một số hàm cơ bản trong javascript. Chi tiết Một đoạn văn bản dài, khi muốn giới hạn lại số lượng từ, và nội dung còn lại sẽ được thay thế bằng một liên kết Xem thêm, nội dung này sẽ được hiển thị khi ta click vào liên kết. Chi tiết Canh thành phần giữa màn hình ngay cả khi resize màn hình lớn nhỏ khác nhau. Chi tiết Việc canh giữa thành phần con theo chiều dọc và cả theo chiều ngang bằng CSS trở nên phức tạp, với jQuery bạn có thể thực hiện dễ dàng hơn với cách dùng đơn giản hơn. Chi tiết Đôi khi muốn thêm một thành phần vào trước thành phần đã có, có khi cần nhiều cách xử lý chuỗi, hay kết hợp nhều thành phần khác nhau, ở jQuery có cung cấp cho chúng ta cách tiếp cần dễ hơn với .before(). Chi tiết Thêm mới một thành phần ngay sau thành phần đã tồn tại, không gì hay bằng .after(). Chi tiết Nếu việc thêm một thành phần gây mất thời gian cho bạn khi phải lấy giá trị và cộng chuỗi, thì jQuery cung cấp một function đơn giản hơn .append(). Chi tiết Để thêm hoặc di chuyển một thành phần mới tới thành phần đã tồn tại, chúng ta có thể làm nhiều cách khác nhau, một trong cách hữu dụng mà đơn giản là dùng .appendTo(). Chi tiết Trong jQuery có một hàm rất hữu dụng trong việc lấy nội dung của các thành phần html, đó chính là .html() – đơn gian, dễ sử dụng. |
