반응형

jQuery로 Div객체를 에니메이션 효과를 활용하여 스크롤하는 경우가 있다.

이럴땐 

$('#divID')animate({scrollLeft:'100px'});

와같은 방식으로 사용하면 된다. scrollLeft는 DIV객체의 x좌표를 이동하는 구분자이다.

$('#divID')animate({width:'100px'});와 같이 사용해도 된다. 상황에 맞게 응용하면 되며 

상세한 옵션들은 검색해보자.

저작자표시 비영리
반응형
var regExp = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    if (!regExp.test('Email@Address.com')) {
        return false;
    }
    else {
        return true;
    }
 
저작자표시 비영리
반응형
1. http://www.uploadify.com/ 에서 jQuery플러그인을 받는다.(asp.net)

 [Uploadify.htm]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>파일업로드 : jQuery + Uploadify + ASP.NET</title>

    <link href="uploadify.css" rel="stylesheet" type="text/css" />

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.uploadify.v2.1.0.js" type="text/javascript"></script>

    <script src="swfobject.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

        // Uploadify 파일 업로드 컨트롤 : Flash가 설치가 되어있어야 함

            $('#fileInput').uploadify({

                'uploader' : 'uploadify.swf', // Uploadify 컨트롤 지정

                'script' : 'Uploadify.ashx', // 서버측 스크립트, ASP.NET, ASP, PHP, JSP

                'cancelImg': 'cancel.png', // 취소 이미지

                'auto' : false, // true면 파일선택시 바로 자동으로 업로드됨

                'folder': '/Uploads', // 업로드할 폴더 : 가상디렉터리 + 업로드폴더

                // 업로드 완료시 처리 :

                //      주요 속성은 http://www.uploadify.com/documentation/ 참고

                'onComplete': function (event, queueID, fileObj, response, data) {

                    $('#lblFile').append('<a href=/WebJQuery' + fileObj.filePath + '>'

                    + fileObj.name + '</a><br>');

                }

            });

            // 버튼 클릭시 업로드

            $('#btn').click(function () { $('#fileInput').uploadifyUpload(); });

        });

    </script>

</head>

<body>

    <input id="fileInput" name="fileInput" type="file" />

    <input type="button" id="btn" value="업로드" />

    <div id="lblFile"></div>

</body>

</html>

 




-------------------------------------------------------------------------------------


 

[Uploadify.ashx]


<%@ WebHandler Language="C#" Class="Uploadify" %>

 

using System;

using System.Web;

 

public class Uploadify : IHttpHandler {

   

    public void ProcessRequest (HttpContext context) {

        // Filedata로 넘겨온 파일 값 받기

        HttpPostedFile file = context.Request.Files["Filedata"];

        // 저장할 폴더

        string targetDirectory = System.IO.Path.Combine(

        context.Request.PhysicalApplicationPath,

        context.Request["folder"].Replace("/", ""));

        // 저장할 폴더 + 파일명

        string targetFilePath = System.IO.Path.Combine(

            targetDirectory, file.FileName);

        // 파일 저장(업로드)

        file.SaveAs(targetFilePath);

 

        context.Response.Write("RedPlus");

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

 

}
[출처] : http://holland14.tistory.com/538
 

2. 파일을 업로드할경우 변수를 넘겨야하는 경우가 있다.
1)의 소스대로 하면 변수는 $(document).ready()상에 지정해야하는데 데이터를 미리 받아오기전에는
변수를 넘기기 힘들다. 
그래서 

            // 버튼 클릭시 업로드

            $('#btn').click(function () { $('#fileInput').uploadifyUpload(); });



이부분에 변수를 넘길 수 있는 처리를 추가해야한다.
var _obj = $('#fileInput');

_obj.uploadifySettings('scriptData', { 'code1': 'data01', 'code2': 'data02' });

_obj.uploadifyUpload();

이부분을 처리해주면 업로드 할때 변수(code1,code2)의 값을 전달할 수 있다.

저작자표시 비영리
반응형
1) $('.aaa').length

아주간단하다.(자주 까먹어서 곤란할지경이다.)
html에서  class가 'aaa'로 작성된 개체들의 수를 반환한다.

2) $('input[name=bbb]').length

비슷한 예재로 1)의경우에는 class를 찾지만 2)의경우에는 name를 찾는다.

ex)
<div id='1' class='aaa' name='bbb'></div>
<div id='1' class='aaa' name='bbc'></div>
<div id='1' class='aaa' name='bbb'></div>

위태그를 1),2)로 돌려보면
1)의 경우는 3이 나오고
2)의 경우는 2가 나온다.

 
저작자표시 비영리
반응형
var globalVar = "0";
a();
b();
function a(){
            $.ajax({
                type: "POST",
                url: "a.aspx/FunctionName",
                data: "{'_work_code':'" + _work_code + "','_regdate':'" + _reg_date + "'}", 
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var _rst = msg.d;
                    globalVar = "2";
                }
            });
}
function b(){
            globalVar = "1";
}


 
위와 같이 선언된 jQuery함수에서 자바스크릅트의 전역변수를 선언하면
Post로값을 넘겨서인건지(정확히는 모름)  전달에 지연된다.
a()가 먼저 호출되었음에도 불구하고 globalVar의 값은 2가 아닌 1로 정의 되버린다.
이를 막기위해 한가지를 추가해줘야한다.

 $.ajax({
                type: "POST",
                url: "a.aspx/FunctionName",
                async:false, 
                data: "{'_work_code':'" + _work_code + "','_regdate':'" + _reg_date + "'}", 
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var _rst = msg.d;
                    globalVar = "2";
                }
            });

강조된 부분을 추가해주면 자바스크립트의 전역변수가 제대로 전달된다. 
저작자표시 비영리
반응형
jQuery를 이용하여 동일한 페이지(a.aspx/ a.aspx.cs)상의 서버함수에 접근하는 방법이다.
            $.ajax({
                type: "POST",
                url: "a.aspx/FunctionName",
                data: "{'_work_code':'" + _work_code + "','_regdate':'" + _reg_date + "'}", 
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var _rst = msg.d;
                }
            });
//---------------------------------------------
 Post방식으로 서버함수에 접근하는 방법이다.
1) url: "a.aspx/FunctionName",
 이부분에서 a.aspx는 접근해야할 함수가 존재하는 페이지(스크립트가 선언된 페이지와 동일하다.)
/뒤의 FunctioinName는 서버스크립트에 존재하는 함수명이다.
2) data: 부분은 FunctionName에 전달해야할 파라미터들이다.
 '_work_code':'" + _work_code + "' 에서 앞부분이 서버에 선언된 파라미터명이고 반드시 동일한 이름으로 작성되어야하며
서버함수의 파라미터 갯수와 정확히 일치해야한다. 뒷부분은 파라미터에 전달할 클라이언트의 값이다.
3)contentType: , dataType: 이것들은 선언해줘야할 타입들인데 그다지 손댈일이 없으므로 패스
4) success: function (msg) {
서버함수로 전달된 값이 계산을 통해서 반환된다면 msg로 값이 넘어온다.
msg.d로 값을 확인할 수 있으며 배열로 넘어오는 경우에는 msg.d[0], msg.d[1]과 같은 방식으로 확인하면 된다. 
저작자표시 비영리
반응형
function get_QueryString(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);
    if (results == null)
        return "";
    else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
}
 
저작자표시 비영리

+ Recent posts

티스토리툴바