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

忘是亡心i 2022-10-06 04:56 262阅读 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

原始数据

按行查看

历史

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

发表评论取消回复

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

相关阅读