What's 筆記本: JQuery

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

2014年9月29日星期一

{JavaScript} AJAX 跨網域存取(未嘗試)

方式：
http://www.pureexample.com/tw/jquery/cross-domain-ajax.html

可能的問題：
http://jsgears.com/thread-2369-1-1.html
http://blog.toright.com/posts/3205/%E5%AF%A6%E4%BD%9C-cross-origin-resource-sharing-cros-%E8%A7%A3%E6%B1%BA-ajax-%E7%99%BC%E9%80%81%E8%B7%A8%E7%B6%B2%E5%9F%9F%E5%AD%98%E5%8F%96-request.html

其他：
https://code.google.com/p/chromium/issues/detail?id=321241

2014年3月26日星期三

{JQuery} BlockUI 網頁遮罩-鎖畫面

Post back:


$(function(){
$("#FormId").submit(function () {

                $.blockUI();

            });



});

Ajax:


$.blockUI();

            $('#MainDiv').AdminViewer();

           //有時會失效

            $.unblockUI();

//另一解法--但畫面會被鎖住，畫面上的下拉、文字方塊等控制項將無法被再度使用

$(".blockUI").fadeOut("slow");

參考資訊：
http://malsup.com/jquery/block/
http://blog.hellocode.info/2012/11/jquery-blockui.html
http://jerry459tw.pixnet.net/blog/post/33689453-~-%E7%84%A1%E6%B3%95-unblockui-%E7%9A%84%E6%99%82%E5%80%99%E8%A9%B2%E6%80%8E%E8%BE%A6-~

2013年7月4日星期四

{C#} Progressbar(JQuery UI) 搭配Ajax

搭配Ajax取資料其間進度條展示
//CSS樣版


<style>

    .progress-label {

            float: left;

            margin-left: 50%;

            margin-top: 5px;

            font-weight: bold;

            text-shadow: 1px 1px 0 #fff;

        }




</style>


<script>


 $(function () {

//設定Progressbar

            var progressbar = $("#progressbar"),

            progressLabel = $(".progress-label");

            progressbar.progressbar({

                value: false,

                change: function () {

                    progressLabel.text(progressbar.progressbar("value") + "%");

                },



                complete: function () {

                    progressLabel.text("Complete!");

                }

            });

            var intervalID = setInterval(progress, 250);

           //觸發Read ajax

                        var strURL = "source.ashx";

                        $.ajax({

                            type: 'GET',

                            data: { parms: Math.random() },

                            url: strURL,

                            contentType: "application/json; charset=utf-8",

                            dataType: 'json',

                            error: function () {

                                alert('Ajax request 發生錯誤');

                            },

                            success: function (result) {

                                $("#progressbar").progressbar("value", 100);

                                $("#progressbar").hide();

                              

                            }

                        });

});

 function progress() {

                var val = $("#progressbar").progressbar("option", "value")

                if (val < 100) {

                    $("#progressbar").progressbar("value", val + 1);

                }

            }

</script>



<div id="progressbar"></div>

參考資訊：
http://horacerobot.blogspot.tw/2010/12/jquery-ajax-mvc-jquery-ui-progress-bar.html
http://jqueryui.com/progressbar/#label

2013年2月27日星期三

{JQuery}倒數計時器(Like hTC時鐘效果)

當到數十秒結束後，將saveBtn 效果Open

JavaScript:


function timerStart() {

            $("span").each(function () {

                $(this).attr('style', 'display');

            });

            //只有秒數

            $('.counter').counter({ format: '59' });

            //事件:counterStop

            $('.counter').live('counterStop', function () {

                $('#<%=saveBtn.ClientID %>').removeAttr('disabled');

            });

         }


Html:

<asp:Button ID="saveBtn" runat="server" Text="Upload" class="btnred" />



<span id="spanCounterWord" style="display:none" >等待</span>

                <span class="counter  counter-analog" id="spanCounter" style="display:none" >0:10</span>

                <span id="spanCounterWord2" style="display:none" >秒後，即可再度上傳</span>

註1：在API中綁定counterStop事件用 on , 其為jQuery UI版本為1.7以上才能使用，
1.7以下的版本使用 live 綁定
註2：each 使用如下Sample：

$("span").each(function () {
});

$("span[dir='value']").each(function(){
});

API:
http://blog.sophilabs.com/2012/08/jquery-counter-plugin/

JS 綁定事件
http://blog.wu-boy.com/2012/04/use-on-api-to-attach-event-handlers-on-jquery/

each 瀏覽標籤
http://stackoverflow.com/questions/1936411/return-the-text-of-each-span-using-jquery
API:
http://api.jquery.com/each/
參考資料：
http://stackoverflow.com/questions/1936411/return-the-text-of-each-span-using-jquery

2013年1月23日星期三

{JQuery} 函式運用 (更新時間：04/09)

1.函式：$.map(source,function (item)
解釋：列出陣列中資料(JSON. ARRAY)
範例：

$.map(JSON.parse($("#<%=Source.ClientID %>").val()),function (item) {
$('#<%=ddlAAA.ClientID%>').append($('<option value=' + item+ '>' + item + '</option>'));
})

參考資料：http://api.jquery.com/jQuery.map/

2.函式：$.grep(source, function (item)
解釋：比對外來資料與陣列中的資料(JSON. ARRAY)
範例：

$.map(source,function (item) {

$.grep(JSON.parse($("#<%=Source.ClientID %>").val()), function (item) {
return (new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i")).test(item);
})

參考資料：http://api.jquery.com/jQuery.grep/

2013年1月3日星期四

{JavaScript} html控制項利用JS Bind事件


$('#btnAdd').bind('click', function () {

                        var qty = $('#txtQty').val() != '' ? parseInt($('#txtQty').val()) : 0;

                        var sum = $('#hiddenText').val() != '' ? parseInt($('#hiddenText').val()) : 0;

                        var total = qty + sum;

                        $('#hiddenText').val(total);

                        alert($('#hiddenText').val());

                    })



<input type="button" id="btnAdd" value="加入" />

按鈕btnAdd利用JS語法，Bind 住 Click事件

參考資料：
http://stackoverflow.com/questions/6458840/on-input-change-event

2012年12月19日星期三

{JQuery} dialog 顯示「正在....」畫面


$(document).ready(function () {

            $("#dialog:ui-dialog").dialog("destroy");

    $('#Button1').click(function () {



        var dlg = $("#<%=DivPage.ClientID%>").dialog({

                            modal: true,

                            height: 200,

                            width: 400

                       });

                        $('a.ui-dialog-titlebar-close').hide();

                        $("#<%=DivPage.ClientID%>").dialog("open");

                       dlg.parent().appendTo(jQuery("form:first"));

                       $("#dialog:ui-dialog").dialog("destroy");

    });

    //當程序運作完成時，關閉

    $('#Button2').click(function () {

        $("#<%=DivUploadIframePage.ClientID%>").dialog("close");

    });

});






<form>

<body>


 <div runat="server" id="DivPage" title="Please Wait..." style="width: 260px;

        height: 400px; display: none">

        <table width="100%" class="f12black">

            <tr>

                <td align="center">

                    正在加載中，請稍後...<br />

                </td>

            </tr>

        </table>

    </div>

</body>

</form>

API:
http://api.jqueryui.com/dialog/#option-buttons

2012年12月6日星期四

{JavaScript} JS控制控制項Enable、Visible

// Visible 不顯示(不出現在Html中)
if ($('#<%=select.ClientID%>').find("option:selected").val() != '我選了')
$('#<%=trCPSDMailNotice.ClientID%>').attr('style', 'display:none');
//出現
else
$('#<%=trCPSDMailNotice.ClientID%>').attr('style', 'display:');

//Enable 顯示但不可用
if (!$('#<%=chkBoth.ClientID%>')[0].checked)
$('#<%=txtMyFare.ClientID%>').attr('disabled', 'disabled');
//顯示且可用
else
$('#<%=txtMyFare.ClientID%>').removeAttr('disabled');

2012年10月18日星期四

{JQuery} Autocomplete 進階應用-text、value值不同(像DropdownList)

autocomplete.aspx :
$("#<%=Txt.ClientID %>").autocomplete('Datasource.aspx', {
                noCache: true,
                lineSeparator: ",",//設定基準為Datasource.aspx中紅色資料連接符號
                //當資料被選擇時
                onItemSelect: findValue,
                onFindValue: findValue,
                //擴充參數給Datasource.aspx
                extraParams: {
                    MPSNo: function () {
                        return $('#<%=TxtVersionNo.ClientID%>').val();
                    }
                }
            });

function findValue(li) {

                if (li == null) {
                    document.getElementById('<%=TxtItemName.ClientID %>').innerText = '';
                    document.getElementById('<%=TxtItemSpec.ClientID %>').innerText = '';
                }
                else {
                    document.getElementById('<%=TxtItemName.ClientID %>').innerText = li.extra[0];
                    document.getElementById('<%=TxtItemSpec.ClientID %>').innerText = li.extra[1];
                }
            }

Datasource.aspx:

protected void Page_Load(object sender, EventArgs e)
    {

        var query = "";
        var mpsNo = "";
        if (!string.IsNullOrEmpty(Request.QueryString["q"]))
            query = Request.QueryString["q"].ToUpper();
        if (!string.IsNullOrEmpty(Request.QueryString["MPSNo"]))
            mpsNo = Request.QueryString["MPSNo"];
        var modelList = new PMOperator().ReadPNAuotcompleteDataSource(query, mpsNo).Take(10).ToArray();

        var count = modelList.Count();
        string[] str = new string[count];
        for (int i = 0; i < count; i++)
        {
            if (i == count - 1)
            str[i] = string.Format("{0}|{1}|{2}", modelList[i].PN, modelList[i].PNName, modelList[i].PNSpec);
            else
            {
                str[i] = string.Format("{0}|{1}|{2},", modelList[i].PN, modelList[i].PNName, modelList[i].PNSpec);
            }
        }
        Response.Write(string.Join(Environment.NewLine, str));
    }

PS.
當使用extraParams屬性擴充參數時，autocomplete.js對下列的寫法，會產生問題
MPSNo: function () {
                        return $('#<%=TxtVersionNo.ClientID%>').val();
需將autocomplete.js檔中makeUrl(q) function 修改下段程式碼 (主要是紅字部分):

    function makeUrl(q) {
        var url = options.url + "?q=" + escape(q);
        $.each(options.extraParams, function (key, param) {

            url += "&" + key + "=" + (typeof param == "function" ? param() : param);

        });
        return url;
    };

參考資料：
http://forums.asp.net/t/1830016.aspx/1
http://blog.darkthread.net/post-2009-07-10-jquery-autocomplete-sample.aspx
http://jsgears.com/viewthread.php?tid=114&extra=&page=1

API:
http://api.jqueryui.com/autocomplete/#entry-examples

2012年8月17日星期五

{JQuery} 修改dialog 樣式與功能、按鈕事件

關閉dialog右上角叉叉功能
$('a.ui-dialog-titlebar-close').hide();

樣式修改
http://hi.baidu.com/zdz8207/item/4cb5726bcfc9d735ac3e83b7

在dialog上加按鈕
http://mini.nidbox.com/diary/read/193

其他屬性
http://www.phptogether.com/juidoc/dialog.html

dialog 按鈕事件


$("#dialog-confirm").dialog({

          resizable: false,

          height: 160,

          modal: true,

          buttons: {

            "OK": function () {

//建立一個新的Option於select 控制項

              varreason= $("#reason").val();

              var newOption = $('<option value=' +reason+ '>' +reason+ '</option>');

              $('#<%=ddlItemType.ClientID%>').append(newOption);

              newOption.attr("selected", "true");

              $(this).dialog("close");

            },

            Cancel: function () {

              $(this).dialog("close");

            }

          }

        });

參考資料：
http://lovang.iteye.com/blog/647317

2012年7月9日星期一

{JavaScript} 動態新增刪除select頁籤之Option項目

var appendStr = "";
for (i in dataArr) {
if (dataArr[i].aaa== selectValue) {
appendStr += "<option value='" + dataArr[i].bb+ "'>" + dataArr[i].bb+ "</option>";
}
}
//先刪除所有Option 再增加Option
if(appendStr!="")
{
$('#ddl').find("option").remove().end().append(appendStr);
}

參考資料：
http://stackoverflow.com/questions/47824/using-core-jquery-how-do-you-remove-all-the-options-of-a-select-box-then-add-o

2012年6月22日星期五

{Knowledge} 輸入法下keypress事件失效、事件無法同時使用

1.在新注音中文輸入法下，輸入文字將不會觸發KeyPress事件，只會有KeyDown事件
詳細解說：http://blog.darkthread.net/post-2011-04-26-keypress-event-under-ime.aspx

2.在Jquery下，同時使用change()、keyup()事件，無法同時被觸發
詳細解說：http://paladinprogram.blogspot.tw/2011/01/jquery-change-keyup.html

2012年6月1日星期五

{C#} FileUpload搭配Jquery多檔上傳、指定上傳格式

//以下條件為單檔上傳，檔案只能為Excel File2003或Excel File 2007
<asp:FileUpload ID="FileUpload1" class="multiFile" maxlength="1" accept="xls|xlsx" runat="server" />

Jquery Multiple File Upload Plugin下載js檔
載入aspx 執行FileUPload元件

屬性：
class="multiFile">>多個檔案上傳
maxlength="1">>一次只能一個
accept="xls|xlsx">>允許上傳副檔

參考資訊：http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples

2012年5月16日星期三

{C#}使用Jquery的按鈕等包在Updatepanel中失效

如有使用到jquery 語法的按鈕等控制項，包在Updatepanel中時，jquery就沒有效用，需要重新載入jquery 才得以解決

重新Reload Jquery：

Sys.Application.add_load(function () {
init();
});
將其包於Updatepanel中的控制項之Jquery語法，放入init() function中
並需要在aspx中增加：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
才能識別Script的 Sys語法

2012年5月7日星期一

{JQuery}AutoComplete包於MasterPage中

頁面的生成是從每一個page的control先，最後才是MasterPage
javascript的路徑如寫在Masterpage中，則頁面上的Autocomplete將不被觸動
1.故在MasterPage中放上

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
以利web讀取javascript資訊

2.在page上重新載入js
Sys.Application.add_load(function () {

$("#<%=txtComplete.ClientID %>").autocomplete('Source.aspx', {
noCache: true,
mustMatch: true
});
});

page生命週期參考資料：http://www.dotblogs.com.tw/marcus116/archive/2011/05/16/25156.aspx

2012年5月4日星期五

{JQuery}比對是否大於今日

//今天日期
var nowDate = new Date();
//欲比對日期
var thisDate = new Date(myDate);
if (thisDate < nowDate) {
alert("過期");
}

2012年4月20日星期五

{JQuery} input控制項事件(持續更新：更新時間:4/20)

Text------

Blur() ：當物件失去forcus時
Change()：當物件失去focus並且內容改變時
keypress()：當控制項按下鍵盤鍵時(focus仍在)
keyup()：當控制項按下鍵盤鍵「放開後」(focus仍在)
click()：滑鼠點擊時
onPropertyChange()：待測試

ex:$('.class').live('blur',function name)

select:-----
change()：改變下拉選項時

參考網址:
http://www.dotblogs.com.tw/topcat/archive/2010/01/28/13383.aspx

2012年4月10日星期二

{JQuery} datepicker日期元件使用

//控制項的class 設定為"datepicker"
<script>
$('.datepicker').datepicker({ dateFormat: 'yy/mm/dd' ,

changeMonth: true, //是否可選擇月份
changeYear: true, //是否可選擇年份
yearRange: '-90:+0', //顯示可選年份的Range
defaultDate: (new Date()),//日曆預設選擇日期--當天
maxDate: new Date()//最大可選擇日期
minDate: (new Date())//最小可選日期

});
</script>

jquery版本1.6.2

使DatePicker對應的Text 為Read only
$("#text").keypress(function (e) {
e.preventDefault();
});

週休二日不可選(內鍵函數)
$('#text').datepicker({ beforeShowDay: $.datepicker.noWeekends });

參數參考：
http://www.dotblogs.com.tw/cloudio/archive/2008/08/08/4840.aspx
http://www.cnblogs.com/lf6112/archive/2011/05/19/2051126.html
http://my-web-design.blogspot.tw/2010/10/jquery-ui-datepicker.htm
http://stackoverflow.com/questions/2771137/jquery-date-picker-where-text-input-is-read-only
http://www.itstrike.cn/Question/51bf073c-ef71-43cb-a6ce-e09ec3bc24da.html

2012年4月8日星期日

{JavaScript} 子母視窗傳值 windowOpen()

母視窗
window.open('TestReturnValue2.aspx?context=1');

TestReturnValue2子視窗
//當Label2為input 之html tag

window.opener.document.getElementById('Label2').value = 'abc';
//當Label1為asp.net之tag
window.opener.document.getElementById('Label1').innerHTML = 'abc';

-------------------------------------------------------------------------------------
使用user control傳值
母視窗
abc.ascx 上的control觸發：
window.open('TestReturnValue2.aspx?context=1');
abc.ascx上保留id 為return的control接回傳值
子視窗
cde.ascx 上的control觸發：

var returnValue = $('#<%=DataSource.ClientID %>').val();
window.opener.document.getElementById('abc_return').value = returnValue;

結論：用底線隔開取得母視窗中user control上的control

參考文件：
http://forums.asp.net/t/453742.aspx/1

2012年4月2日星期一

{JQuery} 將input htm控制項轉為enable狀態

將控制項Enable:
$('#txtSpecDate').attr('disabled', 'disabled')

解除Enable:

$('#txtSpecDate').removeAttr('disabled');
Or$('#txtSpecDate').attr('disabled', '');

http://shellnote.blogspot.com/2010/06/jquerydisableenable.html

訂閱：文章 (Atom)

2014年9月29日 星期一

2014年3月26日 星期三

2013年7月4日 星期四

2013年2月27日 星期三

2013年1月23日 星期三

2013年1月3日 星期四

2012年12月19日 星期三

2012年12月6日 星期四

2012年10月18日 星期四

2012年8月17日 星期五

2012年7月9日 星期一

2012年6月22日 星期五

2012年6月1日 星期五

2012年5月16日 星期三

2012年5月7日 星期一

2012年5月4日 星期五

2012年4月20日 星期五

2012年4月10日 星期二

2012年4月8日 星期日

2012年4月2日 星期一