Ajax 登入時MD5加密驗證/ jquery ui tools scrollable（滾動)/MSClass（JS類庫滾動)

 

第一：Ajax 登入時MD5加密驗證

Ajax登入重點：輸入使用者名稱和密碼後，使用Ajax方式將資訊提交到伺服器端，伺服器端判斷時候存在該使用者，存在則登入成功並轉向管理介面（有時需要寫cookie或是利用Session，此處不作討論），不存在則提示登入失敗。密碼 使用 MD5中hex_md5（string）加密再傳輸到後台。

login Code

 1  //頁面點擊登入按鈕 2     function DynamicLogin() { 3     4   5     var UID= $('#UserName').val(); 6     var PWD=$('#PassWord').val(); 7         if (UID == "" || PWD == "") { 8  9             if (UID == "") {10                 $("#UserName").focus();11             }12             else if (PWD == "") {13                 $("#PassWord").focus();14             }15             alert("使用者名稱或密碼不可為空！");16         }17         else {18             jQuery.ajax({19                 cache: false,20                 type: "POST",21                 url: "/WebManage/WebLook/Login.aspx",22                 data: "UserName=" + escape(UID) + "&PassWord=" + hex_md5(escape(PWD)),23 24                 beforeSend: function ()25                 {26                     $("#login").css("display", "none");27                     $("#loading").css("display", "block"); //點擊登入後顯示loading，隱藏輸入框28                   29                 },30                 success: function (msg)31                 {32 33                     if (msg == "E") {34                         alert("使用者名稱或密碼為空白！");35                         $("#UserName").focus();36                         return false;37                     }38                     else if (msg == "N") {39                         alert("使用者不存在或密碼錯誤！");40                         $("#UserName").focus();41                         return false;42                     }43                     else if (msg == "R") {44                         alert("帳號未審核！請聯絡管理員！");45                         $("#UserName").focus();46                         return false;47                     }48                     else {49                                                 50                         $("#login").load("/WebManage/Weblook/LoginDetail.aspx");51                        52                     }53 54                 },55                 complete: function (data)56                 {57                    58                     $("#loading").css("display", "none"); //點擊登入後顯示lusername，隱藏loading59                     $("#login").css("display", "block");60                 }61 62             });63 64 65         }66     }

 

參考資料：http://www.cnblogs.com/alexis/archive/2010/09/04/1818144.html

 

第二：jquery ui tools scrollable

Scrollable是一個靈活、輕量級（3.9kb）用於建立滾動內容的jQuery外掛程式。任何內容（HTML、視頻、檔案、圖片等...）都可以作為一個滾動項。支援水平與垂直兩種滾動方向。

滾動外掛程式提供了屬性配置，vertical: true即支援垂直滾動；mousewheel: true支援滑鼠滾輪驅動。

<script src="/Content/javascript/jQuery/jquery.tools.min.js" type="text/javascript"></script>

<div id="chained" class="scrollable L_newin">
                    <!-- root element for the items -->
                    <div class="items" style="left: -1360px;">
                        #if($dtinfo.Rows.Count==0) <span align="center">暫無記錄</span> #else #foreach($dr in $dtinfo.Rows)
    #end #end
                    </div>
                </div>

 

參考資料：http://www.poluoluo.com/jzxy/201110/143879.html

第三：MSClass,是一款通用不間斷滾動JS封裝類,幾乎支援目前所有流行風格的圖片或文字的滾動/切入/漸顯等效果,同時支援橫向/豎向/連續/間斷/緩動等多種形式。

添加：<script src="http://www.cnblogs.com/Content/javascript/MSClass.js" type="text/javascript"></script>

Marque Code

 1 <div class="content-center-box"> 2         <div class="notice-box div-open"> 3         <div class="fl mt10"> 4             <h1 class="fl notice-title">公告:</h1> 5             <div class="fl" id="hottitle"> 6                 <p class="notice-info fl ml5" id="notice_scroll"> 7 後台查詢出來在此迴圈<a href=""></a> 8 </p> 9             </div>10         </div>11         <script type="text/javascript">12             new Marquee(["hottitle", "notice_scroll"], 2, 2, 850, 25, 200, 0, 0, 238);13             </script>14     </div>15 </div>

參考資料：http://www.popub.net/script/MSClass.html