快捷導(dǎo)航

jQuery提示效果代碼分享

更新時間：2014年11月20日 10:31:35 投稿：hebedich

這里給大家分享幾段JQuery提示效果的代碼，非常的簡單實用，有需要的小伙伴直接拿走吧

代碼一：

<p><a href="#" class="tooltip" title="這是我的超鏈接提示1.">提示1.</a></p>

<p><a href="#" class="tooltip" title="這是我的超鏈接提示2.">提示2.</a></p>

<p><a href="#" title="這是自帶提示1.">自帶提示1.</a></p>

<p><a href="#" title="這是自帶提示2.">自帶提示2.</a></p>

復(fù)制代碼代碼如下:

$(function(){

            $(".tooltip").mouseenter(function(e){

                this.mytitle=this.title

                this.title=""

                var a="<div>"+this.mytitle+"</div>"

                $("body").append(a);

                $("div").css({

                    "top": (e.pageY + y) + "px",

                    "left": (e.pageX  + x) + "px"

                }).show("fast")

            }).mouseout(function(){

                this.title= this.mytitle;

                $("div").remove();

             });

       })

學(xué)習(xí)心得：

不要在p標簽下追加div元素，會出現(xiàn)一個大的偏差值！

原來！this和$("this")是有所不同,如果上文
this.title改寫成$("this").attr("title")會導(dǎo)致下面的mouseout事件無法訪問保存下來的title

代碼二：

引用css：jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css
引用js：jqueryui/js/jquery-ui-1.8.18.custom.min.js

復(fù)制代碼代碼如下:

<script>

$( "#dialog:ui-dialog" ).dialog( "destroy" );

    $( "#dialog-message" ).dialog({

        height: 120,

        width: 220,

        modal: true,

        buttons: {

            "否": function() {

                //dosomething

                $( this ).dialog( "close" );   

            },

            "是": function() {

                //dosomething

                $( this ).dialog( "close" );

            }

        }

    });

</script>

<div id="dialog-message" title="消息框" style="display:none;height: 120px; width:220px;">我是彈出的消息框</div>

代碼三：

使用javascript彈出層組件easyDialog

easyDialog在經(jīng)過一段時間的使用后，對使用中碰到的一些問題進行了總結(jié)，最近花了點時間對原來的代碼進行了重構(gòu)和優(yōu)化，并加入了一些新功能。原來的版本只是為了實現(xiàn)簡單的彈出層的基本功能，從項目的角度來說就是如何能快速的完成項目，而這個版本不僅僅是實現(xiàn)基本的功能，更多的考慮了彈出層如何更好更輕松的應(yīng)用于項目中。
easyDialog v2.0新增的功能：

1. 增加了默認的彈出層內(nèi)容模板，如果只是一些簡單的應(yīng)用，自己可以不去寫彈出層內(nèi)容的結(jié)構(gòu)，而只需傳幾個簡單的參數(shù)即可，原來的使用方法：

復(fù)制代碼代碼如下:

easyDialog.open({

  container : 'demoBox'

});

使用默認的內(nèi)容模板，那么container參數(shù)可以這么用：

復(fù)制代碼代碼如下:

easyDialog.open({

  container : {

    header : '彈出層標題',

    content : '歡迎使用easyDialog : )',

 yesFn : btnFn,

    noFn : true

  }

});

顯示的效果如下圖所示：

如果要修改默認的內(nèi)容模板的樣式，可以修改下載文檔中的easydialog.css文件來實現(xiàn)你想要的樣式。
2. 增加了拖拽效果，使彈出層有更好的用戶體驗，并且自定義彈出層內(nèi)容也可以輕松實現(xiàn)拖拽效果。
3. 內(nèi)部增加了緩存系統(tǒng)、微型事件處理系統(tǒng)，對彈出層內(nèi)容也做了緩存，使彈出層性能更佳。
另外修改了一個參數(shù)的命名，原來的isOverlay改成了overlay，原來的彈出層各元素的id也重新命名，盡量避免沖突。

上面3種都是本人常用的提示效果了，大家根據(jù)自己的項目需求，自由使用吧

您可能感興趣的文章: