제목 : HTML5 Web Storage Objects - localstorage 사용법




소스 :



1. 브라우저에서 web storage 를 사용할 수 있는가 체크방법

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}



2.사용법

The localStorage Object

// Store
localStorage.setItem("lastname""Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");



// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;


if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";


The sessionStorage Object


if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";



내용 :


  • window.localStorage - stores data with no expiration date
  • window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)






예제 소스 파일 :


 출처 :  https://www.w3schools.com/html/html5_webstorage.asp




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 : 매번 까먹는 javascript - checkbox 멀티 선택 value 처리




소스 :


var f = document.Frm;

var items = "";


if (!f.skintype) return false;


if (typeof(f.skintype.length) == "undefined") {

alert('피부타입을 선택해주세요.');

return false;

}

else {

for (var i=0; i<f.skintype.length; i++) {

if (f.skintype[i].checked) {

items += ((items) ? "," : "")+f.skintype[i].value;

}

}


f.skintypes.value = items;

}



내용 :


checkbox : name=skintype 이 여러개 있을 경우, 선택된 값을 뒤 ',' 빼고 값 넘기기





예제 소스 파일 :


 출처 :  




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 : easyTree.js 사용하여 트리메뉴 구조 중, 이동 처리시 샘플 html




소스 :


    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/easyTree.css">

    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/jquery-ui.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script src="js/easyTree.js"></script>


    <script type="text/javascript">

        $(document).ready(function() {


$('li').draggable({

containment: 'parent',

opacity:"0.3"

}); // 끄는 동안만 불투명도 주기


            $('li').droppable({

greedy:true,

tolerance: 'pointer',

                drop: fnDrop

            });



function fnDrop(event, ui) {

var draggableId = ui.draggable.attr("data-id");

var droppableId = $(this).attr("data-id");

                    console.log("draggableId : "+draggableId+", droppableId : "+droppableId);


if (draggableId != "" && droppableId != "")

{

var r = confirm(draggableId+"를 "+droppableId+"로 이동하시겠습니까?");

if (r == true)

{

alert("이동 처리")

}

}

                }


        });

    </script>

</head>

<body>

<div class="col-md-3">

    <h3 class="text-success">메뉴</h3>

    <div class="easy-tree">

        <ul>

            <li><span>Example 1</span>

                <ul>

                    <li data-id="2" data-pid="1"><span>Example 2</span></li>

                    <li data-id="3" data-pid="1"><span>Example 3</span></li>

                    <li data-id="4" data-pid="1"><span>Example 4</span>

                        <ul>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                        </ul>

                    </li>

                    <li data-id="5" data-pid="1"><span>Example 5</span></li>

                    <li data-id="6" data-pid="1"><span>Example 6</span></li>

                    <li data-id="7" data-pid="1"><span>Example 7</span>

                        <ul>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </div>

</div>

<script>

    (function ($) {

        function init() {

            $('.easy-tree').EasyTree();

        }


        window.onload = init();

    })(jQuery)

</script>




내용 :




ul > li 로 구성되어있는 트리메뉴 구조에서 drag & drop 으로 메뉴 이동하는 html 기본 소스


easyTree 를 사용하고,


li의 크기가 child 갯수가 많아질 수록 li 의 범위가 넓어짐.


단순 droppable 만 사용하면, li 하위 child 의 li 또는 상위 parent 의 li 의 것을 모두 event 처리가 됨.


jquery-ui 중 droppable 을 사용하여, 


greedy:true, tolerance: 'pointer' 를 추가하면 해결됨





예제 소스 파일 : 

easy-tree-master.zip



 출처 :  https://github.com/zgs225/easy-tree




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 : HTML TAG 삭제 자바스크립트




소스 :


<script type="text/javascript">

<!--

function stripHTML(html)

{

   try {

       var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);

       doc.documentElement.innerHTML = html;

       return doc.documentElement.textContent||doc.documentElement.innerText;

   } catch(e) {

       return "";

   }

}

//-->

</script>





내용 :



f.userURL.value = stripHTML(f.userURL.value);


이런 식으로 이용 가능함.






예제 소스 파일 :


 출처 :  http://stackoverflow.com/questions/822452/strip-html-from-text-javascript




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 : 다른 form 의 name, value 를 가져오는 방법




소스 :


function fnAllFrmValue(){


var myForm = document.getElementById("Frm");

var myForm2 = document.getElementById("payForm");




for (var i = 0; i < myForm.elements.length; i++) {

console.log(myForm.elements[i].name + '=' + myForm.elements[i].value);


var in1 = document.createElement("input");

in1.setAttribute('type','hidden');

in1.setAttribute('name', myForm.elements[i].name);

in1.setAttribute('value', myForm.elements[i].value);

myForm2.appendChild(in1)


}

}






내용 :





예제 소스 파일 :


 출처 :  나





저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩




제목 : html5 브라우저 알림창 띄우기


크롬, 사파리, 파이어폭스 최신 버전에서만 활용되는것으로 보임
IE 10 이하는 안됨. 

소스 :




내용 :





DEMO  : http://ttsvetko.github.io/HTML5-Desktop-Notifications/


 출처 :  https://github.com/ttsvetko/HTML5-Desktop-Notifications




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  SNS 내보내기. 공유. 페이스북, 트위터, 밴드, 카카오스토리 SNS 에 글 공유 / 내보내기


소스 :

 


<script type="text/javascript">
<!--
 //SNS 등 sharer 처리

 function unescapeXml(str){
  str = str.replaceAll("&amp;", "&");
  str = str.replaceAll("&lt;", "<");
  str = str.replaceAll("&gt;", ">");
  str = str.replaceAll("&apos;", "'");
  str = str.replaceAll("&quot;", "\"");
  str = str.replaceAll("&#039;", "'");
  return str;
 }

 function twitter_share(){
  var text = "<%=strShareTitle%>";
  var url = "<%=strShareURI%>";
  var snsUrl = "http://twitter.com/home?status="+encodeURIComponent(text)+" "+ url;
  var popup = window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
  popup.focus();
 }

 function facebook_share(){
  var text = "<%=strShareTitle%>";
  var url = "<%=strShareURI%>";
  var image = "<%=strShareImg%>"
  var summary = "<%=strShareSubject%>"
  var snsUrl = "http://www.facebook.com/sharer.php?u="+encodeURIComponent(url)+"&t="+encodeURIComponent(text)+"&i="+encodeURIComponent(image);

  var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
  popup.focus();
 }

 function kakaostory_share(){

  var title = "<%=strShareTitle%>";
        title = title.substring(0,100);
        title = unescapeXml(title);
        title = title.replace(/\&(amp;)?/ig, ""); // 카스인경우 &amp; 등록시 글자 짤림

  var url = "<%=strShareURI%>";
  var snsUrl = "https://story.kakao.com/share?url="+encodeURIComponent(url);

  var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
  popup.focus();
 }

 function band_share(){

  var title = "<%=strShareTitle%>";
  var url = "<%=strShareURI%>";
  var snsUrl = "http://www.band.us/plugin/share?body="+encodeURIComponent(title)+"&route="+encodeURIComponent(url);

  var popup= window.open(snsUrl, "_snsPopupWindow", "width=500, height=500");
  popup.focus();
 }


//-->
</script>


내용 :



예제 소스 파일 :

sns_sharer.html

 


 출처 :  


저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  javascript 날짜 추가 기능


소스 :

 

<script type="text/javascript">
<!--
function addDays(sdate, edate, type, days) {
    var d = new Date();
 tt_year = d.getFullYear();
 tt_month = d.getMonth()+1;
 tt_day = d.getDate();

 if (tt_month<10) tt_month = '0'+tt_month;
 if (tt_day<10) tt_day = '0'+tt_day;

 today = tt_year + '-' + tt_month + '-' + tt_day;

 var newdate = new Date(today);

 newdate.setDate(newdate.getDate() + days);

 nn_year = newdate.getFullYear();
 nn_month = newdate.getMonth()+1;
 nn_day = newdate.getDate();

 if (nn_month<10) nn_month = '0'+nn_month;
 if (nn_day<10) nn_day = '0'+nn_day;

 nn_date = nn_year + '-' + nn_month + '-' + nn_day;


 if (type=='T')
 {
  $('#'+sdate).val(today);
  $('#'+edate).val(today);
 } else {
  $('#'+sdate).val(today);
  $('#'+edate).val(nn_date);
 }
}
//-->
</script>

 

<input type="text" id="TimeStartDay" name="TimeStartDay">

~

<input type="text" id="TimeEndDay" name="TimeEndDay">
 

<a href="#" onClick="addDays('TimeStartDay', 'TimeEndDay', 'T', 0)">오늘</a> 

<a href="#" onClick="addDays('TimeStartDay', 'TimeEndDay', 'D', 3)">3일간</a>

<a href="#" onClick="addDays('TimeStartDay', 'TimeEndDay', 'D', 30)">30일간</a>


내용 :



예제 소스 파일 :


 출처 :  


저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  javascript - confirm 활용


  if (confirm('해당 메뉴를 삭제하시겠습니까?') == true){
   document.form.submit();
  }


내용 : 심플하지만 매번 까먹는 confirm 사용법



출처 : 도움 되셨으면 광고 클릭 좀~~ ^^;;


저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩