以下是 Bootstrap鼠标右键菜单特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap鼠标右键菜单代码</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/toastr.css">
<link rel="stylesheet" href="css/highlight-8.6.default.min.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/BootstrapMenu.min.js"></script>
<script src="js/toastr.js"></script>
<script src="js/highlight-8.6.default.min.js"></script>
</head>
<body>
<div class="container">
<h1>内容</h1>
<h4 id="demo1">Demo 1</h4>
<p>在这个例子中，在下面的矩形区域内右键点击就可以打开上下文菜单。</p>
<div class="row collapsibleContainer">
<div class="col-md-6">
<div id="demo1Box" class="text-center" style="height: 300px; border:1px solid #ddd">
<span style="line-height: 300px">在这个区域内的任何位置点击右键</span>
</div>
</div>
</div>
</div>
<script>
var menu = new BootstrapMenu('#demo1Box', {
actions: [{
name: 'jQuery特效',
onClick: function() {
toastr.info("'jQuery特效");
}
}, {
name: '内容',
onClick: function() {
toastr.info("'内容");
}
}, {
name: '内容',
onClick: function() {
toastr.info("'内容");
}
}]
});
</script>
</body>
</html>
JS代码(toastr.js):
/* * Toastr * Copyright 2012-2014 * Authors:John Papa,Hans Fjällemark,and Tim Ferrell. * All Rights Reserved. * Use,reproduction,distribution,and modification of this code is subject to the terms and * conditions of the MIT license,available at http://www.opensource.org/licenses/mit-license.php * * ARIA Support:Greta Krafsig * * Project:https://github.com/CodeSeven/toastr */
;
(function (define){
define(['jquery'],function ($){
return (function (){
var $container;
var listener;
var toastId = 0;
var toastType ={
error:'error',info:'info',success:'success',warning:'warning'}
;
var toastr ={
clear:clear,remove:remove,error:error,getContainer:getContainer,info:info,options:{
}
,subscribe:subscribe,success:success,version:'2.1.0',warning:warning}
;
var previousToast;
return toastr;
//#region Accessible Methods function error(message,title,optionsOverride){
return notify({
type:toastType.error,iconClass:getOptions().iconClasses.error,message:message,optionsOverride:optionsOverride,title:title}
);
}
function getContainer(options,create){
if (!options){
options = getOptions();
}
$container = $('#' + options.containerId);
if ($container.length){
return $container;
}
if (create){
$container = createContainer(options);
}
return $container;
}
function info(message,title,optionsOverride){
return notify({
type:toastType.info,iconClass:getOptions().iconClasses.info,message:message,optionsOverride:optionsOverride,title:title}
);
}
function subscribe(callback){
listener = callback;
}
function success(message,title,optionsOverride){
return notify({
type:toastType.success,iconClass:getOptions().iconClasses.success,message:message,optionsOverride:optionsOverride,title:title}
);
}
function warning(message,title,optionsOverride){
return notify({
type:toastType.warning,iconClass:getOptions().iconClasses.warning,message:message,optionsOverride:optionsOverride,title:title}
);
}
function clear($toastElement){
var options = getOptions();
if (!$container){
getContainer(options);
}
if (!clearToast($toastElement,options)){
clearContainer(options);
}
}
function remove($toastElement){
var options = getOptions();
if (!$container){
getContainer(options);
}
if ($toastElement && $(':focus',$toastElement).length === 0){
removeToast($toastElement);
return;
}
if ($container.children().length){
$container.remove();
}
}
//#endregion //#region Internal Methods function clearContainer (options){
var toastsToClear = $container.children();
for (var i = toastsToClear.length - 1;
i >= 0;
i--){
clearToast($(toastsToClear[i]),options);
}
}
function clearToast ($toastElement,options){
if ($toastElement && $(':focus',$toastElement).length === 0){
$toastElement[options.hideMethod]({
duration:options.hideDuration,easing:options.hideEasing,complete:function (){
removeToast($toastElement);
}
}
);
return true;
}
return false;
}
function createContainer(options){
$container = $('<div/>') .attr('id',options.containerId) .addClass(options.positionClass) .attr('aria-live','polite') .attr('role','alert');
$container.appendTo($(options.target));
return $container;
}
function getDefaults(){
return{
tapToDismiss:true,toastClass:'toast',containerId:'toast-container',debug:false,showMethod:'fadeIn',//fadeIn,slideDown,and show are built into jQuery showDuration:300,showEasing:'swing',//swing and linear are built into jQuery onShown:undefined,hideMethod:'fadeOut',hideDuration:1000,hideEasing:'swing',onHidden:undefined,extendedTimeOut:1000,iconClasses:{
error:'toast-error',info:'toast-info',success:'toast-success',warning:'toast-warning'}
,iconClass:'toast-info',positionClass:'toast-top-right',timeOut:5000,// Set timeOut and extendedTimeOut to 0 to make it sticky titleClass:'toast-title',messageClass:'toast-message',target:'body',closeHtml:'<button>×
</button>',newestOnTop:true,preventDuplicates:false,progressBar:false}
;
}
function publish(args){
if (!listener){
return;
}
listener(args);
}
function notify(map){
var options = getOptions(),iconClass = map.iconClass || options.iconClass;
if (options.preventDuplicates){
if (map.message === previousToast){
return;
}
else{
previousToast = map.message;
}
}
if (typeof (map.optionsOverride) !== 'undefined'){
options = $.extend(options,map.optionsOverride);
iconClass = map.optionsOverride.iconClass || iconClass;
}
toastId++;
$container = getContainer(options,true);
var intervalId = null,$toastElement = $('<div/>'),$titleElement = $('<div/>'),$messageElement = $('<div/>'),$progressElement = $('<div/>'),$closeElement = $(options.closeHtml),progressBar ={
intervalId:null,hideEta:null,maxHideTime:null}
,response ={
toastId:toastId,state:'visible',startTime:new Date(),options:options,map:map}
;
if (map.iconClass){
$toastElement.addClass(options.toastClass).addClass(iconClass);
}
if (map.title){
$titleElement.append(map.title).addClass(options.titleClass);
$toastElement.append($titleElement);
}
if (map.message){
$messageElement.append(map.message).addClass(options.messageClass);
$toastElement.append($messageElement);
}
if (options.closeButton){
$closeElement.addClass('toast-close-button').attr('role','button');
$toastElement.prepend($closeElement);
}
if (options.progressBar){
$progressElement.addClass('toast-progress');
$toastElement.prepend($progressElement);
}
$toastElement.hide();
if (options.newestOnTop){
$container.prepend($toastElement);
}
else{
$container.append($toastElement);
}
$toastElement[options.showMethod]({
duration:options.showDuration,easing:options.showEasing,complete:options.onShown}
);
if (options.timeOut > 0){
intervalId = setTimeout(hideToast,options.timeOut);
progressBar.maxHideTime = parseFloat(options.timeOut);
progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
if (options.progressBar){
progressBar.intervalId = setInterval(updateProgress,10);
}
}
$toastElement.hover(stickAround,delayedHideToast);
if (!options.onclick && options.tapToDismiss){
$toastElement.click(hideToast);
}
if (options.closeButton && $closeElement){
$closeElement.click(function (event){
if (event.stopPropagation){
event.stopPropagation();
}
else if (event.cancelBubble !== undefined && event.cancelBubble !== true){
event.cancelBubble = true;
}
hideToast(true);
}
);
}
if (options.onclick){
$toastElement.click(function (){
options.onclick();
hideToast();
}
);
}
publish(response);
if (options.debug && console){
console.log(response);
}
return $toastElement;
function hideToast(override){
if ($(':focus',$toastElement).length && !override){
return;
}
clearTimeout(progressBar.intervalId);
return $toastElement[options.hideMethod]({
duration:options.hideDuration,easing:options.hideEasing,complete:function (){
removeToast($toastElement);
if (options.onHidden && response.state !== 'hidden'){
options.onHidden();
}
response.state = 'hidden';
response.endTime = new Date();
publish(response);
}
}
);
}
function delayedHideToast(){
if (options.timeOut > 0 || options.extendedTimeOut > 0){
intervalId = setTimeout(hideToast,options.extendedTimeOut);
progressBar.maxHideTime = parseFloat(options.extendedTimeOut);
progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
}
}
function stickAround(){
clearTimeout(intervalId);
progressBar.hideEta = 0;
$toastElement.stop(true,true)[options.showMethod]({
duration:options.showDuration,easing:options.showEasing}
);
}
function updateProgress(){
var percentage = ((progressBar.hideEta - (new Date().getTime())) / progressBar.maxHideTime) * 100;
$progressElement.width(percentage + '%');
}
}
function getOptions(){
return $.extend({
}
,getDefaults(),toastr.options);
}
function removeToast($toastElement){
if (!$container){
$container = getContainer();
}
if ($toastElement.is(':visible')){
return;
}
$toastElement.remove();
$toastElement = null;
if ($container.children().length === 0){
$container.remove();
}
}
//#endregion}
)();
}
);
}
(typeof define === 'function' && define.amd ? define:function (deps,factory){
if (typeof module !== 'undefined' && module.exports){
//Node module.exports = factory(require('jquery'));
}
else{
window['toastr'] = factory(window['jQuery']);
}
}
));
CSS代码(styles.css):
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);body{padding:50px;font:14px/1.5 Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;font-weight:300;}
h1,h2,h3,h4,h5,h6{color:#222;margin:0 0 20px;}
p,ul,ol,table,pre,dl{margin:0 0 20px;}
h1,h2,h3{line-height:1.1;}
h1{font-size:28px;}
h2{color:#393939;}
h3,h4,h5,h6{color:#494949;}
a{color:#39c;font-weight:400;text-decoration:none;}
a small{font-size:11px;color:#777;margin-top:-0.6em;display:block;}
.wrapper{width:860px;margin:0 auto;}
blockquote{border-left:1px solid #e5e5e5;margin:0;padding:0 0 0 20px;font-style:italic;}
code,pre{font-family:Monaco,Bitstream Vera Sans Mono,Lucida Console,Terminal;color:#333;font-size:12px;}
pre{padding:8px 15px;background:#f8f8f8;border-radius:5px;border:1px solid #e5e5e5;overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:5px 10px;border-bottom:1px solid #e5e5e5;}
dt{color:#444;font-weight:700;}
th{color:#444;}
img{max-width:100%;}
header{width:270px;float:left;position:fixed;}
header ul{list-style:none;height:40px;padding:0;background:#eee;background:-moz-linear-gradient(top,#f8f8f8 0%,#dddddd 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f8f8f8),color-stop(100%,#dddddd));background:-webkit-linear-gradient(top,#f8f8f8 0%,#dddddd 100%);background:-o-linear-gradient(top,#f8f8f8 0%,#dddddd 100%);background:-ms-linear-gradient(top,#f8f8f8 0%,#dddddd 100%);background:linear-gradient(top,#f8f8f8 0%,#dddddd 100%);border-radius:5px;border:1px solid #d2d2d2;box-shadow:inset #fff 0 1px 0,inset rgba(0,0,0,0.03) 0 -1px 0;width:270px;}
header li{width:89px;float:left;border-right:1px solid #d2d2d2;height:40px;}
header ul a{line-height:1;font-size:11px;color:#999;display:block;text-align:center;padding-top:6px;height:40px;}
strong{color:#222;font-weight:700;}
header ul li + li{width:88px;border-left:1px solid #fff;}
header ul li + li + li{border-right:none;width:89px;}
header ul a strong{font-size:14px;display:block;color:#222;}
section{width:500px;float:right;padding-bottom:50px;}
small{font-size:11px;}
hr{border:0;background:#e5e5e5;height:1px;margin:0 0 20px;}
footer{width:270px;float:left;position:fixed;bottom:50px;}
@media print,screen and (max-width:960px){div.wrapper{width:auto;margin:0;}
header,section,footer{float:none;position:static;width:auto;}
header{padding-right:320px;}
section{border:1px solid #e5e5e5;border-width:1px 0;padding:20px 0;margin:0 0 20px;}
header a small{display:inline;}
header ul{position:absolute;right:50px;top:52px;}
}
@media print,screen and (max-width:720px){body{word-wrap:break-word;}
header{padding:0;}
header ul,header p.view{position:static;}
pre,code{word-wrap:normal;}
}
@media print,screen and (max-width:480px){body{padding:15px;}
header ul{display:none;}
}
@media print{body{padding:0.4in;font-size:12pt;color:#444;}
}
CSS代码(toastr.css):
.toast-title{font-weight:bold;}
.toast-message{-ms-word-wrap:break-word;word-wrap:break-word;}
.toast-message a,.toast-message label{color:#ffffff;}
.toast-message a:hover{color:#cccccc;text-decoration:none;}
.toast-close-button{position:relative;right:-0.3em;top:-0.3em;float:right;font-size:20px;font-weight:bold;color:#ffffff;-webkit-text-shadow:0 1px 0 #ffffff;text-shadow:0 1px 0 #ffffff;opacity:0.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);}
.toast-close-button:hover,.toast-close-button:focus{color:#000000;text-decoration:none;cursor:pointer;opacity:0.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40);}
/*Additional properties for button version iOS requires the button element instead of an anchor tag. If you want the anchor version,it requires `href="#"`.*/
button.toast-close-button{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;}
.toast-top-center{top:0;right:0;width:100%;}
.toast-bottom-center{bottom:0;right:0;width:100%;}
.toast-top-full-width{top:0;right:0;width:100%;}
.toast-bottom-full-width{bottom:0;right:0;width:100%;}
.toast-top-left{top:12px;left:12px;}
.toast-top-right{top:12px;right:12px;}
.toast-bottom-right{right:12px;bottom:12px;}
.toast-bottom-left{bottom:12px;left:12px;}
#toast-container{position:fixed;z-index:999999;/*overrides*/
}
#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#toast-container > div{position:relative;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999999;-webkit-box-shadow:0 0 12px #999999;box-shadow:0 0 12px #999999;color:#ffffff;opacity:0.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);}
#toast-container >:hover{-moz-box-shadow:0 0 12px #000000;-webkit-box-shadow:0 0 12px #000000;box-shadow:0 0 12px #000000;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer;}
#toast-container > .toast-info{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;}
#toast-container > .toast-error{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;}
#toast-container > .toast-success{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;}
#toast-container > .toast-warning{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;}
#toast-container.toast-top-center > div,#toast-container.toast-bottom-center > div{width:300px;margin:auto;}
#toast-container.toast-top-full-width > div,#toast-container.toast-bottom-full-width > div{width:96%;margin:auto;}
.toast{background-color:#030303;}
.toast-success{background-color:#51a351;}
.toast-error{background-color:#bd362f;}
.toast-info{background-color:#2f96b4;}
.toast-warning{background-color:#f89406;}
.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000000;opacity:0.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40);}
/*Responsive Design*/
@media all and (max-width:240px){#toast-container > div{padding:8px 8px 8px 50px;width:11em;}
#toast-container .toast-close-button{right:-0.2em;top:-0.2em;}
}
@media all and (min-width:241px) and (max-width:480px){#toast-container > div{padding:8px 8px 8px 50px;width:18em;}
#toast-container .toast-close-button{right:-0.2em;top:-0.2em;}
}
@media all and (min-width:481px) and (max-width:768px){#toast-container > div{padding:15px 15px 15px 50px;width:25em;}
}
分享到QQ
分享到微博
微信扫一扫
