`
beyond222
  • 浏览: 41702 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

easyui实现显示和隐藏DIV

 
阅读更多
通过设置DIV的css的display属性
显示:$("#dlg" ).css("display", "block");
隐藏:$("#dlg" ).css("display", "none");
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ceshi</title>
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function dhide(){
    $.messager.alert("提示", $("#dlg" ).css("display"));
$("#dlg" ).css("display", "none");
}
function ddisplay(){
if($("#dlg" ).css("display")=="none"){
                $("#dlg" ).css("display", "block");
}else{
   $.messager.alert("错误", "已经显示了,不要再点了!",'error');
 
}

}
</script>
</head>
<body>
<div id="dlg" style="width:500px;height:250px;padding:10px 30px;background-color:yellow;">
     这是显示的内容!!!!!!!!!!!!!
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="dhide()">隐藏</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="ddisplay()">显示</a>
</div>
</body>
</html>
分享到:
评论

相关推荐

    esayui layout

    在 TestProject 中,我们可以创建一个基于 EasyUI Layout 的示例项目,通过设置不同的区域和属性,实现自定义的页面布局。例如,可以创建一个包含侧边栏和主要内容区的布局,侧边栏可以折叠,中心区域展示主要内容...

    jquery easyui 三级菜单导航

    在网页开发中,导航栏是不可或缺的部分,它帮助用户快速浏览和访问网站的不同部分。...3. 使用事件监听来管理菜单的显示与隐藏,实现联动效果。 通过这种方式,我们可以轻松实现一个功能完善的导航栏,提升用户体验。

    JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题

    总之,解决ASP.NET中EasyUI的TABS标签显示问题,需要熟悉EasyUI的API和jQuery操作,同时理解ASP.NET的页面生命周期和文件结构。通过合理布局和编写JavaScript代码,我们可以实现灵活的选项卡切换效果,提升用户体验...

    easyui 整体框架布局1.2.6

    6. **API 控制**:EasyUI 提供了一系列 JavaScript API,允许开发者在运行时动态添加、删除、隐藏或显示布局区域,以及调整它们的大小。 7. **事件处理**:EasyUI 还提供了布局相关的事件,如 `onResize`,可以在...

    JQuery+EasyUI轻松实现步骤条效果

    - 根据当前步骤动态调整界面内容,使用 `show()` 和 `hide()` 方法控制相关 div 显示和隐藏。 4. **AJAX 交互**: - 使用 AJAX 进行前后端数据交互,例如在用户填写完某一步的信息后,向服务器发送请求获取或更新...

    easyui右键设置疑问

    你可以通过创建一个 `&lt;div&gt;` 元素并设置 `class="easyui-menu"` 创建菜单,然后在其中添加 `&lt;div&gt;` 子元素作为菜单项,每个子元素可以通过设置 `data-icon` 添加图标,`data-handler` 指定点击后的回调函数。...

    easyui datagrid 表格 打印

    可以创建一个隐藏的div,然后将格式化后的表格数据插入其中。 5. **模拟打印**:使用浏览器的`window.print()`方法触发打印对话框。在调用此方法之前,可以先调整新HTML的样式,使其适应打印需求。 6. **用户交互*...

    jquery-easyUI 中的分页问题

    1. **隐藏输入框**:用于存储当前页码(`pageNo`)和每页显示的数据条数(`pageSize`)。 ```html ${status.value}" /&gt; ${status.value}" /&gt; ``` 2. **分页容器**:用于显示分页控件。 ```html &lt;div id="page" ...

    jquery-easyui精髓

    在本文中,我们将深入探讨 EasyUI 中的一些关键属性和用法,特别是与 `div easyui-window` 和 `div easyui-panel` 相关的部分。 首先,`div easyui-window` 用于创建一个窗口式的对话框,具有模态和阴影效果。以下...

    jquery+鼠标经过显示全部内容离开隐藏部分内容

    - `show()`方法用于显示隐藏的元素,可以传入一个可选参数来控制显示的速度(例如"fast"或"slow")。 - `remove()`方法则用于从DOM中完全移除元素及其绑定的所有事件处理器、数据和样式。 ### 4. CSS样式控制:`....

    Easyui使用Dialog打印

    本文将详细探讨如何利用EasyUI的Dialog组件来展示DataGrid的内容,并实现对其内容的打印功能。 首先,我们要理解EasyUI的Dialog组件。Dialog是一个模态窗口,通常用于显示一些需要用户交互或确认的信息。在EasyUI中...

    使用easyUI搭建的后台管理系统框架

    虽然EasyUI自身并不提供这类功能,但开发者可以通过JavaScript或者后端框架(如Spring Security)来实现,根据用户角色动态显示或隐藏菜单项和操作按钮。 8. **响应式设计**: 考虑到不同的设备和屏幕尺寸,后台...

    扩展EasyUI tabs 组件,加载tab页时添加遮罩

    这个脚本很可能是对EasyUI原生tabs组件的扩展,包含了添加遮罩并在加载新tab页时自动显示和隐藏遮罩的逻辑。 实现这个功能的步骤可能包括: 1. **监听事件**:首先,我们需要监听tabs组件的特定事件,如...

    jquery-easyui-1.3.4与jquery1.8 API

    在Web开发领域,jQuery EasyUI和jQuery是两个极为重要的工具。jQuery EasyUI基于jQuery库,提供了一套完整的用户界面组件,使得开发者可以快速构建功能丰富的、具有现代感的Web应用程序。本文将深入探讨jQuery ...

    easyUI笔记11

    控制菜单的显示和隐藏可以通过`show`和`hide`方法实现,也可以绑定到右键事件。 按钮是用户界面的重要组成部分。在EasyUI中,可以创建链接按钮、菜单按钮和分割按钮: 1. 链接按钮:`&lt;a href="#" class="easyui-...

    Jquery组件easyUi实现手风琴(折叠面板)示例

    在给定的标题和描述中,我们关注的是如何使用jQuery EasyUI实现手风琴(折叠面板)的效果。手风琴组件是一种常见的UI设计元素,它可以将多个面板堆叠在一起,每次只展示一个面板的内容,其余的则折叠隐藏。这种布局...

    easyui-tabbar右击弹出菜单

    以上就是如何使用jQuery EasyUI实现TabPanel的右键菜单功能的详细过程。通过这个功能,用户可以更方便地管理和操作标签页,提高Web应用的用户体验。同时,这也展示了EasyUI的灵活性和可扩展性,开发者可以根据实际...

    最新jquery+easyui_api培训文档

    在这个例子中,Accordion通过添加`class="easyui-accordion"`并设置相关的样式属性来实现,不需要额外的JavaScript代码。 #### DateBox(日期框) **DateBox** 组件提供了一个方便的日期选择器,通常用于输入或...

Global site tag (gtag.js) - Google Analytics