jquery自定义显示消息数量,jquery判断浏览器后退
分类:新闻中心

浏览器后退时必定会有一些消息,这里使用jquery判断浏览器后退并弹出消息

Sticky是一个简单的页面消息提醒jQuery插件。可以设置让消息在页面的四个角落出现,也可以设置在页面中央出现。可以手动关闭消息,也可以设置成自动关闭

本文为大家介绍了插件jquery.confirm弹出确认消息的实现方法,具有一定的参考价值,特分享给大家供大家参考,具体内容如下

本文实例为大家分享了jquery自定义显示消息数量展示的具体代码,供大家参考,具体内容如下

jQuery(document).ready(function ($) {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
var hashLocation = location.hash;
var hashSplit = hashLocation.split("#!/");
var hashName = hashSplit[1];
if (hashName !== '') {
var hash = window.location.hash;
if (hash === '') {
alert("Back button isn't supported. You are leaving this application on next clicking the back button");
}
}
});
window.history.pushState('forward', null, './#forward');
}
});

实现效果:

根据需求简单的实现一个小功能控件,暂时不支持扩展。

您可能感兴趣的文章:

  • JQuery的Alert消息框插件使用介绍
  • 基于jQuery的message插件实现右下角弹出消息框
  • jquery插件jquery.confirm弹出确认消息
  • 基于JQuery 的消息提示框效果代码
  • 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码
  • Notify - 基于jquery的消息通知插件
  • jQuery实现鼠标移到元素上动态提示消息框效果
  • 基于jQuery的弹出消息插件 DivAlert之旅(一)
  • 让新消息在网页标题闪烁提示的jQuery代码
  • jquery自定义显示消息数量

图片 1

图片 2

$("xxxxxxx").iconCountPlugin(options, start, isOffset) {

//三个参数,自定义样式,是否禁止图标位置随浏览器窗口变化而变化,是否禁用偏移量
这个是调用,后面俩参数可以根据需求自行进行调整,以兼容不同的浏览器,可能因为浏览器之间的差异导致出一些意想不到的错误.
复制代码
;
(function ($, window, document, undefined) {
var inforCountShow = function (target, option, isOffset) {
this.$element = target;
var str = "";
var offsetleft = $(this.$element).offset().left;
var offsetTop = $(this.$element).offset().top;
var targetWidth = $(this.$element).width();
var targetHeight = $(this.$element).height();
var left = "",
top = "";
if (!isOffset) {
left = offsetleft + targetWidth - 18;
top = offsetTop - 5;
} else {
left = targetWidth + 13;
top = targetHeight - 3;
}
$(this.$element).after(str);
this.defaults = {
'display': 'inline-block',
'width': '18px',
'height': '18px',
'position': 'absolute',
'backgroundColor': '#f43530',
'color': '#fff',
'borderRadius': '15px',
'textAlign': 'center',
'fontSize': '12px',
"left": left,
"top": top,
"cursor": 'auto',
'margin':'auto'
};
this.options = $.extend({}, this.defaults, option);
this.createdDom = $(str);
}
inforCountShow.prototype = {
//手动设置
changeStyle: function () {
return $(this.$element).next().css({
'display': this.options.display,
'width': this.options.width,
'height': this.options.height,
'position': this.options.position,
'backgroundColor': this.options.backgroundColor,
'color': this.options.color,
'borderRadius': this.options.borderRadius,
'zIndex': this.options.zIndex,
'textAlign': this.options.textAlign,
'fontSize': this.options.fontSize,
"left": this.options.left,
"top": this.options.top,
'lineHeight': this.options.lineHeight,
"cursor": this.options.cursor,
"margin": this.options.margin
});
},
//浏览器窗口大小改变自适应,默认生效
onResize: function (target, isOffset) {
$(window).resize(function () {
var newOffsetleft = $(target).offset().left;
var newOffsetTop = $(target).offset().top;
var newTargetWidth = $(target).width();
var newTargetHeight = $(target).height();
var newleft = "", newTop = "";
if (!isOffset) {
newleft = newOffsetleft + newTargetWidth - 18;
newTop = newOffsetTop - 5;
} else {
newleft = newTargetWidth + 13;
newTop = newTargetHeight - 3;
}
$(target).next().css({
"left": newleft,
"top": newTop
});
});
},
//数值溢出,当消息数量超过99时显示 "..."
valueOverflow:function() {
var value = $(this.$element).next().text();
if (null != value && value>99) {
$(this.$element).next().text("...");
}
},

//绑定事件,可以接受事件对应外部方法
bindEvent: function () {
var that = this;
if (!that.createdDom) return;
this.createdDom.off('click').on('click', function () {
if (that.options.click) {
// that.options.click();
} else {

}
});
}
}
//调用
$.fn.iconCountPlugin = function (options, start, isOffset) {

//三个参数,自定义样式,是否禁止图标位置随浏览器窗口变化而变化,是否禁用偏移量
return $(this).each(function () {
var infor = new inforCountShow(this, options, isOffset);
if (!start) {
infor.onResize(this, isOffset);
}
infor.changeStyle();
infor.valueOverflow();
infor.bindEvent();

});
}

})(jQuery, window, document);

       2)JNotify是一个JQuery插件,基于JQuery UI实现,用于创建页面消息提醒状态提示条

具体代码:

此插件是笔者当时刚学习封装控件时的初次尝试,希望大佬们勿喷,有时间会把他进行优化,欢迎各位大神一起讨论.您的点赞是我最好的动力。

    演示地址:

1、插件默认参数

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

图片 3

// 默认参数
$.confirm.defaults = {
 // 样式
 css: "http://static.qianduanblog.com/css/jquery.confirm/default.min.css?v=" + Math.ceil(new Date() / 86400000),
 // 确认框内容
 content: "确认吗?",
 // 确认按钮文字
 sureButton: "确认",
 // 取消按钮文字
 cancelButton: "取消",
 // 位置
 position: {},
 // 自动打开
 autoOpen: false,
 // 动画持续时间
 duration: 123,
 // 打开确认框回调
 onopen: emptyFn,
 // 单击了确认或者取消回调
 onclick: emptyFn,
 // 确认回调
 onsure: emptyFn,
 // 取消回调
 oncancel: emptyFn,
 // 关闭确认框回调
 onclose: emptyFn
}

您可能感兴趣的文章:

  • JQuery的Alert消息框插件使用介绍
  • 基于jQuery的message插件实现右下角弹出消息框
  • jquery插件jquery.confirm弹出确认消息
  • 基于JQuery 的消息提示框效果代码
  • jquery判断浏览器后退时候弹出消息的方法
  • 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码
  • Notify - 基于jquery的消息通知插件
  • jQuery实现鼠标移到元素上动态提示消息框效果
  • 基于jQuery的弹出消息插件 DivAlert之旅(一)
  • 让新消息在网页标题闪烁提示的jQuery代码

      3)Humane JS是一个不依赖任何框架的轻巧的信息提示插件

2、插件结构与样式 jquery.confirm的dom结构为:

<div class="jquery_confirm____" style="display:none">
 <div class="jquery_confirm____body">确认框消息</div>
 <div class="jquery_confirm____footer">
  <button class="button button-primary jquery_confirm____sure">确认</button>
  <button class="button button-error jquery_confirm____cancel">取消</button>
 </div>
</div>

图片 4

默认的插件样式基于css.3,默认的插件样式地址为default,插件样式只渲染一次,不会多次渲染,以第一次使用插件的样式为准。

      4)jQuery.UI MessengerOutlook like message notification Widget,这个jQuery.UI控件类似于MessengerOutlook消息弹出提醒框

3、使用方法

// 打开确认框
$.confirm({
 content: "确认要查看吗?",
 onopen: function() {
  alert("确认框打开了!");
 },
 onclose: function() {
  alert("确认框关闭了!");
 },
 onsure: function() {
  alert("你单击了确认按钮!");
 },
 oncancel: function() {
  alert("你单击了取消按钮!");
 },
 onclick: function(s) {
  if (s) {
   alert("你单击了确认按钮!");
  } else {
   alert("你单击了取消按钮!");
  }
 }
});

$.confirm("确认吗?", function(s) {
 if (s) {
  alert("你单击了确认按钮!");
 } else {
  alert("你单击了取消按钮!");
 }
});

演示地址:

希望本文所述对大家学习jquery程序设计有所帮助。

您可能感兴趣的文章:

  • JQuery的Alert消息框插件使用介绍
  • 基于jQuery的message插件实现右下角弹出消息框
  • 基于JQuery 的消息提示框效果代码
  • jquery判断浏览器后退时候弹出消息的方法
  • 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码
  • Notify - 基于jquery的消息通知插件
  • jQuery实现鼠标移到元素上动态提示消息框效果
  • 基于jQuery的弹出消息插件 DivAlert之旅(一)
  • 让新消息在网页标题闪烁提示的jQuery代码
  • jquery自定义显示消息数量

图片 5

      5)Roar是一个可以在屏幕右下角弹出消息提醒Mootools插件。类似于QQ或MSN右下角弹出消息提示

演示地址:

图片 6

      6)jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac OSX系统中Growl事件通知框架

图片 7

您可能感兴趣的文章:

  • JQuery的Alert消息框插件使用介绍
  • 基于jQuery的message插件实现右下角弹出消息框
  • jquery插件jquery.confirm弹出确认消息
  • 基于JQuery 的消息提示框效果代码
  • jquery判断浏览器后退时候弹出消息的方法
  • 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码
  • jQuery实现鼠标移到元素上动态提示消息框效果
  • 基于jQuery的弹出消息插件 DivAlert之旅(一)
  • 让新消息在网页标题闪烁提示的jQuery代码
  • jquery自定义显示消息数量

本文由美高梅网址发布于新闻中心,转载请注明出处:jquery自定义显示消息数量,jquery判断浏览器后退

上一篇:Javascript中3种实现继承的方法和代码实例,继承实 下一篇:随鼠标移动的时钟非常漂亮遗憾的是只支持IE美高
猜你喜欢
热门排行
精彩图文