程式設計筆記

顯示具有 JQuery 程式設計筆記 標籤的文章。顯示所有文章

2013年9月11日星期三

ASP.NET 中關於 Postback 與離開頁面的分辨

大家在使用Asp.net開發應用系統時，有時會存在這樣的場景，當頁面離開時需要清空Session等等一系列的後序操作。

如果大家使用後台代碼清空Session，那麼當頁面離開時是不會Postback頁面的，問題就出在這裡，那麼我們只能從前台入手了，可以使用前台事件window.onunload，沒有問題，我們繼續，當我們正常的載入Asp.Net頁面，點擊一個Button，頁面PostBack之前每次都會觸發onunload事件，那麼我們如何才能在前台利用onunload事件分析出在什麼情況下是postback,什麼情況下是離開呢?

    var isSubmit = false;
    $(document).ready(function () {
        document.forms[0].onsubmit = SubmitFun;
        window.onunload = CheckAction;
    });
 
    function SubmitFun()
    {
        isSubmit = true;
    }
 
    function CheckAction() {
        if (!isSubmit) {

            var guid = $('#<%=hfGuid.ClientID %>').val();
            
            // ajax 執行刪除某一系列 Session 的動作
            // $.get('<%=ResolveClientUrl("...")%>', function () { });
            
            alert("is leave");
            //to do 
            //for example use the ajax invoke service method to clean session 
        }
        else {
            alert("is submit");
            //to do
        }
    }

我們結合使用window.onunload與form.onsubmit兩個事件來完成分辨，當提交一個form時，觸發onsubmit事件，我們在這個事件處理方法中，將isSubmit置為true，在onunload事件中，根據isSubmit去分辨是提交頁面還是頁面離開，由於onunload事件總是在onsubmit事件之後執行，所以可以保證得到正確的結果。

在註釋處我們可以添加自己想要的代碼，例如使用ajax調用後台方法等等...

引用：Web系统中关于Postback与页面离开的分辨

2012年5月7日星期一

Jquery 子母頁面間的 json 參數傳遞

應某位聽眾請求，他需要了解如何在「母頁面開啟子頁面後，子頁面處理資料後，傳遞 json 資料給母頁面接收」，稍微寫了一下，其實不難，但是由於本人眼力似乎趨近於老人，所以變數錯了過了很久才發現，差不多弄了兩個小時才把它弄好，實際上，只需要 10 分鐘。

1.

首先先到 JQuery 官方網站下載最新的 js 檔 (目前版本為：v1.7.2)

2.

再到 rahul 網友發布的網誌 jQuery - Encode & Decode arbitrary objects to and from JSON 中，擷取他的 json 編碼與解碼的 js 檔案

3.

接著我寫兩個頁面，a.html 將 b.html 打開後，將 email 與 password 欄位輸入值後，點擊「確認」鍵後，即將這兩個欄位藉由 $.JSON.encode 函式將欄位值打包為 json 格式，再利用 window.opener 的屬性將 json 格式資料傳回 a.html 的 jsonstring 隱藏欄位，再呼叫 a.html 的 javascript 的函式將 jsonstring 隱藏欄位值讀取出並放入所在位置，這麼一來，問題就解決了

a.html

<html>
<head>


<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">
    function show()
    {
        var encoded = $('#jsonstring').val();
        var obj = jQuery.parseJSON(encoded);
        
        $('#email').val(obj.email);
        $('#password').val(obj.password);
    }
</script>
</head>
<body onload="abc();">
    <form name="form">
        <input type="text" id="email" name="email"/>
        <input type="text" id="password" name="password"/>
        
        <input type="hidden" id="jsonstring" name="jsonstring" />
        <br />
        <a href="b.html" target="_blank">b.html</a>
    </form>
</body>
</html>

b.html

<html>
<head>


<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="json2.js" ></script>

<script type="text/javascript">
    function dosubmit(){

        var email = $('#email').val();
        var password = $('#password').val();

        var thing = {email: email, password: password};

        var encoded = $.JSON.encode(thing);  

        var decoded = $.JSON.decode(encoded);

        $('#jsonstring').val(encoded);
        window.opener.document.all.jsonstring.value = encoded;
        
        window.opener.show();
        
        this.close(); 

    }
</script>

</head>
<body>
        <input type="text" id="email" name="email" />
        <input type="text" id="password" name="password" />
        <input type="button" onclick="dosubmit()" value="確認">

</body>
</html>

回JQuery目錄
回html目錄
回首頁

2012年3月12日星期一

JQuery 程式設計目錄

VS加入jQuery Intellisense(提示功能)

微軟已經在VS 2010上完整支援jQuery Intellisense
只要加入jquery-*.js與jquery-*-vsdoc.js(版本名稱要相同，這邊以1.7.1版做範例)
就可以看到跟VS一樣的提示功能

但是在VS 2008沒有直接支援
以往我們都需要做另外宣告
又因為在運行時會抓到vsdoc而將其隱藏

<script src="jquery-1.7.1.js" type="text/javascript"></script>
<% if(false) { %>
  <script src="jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
<% } %>

要做到VS 2010一樣的效果
需要先將VS 2008升級到SP1
VS90SP1-KB958502-x86

然後安裝微軟提供的Hotfix
VS90SP1-KB958502-x86

安裝完之後
不管在VS 2010還是VS 2008
只需將jquery-1.7.1.js與jquery-1.7.1-vsdoc.js放在相同資料夾內
然後呼叫(直接脫過去)jquery-1.7.1.js
不需要再多做乎要jquery-1.7.1-vsdoc.js的動作

ASPX頁面呼叫

<script src="jquery-1.7.1.js" type="text/javascript"></script>

js檔呼叫

/// <reference path="jquery-1.7.1-vsdoc.js" />

2012/03/12 David Kuo 補充：

請注意，假使許多子頁面在不同位置及目錄，而都要套用同一款主版頁面，那就必須要使用相對位置的連結路徑。
例如：

<script src="<%=ResolveUrl("~/js/jquery-1.7.1-vsdoc.js") %>" 
type="text/javascript"></script>

如此一來，所有子頁面都會對應到相同的 jquery-1.7.1-vsdoc.js 檔案

参考：
jquery vsdoc vs2008使用javascript的提示功能
VsDoc for jQuery
支持-vsdoc.js的jQuery智能提示的VS2008 SP1补丁发布
Rich IntelliSense for jQuery

回aspnet目錄
回JQuery目錄
回首頁

2011年5月28日星期六

css 選擇器 ( css selector)

css 對於美化與設計網頁有著不可或缺的重要角色，當你需要某些區塊有什麼顏色、抑或是某些背景，加入在 tag 的 attribute 之中，當然，建議在另一樣式檔案( *.css )編輯，在用 link tag 匯入樣式檔案，這樣網頁的程式碼，看起來更簡潔。

而在這樣式檔案之中，有以下一些規則，在此作介紹。

( 引用網址：http://www.w3.org/TR/CSS2/selector.html )

各位可以先去了解哪些瀏覽器有支援 css 3的功能，提供一個網址給大家參考http://www.findmebyip.com/litmus

以下為 css 2.1 選擇器語法的介紹：

樣式	描述	範例
*	通用選擇器 - 匹配任何元素	* { color: Red;} 所有元素 color 變為 Red
E	類型選擇器 - 匹配任何 E 元素	div { color: Red; } div 元素 color 變為 Red
E F	後代選擇器 - 匹配任何 E 底下所有 F 元素	div span { color: Red; } div 底下所有 span 元素 color 變為 Red
E > F	子代選擇器 - 匹配任何 E 子代所有 F 元素	div > span { color: Red; } div 子代所有 span 元素 color 變為 Red，並不等同於後代選擇器，注意「子代」的意思
E:first-child	:first-child 偽類選擇器 - 匹配 E 父元素的第一個 E 元素	p > em:first-child 所有 p 元素底下的第一個 em 元素 color 變為 Red
E:link	link 偽類選擇器 - 匹配 E 元素未被按下的元素	-
E:visited	link 偽類選擇器 - 匹配 E 元素已被按過的元素	-
E:active	dynamic 偽類選擇器 - 匹配 E 元素滑鼠按下時的元素	-
E:hover	dynamic 偽類選擇器 - 匹配 E 元素滑鼠滑過時的元素	-
E:focus	dynamic 偽類選擇器 - 匹配 E 元素獲得焦點時的元素	-
E:lang(c)	:lang() 偽類選擇器 - 匹配 E 元素 lang 屬性為 c 的元素	div:lang(c) { color: Red; } 所有 div 的 lang 屬性為 c 的元素 color 變為 Red
E + F	相鄰選擇器 - 匹配緊鄰 E 元素後同級 F 元素	div + span { color: Red; } 緊鄰 div 之後的 span 同級元素
E ~ F	鄰後選擇器 - 匹配 E 元素後同級 F 元素	div ~ span { color: Red; } div 之後的 span 同級元素
E[foo]	屬性選擇器 - 匹配 E 元素屬性有 foo 的元素(無視有無值)	div[class] { color: Red; }
E[foo="warning"]	屬性選擇器 - 匹配 E 元素屬性 foo 值為 warning	div[class="red"] { color: Red; }
E[foo~="warning"]	屬性選擇器 - 匹配 E 元素屬性 foo 可能包含多個用空格隔開的值，其中有一個值為 warning 的元素	div[class~="red"] { color: Red; }
E[lang\|="en"]	屬性選擇器 - 匹配 E 元素屬性 lang 可能包含多個用連字符號隔開的值，以 en 開頭的元素	-
DIV.warning	Class選擇器 - 匹配 DIV 元素 class 為 warning 的元素	div.red { color: Red; } 等同於 div[class~="red"]
E#myid	ID選擇器 - 匹配 E 元素 id 為 myid 的元素	div#sn { color: Red; }

回JQuery目錄
回首頁

訂閱：文章 ( Atom )

2013年9月11日 星期三