顯示具有 JavaScript 標籤的文章。 顯示所有文章
顯示具有 JavaScript 標籤的文章。 顯示所有文章

2013年1月24日 星期四

為Blog加上Scroll To Top按鈕

以前曾經利用浮動式廣告/工具列的功能，在部落格上作過類似的Back To Top (Scroll To Top)的按鈕，那時候是用CSS來製作，後來因為覺得不需要就拿掉了…那是2010年的事囉…不需要的原因很簡單，一來我的文章沒有這麼長到要用到回到上方的按鈕，滑鼠滾輪給他滾一滾還算可以，長一點的文章，其實也只要按鍵盤上的HOME就可以回到頁面的最頂端。Back To Top的Button是英雄無用武之地。

2013年的現在，我寫的文章愈來愈長，而平板電腦用戶愈來愈多，沒有滑鼠給他滾、沒有鍵盤給他HOME，總是要提供個按鈕給瀏覽者按，所以又重新做了一次。

這次當然還是用到超連結(不然哩)，CSS美化了一下，再利用JQUERY提供的現成的一些功能，製作了動態的回到上方按鈕(Dynamic Scroll To Top Button)，如下圖，右下角的「▲回到上方▲Scroll to Top」就是了。

image

重點在於「動態」：
如果瀏覽畫面一開始就在最上方，按鈕是不會出現的。
當瀏覽畫面到往下移動，按鈕會「浮現出來」而不是彈出來
再來是當按下按鈕時，畫面是「慢慢移動」到上方，而不是猛的跳到上面

怎麼完成呢？有興趣的話再往下看

=====================繼 續 閱 讀=====================
標籤Tag： , , , 1 則留言:

2012年7月12日 星期四

ASP.NET上使用JavaScript的方法 (二)

繼上一篇文章ASP.NET上使用JavaScript的方法 (一)
談到了在HTML原始碼上面寫進JavaScript的三種方式
是比較傳統的作法

這篇文章才算是真正的進入ASP.NET的範疇
主要是談怎麼在Server端寫Code 程式碼的時候也一併寫JavaScript

寫在前面：這邊我還是延用上一專題ASP.NET上使用JavaScript的方法 (一)的案例「限制級網頁」來探討如何使用JavaScript，Script的內容是一樣的，如下： 

    <script type="text/javascript">
            if (confirm('以下內容為限制級，如果你已年滿18歲請按確定繼續觀看，否則請按取消 '))
        { document.write('你按了確定, 這些畫面很暴力、很情色吧…') }
        else {document.getElementById('Panel1').style.visibility = 'hidden'}
    </script>

和上篇文章不同的地方，是我修改了一下畫面的設計，在圖片的部分，我這次不用HTML來維護圖片的長度和寬度，改用CSS設計的方式…把程式碼區塊弄得更複雜一些。HTML原始碼如下： 

<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100px;
            height: 80px;
        }
        .style2
        {
            width: 100px;
            height: 80px;
        }
        .style3
        {
            width: 100px;
            height: 80px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
        <img alt="溫馨圖片，普通級" class="style1" src="Images/test0.jpg" /><br />
        <asp:Panel ID="Panel1" runat="server" style="margin-bottom: 0px">
            <img alt="暴力圖片，限制級" class="style2" src="Images/test1.jpg" />
            <img alt="情色圖片，限制級" class="style3" src="Images/test2.jpg" />
        </asp:Panel>    
    </div>
    </form>
</body>
</html>

用CSS的結果和直接用HTML的Image設定是一樣的，這麼是多此一舉，只是想把HTML弄得複雜一點，JavaScript會看得比較清楚，所以就先用上去吧。
image

後面就來介紹其他的幾種使用方法。

=====================繼 續 閱 讀=====================
標籤Tag： , , 沒有留言:

2012年7月11日 星期三

ASP.NET上使用JavaScript的方法 (一)

記得以前在參考書上常常看到JavaScript應用在ASP.NET上
不過寫的方式和位置總是讓人摸不著頭緒
這本書寫在這邊、那本書寫在那邊的…
可能因為那些書也不是專門講JavaScript
所以對於為什麼要這樣寫著墨也不是很多
常常是在出錯中學習

在ASP.NET使用JavaScript的方法不一而足
可是使用的時機不大一樣
想想現在很多的大型的網路應用  (像Google MAP) 都有提供支援JavaScript的API
今個兒想來做個整理
說不定哪一天派得上用場

寫在前面


為了避免混淆，我整理的方式比較特別一點，我想統一使用一種Script，來試著表現出「使用時機」的重要性。所以這邊我設計了一個案例，說明如下：
這個網頁的部分內容是限制級的，所以進入前需要有一個確認的功能，跳出一個詢問視窗詢問Brower是否滿18歲，如果按下確定，就可以看到這個部分的內容，如果按下取消，就把這個限制級的內容給關閉。image

好啦，我承認這個案例有點白痴，是有「目的」設計的案例
用ASP.NET來寫就可以完成的範例，有點殺雞用牛刀的感覺。

這邊就「故意」用JavaScript，Confirm視窗的方式來表現，完整的Script如下： 

    <script type="text/javascript">
        if (confirm("以下內容為限制級，如果你已年滿18歲請按確定繼續觀看，否則請按取消 "))
        { document.write("你按了確定, 這些畫面很暴力、很情色吧…") }
        else { document.getElementById('Panel1').style.style.visibility = 'hidden' }
    </script>


說明一下上面的程式碼

行2~行3 如果按下確定，就直接呈現畫面，並輸出文字「你按了確定，這些畫面很暴力、很情色吧」到畫面上

行4 如果按下取消 (或直接按 「x」關閉視窗 ) 那就把 HTML 裡 的 <panel> 給遮蔽掉，這<panel>區塊就是我放暴力情色內容的地方。

這個案例裡，一般的內容我會簡單的用一張圖 test0.jpg 來表示
而panel 這個區塊我會放一張暴力的圖 test1.jpg、一張情色的圖 test2.jpg 來表示

以下就看看下面提到的方式哪些可以完成這個案例。

=====================繼 續 閱 讀=====================
標籤Tag： , , 1 則留言:

2012年6月30日 星期六

ASP.NET GridView上刪除欄位資料時，出現confirm box 確認視窗

DNOWBA在 ASP.NET webform上加上JavaScript對話框 已經寫過一個簡單的方法，是把刪除的確認視窗寫在html原始碼裡，如果是使用像GridView這類的控制項，在產生每個欄位的時候，就會自動調整GridView裡的小控制項。

如果要更靈活的和客戶端「互動」，把刪除哪份資料也在confirm 視窗裡頭提示，如下圖，在按下刪除按鈕的時候，顯示的confirm box會帶出刪除哪一篇文章的訊息(反白的文字就是標題)，這樣的話更可以知道自已到底是按了哪個刪除按鈕，刪除資料前會更有保障。
image

那麼，我們可以把script寫在後置程式碼裡來完整控制。不過，愈是要「完整控制」，牽涉的程式碼愈複雜，我想這是免不了的，不過也因為這樣，我們可以學習更多的控制項內容…蠻有趣的。

=====================繼 續 閱 讀=====================
標籤Tag： , , , 1 則留言:

2012年6月28日 星期四

ASP.NET webform上加上JavaScript對話框

dialog box 對話框(對話視窗/對話盒)是用來顯示特殊訊息，觀看者需要作出回應後才可繼續操作。JavaScript內有三類對話方式，windows上分別使用三個method：
window.alert( ) window.confirm( ) window.prompt( )

上面是我們在以前程式設計知道的，在ASP.NET裡頭也有運作的方法，這邊先以一般的html狀況來做複習，探討什麼時機用什麼樣的對話框，最後再提到ASP.NET裡使用的方法。

image

image

=====================繼 續 閱 讀=====================
標籤Tag： , , , 沒有留言:
訂閱： 文章 (Atom)
Related Posts Plugin for WordPress, Blogger...
// Dnow Function