专题3：jquery easyUI摸底

最新推荐文章于 2018-08-24 14:49:00 发布

woods240

最新推荐文章于 2018-08-24 14:49:00 发布

阅读量4.2k

点赞数

分类专栏： Web前端开发

本文链接：https://blog.csdn.net/woods240/article/details/8182902

版权

Web前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Parser

（解析器：将 easyUI定义的class翻译成对应的Html代码，然后浏览器对其渲染，框架自动调用，一般用不上）

    $.parser.parse();       // parse all the page  
    $.parser.parse('#cc');  // parse the specified node

浏览器只认识html、css、js， easyUI就像一个中间件，根据功能将它们封装

Draggable & Droppable & Resizable

（可拖拽 & 可放置 & 可缩放：使元素具有 ‘可拖拽的能力’ 或 ’可放置拖拽元素的能力‘ 或 ’可改变大小的能力‘）

    $('#dd').draggable({  
        handle:'#title'  
    });

    $('#dd').droppable({               // 当draggable元素 revert=true 时，
        accept:'#d1,#d3'               // 元素可拖拽，但不可改变位置，此时与 droppable 配合使用
    });

    $('#rr').resizable({  
        maxWidth:800,  
        maxHeight:600  
    });

使元素具有某种能力，是改变元素的行为，尽量使用js来实现

Pagination

（分页导航：根据 total、pageSize 和 onSelectPage 按页导航数据）

    <div id="pp" class="easyui-pagination" data-options="total:2000, pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

定义一个分页控件，尽量用html来实现

SearchBox

（搜索框：根据 ‘选择的分类’ 和 ‘输入的关键字’ 筛选数据）

    <script type="text/javascript">  
        function qq(value,name){  
            alert(value+":"+name)  
        }  
    </script>  
      
    <input id="ss" class="easyui-searchbox" style="width:300px"  
            data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>  
    <div id="mm" style="width:120px">  
        <div data-options="name:'all',iconCls:'icon-ok'">All News</div>  
        <div data-options="name:'sports'">Sports News</div>  
    </div>

用html定义搜索框，用js定义搜索算法，然后通过属性指定搜索算法

ProgressBar

（进度条：用图形对进度进行直观的描述）

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

用html定义进度条，用ajax从服务端获取 ‘进度值’，然后用js将值设置到进度条上

Panel & Tabs & Accordion

（面板 & 标签页 & 手风琴：容器元素，‘单一容器’、‘多容器-水平切换’、‘多容器-垂直切换’）

    <div id="p" class="easyui-panel" title="My Panel"   
            style="width:500px;height:150px;padding:10px;background:#fafafa;"  
            data-options="iconCls:'icon-save',closable:true,  
                    collapsible:true,minimizable:true,maximizable:true">  
        <p>panel content.</p>  
        <p>panel content.</p>  
    </div>

    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
        <div title="Tab1" style="padding:20px;display:none;">  
            tab1  
        </div>  
        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">  
            tab2  
        </div>  
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">  
            tab3  
        </div>  
    </div>

    <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
        <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">  
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
            <p>Accordion is a part of easyui framework for jQuery.   
            It lets you define your accordion component on web page more easily.</p>  
        </div>  
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">  
            content2  
        </div>  
        <div title="Title3">  
            content3  
        </div>  
    </div>

用html定义这些容器，容器的内容可用html静态定义，也可用js动态获取

LinkButton

（按钮：可以放置 ‘图片’ 和 ‘文字’ 的按钮）

    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

用html定义，通过扩展css能够增加按钮图标

Menu & MenuButton & SplitButton

（菜单 & 绑定菜单的按钮：展现树形结构）

<div id="mm" class="easyui-menu" style="width:120px;">        // 用div描述 树形结构
    <div>New</div>  
    <div>  
        <span>Open</span>  
        <div style="width:150px;">  
            <div><b>Word</b></div>  
            <div>Excel</div>  
            <div>PowerPoint</div>  
        </div>  
    </div>  
    <div data-options="iconCls:'icon-save'">Save</div>  
    <div class="menu-sep"></div>  
    <div>Exit</div>  
</div>

<a href="javascript:void(0)" id="mb" class="easyui-menubutton"   
        data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>     // 按钮指向一个它要绑定的menu
<div id="mm" style="width:150px;">  
    <div data-options="iconCls:'icon-undo'">Undo</div>  
    <div data-options="iconCls:'icon-redo'">Redo</div>  
    <div class="menu-sep"></div>  
    <div>Cut</div>  
    <div>Copy</div>  
    <div>Paste</div>  
    <div class="menu-sep"></div>  
    <div data-options="iconCls:'icon-remove'">Delete</div>  
    <div>Select All</div>  
</div>

    <a href="javascript:void(0)" id="sb" class="easyui-splitbutton"   // 按钮指向一个它要绑定的menu
            data-options="menu:'#mm',iconCls:'icon-ok'" οnclick="javascript:alert('ok')">Ok</a>  
    <div id="mm" style="width:100px;">  
        <div data-options="iconCls:'icon-ok'">Ok</div>  
        <div data-options="iconCls:'icon-cancel'">Cancel</div>  
    </div>

用html定义好菜单和按钮，MenuButton和SplitButton的唯一区别是热区不同

ComboBox & ComboTree

（单选组合框 & 多选组合框：可填写、可选择，将两种输入方式结合到一起的控件）

    <input class="easyui-combobox"  
        data-options="valueField:'id',
                      textField:'text',
                      url:'/TestData/Json'" />            // 服务端返回Json格式的数据

    <input class="easyui-combotree" style="width:200px;"  
            data-options="url:'/TestData/Json',
                          multiple:true" />               // 设置 '支持多选'

用html定义组合框，服务端必须返回Json格式的数据

DateBox & DateTimeBox & Calendar

（日期时间控件：可选择日期时间、展示日期）

<input type="text" class="easyui-datebox" />

<input class="easyui-datetimebox" name="birthday"   
        data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">

<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>

用html定义日期控件

NumberSpinner & TimeSpinner &Slider

（微调器：数字微调、时间微调、范围微调）

<input class="easyui-numberspinner" style="width:80px;"  
 data-options="min:10,max:100,editable:false">

<input class="easyui-timespinner"  style="width:80px;"  
 data-options="min:'08:30',showSeconds:true" />

    <input class="easyui-slider" value="12"  style="width:300px"  
            data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />

用html定义微调器

Window & Dialog & Messager

（窗口：普通窗口、对话框、消息框）

<div class="easyui-window" title="My Window" style="width: 600px; height: 400px"
    data-options="iconCls:'icon-save',modal:true,inline:true,shadow:false">
    Window Content
</div>

<div class="easyui-dialog" title="My Dialog" style="width: 400px; height: 200px;"
     data-options="iconCls:'icon-save',resizable:true,
            toolbar:[{
                text:'Edit',
                iconCls:'icon-edit',
                handler:function(){alert('edit')}
                },{
                text:'Help',
                iconCls:'icon-help',
                handler:function(){alert('help')}
                }],
            buttons:[{
                text:'保存',
                handler:function(){alert('保存');}
                },{
                text:'关闭',
                handler:function(){alert('关闭');}
            }],
            modal:true">
    Dialog Content.
</div>

function show1(){
	$.messager.show({
		title:'My Title',
		msg:'Message will be closed after 4 seconds.',
		showType:'show'
	});
}
function show2(){
	$.messager.show({
		title:'My Title',
		msg:'Message will be closed after 5 seconds.',
		timeout:5000,
		showType:'slide'
	});
}
function show3(){
	$.messager.show({
		title:'My Title',
		msg:'Message never be closed.',
		timeout:0,
		showType:'fade'
	});
}
function show4(){
	var win = $.messager.progress({
		title:'Please waiting',
		msg:'Loading data...'
	});
	setTimeout(function(){
		$.messager.progress('close');
	},5000)
}
function alert1(){
	$.messager.alert('My Title','Here is a message!');
}
function alert2(){
	$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
	$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
	$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
	$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
	$.messager.confirm('My Title', 'Are you confirm this?', function(r){
		if (r){
			alert('confirmed:'+r);
			location.href = 'http://www.google.com';
		}
	});
}
function prompt1(){
	$.messager.prompt('My Title', 'Please type something', function(r){
		if (r){
			alert('you type:'+r);
		}
	});
}

用html定义窗口，用js调用消息框

Tree

（树：展现树形结构的数据）

<ul class="easyui-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>

<ul class="easyui-tree" data-options="url:'/TestData/TreeSource',checkbox:true">           // 异步Ajax加载

尽量用html定义窗口

woods240

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
专题3：jquery easyUI摸底

Parser（解析器：将 easyUI定义的class翻译成对应的Html代码，然后浏览器对其渲染，框架自动调用，一般用不上） $.parser.parse(); // parse all the page $.parser.parse('#cc'); // parse the specified node 浏览器只认识html、css、js， easyU
复制链接

扫一扫