jquery图标-jQuery 插件 ContextMenu 自定义图标

jQuery 插件 ContextMenu 自定义图标

更新时间：2017年3月15日 14:11:58 作者：seabreezesuper

本文主要为您详细介绍jQuery插件ContextMenu自定义图标的相关代码。 有一定的参考价值。 有兴趣的男士可以参考一下。

jQuery的ContextMenu插件使用起来非常简单（目前的前提是看我上一条微博jquery图标，哈哈），而如果要改变菜单的图标，很多人又会一头雾水了。 由于ContextMenu插件只提供了有限数量的图标，例如剪切、复制、删除等。

更改图标的相关代码：

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m); 
    },
    items: {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"},
      "copy": {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: "quit"}
    }
  });
  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});

图标功效：

现在我们要减少一个“帮助”选项，图标是一个问号图形，怎么办？

首先你要规划一张16*16的png图片。 在网上搜索一张合适的图片，然后用Photoshop或者美图秀秀裁剪一下就可以了。 将图片命名为help.png，并将图片复制到指定的images文件夹中。

然后在里面的代码中添加下面这行代码：

“帮助”：{名称：“帮助”，图标：“帮助”}

然后更改jquery.contextMenu.css文件，找到定义图标图像的位置，添加帮助图标对应的代码。

.context-menu-item.icon-help{背景图像:url(images/help.png);}

好了，大功告成了，疗效如下：

以上就是本文的全部内容。 希望对您的学习有所帮助jquery图标，也希望您多多支持脚本之家。

利用HTML5的文件APIjquery 上传文件，可以将操作系统中的文件拖放到浏览器的指定区域jquery 上传文件，从而将文件上传到服务器。 Dropify.js是一个jQuery表单文件上传插件，可以将文件拖放到指定区域进行文件上传。

后来，HTML5中提供了FormData对象API，可以方便地构造表单请求并通过XMLHttpRequest发送。 还可以通过FormData对象发送文件，这样无需刷新上传就变得非常简单。

插件安装

引入dropify.js和dropify.css以及dist/fonts目录下的所有文件，别忘了jQuery

如何使用

$('.dropify').dropify();

束缚风暴

var drEvent = $('.dropify-event').dropify();
drEvent.on('dropify.beforeClear', function(event, element){
	return confirm("Do you really want to delete "" + element.filename + "" ?");
});
drEvent.on('dropify.afterClear', function(event, element){
	alert('File deleted');
});

参数 说明 附加故障：无刷新上传完整后端代码

HTML代码

JS代码（参考jQuery框架）

$("form").submit(function(e){
	e.preventDefault();
	//先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段
	var fd = new FormData();
	fd.append('sitename', '优码网');
	fd.append('url', 'http://www.hoohtml.com');
	fd.append('file', document.getElementById('file');
	//fd.append('file', $(':file')[0].files[0]); //jQuery 方式
	//使用jQuery 发送请求
	$.ajax({
		url: '/test_upload.php',
		type: 'POST',
		data: fd,
		contentType:false,  //必须false才会自动加上正确的Content-Type
		processData:false //必须false才会避开jQuery对 formdata 的默认处理
	}).done(function(result){
		console.log(result);
	}).fail(function(err){
		console.log(err);
	});
	//通过表单对象创建 FormData
	//var fd = new FormData(document.getElementById("form"));
	//var fd = new FormData($("form:eq(0)")[0]); //jquery 方式
	//XMLHttpRequest 原生方式发送请求
	/*
	var xhr = new XMLHttpRequest();       
	xhr.open("POST" ,"/test_upload.php" , true);
	xhr.send(fd);
	xhr.onload = function(e) {
		if (this.status == 200) {
			alert(this.responseText);
		};
	};
	*/
});