EasyUI初体验--右键弹框
在C/S中可能非常easy实现右键弹框，但在B/S中直到今天我才搞定，小小得瑟一下。只一个html页面，导入相关的Easy-UI类库就能搞定，Easy-UI类库下载地址
<!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>
<link href="css/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/icon.css" rel="stylesheet" type="text/css" />
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<h2>点下右键试试</h2>
<div style="margin:20px 0;"></div> <div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="javascript:alert('new')">新建</div>
<div>
<span>打开</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
<div>
<span>M1</span>
<div style="width:120px;">
<div>sub1</div>
<div>sub2</div>
<div>
<span>Sub</span>
<div style="width:80px;">
<div onclick="javascript:alert('sub21')">sub21</div>
<div>sub22</div>
<div>sub23</div>
</div>
</div>
<div>sub3</div>
</div>
</div>
<div>
<span>Window Demos</span>
<div style="width:120px;">
<div data-options="href:'window.html'">Window</div>
<div data-options="href:'dialog.html'">Dialog</div>
<div><a href="http://www.jeasyui.com" target="_blank">EasyUI</a></div>
</div>
</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">保存</div>
<div data-options="iconCls:'icon-print',disabled:true">Print</div>
<div class="menu-sep"></div>
<div>退出</div>
</div>
<script>
$(function () {
$(document).bind('contextmenu', function (e) {
e.preventDefault();
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
});
});
</script>
</body>
</html>
效果图例如以下：
EasyUI初体验--右键弹框的更多相关文章
- 【jquery+easyUI】-- $.messager.show 弹框显示
三种基本弹框 1.提示框,一秒停留 $.messager.show({ title: '提示', msg: '修改成功!', showType: 'fade', //设置显示类型 style: { l ...
- easyui 初体验
简介 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javas ...
- EasyUI自动消失的弹框
$.messager.show( { title : "系统提示", msg : "请选择提供商!!!" });
- 制作一个简单的toast弹框
toast弹框的作用 toast弹框顾名思义,就是为了弹出一个提示框,效果如图: 使用toast弹框可以可用户带来更好的交互体验 toast弹框的使用 Toast组件 制做出toast的样式以及出现的 ...
- 遮罩、警告框/弹框 - EasyUI
1.遮罩 1.1. $.messager.progress //开启遮罩 $.messager.progress({}); 或 $.messager.progress({ title: 'Please ...
- easyui dialog 表单提交，弹框初始化赋值，dialog实现
//定义弹框html<div id="delete" class="easyui-dialog" title="Delete" dat ...
- python窗体——pyqt初体验
连续两周留作业要写ftp的作业,从第一周就想实现一个窗体版本的,但是时间实在太短,qt零基础选手表示压力很大,幸好又延长了一周时间,所以也就有了今天这篇文章...只是为了介绍一些速成的方法,还有初学者 ...
- FileTable初体验
FileTable初体验 阅读导航 启用FILESTREAM设置 更改FILESTRAM设置 启用数据库非事务性访问级别 FileTable 在我接触FileTable之前,存储文件都是存储文件的链接 ...
- [转]Python爬虫框架--pyspider初体验
标签: python爬虫pyspider 2015-09-05 10:57 9752人阅读 评论(0) 收藏 举报 分类: Python(8) 版权声明:本文为博主原创文章,未经博主允许不得转载. ...
随机推荐
- Multiple bindings were found on the class path(转)
Multiple bindings were found on the class path SLF4J API is designed to bind with one and only one u ...
- img src某个php文件输出图片（回复更改图片readfile读取图片等）
在论坛我们经常看到一回复图片就更改等,这功能是怎么实现的呢,其实更验证码道理相同. 新建文件 randimage.php 加入以下代码: <?php $dir='../../images/'; ...
- 基于visual Studio2013解决C语言竞赛题之1008整除数
题目 解决代码及点评 /************************************************************************/ ...
- boost 分析命令行参数
#include <boost/program_options.hpp> #include <iostream> #include <vector> using n ...
- Java基础10 接口的继承与抽象类
链接地址:http://www.cnblogs.com/vamei/archive/2013/03/31/2982240.html 作者:Vamei 出处:http://www.cnblogs.com ...
- sqlserver05 字符串拆分
-- 规则:将 gs-abc-aa-aa 拆分为一下字符 -- gs-abc-aa-aa -- gs-abc-aa -- gs-abc -- gs select * from dbo.f_split( ...
- mui如何增加自定义字体icon图标
http://ask.dcloud.net.cn/article/128 字体地址:http://www.iconfont.cn/
- java实现小九机器人接口
package com.iask.webchat.chatmachine; import java.net.URLEncoder; import org.apache.http.HttpEntity; ...
- POJ 2762推断单个联通(支撑点甚至通缩+拓扑排序）
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 14789 ...
- C# - 重写虚方法
项目目录: 创建教师类(Teacher),虚方法有Teach(); 创建学生类(Student),重写的方法是Teach(); 教师类: · 加上关键字 Virtual 就是声明可以重写此方法. us ...