EasyUI——Dialog自定义Toolbar和buttons

这里并没有使用js来渲染easyUI组件，通过HTML来实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script src="easyui1.3/jquery-1.7.2.min.js" type="text/javascript"></script><script src="easyui1.3/jquery.easyui.min.js" type="text/javascript"></script><link href="easyui1.3/themes/gray/easyui.css" rel="stylesheet" type="text/css" /><link href="easyui1.3/themes/icon.css" rel="stylesheet" type="text/css" /><script src="easyui1.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script><script type="text/javascript">function qq(value, name) {alert(value + "--" + name);}</script>
</head>
<body>

<!--这里通过toolbar 和 buttons 作为便签属性，并没有使用data-options， 属性值相当于选择器，去选择一个适当的DIV元素添加 toolbar 或者 buttons的位置.-->

<div id="dd" class="easyui-dialog" title="My Dialog" style="width: 400px; height: 200px; padding: 10px" toolbar="#dlg-toolbar" buttons="#dlg-buttons"> Dialog Content. </div><!--创建Toolbar--><div id="dlg-toolbar"><table cellpadding="0" cellspacing="0" style="width: 100%"><tr><td><a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">Edit</a><a href="#" class="easyui-linkbutton" iconcls="icon-help" plain="true">Help</a></td><td style="text-align: right">　　　　　　　　　　　　<!--使用searchbox组件  searcher:qq   这里调用方法并没有使用qq(value,name), 而是直接使用了qq--><input class="easyui-searchbox" data-options="menu:'#mm',searcher:qq,prompt:'请输入关键字'" /><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></td></tr></table></div>

<!--创建 Button--><div id="dlg-buttons"><table cellpadding="0" cellspacing="0" style="width: 100%"><tr><td><img src="source/logo.jpg" style="width: 30px; height: 30px" /></td><td style="text-align: right"><a href="#" class="easyui-linkbutton" iconcls="icon-save" onclick="javascript:alert('save')">Save</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a></td></tr></table></div>
</body>
</html>

效果如下图所示：

参考：http://www.2cto.com/kf/201208/147796.html

原作者：yhc13429826359

转载于:https://www.cnblogs.com/yokoboy/archive/2012/12/07/2806910.html

EasyUI——Dialog自定义Toolbar和buttons相关推荐

最近开发老遇到莫名其妙的问题，dialog自定义大小，setAttributes这个方法没反应是肿么一回事...
============问题描述============ 最近开发老遇到莫名其妙的问题,dialog自定义大小,setAttributes这个方法没反应是肿么一回事,我只想让dialog显示一部分,但 ...
android 自定义actionbar前面有一块空白,解决Android V7后自定义Toolbar、ActionBar左侧有空白问题...
如图所示: 1.查看Wiget.AppCompat.Toolbar的parent主题,如下所示: @style/TextAppearance.Widget.AppCompat.Toolbar.Titl ...
easyui dialog 中嵌入html页面
最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...
自定义ToolBar
一.Toolbar的简介 Toolbar 是 android 5.0 引入的一个新控件,Toolbar出现之前,我们很多时候都是使用ActionBar以及ActionActivity实现顶部导航栏的, ...
android 继承dialog自定义对话框
android 继承dialog自定义对话框样式如下: 代码实现: 主要Activity: public class MainActivity extends Activity { Button ...
ABAP ALV OO 自定义Toolbar 和Command及listmenu按钮
ALV OO 自定义Toolbar 和Command及listmenu按钮前言 OOALV容器 OOALV 工具栏 1.定义OO 对象及字段 2.OO ALV FIELDCAT 字段定义 3.定义类 ...
Android自定义Toolbar以及设置圆形导航图标
我们希望可以自定义Toolbar,实现一些特定的功能,android.support.v7.widget.Toolbar正好完成这些工作首先看一下我们预期的效果图: 先看一下Toolbar的布局 & ...
android toolbar 自定义,Android自定义Toolbar使用方法详解
本篇文章介绍: 如何使用Toolbar; 自定义Toolbar; 先来看一看效果,了解一下toolbar: 布局文件: android:id="@+id/toolbar" andr ...
android toolbar 自定义,自定义Toolbar，解决你所有的适配苦恼！
About Toolbar Toolbar是一个官方ToolBar的扩展工具类,省去了对不同版本适配的复杂方案,它可以帮助你轻松实现NavigationBar和StatusBar的样式管理,最最重要的 ...

EasyUI——Dialog自定义Toolbar和buttons

EasyUI——Dialog自定义Toolbar和buttons相关推荐

最新文章

热门文章