고수들에겐 별거 아니지만... 은근하게 많이 쓰이는 방식으로

 

ul ,li 로 목록을 만들어서 마우스 클릭시 색반전하게 하는 소스이며

 

기냥 소스 긁어서 상황에 맞게 가공해서 쓰면 될듯해서 게시해봅니다..

 

저 역시 항상 Ctrl + C / Ctrl + V 로 일을하니까요~~ ^^*

 

 

 

아래는 관련 소스입니다..

 

기냥 아무생각없이 드래그 카피 해서 html파일로 저장해서 확인하면 끝~!!

 

 

 

 

실행화면

 

 마우스 클릭 시 색 반전되면서 선택 되어지고

 

 컨트롤키와 같이 클릭시 다중선택

 

 마우스로 리스트를 드래그하면 선택되어짐

 

 

 

 

 

 

 

 

 

 

 

 

 

 

아래는 html 스크립트
 

<html>
<head>

  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

    
      
<style type="text/css">

 ul.list {
 border:2px solid #cbcccf;
 padding-top:5px;
 padding-left:10px;
 font-size: 12px;
 list-style-type: none;
 width:175px;
 height:150px;
 background-color: rgb(240,245,248);
 }

 ul.list > li{
 padding-top:2px;
 padding-left:2px;
 margin-top:4px;
 margin-right:4px;
 }

 ul.list > .ui-selecting { background: #FECA40; }
 ul.list > .ui-selected { background: #F39814; color: white; }

 #selectable { list-style-type: none; margin: 0; padding: 0; width: 20%; }
 #selectable li { margin: 0px; padding: 2px; font-size:12px; height: 10px; }
 #selectable .ui-selecting { background: #FECA40; }
 #selectable .ui-selected { background: #F39814; color: white; }

</style>

<script type="text/javascript">
<!--
$(document).ready(function() {
	$( ".list" ).selectable();
	$( "#selectable" ).selectable();

});
//-->
</script>
</head>  
<body>
<div >

  <ul class='list'>
       <li>종합</a></li>
       <li>라이프/취미</li>
       <li>문화/엔터</li>
       <li>IT/비즈/학습</li>
       <li>여행</li>
       <li>요리</li>
       <li>MY캐스트</li>
  </ul>
  
  <ol id="selectable">
      <li >Item 1</li>
      <li >Item 2</li>
      <li >Item 3</li>
      <li >Item 4</li>
      <li >Item 5</li>
      <li >Item 6</li>
      <li >Item 7</li>
  </ol>


</div>
</body>
<html>
저작자표시 비영리 변경금지 (새창열림)

'IT TIP > jQuery' 카테고리의 다른 글

기초문법..  (0) 2017.04.05
selector 간략 정리  (0) 2017.04.04


jQuery에서 변수를 선언할 때 $를 붙이는 것과 안 붙이는 것의 차이점은 아래와 같음.

 

 변수 var a 와 var $a 의 차이점.

 

1. var a;
자바스크립트 변수. 흔히 아는 방식으로 스크립트만 사용 가능하다.

 

2. var $a;

jQuery 변수. jQuery에서 사용하는 내장 함수들을 모두 사용할 수 있음.

 

ex) var a 는 a.css('backgroundcolor', 'blue') 라는 메소드가 안 먹음.
.css 메소드는 jQeury에서만 사용하는 것이므로.
var $a 는 jQuery 변수이므로 모든 스크립트 사용이 가능함.
.css(), .hide(), .show() 등등


//$('#page').attr("style","display : none");
//$('#page').attr("style","display : show");
//$("#page").hide(); $("#page").show();

disable, enable

 

<script>
$("button:gt(1)").attr("disabled","disabled");
</script>


# -> ID
. -> class


# [jQuery] radio 값 가져오기, 설정하기

1. radio 버튼 에서 체크된 값 가져오기.
var mailTp  = $('radio:[name="mailTp"]:checked').val();


2. radio 버튼 값 체크하기
$('input:radio[name=mailTp]:input[value='+mailTp+']').attr("checked", true);


------------------------------------------------------------------
check
$("input[name=cUse]")[0].checked
$("input[name=cUse]").attr("checked", (chk== '1' ? 'checked' : ''));

책크여부확인
alert($('#id').is(':checked'));

책크 갯수 구하기
$("input[name=chk]:checkbox:checked").length

응용: 특정 갯수 이상일때 체크 해제
        $(".check_premier").click(function(){
            if($("input[name=chk_pr]:checkbox:checked").length > 3){
                    alert('최대 3개까지 선택가능합니다.');
                    $(this).attr("checked", '');
            }
        });


    $(".answer2").click(function(){
        if($(".answer2:checkbox:checked").length > 2){
            alert('최대 2개까지 선택가능합니다.');
            $(this).attr("checked", '');
        }
    });

책크박스수만큼 특정 함수 실행
$("input[name=chk]").each(
   function(){
      //실행
   }
}

//상기 응용으로 특정 책크박스가 책크일경우 실행
$("input[name=chk]").each(
   function(){
      if(this.checked){
        //책크되었음
      }else{
        //실행
      }
   }
}

//실응용예제
//jAlert 및 jConfirm 사용
//책크된 것이 있으면 실행하고 아니면 경고 메시지 띄우기
 $("#delfavor").click(function(){
        if($("input[name=chk_delList]:checkbox:checked").length == 0){
            jAlert('하나 이상 선택해 주세요', '경고메시지');
        }else{
            jConfirm('삭제된 데이타는 복구되지 않습니다.n삭제하시겠습니까?', '삭제확인', function(r) {
                if(r==true) {
                    $.post("/myshop/wishlist/wishlist/", {tid:tid,ajax:"true"}, function(data){
                    },"json");//
                }
            });
        }
    });   

체크 해제
$(this).attr("checked", false);

// 전체선택/해제


$("#check_all").click(function(){
            $('input[class="sel_check"]').attr("checked", ( $(this).is(':checked') ? 'checked' : false));                                                    
        });

//아래것보다 상위것을 추천


    //보낸 메일함 전체 선택
    //$("#select_all_sendlist").live('click', function(){    //이후 불러온 폼사용시
        $("#select_all_sendlist").click(function(){
            $('input[id="chk_sendList"]').attr("checked", ( $(this).is(':checked') ? 'checked' : ''));                                                    
    });   


<input type="checkbox" name="" id="select_all_sendlist" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />

 

//check box만 serialize하기
var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();
var idxs = $("input[name='comment_select[]']:checked").map(function(){return this.value}).get();

 

저작자표시 비영리 변경금지 (새창열림)

'IT TIP > jQuery' 카테고리의 다른 글

ul.li.selectable 소스  (0) 2017.04.11
selector 간략 정리  (0) 2017.04.04


<CSS 자주 이용하는 셀렉터>

$("태그명")  : 태그 셀렉터 - 특정 태그

$("#ID 명") : ID 셀렉터 - 특정 ID를 속성으로 갖는 것

$(".클래스명") : 클래스 셀렉터 - 특정 클래스를 속성으로 갖는 태그

$("태그1 태그2") : 자손셀렉터 - 특정 태그의 안쪽에 있는 태그

$("*") : 유니버셜 셀렉터 - 전체 태그

$("셀렉터1, 셀렉터2") : 그룹 셀렉터 - 복수의 셀렉터

 

<CSS2 자주 이용하는 셀렉터> 

$("부모태그명 > 자식태그명") : 자식 셀렉터 - 특정 태그의 바로 밑에 자식 태그

$("태그1+태그2") : 인접 셀렉터 - 특정 태그의 다음 태그

$("태그:first-child") : first-child 유사 클래스 - 동일 태그 안의 첫 태그

 

<CSS3 자주 이용하는 셀렉터> 

$("태그1~태그2") : 간접 셀렉터 - 특정 태그의 뒤에 나타나는 태그

$("태그1:not(태그2)") : 부정유사 클래스 - 특정 태그 안에서 태그2를 제외한 태그

$("태그:empty") : empty 클래스 - 자식태그 혹은 문자열을 포함하지 않은 태그

$("태그:nth-child(번호)")  : nth-child 유사 클래스 - 특정태그 안에서 지정한 번호의 태그

$("태그:last-child") : last-child 유사 클래스 - 동일 태그 안의 가장 마지막 태그

$("태그:only-child") : only-child 유사 클래스 - 특정 태그가 하나만 포함된 태그

 

<CSS의 속성 셀렉터>  

$("[속성명]") : 특정 속성을 가진 태그

$("[속성명='값']") : 특정 속성이 지정한 값을 가진 태그

$("[태그명[속성명!='값']") : 특정 속성이 지정한 값을 갖지 않은 태그

$("[속성명^='값']") : 특정 속성이 지정한 값으로 시작되는 태그

$("[속성명$='값']") : 특정 속성이 지정한 값으로 끝나는 태그

$("[속성명*="값']") : 특정 속성이 지정한 값을 포함하고 있는 태그

$("[태그셀렉터1][태그셀렉터2]") : 복수 속성 셀렉터에 해당하는 태그

 

<JQuery 독자 필터>

$("태그:first") : 지정한 태그의 첫 태그

$("태그:last") : 지정한 태그의 마지막 태그

$("태그:even") : 지정한 짝수 번째 태그

$("태그:odd") : 지정한 홀수 번째 태그

$("태그:eq(번호)") : 지정한 번호의 태그(번호는 0부터 시작)

$("태그:qt(번호)") : 지정한 번호보다 뒤의 태그(번호는 0 부터 시작)

$("태그:lt(번호)") : 지정한 번호보다 앞의 태그(번호는 0부터 시작)

$("태그:header") : h1~h6까지의 heading 태그

$("태그:contain(문자열)") : 특정 문자열을 포함하고 있는 태그

$("태그:has(태그2)") : 특정 태그가 포함하고 있는 태그

$("태그:parent") : 자식태그 혹은 문자열을 포함하고 있는 태그


저작자표시 비영리 변경금지 (새창열림)

'IT TIP > jQuery' 카테고리의 다른 글

ul.li.selectable 소스  (0) 2017.04.11
기초문법..  (0) 2017.04.05

+ Recent posts

티스토리툴바