jquery 달력

jquery 2012. 3. 14. 09:12

'jquery' 카테고리의 다른 글

jQuery 속성(Attrbute)으로 셀렉터 하기...  (1) 2010.10.28
ImageNavi  (3) 2010.09.10
table의 row 선택하여 data가져오기  (1) 2010.09.09
dynamic row  (1) 2010.09.09
select option의 첫번째 및 선택된 값 가져오기  (2) 2010.09.09
Posted by 정광원
,

1. [속성명] : 해당하는 속성을 가진 모든 엘리먼트를 선택 합니다.
   예) $("img[alt]") - img 엘리먼트 중 alt 속성이 있는 모든 img 엘리먼트를 선택 합니다.
       $("*[alt]")   - 모든 엘리먼트 중 alt 속성을 가지고 있는 모든 엘리먼트를 선택 합니다.

2. [속성명=속성값] : 해당하는 속성에 지정한 속성값(value)를 가지고 있는 모든 엘리먼트를 선택 합니다.
   예) $("img[alt=버튼]")  - img 엘리먼트 중 alt 속성의 값이 "버튼"인 모든 img 엘리먼트를 선택 합니다.

3. [속성명!=속성값] : 해당하는 속성에 지정한 속성값이 아닌 모든 엘리먼트를 선택 합니다.
   예) $("input[value!=0")  - input 엘리먼트 중 value 값이 0이 아닌 모든 input 엘리먼트를 선택 합니다.

4. [속성명*=속성값] : 해당하는 속성에 지정된 속성값을 포함하고 있는 모든 엘리먼트를 선택 합니다.
   예) $("input[value*=안녕) - input 엘리먼트 중 value 값에 안녕이라는 글자를 포함하는 모든 input 엘리먼트를 선택 합니다.
       <input type='text' value='선생님 안녕하세요' /> - 선택됨....
       SQl의 LIKE 조건과 같은 기능...

5. [속성명^=속성값] : 해당 하는 속성에 지정된 속성값으로 시작하는 모든 엘리먼트를 선택 합니다.
   예) $("img[src^=btn])  - img 엘리먼트 중 src속성의 값이 btn... 으로 시작하는 모든 img 엘리먼트를 선택 합니다.
       <img src='btn_cancel.png' />  - 선택됨...

6. [속성명$=속성값] : 해당 하는 속성에 지정된 속성값으로 끝나는 모든 엘리먼트를 선택 합니다.
   예) $("img[src$=.gif"])  - img 엘리먼트 중 src속성의 값이 ... .gif로 끝나는 모든 img 엘리먼트를 선택 합니다.
       이미지의 엘리먼트의 특정 확장자를 가진 엘리먼트를 검색하거나 할때 유용하겠져~
위에 속성들은 중복으로 사용이 가능 합니다.
예를 들어 input 태그의 name속성의 값이 idx라는 값중 value 값이 0 인 것들만 선택하려 한다면...
$("input[name=idx][value=0]") 과같이 중복하여 사용 할수 있습니다.

원문 : http://www.taeyo.net/Forum/Content.aspx?SEQ=1514&TBL=KNOWHOW&PGN=1

'jquery' 카테고리의 다른 글

jquery 달력  (0) 2012.03.14
ImageNavi  (3) 2010.09.10
table의 row 선택하여 data가져오기  (1) 2010.09.09
dynamic row  (1) 2010.09.09
select option의 첫번째 및 선택된 값 가져오기  (2) 2010.09.09
Posted by 정광원
,

ImageNavi

jquery 2010. 9. 10. 14:28

<script language="javascript" type="text/javascript" >

        $(document).ready(function () {
            var spacing = 155;
            function createControl(src) {
                return $('<img/>').attr('src', src).addClass('control').css('opacity', 0.6).css('display', 'none');

            }

            var $enlargedCover = $('<img/>').css({ 'position': 'absolute', 'cursor': 'pointer', 'cursor': 'hand' }).hide().appendTo('body');

            //var $waitThrobber = $('<img/>').attr('src', 'image/wait.gif').addClass('control').css('z-index', 4).hide();
            //닫기 버튼
            //var $closeButton = createControl('/CmnWeb/common/images/button/familysite_closebtn.gif').addClass('enlarged-control').appendTo('body');

            $('#ImgNavi').css({
                'width': spacing * 4,
                'height': '105px',
                'overflow': 'hidden',
                'position': 'relative'
            }).find(' a').css({
                'float': 'none',
                'position': 'absolute',
                'left': 1000
            });

            var imgUpCovers = function () {

                var $Imgs = $('#cardimg a');
                $Imgs.eq(0).click(function (event) {
                    if ($(this).attr('href') == "") {
                        return false;
                    }
                   
                    var startPos = $(this).offset();

                    startPos.width = $(this).find('img').width();
                    startPos.height = $(this).find('img').height();
                    var endPos = {};
                    endPos.width = startPos.width * 3;
                    endPos.height = startPos.height * 3;

                    endPos.top = $(this).offset().top / 2;
                    endPos.left = ($('body').width() - endPos.width) / 2;

                    $enlargedCover.attr('src', $(this).attr('href')).css("border", "1px solid")
                      .css(startPos)
                      .show();

                    var ImgAnimation = function () {
                        $enlargedCover.animate(endPos, 'normal', function () {
                            $enlargedCover.one('click', function () {
                                $enlargedCover.fadeOut();
                            });
                        });
                    };
                    if ($enlargedCover[0].complete) {
                        ImgAnimation();
                    }
                    else {

                        $enlargedCover.bind('load', ImgAnimation);
                    }

                    event.preventDefault();
                });
            }
            imgUpCovers();

            var setUpCovers = function () {
                var $Imgs = $('#ImgNavi a');

                $Imgs.unbind('click mouseenter mouseleave');
                var $leftbutten = $('#btnleft');
                $leftbutten.unbind('click mouseenter mouseleave');
                var $rightbutten = $('#btnright');
                $rightbutten.unbind('click mouseenter mouseleave');

                $rightbutten.click(function (event) {
                    $Imgs.eq(0).animate({ 'left': -spacing }, 'fast', function () {
                        $(this).appendTo('#ImgNavi');
                        setUpCovers();
                    });
                    $Imgs.eq(1).animate({ 'left': 0 }, 'fast');
                    $Imgs.eq(2).animate({ 'left': spacing }, 'fast');
                    $Imgs.eq(3).css('left', spacing * 3).animate({ 'left': spacing * 2 }, 'fast');

                    event.preventDefault();
                });

                $leftbutten.click(function (event) {
                    $Imgs.eq(0).animate({ 'left': spacing }, 'fast');
                    $Imgs.eq(1).animate({ 'left': spacing * 2 }, 'fast');
                    $Imgs.eq(2).animate({ 'left': spacing * 3 }, 'fast');
                    $Imgs.eq(3).animate({ 'left': spacing * 4 }, 'fast');

                    $Imgs.eq($Imgs.length - 1).css('left', -spacing)
                      .animate({ 'left': 0 }, 'fast', function () {
                          $(this).prependTo('#ImgNavi');
                          setUpCovers();
                      });
                    event.preventDefault();
                });

                $Imgs.eq(0).css('left', 0).click(function (event) {
                    //$waitThrobber.appendTo(this).show();
                    if ($(this).attr('href') == "") {
                        return false;
                    }
                    var startPos = $(this).offset();

                    startPos.width = $(this).width();
                    startPos.height = $(this).height();
                    var endPos = {};
                    endPos.width = startPos.width * 3;
                    endPos.height = startPos.height * 3;
                    endPos.top = $(this).offset().top;                      //좌표 top
                    endPos.left = ($('body').width() - endPos.width) / 2;

                    $enlargedCover.attr('src', $(this).attr('href')).css("border", "1px solid")
                      .css(startPos)
                      .show();

                    var performAnimation = function () {
                        //$waitThrobber.hide();
                        $enlargedCover.animate(endPos, 'normal', function () {
                            $enlargedCover.one('click', function () {
                                //$closeButton.unbind('click').hide();

                                $enlargedCover.fadeOut();
                            });
                        });
                    };
                    if ($enlargedCover[0].complete) {
                        performAnimation();
                    }
                    else {
                        $enlargedCover.bind('load', performAnimation);
                    }

                    event.preventDefault();
                });

                $Imgs.eq(1).css('left', spacing).click(function (event) {
                    //$waitThrobber.appendTo(this).show();
                    if ($(this).attr('href') == "") {
                        return false;
                    }

                    var startPos = $(this).offset();

                    startPos.width = $(this).width();
                    startPos.height = $(this).height();
                    var endPos = {};
                    endPos.width = startPos.width * 3;
                    endPos.height = startPos.height * 3;

                    endPos.top = $(this).offset().top;
                    endPos.left = ($('body').width() - endPos.width) / 2;

                    $enlargedCover.attr('src', $(this).attr('href')).css("border", "1px solid")
                      .css(startPos)
                      .show();

                    var performAnimation = function () {
                        $enlargedCover.animate(endPos, 'normal', function () {
                            $enlargedCover.one('click', function () {

                                $enlargedCover.fadeOut();
                            });
                        });
                    };
                    if ($enlargedCover[0].complete) {
                        performAnimation();
                    }
                    else {
                        $enlargedCover.bind('load', performAnimation);
                    }

                    event.preventDefault();
                });

                $Imgs.eq(2).css('left', spacing * 2).click(function (event) {
                    //$waitThrobber.appendTo(this).show();
                    if ($(this).attr('href') == "") {
                        return false;
                    }
                    var startPos = $(this).offset();

                    startPos.width = $(this).width();
                    startPos.height = $(this).height();
                    var endPos = {};
                    endPos.width = startPos.width * 3;
                    endPos.height = startPos.height * 3;
                    endPos.top = $(this).offset().top;
                    endPos.left = ($('body').width() - endPos.width) / 2;

                    $enlargedCover.attr('src', $(this).attr('href')).css("border", "1px solid")
                      .css(startPos)
                      .show();
                    var performAnimation = function () {
                        //$waitThrobber.hide();
                        $enlargedCover.animate(endPos, 'normal', function () {
                            $enlargedCover.one('click', function () {
                                //$closeButton.unbind('click').hide();

                                $enlargedCover.fadeOut();
                            });
                            /*
                            $closeButton.css({
                            'left': endPos.left,
                            'top': endPos.top
                            }).show().click(function () {
                            $enlargedCover.click();
                            });*/
                        });
                    };
                    if ($enlargedCover[0].complete) {
                        performAnimation();
                    }
                    else {
                        $enlargedCover.bind('load', performAnimation);
                    }

                    event.preventDefault();
                });

                $Imgs.eq(3).css('left', spacing * 3).click(function (event) {
                    //$waitThrobber.appendTo(this).show();
                    if ($(this).attr('href') == "") {
                        return false;
                    }
                    var startPos = $(this).offset();

                    startPos.width = $(this).width();
                    startPos.height = $(this).height();
                    var endPos = {};
                    endPos.width = startPos.width * 3;
                    endPos.height = startPos.height * 3;
                    endPos.top = $(this).offset().top;                      //좌표 top
                    endPos.left = ($('body').width() - endPos.width) / 2;   //좌표 left값

                    $enlargedCover.attr('src', $(this).attr('href')).css("border", "1px solid")
                      .css(startPos)
                      .show();
                    var performAnimation = function () {
                        //$waitThrobber.hide();
                        $enlargedCover.animate(endPos, 'normal', function () {
                            $enlargedCover.one('click', function () {
                                //$closeButton.unbind('click').hide();

                                $enlargedCover.fadeOut();
                            });
                            /*
                            $closeButton.css({
                            'left': endPos.left,
                            'top': endPos.top
                            }).show().click(function () {
                            $enlargedCover.click();
                            });*/
                        });
                    };
                    if ($enlargedCover[0].complete) {
                        performAnimation();
                    }
                    else {
                        $enlargedCover.bind('load', performAnimation);
                    }

                    event.preventDefault();
                });

            };
            setUpCovers();
        });
    </script>

'jquery' 카테고리의 다른 글

jquery 달력  (0) 2012.03.14
jQuery 속성(Attrbute)으로 셀렉터 하기...  (1) 2010.10.28
table의 row 선택하여 data가져오기  (1) 2010.09.09
dynamic row  (1) 2010.09.09
select option의 첫번째 및 선택된 값 가져오기  (2) 2010.09.09
Posted by 정광원
,


 $(document).ready(function () {

            SelectRow();
     });

    function SelectRow() {
        $("#allchk").unbind('click');
        $("#allchk").click(function () {
            var allbox = $(this).attr("checked");
            if (allbox == true) {
                $('table#rptbl tr td input:checkbox').each(function () {
                    $(this).attr("checked", "checked");
                });
            } else {
                $('table#rptbl tr td input:checkbox').each(function () {
                    $(this).attr("checked", "");
                });
            }
        });

    var rows = $("table#rptbl tr");
    if (rows && rows.length > 0) {
        $(rows).each(function (idx) {
            if (idx > 0) {
                var startIdx = 1;
                var endIdx = rows[idx].childNodes.length;

                for (i = startIdx; i <= endIdx; i++) {
                    //$(rows[idx].childNodes[i]).click(function () {
                    $(rows[idx]).find('td').eq(i).unbind('click');
                    $(rows[idx]).find('td').eq(i).click(function () {
                        var ID = $(rows[idx]).find('td').eq(0).children('input[type="checkbox"]').val();          //GUID
                        alert("checkbox value : " + ID);
                        //ID 값을 넘겨서 ViewPage를 호출한다.
                    });
                }


                $(this).mouseover(function () {
                   
                    //$(rows[idx]).addClass('mouseovercolor').attr('style', 'cursor:pointer;cursor: hand;'); class로 주려면
                    $(rows[idx]).attr('style', 'cursor:pointer;cursor: hand;background-color:#f8f8f8;');

                });
                $(this).mouseout(function () {
                    $(rows[idx]).css('background-color', '').attr('style', '');
                });
            }


        });
        }
}

function fn_Delete() {
    var checked = $("table#rptbl tr input:checkbox:checked");
    $("#txtselectbox").val("");
    if (checked && checked.length > 0) {
            checked.each(function (index, fieldname) {
                if (fieldname.id == "") {
                    $("#txtselectbox").val($("#txtselectbox").val() + $(this).val() + ",");
                }
            });
    } else {
        alert('선택된게 없잖어!!!!');
        return false;
    }
}

'jquery' 카테고리의 다른 글

jQuery 속성(Attrbute)으로 셀렉터 하기...  (1) 2010.10.28
ImageNavi  (3) 2010.09.10
dynamic row  (1) 2010.09.09
select option의 첫번째 및 선택된 값 가져오기  (2) 2010.09.09
jquery 접근방식  (1) 2010.09.09
Posted by 정광원
,

dynamic row

jquery 2010. 9. 9. 14:38


<script language="javascript" type="text/javascript" >
        var maxid = 0;
        var isfirst = "Y";
        function RowAdd(tableid, type, IsSearchYN, urlname) {

            var $id = eval("$('#" + tableid + "')");

            if (isfirst == "Y") {
                maxid = $id.find('tr').length;
                isfirst = "N";
            }

            maxid = parseInt(maxid) + 1
            //trid를 정함
            var trid = tableid + "tr" + maxid;

            //첫번째 행을 복사한다.
            var row = $id.children().find('tr').eq(1).clone(true);

            //증가할 tr의 id값을 정함
            row.attr("id", trid);
            //삭제 버튼의 Delete값의 ID값을 정한다.
            //row.find('td').eq(0).children("input[type='button']").attr("id", tableid + "Delete" + maxid);
            row.find('td').eq(0).find("input[type='button']").attr("id", tableid + "Delete" + maxid);

            var tds = row.find('td');

            //검색 버튼 여부 확인
            if (IsSearchYN == "true") {

                //검색 버튼을 제거하고 새로생성(IE에서는 Clone시 javascript가 호출안돼서 제거후 생성함)
                var text = tds.eq(1).find('a').html();
                tds.eq(1).find('a').remove();
                tds.eq(1).find('span').append("<a onclick='javascript:Search(\"" + trid + "\", \"" + urlname + "\");' class='btn_font'>" + text + "</a>");
            }

            var startindex = row.find("input[type='button']").length;
            var endindex = row.find("td").length;
            //복사한 td들의 값을 Reset해준다.
            for (var i = startindex; i < endindex; i++) {
                //tds.eq(i).children().attr("value", "");
                if (tds.eq(i).children("input[type='hidden']").length > 0) {
                    tds.eq(i).children("input[type='hidden']").attr("value", ""); //hidden reset
                } else if (tds.eq(i).children("input[type='text']").length > 0) {
                    tds.eq(i).children().attr("value", "");                       //text reset
                } else if (tds.eq(i).find("option").length > 0) {
                    tds.eq(i).find("Select").val(tds.eq(i).find("Select option:first").val()); //select box reset
                } else if (tds.eq(i).children("input[type='checkbox']").length > 0) {          //checkbox reset

                } else if (tds.eq(i).children("input[type='radio']").length > 0) {             //radio button reset
                    for (var j = 0; j < tds.eq(i).children("input[type='radio']").length; j++) {
                        tds.eq(i).children("input[type='radio']").eq(j).attr("name", name + maxid);
                    }
                }else {
                    tds.eq(i).text("");         //td값 reset
                }

            }

            var tempID;
            if (type == "UP") {
                //복사한 Row를 위로 생성한다.
                tempID = eval("'#" + tableid + " tr:first'");
                $(tempID).after(row);
            } else if (type == "DOWN") {
                //복사한 Row를 아래로 생성한다.
                tempID = eval("'#" + tableid + " tr:last'");
                $(tempID).after(row);
            }
            return false;
        }

        function RowDelete(row) {

            var $id = eval("'#" + row.id + "'");

            var len = $($id).parent().parent().parent().find('tr').length;

            if (len > 2) {
                $($id).parent().parent().remove();
            } else {
                var tr = $($id).parent().parent();
                var startindex = tr.find("input[type='button']").length;
                var endindex = tr.find("td").length;
                for (var i = startindex; i < endindex; i++) {
                    if (tr.find('td').eq(i).children("input[type='hidden']").length > 0) {
                        tr.find('td').eq(i).children("input[type='hidden']").attr("value", ""); //hidden값 reset
                    } else if (tr.find('td').eq(i).children("input[type='text']").length > 0) {
                        tr.find('td').eq(i).children().attr("value", "");
                    } else if (tr.find('td').eq(i).find("option").length > 0) {
                        tr.find('td').eq(i).find("Select").val(tr.find('td').eq(i).find("Select option:first").val()); //select box reset
                    } else if (tr.find('td').eq(i).children("input[type='checkbox']").length > 0) {          //checkbox reset
                        tr.find('td').eq(i).children("input[type='checkbox']").attr("checked", "");
                    } else if (tr.find('td').eq(i).children("input[type='radio']").length > 0) {             //radio button reset
                        tr.find('td').eq(i).children("input[type='radio']:eq(0)").attr("checked", true);
                    } else {
                        tr.find('td').eq(i).text("");         //td값 reset
                    }

                }
            }

        }
    </script>

'jquery' 카테고리의 다른 글

jQuery 속성(Attrbute)으로 셀렉터 하기...  (1) 2010.10.28
ImageNavi  (3) 2010.09.10
table의 row 선택하여 data가져오기  (1) 2010.09.09
select option의 첫번째 및 선택된 값 가져오기  (2) 2010.09.09
jquery 접근방식  (1) 2010.09.09
Posted by 정광원
,

첫번째 값 가져오기
$("#target").val($("#target option:first").val());

원문
http://stackoverflow.com/questions/1414276/how-to-make-first-option-of-select-selected-with-jquery

선택된 값 가져오기
$("#target").val($("#target :selected").val());

'jquery' 카테고리의 다른 글

jQuery 속성(Attrbute)으로 셀렉터 하기...  (1) 2010.10.28
ImageNavi  (3) 2010.09.10
table의 row 선택하여 data가져오기  (1) 2010.09.09
dynamic row  (1) 2010.09.09
jquery 접근방식  (1) 2010.09.09
Posted by 정광원
,

jquery 접근방식

jquery 2010. 9. 9. 14:36

  • id 가져오기
    • $('#id')
  • class 가져오기
    • $('.classid')
  • html type 가져오기
    • $('input) $(':checkbox')

ex)
$("#select_box option:selected").val();

'jquery' 카테고리의 다른 글

jQuery 속성(Attrbute)으로 셀렉터 하기...  (1) 2010.10.28
ImageNavi  (3) 2010.09.10
table의 row 선택하여 data가져오기  (1) 2010.09.09
dynamic row  (1) 2010.09.09
select option의 첫번째 및 선택된 값 가져오기  (2) 2010.09.09
Posted by 정광원
,