jQuery提示效果代碼分享，jquery代碼分享

jQuery提示效果代碼分享，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>

複製代碼 代碼如下:
$(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();
             });
       })

學習心得：
 
不要在p標籤下追加div元素，會出現一個大的偏差值！
 
原來！this和$("this")是有所不同,如果上文
 this.title改寫成$("this").attr("title")會導致下面的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

複製代碼 代碼如下:
<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在經過一段時間的使用後，對使用中碰到的一些問題進行了總結，最近花了點時間對原來的代碼進行了重構和最佳化，並加入了一些新功能。原來的版本只是為了實現簡單的彈出層的準系統，從項目的角度來說就是如何能快速的完成項目，而這個版本不僅僅是實現基本的功能，更多的考慮了彈出層如何更好更輕鬆的應用於項目中。
easyDialog v2.0新增的功能：

1. 增加了預設的彈出層內容範本，如果只是一些簡單的應用，自己可以不去寫彈出層內容的結構，而只需傳幾個簡單的參數即可，原來的使用方法：

複製代碼 代碼如下:
easyDialog.open({
  container : 'demoBox'
});

使用預設的內容範本，那麼container參數可以這麼用：

複製代碼 代碼如下:
easyDialog.open({
  container : {
    header : '彈出層標題',
    content : '歡迎使用easyDialog : )',
 yesFn : btnFn,
    noFn : true
  }
});

顯示的效果如所示：

如果要修改預設的內容範本的樣式，可以修改下載文檔中的easydialog.css檔案來實現你想要的樣式。
2. 增加了拖拽效果，使彈出層有更好的使用者體驗，並且自訂彈出層內容也可以輕鬆實現拖拽效果。
3. 內部增加了緩衝系統、微型事件處理系統，對彈出層內容也做了緩衝，使彈出層效能更佳。
另外修改了一個參數的命名，原來的isOverlay改成了overlay，原來的彈出層各元素的id也重新命名，盡量避免衝突。

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