jquery自定義顯示消息數(shù)量
本文實(shí)例為大家分享了jquery自定義顯示消息數(shù)量展示的具體代碼,供大家參考,具體內(nèi)容如下
根據(jù)需求簡(jiǎn)單的實(shí)現(xiàn)一個(gè)小功能控件,暫時(shí)不支持?jǐn)U展。
$("xxxxxxx").iconCountPlugin(options, start, isOffset) { //三個(gè)參數(shù),自定義樣式,是否禁止圖標(biāo)位置隨瀏覽器窗口變化而變化,是否禁用偏移量 這個(gè)是調(diào)用,后面?zhèn)z參數(shù)可以根據(jù)需求自行進(jìn)行調(diào)整,以兼容不同的瀏覽器,可能因?yàn)闉g覽器之間的差異導(dǎo)致出一些意想不到的錯(cuò)誤. 復(fù)制代碼 ; (function ($, window, document, undefined) { var inforCountShow = function (target, option, isOffset) { this.$element = target; var str = "<span class = 'infor-count'></span>"; 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 = { //手動(dòng)設(shè)置 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 }); }, //瀏覽器窗口大小改變自適應(yīng),默認(rèn)生效 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 }); }); }, //數(shù)值溢出,當(dāng)消息數(shù)量超過(guò)99時(shí)顯示 "..." valueOverflow:function() { var value = $(this.$element).next().text(); if (null != value && value>99) { $(this.$element).next().text("..."); } }, //綁定事件,可以接受事件對(duì)應(yīng)外部方法 bindEvent: function () { var that = this; if (!that.createdDom) return; this.createdDom.off('click').on('click', function () { if (that.options.click) { // that.options.click(); } else { } }); } } //調(diào)用 $.fn.iconCountPlugin = function (options, start, isOffset) { //三個(gè)參數(shù),自定義樣式,是否禁止圖標(biāo)位置隨瀏覽器窗口變化而變化,是否禁用偏移量 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);
此插件是筆者當(dāng)時(shí)剛學(xué)習(xí)封裝控件時(shí)的初次嘗試,希望大佬們勿噴,有時(shí)間會(huì)把他進(jìn)行優(yōu)化,歡迎各位大神一起討論.您的點(diǎn)贊是我最好的動(dòng)力。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JQuery的Alert消息框插件使用介紹
- 基于jQuery的message插件實(shí)現(xiàn)右下角彈出消息框
- jquery插件jquery.confirm彈出確認(rèn)消息
- 基于JQuery 的消息提示框效果代碼
- jquery判斷瀏覽器后退時(shí)候彈出消息的方法
- 使用ASP.NET MVC 4 Async Action+jQuery實(shí)現(xiàn)消息通知機(jī)制的實(shí)現(xiàn)代碼
- Notify - 基于jquery的消息通知插件
- jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動(dòng)態(tài)提示消息框效果
- 基于jQuery的彈出消息插件 DivAlert之旅(一)
- 讓新消息在網(wǎng)頁(yè)標(biāo)題閃爍提示的jQuery代碼
相關(guān)文章
jQuery Easyui datagrid editor為combobox時(shí)指定數(shù)據(jù)源實(shí)例
當(dāng)在datagrid行內(nèi)部應(yīng)用添加編輯操作時(shí),引入combobox是非常方便的操作,這篇文章主要介紹了jQuery Easyui datagrid editor為combobox時(shí)指定數(shù)據(jù)源實(shí)例,有興趣的可以了解一下。2016-12-12$.format,jquery.format 使用說(shuō)明
$.format,jquery.format 使用說(shuō)明,需要的朋友可以參考下。2011-07-07jQuery中 $ 符號(hào)的沖突問(wèn)題及解決方案
在jQuery中,$是jQuery的別名,為了書(shū)寫(xiě)方便,我們更習(xí)慣用$('#id')這一類(lèi)的方式來(lái)書(shū)寫(xiě)代碼。這篇文章給大家分享jQuery中 $ 符號(hào)的沖突問(wèn)題及解決方案,感興趣的朋友一起看看吧2016-11-11基于jquery的inputlimiter 實(shí)現(xiàn)字?jǐn)?shù)限制功能
因客戶要求區(qū)分全角跟半角,所以在jquery.inputlimiter.js插件上還做了些小改動(dòng)。2010-05-05jquery實(shí)現(xiàn)點(diǎn)擊消失的代碼
這篇文章主要介紹了jquery如何實(shí)現(xiàn)點(diǎn)擊消失,需要的朋友可以參考下2014-03-03Jquery Ajax xmlhttp請(qǐng)求成功問(wèn)題
這篇文章主要介紹了Jquery Ajax xmlhttp請(qǐng)求成功問(wèn)題,需要的朋友可以參考下2015-02-02jQuery Dialog對(duì)話框事件用法實(shí)例分析
這篇文章主要介紹了jQuery Dialog對(duì)話框事件用法,結(jié)合實(shí)例形式分析了Dialog對(duì)話框?qū)崿F(xiàn)的靜態(tài)提示類(lèi)對(duì)話框、動(dòng)態(tài)提示類(lèi)對(duì)話框以及遮罩類(lèi)對(duì)話框的概念、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-05-05jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11