EasyUI弹出窗口实例

效果体验:
http://hovertree.com/texiao/jeasyui/1.htm

源代码下载:
HovertreeJEasyUI

HTML文件代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI实例基本弹出窗口-hovertree</title>
    <link rel="stylesheet" type="text/css" href="http://hovertree.com/ziyuan/jeasyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://hovertree.com/ziyuan/jeasyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://hovertree.com/ziyuan/jeasyui/demo.css">
    <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://hovertree.com/ziyuan/jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>HoverTree基本弹出窗口</h2>
    <p>弹出窗口能够自由拖动</p>

    <div style="margin:20px 0;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#hover‘+‘treewindow‘).window(‘open‘)">Open</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$(‘#hovertreewindow‘).window(‘close‘)">Close</a>
    </div>
    <div id="hovertreewindow" class="easyui-window" title="HoverTree基本弹出窗口" data-options="iconCls:‘icon-save‘" style="width:500px;height:200px;padding:10px;">
        这是弹出窗口的内容,使用EsayUI实现。本窗口可以改变大小,自由拖动,最大化,收起。<a href="http://hovertree.com" target="_blank" style="color:black;">HoverTree</a>
 <a href="http://hovertree.com/hvtart/bjae/l59bo21o.htm" target="_blank">原文</a>
    </div>

</body>
</html>

web前端资源:http://www.cnblogs.com/jihua/p/webfront.html

时间: 2024-12-27 04:03:47

EasyUI弹出窗口实例的相关文章

easyui弹出窗口页面

<div id="dd"></div> function detailView() {         var url = CONTEXT_PATH+'/p/viewSource.action';                      $('#dd').dialog({             title: '数据来源信息',                 width: 600,                 height: 250,          

JavaScript特效实例005-控制弹出窗口居中显示

实例005                控制弹出窗口居中显示 实例说明 点击页面上的按钮,弹出窗口,并将窗口居中显示. 技术要点 本例首先应用JavaScript中的window对象的open()方法,打开指定大小的新窗口,然后通过screen对象,获取屏幕分辨率,再根据获取的值通过window对象的moveTo()方法,将新窗口移动到屏幕居中位置. moveTo()方法将窗口移动到指定坐标(x,y)处,其语法格式如下. window.moveTo(x,y) 其中,参数x,y表示窗口移动到的位

easyui datagrid 弹出窗口空白的解决方法

我的主页面,代码如下: Javascript代码 //添加数据弹出窗口 $(function(){ addDataWin = $('#addData-window').window({ href:'${basePath}/page/marketPlat2/addData/addData.jsp?workId=${workId}year=${year}&month=${month} &quarter=${quarter}&businessType=${businessType}&am

jsp网页弹出窗口的多种办法

http://blog.csdn.net/huangfoxjava/article/details/2973033 登录|注册     huangfoxjava的专栏 目录视图 摘要视图 订阅 关于jsp网页弹出窗口[很多种方法......] 分类: JSP2008-09-24 14:22 5799人阅读 评论(0) 收藏 举报 jspjavascript框架html脚本浏览器 各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript

Java Selenium (十二) 操作弹出窗口 &amp; 智能等待页面加载完成 &amp; 处理 Iframe 中的元素

一.操作弹出窗口   原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles(); 来获取到所有弹出浏览器的句柄, 然后遍历, 使用swithcto.window(newwindow_handle)方法. 就可以定位到新的窗口. 测试页面的HTML <html> <head> <title>常见web ui元素操作, 及API使用</title> <script type

JavaScript弹出窗口方法

本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了.如果页面没有form,则不会弹出提示窗口如果页面有form表单,a)<form  method="post" ...>    会弹出提示窗口b)<form  method="get&q

读《深入理解Windows Phone 8.1 UI控件编程》1.4.3 框架的应用示例:自定义弹出窗口有感

前些天买了园子里林政老师的两本 WP8.1 的书籍.毕竟想要学得深入的话,还是得弄本书跟着前辈走的. 今天读到 1.4.3 节——框架的应用示例:自定义弹出窗口这一小节.总的来说,就是弄一个像 MessageDialog 的,但是又要具有能定义 Dialog 内的按钮.文本等等的功能(例如颜色.字体大小这些).(先不说 ContentDialog ,即内容对话框能大部分做到) 原理是使用了一个 Popup 控件作为弹出窗口的容器,将 Popup 的 Child 属性赋值为弹出窗口的实例.在书中,

(转)弹出窗口lhgDialog API文档

应用到你的项目 如果您使用独立版本的lhgDialog窗口组件,您只需在页面head中引入lhgcore.lhgdialog.min.js文件,4.1.1+版本做了修改可以和jQuerya库同时引用,而且4.1.1+版本的独立组件的lhgcore库做了极大的修改,专门为组件定制,压缩后才6K与组件合在一起总大小才不到20K,效率上得到很大提高,比引用jQuery快很多,但这里要注意如果你同时引用了jQuery库的话必须把$换成J,如果没引用jQuery库则可直接使用$. <script type

解决jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug

使用panel的onMove事件解决了panel,dialog以及window组件在被拖动时,会超出浏览器边界而无法拖回的情况. 当窗口被拖出浏览器有边界时,$(document).width();会增大,增大的部分就是窗口超过浏览器窗口的部分,所以right > browserWidth条件永远无法满足. 如果我们在思考得多一点,其实对于panel,dialog,window三个组件,我们往往要求的并不是它不能超出浏览器界限,而是要求它不能超出父元素界限,而且当父元素的overflow不是hi