[jQuery/筆記] jQuery的第三方套件

jCarousel Lite (含Auto Scroll)
2011.12.14 追記，至1.0.1版為止，AutoScroll若想做到滑鼠移到其中一個項目，動畫效果要停止，此套件是辦不到的
網路上 Stop the jcarousel Lite animation on mouseover - Stack Overflow 有網友另外修改此套件，找
http://www.dudal.com/jquery/jquery.jcarousellite.pauseOnHover.min.js下載
之後若AutoScroll想搭配onmouseover時，停止動畫的話
Step 1.改引用jquery.jcarousellite.pauseOnHover.min.js
Step 2.

    function init() {
        $(".jCarouselLite").jCarouselLite({
            auto: 800,
            speed: 1000,
            vertical: true,
            pauseOnHover:true

        });
        $(".jCarouselLite").css({"height":"400px"});//一定要用jQuery來改變高度才有效
        $(".jCarouselLite ul li").removeAttr("style");//這樣圖片高度和寬度才是原始的

}

</script>

因為上面的套件官方未提供靜態網頁，所以這邊提供一個給美工人員們下載研究用

MSDN論壇回應：仿easyslider的手寫版本

AnythingSlider(更酷炫可讓使用者選擇更多功能)

jCarousel和lightbox的混合應用套件

prettyPhoto (media lightbox)

滑鼠移到某區塊，出現Tooltip(出現另一層區塊Layer)

jQuery Tooltip @ jQuery TOOLS - Tooltips done right

http://flowplayer.org/tools/tooltip/index.html

[jQuery] 兩款適用於簡單文字顯示的jQuery Tootip (容易上手)

另開視窗照片展示

Colorbox(推薦！)

http://colorpowered.com/colorbox/

How to call jQuery colorbox with javascript onClick event instead of a link?

如果Colorbox是用iframe切版，在Colorbox視窗裡要關掉自己的視窗Javascript語法：


parent.$.colorbox.close();

如果要抓父視窗的DOM：parent.document.getElementById()

跳出提示視窗(推薦！)

jQuery AlertBox csscody

http://www.dotblogs.com.tw/shadow/archive/2011/03/02/21626.aspx

jQuery block UI：http://jquery.malsup.com/block/#dialog

jQuery UI Dialog:http://jqueryui.com/demos/dialog/
jQuery UI 中的對話框(老外教學)

整理以上四個異同點：

共同：都是讓某個區域(div)顯示(只是colorbox可以利用<a href="http://tw.yahoo.com" class="iframe">點選</a>加上iframe的參數，另開一個視窗)

lightbox、colorbox無法凍結視窗(滑鼠點選視窗外，效果即消失)

jQuery UI Dialog、block UI、jQuery AlertBox csscody可以凍結視窗

lightbox、colorbox、block UI、jQuery AlertBox csscody無法拖曳

jQuery UI Dialog可以拖曳

block UI由於無法拖曳加上預設滑鼠游標為讀取中，所以此套件大都用在資料讀取中使用

jQuery UI Dialog比較像一般javascript的alert('');

jQuery AlertBox csscody最好只用在單純的提示訊息。

[ASP.net] jQuery Pager + ListView手寫資料分頁 (仿奇摩、巴哈姆特樣式)

jQuery 滑鼠翻頁效果

Booklet - jQuery Plugin

點擊按鈕翻頁效果(這是某老外，由上面的套件修改的)

Moleskine Notebook with jQuery Booklet Codrops

全部的Page至少要兩頁，而全部頁至少有一頁包含圖片，頁面才會全秀出來，不會卡在Loading Page…

提供下拉選單跳頁的方法，假設總共有六或七個Page：

因為預設第一頁顯示在書本右方，之後每兩頁在同一個畫面，而且偶數頁在左方，奇數頁在右方，所以


<select id="mySelect" onchange="toPage(this.options[selectedIndex].value);">
                    <option value="0" >1</option>
                    <option value="2" >2-3</option>
                    <option value="4" >4-5</option>
                    <option value="6" >6-7</option>
</select>

DropDownList控制項在Code-Behind的Page_Load事件


if(!IsPostBack)
{
   DataTable dt = new DataTable();//從資料庫撈出一個資料集

   for (int i = 0 ; i < dt.Rows.Count;i++)//動態加入頁數和value給下拉選單
   {    
       int currentPage = i + 1;//從第一頁開始算
     
       if (currentPage==1)//第一頁預設在書本的右方，所以value給0
       {
          DropDownList1.Items.Add(new ListItem(currentPage.ToString(),"0"));
       }
       else
       {
             if (currentPage %2 == 0)//偶數才加Value
            {
               DropDownList1.Items.Add(new ListItem(currentPage + "～" + (currentPage+1),currentPage.ToString()));
            }
        }
    }//for迴圈結束

DropDownList1.Attributes["onchange"] = "toPage(this.options[selectedIndex].value);";

}


<script type="text/javascript">
        function toPage(evenNum) {
            evenNum = parseInt(evenNum, 10);//轉型成int
            $.fn.booklet.interfaces[0].gotoPage(evenNum); //跳頁時，要跳到左方的偶數頁

        }  
</script>

簡單的手風摺琴Menu式

Simple JQuery Accordion menu

巢狀手風摺琴(類似TreeView的呈現)

Experiments jQuery Nested Accordion

分類式垂直Menu

http://www.w3csolutions.com/website-resources/category/Vertical-Menu/jQuery-Menu/

==========================================================================

[VB][jQuery] 使用 jQuery.uploadify 上傳檔案(主要實現了上傳進度)
C# 使用uploadify批次上傳及帶進度條
自己改寫的C#範例程式檔下載(因為ASP.net原本就分UI和後置程式碼，所以我都寫在同一支程式)

如果上傳時有用到Session的參考：

jquery文件上传插件uploadify在.NET中session丢失的解决方案

jquery uploadify在谷歌浏和火狐下无法上传(.Net版)(原因說明)

論壇討論：怎樣用OpenFileDialog 做file upload?