Topjui是由湖南佐佑开发的，基于Easyui，在Easyui的基础上做了一些扩展和优化。 字体图标使用Font-Awesome，提供的Webuploader、Echarts、zTree的使用插件。

基本功能

1. Draggable 和 drappable

代码：

    <div id="d2" class="draggable-div" data-toggle="topjui-draggable"></div>
    <div class="droppable-div" data-toggle="topjui-droppable" data-options="accept: '#d2', onDrop: function() {alert('accept')}"></div>

2. Resizable

代码：

    <div class="resizable-div" data-toggle="topjui-resizable"></div>

3. Linkbutton

代码：

<a data-toggle="topjui-linkbutton" data-options="iconCls:'fa fa-plus-square-o'">linkbutton</a>

4. Pagination

<div data-toggle="topjui-pagination"  data-options="total:2000,pageSize:10"></div>

5. tree

<ul id="tt" data-toggle="topjui-tree">
        <li>
            <span>Folder</span>
            <ul>
                <li>
                    <span>Sub Folder 1</span>
                    <ul>
                        <li>
                            <span><a href="#">File 11</a></span>
                        </li>
                        <li>
                            <span>File 12</span>
                        </li>
                        <li>
                            <span>File 13</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>File 2</span>
                </li>
                <li>
                    <span>File 3</span>
                </li>
            </ul>
        </li>
        <li>
            <span>File21</span>
        </li>
    </ul>

6. tooltip

代码：

<a href="#" title="This is the tooltip message." data-toggle="topjui-tooltip">Hover me</a>

7. dialog

<script>
        $(function() {
            $('#dd').dialog({
                title: 'My Dialog',
                width: 400,
                height: 200,
                closed: false,
                cache: false,
                href: 'get_content.php',
                modal: true
            });
        });

    </script>
    
    <div id="dd">Dialog Content.</div>