What's 筆記本: Javascript

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

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年7月10日星期四

{JavaScript} Close 畫面並將父畫面Reload

Close 畫面並將父畫面Reload

Script:
window.opener.location.reload();
window.close();

C# 編寫JavaScript 語法
//直接關閉視窗
public void Close()
{
Page p = (Page)System.Web.HttpContext.Current.Handler;
ClientScriptManager CSM = p.ClientScript;
String ScriptName = "close";
String ScriptMsg = "window.opener.location.reload();window.close();";
Type CsType = p.GetType();
if (!CSM.IsStartupScriptRegistered(CsType, ScriptName))
{
CSM.RegisterStartupScript(CsType, ScriptName, ScriptMsg, true);
}
}

參考資訊：
http://stackoverflow.com/questions/19027959/how-to-refresh-parent-page-after-closing-popup-window-in-javascript

2014年4月9日星期三

{Javascript} 從檔案路徑取檔案名稱

var type=url.match(/[^\/.]+$/gi);

g 比對多次
i 忽略字元的大小寫
m 多行(^與$能比對行末字元)

參考資料：
http://carlos-studio.com/2013/09/12/%E6%AD%A3%E8%A6%8F%E9%81%8B%E7%AE%97%E5%BC%8Fregular-expression/

2013年5月13日星期一

{JavaScript} JS中資料轉Json格式中文成Unicode(\u...)問題

以下情況僅IE 8會發生..........以下解法經用IE 8測試OK

當在JS中將資料利用JSON.stringify()方式
轉為Json遇到中文時，會被成Unicode編碼

紅框為中文字

傳到後端會自動將Unicode解碼

但也可以手動在解碼一次

string factoryName = Regex.Unescape(jsonResult.FactoryName);

string lineName = Regex.Unescape(jsonResult.LineName);

前端的部分，JSON.parse會自動轉中文字

var data = JSON.parse(jsonResult);

參考資訊：

http://blog.darkthread.net/post-2013-04-10-ie8-json-stringify-ucn-encoding.aspx

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月20日星期四

{C#.JavaScript} HtmlEncode Htmldecode 寫法

將字串、連結做編碼、解碼寫法
JavaScript:
//Encode
var abc="this is a book";
var encode = escape(abc);

//Decode
var abc="this is a book";

var encode = unescape(abc);

C# 寫法於參考資料

參考資料：
http://blog.miniasp.com/post/2008/11/Explain-web-related-encoding-decoding-method-in-detail.aspx

2012年12月6日星期四

{JavaScript} 取代多個字符、控制項中游標位置、日期轉換

{JavaScript} 小數位補零、檢查是否為數值、四捨五入

//小數位不足自動補零
function showAsFloat(n) {
return parseFloat(n).toFixed(2);
}

//檢查是否是數字
function checkFormate(num) {
num = num + "";
//去掉一個小數點(如有二個小數點也會出現警示
num = num.replace('.', '');
//只能输入有0~2位小数的正实数
// var re = /^[0-9]+(.[0-9]{0,2})?$/;
if (num != '') {
//無限制小數數量
var re = /^[0-9]+(.[0-9])?$/;
if (!re.test(num) || num < 0) {
return false;
}
}
return true;
}

//四捨五入
function round(num, pos) {
var size = Math.pow(10, pos);
return Math.round(num * size) / size;
}

參考資料：
正則式：http://www.dotblogs.com.tw/killysss/archive/2009/11/18/12039.aspx

{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年10月5日星期五

{JavaScript} html-select option Postback後指定選取

Html：

<select name="ddlNo" id="ddlNo" style="width: 10%">
<% var No= ViewState["No"] as List<string>;%>
<% if (No!= null) %>
<% { %>
<%=         "<option value=''></option>"%>
<%      foreach (var item in No)%>
<%      { %>
<%=         "<option value=" + item + ">" + item + "</option>"%>
<%      } %>
<% } %>
</select>

C#：
//用一個Hidden將被選取的值記錄下來，以供PostBack後重新Load畫面給JS判斷用
string No = Request.Form["ddlNo"];
HiddenselectNo.Value = No ;

JS：
if ($('#<%=HiddenselectNo.ClientID%>').val() != '') {
                var selectObj = $('#ddlNo')[0];
                for (var i = 0; i < selectObj.length; i++) {
//當值相同時，則被選取，否則為False；預設是第一個是被選取
var selectObj = $('#ddlSupplierNo')[0];
for (var i = 0; i < selectObj.length; i++) {
    if (selectObj[i].text == $('#<%=HiddenselectNo.ClientID%>').val())
        selectObj[i].selected = true;
    else
        selectObj[i].selected = false;
}

參考資料：
http://www.xiaoxiaozi.com/2010/08/17/1856/

2012年9月17日星期一

{C#} C#中讀取JavaScript 方法

1.Response.Write("JavaScript的字串")
>>執行後Script語法將跑至最上頭，以致產生「找不到物件」的問題

2.RegisterClientScriptBlock('script','JavaScript的字串')
>>執行後，置於<body>區塊最頂端

3.RegisterClientScriptInclud('script','JavaScript的字串')
>>執行後，置於<head>裡

4.RegisterStartupScript ('script','JavaScript的字串')
>>執行後，置於<body>區塊最末端, 所有的control重新Load一次後才執行

5.把JavaScript 加在控制項上
>>使用 Ex:
button1.Attributes.Add('onclick', JS FunctionName);

http://dnowba.blogspot.tw/2012/07/aspnetjavascript_12.html

多種使用方式：
http://irismyself.pixnet.net/blog/post/12388073-%E3%80%90asp.net%E3%80%91%E3%80%90javascript%E3%80%91%E5%9C%A8asp.net-%E5%91%BC%E5%8F%AB-javascript-

Page.ClientScript.RegisterClientScriptBlock
Page.ClientScript.RegisterStartupScript
Page.ClientScript.RegisterClientScriptInclude

http://welkingunther.pixnet.net/blog/post/27831277-(asp.net)%E5%8B%95%E6%85%8B%E8%A8%BB%E5%86%8Ajavascript%E8%87%B3client%E7%AB%AF

2012年7月10日星期二

{JavaScript} Json格式日期在JS中比對

當遇到Json格式轉出的DataTime
要在JavaScript裡做日期對比的function
則需先轉為new Date()，再去比對

function ConvertJsonDateAndCompare(JsondateString) {
var date = new Date(parseInt(dateString .replace("/Date(", "").replace(")/", ""), 10));
if(Date.parse(date)==Date.parse(controlDateString))
{
alert( '日期相同');
}

}

如是一般JS字串
則：Date.parse(controlDateString)

參考資料：
http://www.jb51.net/article/24215.htm
http://uiop7890.pixnet.net/blog/post/24839177-%5B%E5%8E%9F%E5%89%B5%5D-javascript-%E7%A8%8B%E5%BC%8F%E7%AF%84%E4%BE%8B-%E4%B9%8B-%E6%97%A5%E6%9C%9F%E6%AF%94%E8%BC%83

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

{JavaScript} 結束一for迴圈

當要結束一For 迴圈
for(i in a.count)
{
break;
}
alert('abc');
---->仍會跳出abc的彈跳視窗

for(i in a.count)
{
return false;
}
alert('abc');
-->不會跳出abc的彈跳視窗，即結束此Function

參考資料：http://topic.csdn.net/t/20050223/15/3800857.html

2012年6月22日星期五

{JavaScript} 檢查輸入是否為數值、去掉左右空白

1.是否為數值
方法一、使用rregulate------/^\d+/.exec(Value)
如為null則為非數值，反之則為數值
方法二、IsNaN(Value)
---空白也會認定是數值
方法三、isFinite(Value)
---中文字會認定是數值

2.去掉空白
去掉左右空白正規化(Regulate)：/^\s+|\s+$/g
去掉右邊空白正規化(Regulate)：/(\s*$)/g
去掉左邊空白正規化(Regulate)：/^\s+|\s+$/g

參考資料：

http://www.hujuntao.com/archives/javascript-isfinite-function.html

http://jinderlin.pixnet.net/blog/post/24495722-javascript---%E5%A6%82%E4%BD%95%E5%8E%BB%E9%99%A4%E5%AD%97%E4%B8%B2%E7%A9%BA%E7%99%BD

2012年5月24日星期四

{JavaScript}將數值增加千分位顯示與解除千分位

增加千分位顯示---

//千分位效果
function commafy(num) {
num = num + "";
var re = /(-?\d+)(\d{3})/
while (re.test(num)) {
num = num.replace(re, "$1,$2")
}
return num;
}

參考資料:
http://hchsjerry.blogspot.com/2008/03/javascript.html

解除千分位--
value.replace(/[,]+/g,"");
參考資料:
http://www.programmer-club.com/ShowSameTitleN/javascript/7743.html

2012年5月22日星期二

{JavaScript}判斷其一值是否為數值型態

判斷是否為數值

isFinite(欲判斷的值)

如為True>>則為數值

如為False>>則非數值

參考資訊：http://shellnote.blogspot.com/2010/07/blog-post.html

訂閱：文章 (Atom)

2014年9月29日 星期一

2014年7月10日 星期四

2014年4月9日 星期三

2013年5月13日 星期一

2013年2月27日 星期三

2013年1月23日 星期三

2013年1月3日 星期四

2012年12月20日 星期四

2012年12月6日 星期四

2012年10月18日 星期四

2012年10月5日 星期五

2012年9月17日 星期一

2012年7月10日 星期二

2012年7月9日 星期一

2012年6月22日 星期五

2012年5月24日 星期四

2012年5月22日 星期二