ASP.NET MVC 3程序(二)： 如何使用JQuery插件Overlay

   在上一篇文章的基礎上我們建立好一個基於JQgrid的列表（http://blog.csdn.net/aa466564931/article/details/8002972）之後，我們有可能需要使用到一些自定義的功能，例如需要查看某一條數據的詳細信息（列表上不方便全部列舉出來），這時候很可能需要跳出一個自定義的頁面來做到這一點。這裏我們繼續看另外一個JQuery的插件Overlay，如果你還沒有聽說過這個插件，可以看看篇文章（包含很多的code和Demo，建議多試試）：

http://jquerytools.org/documentation/overlay/index.html

當然我們還有很多方法的來做到這一點，比如自己寫一段JS腳本，抑或使用Ajax控件，比如基於UserControl的ModalPopupExtender（http://blog.csdn.net/aa466564931/article/details/6704802），但是MVC程序中最爲推薦的還是JQuery，而且使用JQuery的插件能夠幫助我們需要更少的coding量，另外它也是開源的，我們可以從中得到更多的優勢。

 

Overlay的很多style都是被鎖定了的，例如你需要一個關閉overlay的按鈕的時候只需要在按鈕上定義好class=“close”就可以達到關閉的效果了，其他都在Overlay的都會幫你做好, 但是通常我們的美工是幫我們定義好了樣式的，所以很可能會需要自己定義樣式名稱來關閉Overlay，這又怎麼實現呢？ 來看一個實例吧。

首先你需要在layout.cshtml中添加以下引用：

 

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>

接着定義好一段html代碼，這就是你想顯示出來的內容，例如

<div id="mysearch" class="yesno">
<div class="modal">
<h3>Search page</h3>
<p>Name:<input type="text" id="name" /> (Name field is blank will get all users.)</p>
<p>Active:
<select id="active">
<option selected="selected" value="1">Y</option>
<option value="0">N</option>
</select>
</p>
<p>
<input type="button" value="query" onclick="gridReload2();" class="close" />
<input type="button" onclick="test1();" value="close" class="close" />
</p>
</div>
</div>

 

這是一段顯示搜索對話框的html，可以根據JQgrid的列來進行搜索，更快查找到信息。接着我們需要初始化Overlay，確定overlay的樣式，大小，透明度等屬性。

    $(document).ready(function () {
        $("#mysearch").overlay({
            mask: {

                // you might also consider a "transparent" color for the mask
                color: '#fff',

                // load mask a little faster
                loadSpeed: 200,

                // very transparent
                opacity: 0.5
            },
            closeOnClick: false,
            onBeforeClose: function () {
               // $('#pluginin').html("");
            }

        });
    }

 

mySearch即div的id， mask是需要遮蔽的屬性，當然你還可以實現一些Overlay特用的時間，例如這裏的onBeforeCloase, 注視掉的代碼是清空某一個div內的值，因爲當你調用Overlay的close事件時，他不會清空掉你的內容，只是隱藏起來，當你在需要在關閉時候清除掉這些數據的時候那麼就可以通過這個方式來達到。

構建代碼完成後我們還需要初始化open和close的初始化代碼，這樣才能夠方便你之後的調用，代碼如下：

        $('.close').click(function () {
            $('#yesno').overlay().close();
        });

        $("#searchButton").click(function () {
            $("#mysearch").overlay().load();
        });

 

這裏需要感謝論壇朋友的幫助，之前在做的時候遇到了問題，有興趣可以看看此帖：

http://topic.csdn.net/u/20120913/18/fbe2eb87-13df-4600-a547-51999a420c5d.html?seed=550307558&r=79671009#r_79671009

這裏是凡是樣式爲close的按鈕點擊未關閉（id不適用，因爲你很可能需要多個關閉按鈕，爲每一個關閉按鈕設置這一段代碼是不優雅的），而打開的話只能是searchbutton了。

 例如：

<button  class='close'>close</button>

 

當然這樣做也會帶來一個問題，是什麼問題呢？下一篇文章我再來繼續介紹。