Tích hợp bộ gõ tiếng việt mudim vào website

Gần đây mình có được khách hàng yêu cầu tích hợp chức năng gõ tiếng việt trực tiếp vào website, tức không cần cài unikey vẫn gõ tiếng Việt được trên website của họ. Sau khi mò mẫn trên google mình tìm được một bộ gõ này khá hay và muốn chia sẻ với bạn nào cần dùng.

1. Chuẩn bị.

- Để download jquery plugin này các bạn có thể download tại đây hoặc download ví dụ đính kèm cuối bài viết.

- Plugin này có đi kèm với fancybox nữa, các bạn có thể download plugin này tại đây.

2. Tích hợp vào website.

- Sau khi đã download các plugin về, các bạn đưa vào website ta được như sau.

- Chúng ta cần đưa các thư viện jquery & css cần thiết vào phần head của trang như sau.

<%--font icons--%>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <%--jquery--%>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <%--fancybox--%>
    <link href="fancybox2.1.5/jquery.fancybox.css" rel="stylesheet" />
    <script src="fancybox2.1.5/jquery.fancybox.pack.js"></script>
    <%--jmudim input--%>
    <script src="mudim.js"></script>
    <script src="jmudim-1.0.min.js"></script>
    <%--css--%>
    <style>
        .bt-open-keyboard{
            display:inline;
        }
    </style>

- Ở đây mình có dùng thêm font-awesome để lấy cái icon bàn phím, các bạn có thể xem thêm về bộ font này tại đây.

- Tiếp đến phần HTML

<table class="tblFormInput">
            <tr>
                <td>FullName</td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Email</td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Height="100px"  CssClass="inputLanguage"></asp:TextBox>
                </td>
            </tr>
        </table>

- Phần code javascript để đưa bộ gõ tiếng Việt vào form trên như sau

<!-- calling jmudim -->
    <script type="text/javascript">
        $(function () {
            // calling jmudim method with ALL parameters
            //valid values are 'off', 'vni', 'telex', 'viqr', 'mixed', 'auto'
            $(".inputLanguage").jmudim({
                vtyping_mode: 'off',
                dialog_mode: 'fancybox'
            });
        });
    </script>

- Kết quả chúng ta được như sau.

 

3. Kết luận.

- Việc tích hợp bộ gõ này khá đơn giản nhưng đem lại tính tiện lợi khá cao cho người dùng. Chúc các bạn thành công

- Các bạn có thể download ví dụ ở file đính kèm cuối bài viết.

Download Source

Related Post


Zoom hình ảnh với plugin jquery - ElevateZoom
Tuesday, July 29, 2014
ElevateZoom là một plugin jquery zoom ảnh  dễ sử dụng và có nhiều tùy chọn phong phú. Dễ dàng tích hợp vào tính năng zoom ảnh sản phẩm trên một số website bán hàng...
Sử dụng printThis plugin jQuery để in một phần nội dung trang web.
Tuesday, July 8, 2014
Để in nội dung 1 trang web có khá nhiều cách, tuy nhiên printThis là một plugin mình thấy đơn giản và dễ sử dụng nhất, nó cho phép mình lựa chọn in một phần của trang web dựa vào class hoặc id của thẻ html bao ngoài nội dung cần in
Search

Đăng ký nhận bài mới


Category

Blog Archive