jquery自定義顯示消息數(shù)量
更新時間:2017年12月19日 11:43:57 作者:弒曉風(fēng)
這篇文章主要為大家詳細(xì)介紹了基于jquery自定義顯示消息數(shù)量,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery自定義顯示消息數(shù)量展示的具體代碼,供大家參考,具體內(nèi)容如下
根據(jù)需求簡單的實現(xiàn)一個小功能控件,暫時不支持?jǐn)U展。
$("xxxxxxx").iconCountPlugin(options, start, isOffset) { //三個參數(shù),自定義樣式,是否禁止圖標(biāo)位置隨瀏覽器窗口變化而變化,是否禁用偏移量 這個是調(diào)用,后面?zhèn)z參數(shù)可以根據(jù)需求自行進(jìn)行調(diào)整,以兼容不同的瀏覽器,可能因為瀏覽器之間的差異導(dǎo)致出一些意想不到的錯誤. 復(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 = { //手動設(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ù)量超過99時顯示 "..." valueOverflow:function() { var value = $(this.$element).next().text(); if (null != value && value>99) { $(this.$element).next().text("..."); } }, //綁定事件,可以接受事件對應(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) { //三個參數(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)時剛學(xué)習(xí)封裝控件時的初次嘗試,希望大佬們勿噴,有時間會把他進(jìn)行優(yōu)化,歡迎各位大神一起討論.您的點贊是我最好的動力。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JQuery的Alert消息框插件使用介紹
- 基于jQuery的message插件實現(xiàn)右下角彈出消息框
- jquery插件jquery.confirm彈出確認(rèn)消息
- 基于JQuery 的消息提示框效果代碼
- jquery判斷瀏覽器后退時候彈出消息的方法
- 使用ASP.NET MVC 4 Async Action+jQuery實現(xiàn)消息通知機(jī)制的實現(xiàn)代碼
- Notify - 基于jquery的消息通知插件
- jQuery實現(xiàn)鼠標(biāo)移到元素上動態(tài)提示消息框效果
- 基于jQuery的彈出消息插件 DivAlert之旅(一)
- 讓新消息在網(wǎng)頁標(biāo)題閃爍提示的jQuery代碼
相關(guān)文章
jQuery Easyui datagrid editor為combobox時指定數(shù)據(jù)源實例
當(dāng)在datagrid行內(nèi)部應(yīng)用添加編輯操作時,引入combobox是非常方便的操作,這篇文章主要介紹了jQuery Easyui datagrid editor為combobox時指定數(shù)據(jù)源實例,有興趣的可以了解一下。2016-12-12基于jquery的inputlimiter 實現(xiàn)字?jǐn)?shù)限制功能
因客戶要求區(qū)分全角跟半角,所以在jquery.inputlimiter.js插件上還做了些小改動。2010-05-05