您的位置：首页 > Web前端 > JQuery

jquery插件的编写

2016-04-07 00:03 309 查看 
1、扩展jquery方法，实现tooltip提示框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>tooltip</title>
<style>
* {
padding: 0;
margin: 0;
}
#tooltip {
display: none;
padding: 0 10px 0 10px;
background-color: red;
}
#tooltip:after {
content: "";
position: absolute;
top: -12px;
left: 20%;
width: 0;
height: 0;
border-color: transparent transparent red transparent;  /*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/
border-style: solid;
border-width: 0 12px 12px 12px;
}
</style>
</head>
<body>
<p title="这里是自定义的提示框插件噢!">这是toolTip的插件！</p>
<br>
<br>
<p title="我狼故我在">游戏昵称！</p>
<script>
window.jQuery||document.write('<script type="text/javascript" src="jquery-1.12.0.min.js"><\/script>');
</script>
<script>
(function($){
$.fn.tooltip = function(){
console.log(this);
return this.each(
function(){
var text = $(this).attr("title");
if(text != undefined){
$(this).hover(function(e){
$(this).attr("title","");
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
$("body").append("<div id='tooltip' style=''>" + text + "</div>");
$("#tooltip").css({"position": "absolute","left": tipX,"top": tipY}).fadeIn();
},function(e){
$("#tooltip").remove();
$(this).attr("title", text);
});
$(this).mousemove(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
var tipWidth = $("#tooltip").outerWidth(true);
var tipHeight = $("#tooltip").outerHeight(true);
if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()){
tipX = $(window).width() - tipWidth;
}
if(tipY + tipHeight > $(window).height() + $(window).scrollTop()){
tipY = $(window).height() - tipHeight;
}
$("#tooltip").css({"position": "absolute","left": tipX,"top": tipY}).fadeIn();
});
}
}
);
}
})(jQuery);
$(function(){
$("p").tooltip();
});
</script>
</body>
</html>
2、实现隔行变色

;(function($){$.fn.extend({"alterBgColor": function(options){options=$.extend({odd: "odd",even: "even",selected: "selected"},options);$("tbody>tr:odd",this).addClass(options.odd);$("tbody>tr:even",this).addClass(options.even);$("tbody>tr",this).click(function(){var
hasSelected=$(this).hasClass(options.selected);$(this)[hasSelected?"removeClass":"addClass"](options.selected).find(":checked").attr('checked',!hasSelected);});$("tbody>tr:has(:checked)",this).addClass(options.selected);return this; //this指向调用该方法的jquery对象}});})(jQuery);

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航