'Windows/jquery'에 해당되는 글 22건
- 2014.04.11 selectbox 처음으로 지정
- 2012.02.06 테이블 롤링 4
- 2011.04.01 스크롤 페이징
- 2011.02.11 checkbox 전체 선택
- 2010.11.01 자식창에서 부모창으로 값 전달하기
- 2010.10.11 selectbox
- 2010.07.22 jquery attr() 사용 (이미지변경)
- 2010.06.01 이미지 슬라이드
- 2010.04.12 jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기.
- 2010.04.12 selectbox
jquery.banner.js
테이블롤링.html샘플보기
http://www.webresourcesdepot.com/dnspinger/
구조설명:
컨텐츠 페이지 구조
<div class="wrdLatest" id=1>content</div>
<div class="wrdLatest" id=2>content</div>
<div id="lastPostsLoader"></div>
로딩중 이미지 보여주는 부분과 실제 데이터 가져오는 부분
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
스크롤 감지하는 부분
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
http://www.webresourcesdepot.com/dnspinger/
구조설명:
컨텐츠 페이지 구조
<div class="wrdLatest" id=1>content</div>
<div class="wrdLatest" id=2>content</div>
<div id="lastPostsLoader"></div>
로딩중 이미지 보여주는 부분과 실제 데이터 가져오는 부분
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
스크롤 감지하는 부분
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language=JavaScript>
//전체 선택/해제
function selectAll(){
var c = $('#checkAll').attr('checked');
$('input[name=chkid]').attr('checked',c);
}
//선택된 값 보기
function getSelectVal(){
var idlist = [];
var itemstr ="";
$('input[name=chkid]:checked').each(function(){idlist.push(this.value)});
$.each(idlist,function(index, item){
itemstr += item + ',';
});
$('#resultID').text(itemstr);
}
</script>
</head>
<body>
<input type="checkbox" id="checkAll" class="chk" onclick="selectAll()" /> 전체선택<P/>
<input type="checkbox" name="chkid" value="1" class="chk" />1<P/>
<input type="checkbox" name="chkid" value="2" class="chk" />2<P/>
<input type="checkbox" name="chkid" value="3" class="chk" />3<P/>
<input type="checkbox" name="chkid" value="4" class="chk" />4<P/>
<input type="checkbox" name="chkid" value="5" class="chk" />5<P/>
<input type="checkbox" name="chkid" value="6" class="chk" />6<P/>
<input type="checkbox" name="chkid" value="7" class="chk" />7<P/>
<input type="button" id="showval" onclick="getSelectVal()" value="선택값 보기" />
당신이 선택하신 값은<span id="resultID"></span> 입니다.
</body>
</html>
[출처] [jQuery]checkbox 전체 선택|작성자 빽사장님
$(window.opener.document).find('#ctl00_ContentPlaceHolder1_Text1').val(ctbox);
window.opener.document.forms[0].ctl00$ContentPlaceHolder1$Text1.value = ctbox;
window.opener.document.getElementById('ctl00_ContentPlaceHolder1_Text1').value = ctbox;
window.opener.document.forms[0].ctl00$ContentPlaceHolder1$Text1.value = ctbox;
window.opener.document.getElementById('ctl00_ContentPlaceHolder1_Text1').value = ctbox;
jQuery로 선택된 값 읽기
$("#select_box option:selected").val();
$("select[name=name]").val();
jQuery로 선택된 내용 읽기
$("#select_box option:selected").text();
선택된 위치
var index = $("#test option").index($("#test option:selected"));
-------------------------------------------------------------------
$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");
// Add options to the start of a select
$("#myselect").prepend("<option value='0'>Before Apples</option>");
// Replace all the options with new options
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");
// Replace items at a certain index
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");
// Set the element at index 2 to be selected
$("#myselect option:eq(2)").attr("selected", "selected");
// Set the selected element by text
$("#myselect").val("Some oranges").attr("selected", "selected");
// Set the selected element by value
$("#myselect").val("2");
// Remove an item at a particular index
$("#myselect option:eq(0)").remove();
// Remove first item
$("#myselect option:first").remove();
// Remove last item
$("#myselect option:last").remove();
// Get the text of the selected item
alert($("#myselect option:selected").text());
// Get the value of the selected item
alert($("#myselect option:selected").val());
// Get the index of the selected item
alert($("#myselect option").index($("#myselect option:selected")));
// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());
// Insert an item in after a particular position
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");
// Insert an item in before a particular position
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");
// Getting values when item is selected
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});
<img id="imImg" src="1.gif">
$("#imImg").attr("src","2.gif");
$("#imImg").bind("click",function(){
$("#imImg").attr("src","3.gif");
});
$("img".bind("click",function(){
var src=($(this).attr("src") == "3.gif")
? "1_on.gif"
: "1_on.gif";
$(this).attr("src",src);
});
<script>
var leftCt = 0;
$(function(){
$("#album").attr("top", "0");
imgStart("R");
});
function imgStart(tp){
clearInterval($("#imgList").attr("timer"));
if(tp == "R"){ // 오른쪽 이동
imgRight();
$("#imgList").attr("timer", setInterval("imgRight()", 3000000000000000000000000)); // 멈춰있는 시간
}else{ // 왼쪽이동
if(leftCt == 0){
var leng = $("#imgList div").size();
$("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
$("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
$("#imgList>div").eq(leng).remove();
leftCt = 1;
}
imgLeft();
$("#imgList").attr("timer", setInterval("imgLeft()", 3000000000000000000000000));
}
}
function imgRight(){
$("#imgList").animate({
left : parseInt($("#imgList div").eq(0).width() * -1)
},300,function(){
$("#imgList").css("left", "0px");
$("#imgList>div").eq(0).clone().appendTo($("#imgList"));
$("#imgList>div").eq(0).remove();
});
}
function imgLeft(){
var leng = $("#imgList div").size();
$("#imgList").animate({
left : 0
},300,function(){
$("#imgList").css("left", "0px");
$("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
$("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
$("#imgList>div").eq(leng).remove();
});
}
</script>
<style>
/*
이미지 사이즈 맞춰서 수정해주세요... (#viewArea)
*/
#viewArea {position:relative; width:565px; height:78px;overflow:hidden;}
#imgList {position:absolute; width:2000px; left:0px; top:0px;}
#imgList div {float:left; margin:0px; padding:0px;}
</style>
<table>
<tbody><tr>
<td>
<div>
<span onclick="imgStart('L')"><</span>
</div>
</td>
<td>
<div id="viewArea">
<div id="imgList">
<div>
<a href="http://http://www.naver.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_chardonnay_01_s.gif"></a> </div>
<div>
<a href="http://www.daum.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_cabernet-sauvig_02_s.gif"></a> </div>
<div>
<a href="http://www.paran.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Park-Merlot_03_s.gif"></a> </div>
<div>
<a href="http://www.google.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Park-Merlot_03_s.gif"></a> </div>
<div>
<a href="http://www.wow.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Peju-Merlot_05_s.gif"></a> </div>
<div>
<a href="http://www.haha.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_sauvignon-reser_08_s.gif"></a> </div>
<div>
<a href="http://www.naver.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Peju-Merlot_05_s.gif"></a> </div>
</div>
</div>
</td>
<td><span onclick="imgStart('R')">></span> </td>
</tr>
</tbody></table>
[출처] jQuery 이미지 슬라이드 |작성자 바다
jQuery에서 제공해주는 정의 필터 셀렉터를 사용해서 radio버튼의 value값을 가져오는 방식은 아래와 같다.
보 기엔 좀 길어보이지만 간단하게 설명된다.
최초 input 폼 엘리먼트를 선택후 radio 버튼을 가져온다음 name 속성의 값이 sample인 것중에서 선택된 값의 value를 가져온다.
위의 경우 value 값은 "Y"가 출력된다.
아무것도 선택하지 않은상태에선 value값은 'undefined'가 반환된다.
마찬가지로 radio대신 checkbox등의 체크값을 가져오는 방식도 위와 동일하다 하겠다.
$(":input:radio[name=sample]:checked").val()
<input type="radio" name ="sample" value="Y" checked>
<input type="radio" name ="sample" value="N">보 기엔 좀 길어보이지만 간단하게 설명된다.
최초 input 폼 엘리먼트를 선택후 radio 버튼을 가져온다음 name 속성의 값이 sample인 것중에서 선택된 값의 value를 가져온다.
위의 경우 value 값은 "Y"가 출력된다.
아무것도 선택하지 않은상태에선 value값은 'undefined'가 반환된다.
마찬가지로 radio대신 checkbox등의 체크값을 가져오는 방식도 위와 동일하다 하겠다.
jQuery로 선택된 값 읽기
$("#selectbox option:selected").val();
$("select[name=name]").val();
jQuery로 선택된 내용 읽기
$("#select_box option:selected").text();
선택된 위치
var index = $("#test option").index($("#test option:selected"));
$("#selectbox option:selected").val();
$("select[name=name]").val();
jQuery로 선택된 내용 읽기
$("#select_box option:selected").text();
선택된 위치
var index = $("#test option").index($("#test option:selected"));
