html页面插件格式,jq插件格式.html

忘是亡心i 2022-10-06 04:56 529阅读 0赞

Document

body{ margin:400px;}

i.unread{ display:inline-block; width:11px; height:11px; vertical-align:middle; background:url(http://192.168.1.158:7501/static/css/icon\_11.png) no-repeat; overflow:hidden;}

.ui_tip_con{ display:none; position:absolute; padding:10px 15px; border:1px solid #e0e0e0; border-radius:3px; background:#fff; box-shadow:0 0 3px rgba(0,0,0,0.1); z-index:100;}

.ui_tip_con .cont{ text-align:left; color:#555; font-family:”microsoft yahei”;}

.ui_tip_con .cont a{ display:block; padding:0 10px; line-height:24px; color:#555; border-radius:2px; text-align:center; background:none;}

.ui_tip_con .cont a:hover{ color:#fff; background:#00a2d6;}

.ui_tip_con .ico_top{ position:absolute; top:-7px; left:200px; width:13px; height:7px; background:url(http://192.168.1.158:7501/static/css/ico\_guweninfo.png) no-repeat -105px -43px;}

.ui_tip_con .ico_bottom{ position:absolute; bottom:-7px; left:60px; width:13px; height:7px; background:url(http://192.168.1.158:7501/static/css/ico\_guweninfo.png) no-repeat -85px -43px;}

.ui_tip_con .ico_t{ position:absolute; top:-7px; width:13px; height:7px; background:url(http://192.168.1.158:7501/static/css/ico\_guweninfo.png) no-repeat -105px -43px;}

.ui_tip_con .ico_b{ position:absolute; bottom:-7px; left:60px; width:13px; height:7px; background:url(http://192.168.1.158:7501/static/css/ico\_guweninfo.png) no-repeat -85px -43px;}

.ui_tip_con .line{ display:block; height:1; margin:5px 0; border-bottom:1px dotted #e8e8e8; overflow:hidden;}

.ui_tip_more{ display:none; position:absolute; padding:10px 15px; border:1px solid #e0e0e0; border-radius:3px; background:#fff; box-shadow:0 0 3px rgba(0,0,0,0.1); z-index:100;}

.ui_tip_more .cont{ text-align:left; color:#555; font-family:”microsoft yahei”;}

.ui_tip_more .cont a{ display:block; padding:0 10px; line-height:24px; color:#555; border-radius:2px; text-align:center; background:none;}

.ui_tip_more .cont a:hover{ color:#fff; background:#00a2d6;}

.ui_tip_more .ico_top{ position:absolute; top:-7px; left:200px; width:13px; height:7px; background:url(http://192.168.1.158:7501/static/css/ico\_guweninfo.png) no-repeat -105px -43px;}

.ui_tip_more .ico_bottom{ position:absolute; bottom:-7px; left:60px; width:13px; height:7px; background:url(http://192.168.1.158:7501/static/css/ico\_guweninfo.png) no-repeat -85px -43px;}

.ui_tip_more .ico_t{ position:absolute; top:-7px; width:13px; height:7px; background:url(http://192.168.1.158:7501/static/css/ico\_guweninfo.png) no-repeat -105px -43px;}

.ui_tip_more .ico_b{ position:absolute; bottom:-7px; left:60px; width:13px; height:7px; background:url(http://192.168.1.158:7501/static/css/ico\_guweninfo.png) no-repeat -85px -43px;}

.ui_tip_more .line{ display:block; height:1; margin:5px 0; border-bottom:1px dotted #e8e8e8; overflow:hidden;}

.hide_box{ display:none;}

暂无备注

/*//闭包限定命名空间

(function ($) {

$.fn.extend({

“highLight”: function (options) {

//检测用户传进来的参数是否合法

if (!isValid(options))

return this;

var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数

return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用

//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。

var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom

//根据参数来设置 dom的样式

$this.css({

backgroundColor: opts.background,

color: opts.foreground

});

//格式化高亮文本

var markup = $this.html();

markup = $.fn.highLight.format(markup);

$this.html(markup);

});

}

});

//默认参数

var defaluts = {

foreground: ‘red’,

background: ‘yellow’

};

//公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。

$.fn.highLight.format = function (str) {

return ““ + str + ““;

}

//私有方法，检测参数是否合法

function isValid(options) {

return !options || (options && typeof options === “object”) ? true : false;

}

})(window.jQuery);*/

$.fn.ui_why_tip = function(options) {

var defaults = {

position : “t”, //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)

left : 100,

value : 15, //小箭头偏离左边和上边的位置

width : 100,

mg_t : 0

};

var options = $.extend(defaults,options);

var bid = parseInt(Math.random()*100000);

var $this = $(this);

$(“body”).prepend(‘

var $btip = $(“#btip”+bid);

var $btipClose = $(“#btipc”+bid);

var offset,h ,w ;

$this.off().on(“mousemove”,function(){

clearInterval(window.timer);

offset = $(this).offset();

h = $this.height();

w = $this.width();

$(“.cont”).html($(this).attr(“detail”));

$(“.cont”).css(‘width’,options.width);

$(“.ico_t”).css(‘left’,options.value);

//$btip.css({ “left”:offset.left+w/2-options.value-10,”top”:offset.top-h-7-$btip.height()-12}).show();

$btip.css({ “left”:offset.left-options.left,”top”:offset.top+h+7-options.mg_t}).show();

});

$this.on(“mouseout”,function(){

window.timer = window.setInterval(function (){

$btip.hide();

},100);

});

$btip.on(“mousemove”,function(){

clearInterval(window.timer);

$btip.show();

});

$btip.on(“mouseout”,function(){

$btip.hide();

});

$btipClose.on(“click”,function(e){

$btip.hide();

});

}

$(“.J_why_read”).ui_why_tip({position:”t”,left:20,value:20,width:100,mg_t:0});

$.fn.ui_tip_more = function(options) {

var defaults = {

position : “t”, //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)

left : 100, //

value : 15, //小箭头偏离左边和上边的位置

width : 100, //宽度

mg_t : 0 //margin-top的值

};

var options = $.extend(defaults,options);

var bid = parseInt(Math.random()*100000);

var $this = $(this);

$(“body”).prepend(‘

var $btip = $(“#btips”+bid);

var $btipClose = $(“#btipsc”+bid);

var offset,h ,w ;

$this.on(“mousemove”,function(){

clearInterval(window.timer);

offset = $(this).offset();

h = $(this).height();

w = $(this).width();

$(“.cont”).html($(this).siblings(‘.hide_box’).html());

$(“.cont”).css(‘width’,options.width);

$(“.ico_t”).css(‘left’,options.value);

//$btip.css({ “left”:offset.left+w/2-options.value-10,”top”:offset.top-h-7-$btip.height()-12}).show();

$btip.css({ “left”:offset.left-options.left,”top”:offset.top+h+7-options.mg_t}).show();

});

$this.on(“mouseout”,function(){

window.timer = window.setInterval(function (){

$btip.hide();

},100);

});

$btip.on(“mousemove”,function(){

clearInterval(window.timer);

$btip.show();

});

$btip.on(“mouseout”,function(){

$btip.hide();

});

$btipClose.on(“click”,function(e){

$btip.hide();

});

}

$(“.J_why_more”).ui_tip_more({position:”t”,left:20,value:20,width:100});

一键复制

编辑

Web IDE

原始数据

按行查看

历史

发表评论

表情：
评论列表 （有 0 条评论，529人围观）

还没有评论，来说两句吧...

相关阅读