jquery 1.5.1에서 쓰던 Tabs가 2.1.1에서 작동을 안함.

          function initializeTabs() {
            var tabOject = $("#tabs");
            tabOject.tabs({
                select: function (event, ui) {
                    if (ui.index == 0) { tab1(); return; }
                    if (ui.index == 1) { tab2(); return; }
                }
            });
        }

그전 jquery 1.5.1를 계속 써야 하는가를 고민하다가 바뀐게 있을거야!

찾아보다보니 activate라는 놈이 생겼네. select라는게 없어진...

참고 : https://api.jqueryui.com/tabs/

그래서 바꿔보았음.

     function initializeTabs() {
        var tabOject = $("#tabs");
        $("#tabs").tabs({
            activate: function (event, ui) {
                if (ui.newTab.index() == 0) { tab1(); return; }
                if (ui.newTab.index() == 1) { tab2(); return; }
            }
        });
        tabOject.hide();
    }

그리고 ui.index가 작동하지 않음.

ui.newTab.index()로 하여 작동 함.

이상!

블로그 이미지

레몬도리 LemonDory

개발자의 이야기

출처 : http://r5xsv3.tistory.com


// JavaScript Document
// 만든이 : 다섯방울 (http://r5xsv3.tistory.com)
// Data : 2014.03.09
// Version : 0.1
// 참조 http://www.openspc2.org/userAgent/
// OS 버전 보기
var uanaVigatorOs = navigator.userAgent;
var AgentUserOs= uanaVigatorOs.replace(/ /g,'');
var Ostxt="";
var OSName="";
var OsVers="";

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors
// "Unknown OS" indicates failure to detect the OS
new function() {
var OsNo = navigator.userAgent.toLowerCase();
    jQuery.os = {
        Linux: /linux/.test(OsNo),
        Unix: /x11/.test(OsNo),
        Mac: /mac/.test(OsNo),
        Windows: /win/.test(OsNo)
    }
}

function OSInfoDev(){

if($.os.Windows) {
if(AgentUserOs.indexOf("WindowsCE") != -1) OSName="Windows CE";
else if(AgentUserOs.indexOf("Windows95") != -1) OSName="Windows 95";
else if(AgentUserOs.indexOf("Windows98") != -1) {
if (AgentUserOs.indexOf("Win9x4.90") != -1) OSName="Windows Millennium Edition (Windows Me)"
else OSName="Windows 98";
}
else if(AgentUserOs.indexOf("WindowsNT4.0") != -1) OSName="Microsoft Windows NT 4.0";
else if(AgentUserOs.indexOf("WindowsNT5.0") != -1) OSName="Windows 2000";
else if(AgentUserOs.indexOf("WindowsNT5.01") != -1) OSName="Windows 2000, Service Pack 1 (SP1)";
else if(AgentUserOs.indexOf("WindowsNT5.1") != -1) OSName="Windows XP";
else if(AgentUserOs.indexOf("WindowsNT5.2") != -1) OSName="Windows 2003";
else if(AgentUserOs.indexOf("WindowsNT6.0") != -1) OSName="Windows Vista/Server 2008";
else if(AgentUserOs.indexOf("WindowsNT6.1") != -1) OSName="Windows 7";
else if(AgentUserOs.indexOf("WindowsNT6.2") != -1) OSName="Windows 8";
else if(AgentUserOs.indexOf("WindowsNT6.3") != -1) OSName="Windows 8.1";
else if(AgentUserOs.indexOf("WindowsPhone8.0") != -1) OSName="Windows Phone 8.0";
else if(AgentUserOs.indexOf("WindowsPhoneOS7.5") != -1) OSName="Windows Phone OS 7.5";
else if(AgentUserOs.indexOf("Xbox") != -1) OSName="Xbox 360";
else if(AgentUserOs.indexOf("XboxOne") != -1) OSName="Xbox One";
else if(AgentUserOs.indexOf("Win16") != -1) OSName="Windows 3.x";
else if(AgentUserOs.indexOf("ARM") != -1) OSName="Windows RT";
else OSName="Windows (Unknown)";

if(AgentUserOs.indexOf("WOW64") != -1) OsVers=" 64-bit(s/w 32-bit)";
else if(AgentUserOs.indexOf("Win64;x64;") != -1) OsVers=" 64-bit(s/w 64-bit)";
else if(AgentUserOs.indexOf("Win16") != -1) OsVers=" 16-bit";
else OsVers=" 32-bit";

} else if ($.os.Linux) {
if(AgentUserOs.indexOf("Android") != -1) { OSName = getAndroidDevName(); }
else if(AgentUserOs.indexOf("BlackBerry9000") != -1) OSName="BlackBerry9000";
else if(AgentUserOs.indexOf("BlackBerry9300") != -1) OSName="BlackBerry9300";
else if(AgentUserOs.indexOf("BlackBerry9700") != -1) OSName="BlackBerry9700";
else if(AgentUserOs.indexOf("BlackBerry9780") != -1) OSName="BlackBerry9780";
else if(AgentUserOs.indexOf("BlackBerry9900") != -1) OSName="BlackBerry9900";
else if(AgentUserOs.indexOf("BlackBerry;Opera Mini") != -1) OSName="Opera/9.80";
else if(AgentUserOs.indexOf("Symbian/3") != -1) OSName="Symbian OS3";
else if(AgentUserOs.indexOf("SymbianOS/6") != -1) OSName="Symbian OS6";
else if(AgentUserOs.indexOf("SymbianOS/9") != -1) OSName="Symbian OS9";
else if(AgentUserOs.indexOf("Ubuntu") != -1) OSName="Ubuntu";
else if(AgentUserOs.indexOf("PDA") != -1) OSName="PDA";
else if(AgentUserOs.indexOf("NintendoWii") != -1) OSName="Nintendo Wii";
else if(AgentUserOs.indexOf("PSP") != -1) OSName="PlayStation Portable";
else if(AgentUserOs.indexOf("PS2;") != -1) OSName="PlayStation 2";
else if(AgentUserOs.indexOf("PLAYSTATION3") != -1) OSName="PlayStation 3";
else OSName="Linux (Unknown)";

if(AgentUserOs.indexOf("x86_64") != -1) OsVers=" 64-bit";
else if(AgentUserOs.indexOf("i386") != -1) OsVers=" 32-bit";
else if(AgentUserOs.indexOf("IA-32") != -1) OsVers=" 32-bit";
else OsVers="";

} else if ($.os.Unix) {
OSName="UNIX";
} else if ($.os.Mac) {
if(AgentUserOs.indexOf("iPhoneOS3") != -1) OSName="iPhone OS 3";
else if(AgentUserOs.indexOf("iPhoneOS4") != -1) OSName="iPhone OS 4";
else if(AgentUserOs.indexOf("iPhoneOS5") != -1) OSName="iPhone OS 5";
else if(AgentUserOs.indexOf("iPhoneOS6") != -1) OSName="iPhone OS 6";
else if(AgentUserOs.indexOf("iPad") != -1) OSName="iPad";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.1")) != -1) OSName="Mac OS X Puma";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.2")) != -1) OSName="Mac OS X Jaguar";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.3")) != -1) OSName="Mac OS X Panther";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.4")) != -1) OSName="Mac OS X Tiger";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.5")) != -1) OSName="Mac OS X Leopard";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.6")) != -1) OSName="Mac OS X Snow Leopard";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.7")) != -1) OSName="Mac OS X Lion";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.8")) != -1) OSName="Mac OS X Mountain Lion";
else if((AgentUserOs.indexOf("MacOSX10_9")||AgentUserOs.indexOf("MacOSX10.9")) != -1) OSName="Mac OS X Mavericks";
else OSName="MacOS (Unknown)";
} else {
OSName="Unknown OS";
}
var OSDev = OSName + OsVers;
return OSDev;
}

// Android의 단말 이름을 반환
function getAndroidDevName() {
var uaAdata = navigator.userAgent;
var regex = /Android (.*);.*;\s*(.*)\sBuild/;
var match = regex.exec(uaAdata);
if(match) {
var ver = match[1];
var dev_name = match[2];
return "Android " + ver + " " + dev_name;
}
return "Android OS";
}

블로그 이미지

레몬도리 LemonDory

개발자의 이야기

출처 : http://hayageek.com/jquery-ajax-post/

1.JQuery Ajax POST example using $.ajax method

Sample POST request look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var  formData = "name=ravi&age=31"//Name value Pair
    or
var formData = {name:"ravi",age:"31"}; //Array
 
$.ajax({
    url : "AJAX_POST_URL",
    type: "POST",
    data : formData,
    success: function(data, textStatus, jqXHR)
    {
        //data - response from server
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
 
    }
});

To send, POST request you need to set type = “POST” in AJAX settings.
formData: can be an array or name value pairs.
success: callback function is called when the AJAX POST is successful
error: callback function is called when the AJAX POST is failed

Note: To handle JSON data, set dataType=”json

jQuery AJAX POST Demo

 

2.jQuery Ajax POST example using $.post method

$.post() method is shortcut of .ajax() method, so using $.post() method we can send AJAX POST requests.

jQuery.post() Syntax:

1
var jqXHR = jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] );

Valid AJAX POST Requests are:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//request with URL,data,success callback
$.post("AJAX_POST_URL",
    {name:"ravi",age:"31"},
    function(data, textStatus, jqXHR)
    {
          //data: Received from server
    });
 
//request with URL,success callback
$.post("AJAX_POST_URL",function(data)
{
    //data: Received from server
});
//request with only URL
$.post("AJAX_POST_URL");

 

$.post method is not having any callback method to handle errors. But we can use jqXHR fail() callback method to handle the error.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.post("AJAX_POST_URL",
    {username:"ravi",pass:"124",submit:true},
    function(data, textStatus, jqXHR)
    {
        //data - response from server
    }).fail(function(jqXHR, textStatus, errorThrown)
    {
        alert(textStatus);
    });
 
//With jqXHR callbacks .done() and .fail()
$.post("AJAX_POST_URL",
    {username:"ravi",pass:"124",submit:true}).done(function(data, textStatus, jqXHR)
        {
 
        }).fail(function(jqXHR, textStatus, errorThrown)
    {
        alert(textStatus);
    });

jQuery AJAX POST Demo

3.AJAX Form POST Example

Below is the sample Form used for POST.

1
2
3
4
5
6
7
<form name="myform" id="myform" action="ajax-post.php">
User: <input type="text" value="Ravishanker" name="user"  /> <br/>
Password: <input type="password" name="password" value="abcdefgh" />
<input type="hidden" name="xyz" value="123" />
<input type="hidden" name="submit" value="true" />
 
</form>

Using jQuery.serialize() or jQuery.serializeArray() API, Form data can be serialized. Below example shows how to POST Form data asynchronously.

1
2
3
4
5
6
7
8
9
10
11
12
//var formData = $("#myform").serialize();  //or
var formData = $("#myform").serializeArray();
var URL = $("#myform").attr("action");
$.post(URL,
    formData,
    function(data, textStatus, jqXHR)
    {
       //data: Data from server.   
    }).fail(function(jqXHR, textStatus, errorThrown)
    {
 
    });
For multipart/form-data Form post, check this: http://hayageek.com/jquery-ajax-form-submit
jQuery AJAX POST Demo


블로그 이미지

레몬도리 LemonDory

개발자의 이야기

출처 : http://blog.naver.com/roadpie/70160796618

위 블로그를 참고하여 기본 기능은 두고 쿠키 삭제 버튼만 추가하였습니다.

<!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" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div.popup001 { background:#fff repeat left top;}
h1.popup { padding:15px 0 0 19px; height:64px; float:none; }
div.popup002 { padding:0px 0px; line-height:130%; }
p.popup-close {height:20px;border-top:1px #c6c6c6 solid; text-align:right;background:#ccc repeat left top;}
p.popup-close input, p.popup-close img { vertical-align:middle;}
p.popup-close label{padding:0 0 0 4px;}
p.popup-close a{color:#000;text-decoration:none;line-height:20px;padding:0 10px 0 0;}
</style>

<script language="JavaScript">
    function setCookies1( name, value, expires ) {
document.cookie = name + "=" + escape (value) +
    "; path=/; expires=" + expires.toGMTString();
}

function closeWin(objname,pop) {
 var expdate = new Date();
  expdate.setTime(expdate.getTime() + 24*60*60*1000 ); // *365 365일
 setCookies1( pop, "done" , expdate );
document.getElementById(objname).style.display = "none";
}

function close(objname) {
  document.getElementById(objname).style.display = "none";
}

function getCookies1(Name) {
  var search = Name + "=";
    offset = document.cookie.indexOf(search);
  if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면  
    if (offset != -1) { // 쿠키가 존재하면
      offset += search.length;
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // 쿠키 값의 마지막 위치 인덱스 번호 설정
      if (end == -1)
        end = document.cookie.length;
      return unescape(document.cookie.substring(offset, end));
    }
  }
}
function win_link(url_link)
{
location.href=url_link;
}

function deleteCookies() {
     var count = 0;
     if (document.cookie != "") {
          var cookies = document.cookie.split("; ");
          count = cookies.length;
          var expireDate = new Date();
          expireDate.setDate(expireDate.getDate() -1);
          for (var i=0; i<count; i++) {
               var cookieName = cookies[i].split("=")[0];
               document.cookie = cookieName + "=; path=/; expires=" + expireDate.toGMTString();
          }
     }
     alert('Cookie delete Complete.');
}

</script>
</head>
<body>
<span style="cursor:pointer;" onclick="deleteCookies();"><font color=red>▷Delete Cookie◁</font> </span><br>

<form name="notice0">
<div class="popup001" id="popup0" style="Z-INDEX:9999;margin-left:80px; TOP:100px; width:394px;POSITION:absolute;display:none;height:279px; ">

    <div class="popup002">
        <img src="/images/img/pop_20130206.jpg" alt="" />
        popup show
    </div>
    <p class="popup-close">
        <input type="checkbox" id="chk1" name="chk" onclick="closeWin('popup0','popup0');" />
        <a href="javascript:void(closeWin('popup0','popup0'));">today not show</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="javascript:void(closeWin('popup0'));">close</a>
    </p>
</div>
</form>

<script language="javascript"  type="text/javascript">
    if (getCookies1("popup0") != "done") { 
        document.getElementById('popup0').style.display = 'block';
    }
//-->
</script>


</body>
</html>


블로그 이미지

레몬도리 LemonDory

개발자의 이야기

우선 브라우저 체크 

useragnet 값 얻어와서 브라우저 문자열 검색.

참고로 indexOf는 파라미터 문자열이 해당 문자열에 포함되어있지않을경우 '-1'을 리턴함.
포함되었을 경우에는 해당 위치(시작점- 0부터표시)

var agt = navigator.userAgent.toLowerCase();
if (agt.indexOf("chrome") != -1) return 'Chrome'; 
if (agt.indexOf("opera") != -1) return 'Opera'; 
if (agt.indexOf("staroffice") != -1) return 'Star Office'; 
if (agt.indexOf("webtv") != -1) return 'WebTV'; 
if (agt.indexOf("beonex") != -1) return 'Beonex'; 
if (agt.indexOf("chimera") != -1) return 'Chimera'; 
if (agt.indexOf("netpositive") != -1) return 'NetPositive'; 
if (agt.indexOf("phoenix") != -1) return 'Phoenix'; 
if (agt.indexOf("firefox") != -1) return 'Firefox'; 
if (agt.indexOf("safari") != -1) return 'Safari'; 
if (agt.indexOf("skipstone") != -1) return 'SkipStone'; 
if (agt.indexOf("msie") != -1) return 'Internet Explorer'; 
if (agt.indexOf("netscape") != -1) return 'Netscape'; 
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla'; 




이번엔 IE 버전체크 

같은 화면인데, ie8에서는 되고, ie9이상 에서는 안되고.. 뭐 이런경우가 생겨버렸다. xp와 win7의 OS 문제일 수도 있을것 같긴 한데, 테스트를 제대로 해볼 수 가 없는 환경이라 일단 IE 버전체크 하는걸로 해결ㅋ.

보통 익스플로러의 useragnt 값은 이런식으로 나오는데,

msie 8.0; windows nt 5.1; trident/4.0;  ......


위의 경우처럼 'msie 8.0' 이라고 버전까지 나와있어서,
저부분만 뽑아내면 된다.

function getInternetExplorerVersion() {    
         var rv = -1; // Return value assumes failure.    
         if (navigator.appName == 'Microsoft Internet Explorer') {        
              var ua = navigator.userAgent;        
              var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");        
              if (re.exec(ua) != null)            
                  rv = parseFloat(RegExp.$1);    
             }    
         return rv; 
    } 


이러면 rv값에 '8' 이 리턴됨.

그런데 간혹.
IE 8 이상에서도 'msie 7.0' 이라고 나오는 경우가 있다. (호환성보기 사용)
그렇게 되면 'msie 7.0' 만 가지고는
이놈이 7,8,9,10 중에 어떤놈인지 확인이 불가능하다.

그런데 이럴때도 7,8,9,10 같에 차이는 있다.

mise 뒤쪽에 trident/4.0; 이 부분으로 식별하면 된다.

8버전 이상의 trident 값은 아래와 같다.
7이하의 버전에서는 trident 값이 없다.

IE 8 = trident/4.0
IE 9 = trident/5.0
IE 10 = trident/6.0 



trident 값 체크 t


var trident = navigator.userAgent.match(/Trident\/(\d)/i);
if(trident != null){
     return 1;
} else{
     return 0;
}




IE 테스트 해보고 싶을때는
morder.IE (http://www.modern.ie/ko ) 여기도 좋음

왜 IE에서 에러나는지 친절하게 알려줌.

출처 : http://changpd.blogspot.kr/2013/04/javascript.html

블로그 이미지

레몬도리 LemonDory

개발자의 이야기

http://www.image-maps.com/

블로그 이미지

레몬도리 LemonDory

개발자의 이야기

한 페이지 안에 여러 개체가 있는데 같은 이름으로 된 개체가 한개의 Form에 있는게 아니라 여러 개의 Form으로 처리할 경우(장바구니에서 각 상품마다 삭제,수정을 하기위해서 폼을 여러 개로 나누어 처리할 경우)에 다음 화면에 넘길때 개체 안에 담긴 값을 확인하려고 할 때

 

자바스크립트로 확인하고자면


function checkok() {
 var imsicnt = 0;

//document.all("개체명t").length
 for(var i=0; i<document.all("pcnt").length;i++)  //개체 갯수
 {
  if(document.all("pcnt")[i].value != ""){  //값이 비어있을 경우
   imsicnt = 1
  }
 }
 if (imsicnt<1) {
  alert("주문수량을 입력해 주세요.") ;
  return false ;
 }
 form.submit() ;
 return false ;

위와 같이 사용하면 된다.

 

응용한다면 뭐 여러가지로 응용이 가능할 것 같다.

 

블로그 이미지

레몬도리 LemonDory

개발자의 이야기


<!--<div id="popup">
   <div id="pop1">
    <div id="popContent">
     <!--원하는 내용을 넣으세요 iframe이나 페이지 소스등등 -->
    </div>
    <div id="popFooter">
     <div class="popChk">
      <input type="checkbox" name="popcheck" />
     </div>
     <div class="popTxt">
      <span>오늘 하루 그만 보기</span>
     </div>
     <div class="popClose">
      <a href="javascript:closeWin();"><span>[닫기]</span></a>
     </div>
    </div>
   </div>
  </div>-->

위에 div를 놓고 아래 스크립트를 놓아야 실행 div를 찾을 수 있습니다.
스크립트를 상단에 두시면 스크립트가 먼저 실행되어서 div들을 못찾습니다.
그럼 오늘 하루 그만 보기가 제대로 작동하지 않습니다.

<script type="text/javascript">

 cookiedata = document.cookie;
 
 if ( cookiedata.indexOf("maindiv=done") < 0 ){
  document.all['pop1'].style.display = "";
 } else {
  document.all['pop1'].style.display = "none";
 }

 function startTime() {
  var time = new Date();
  hours = time.getHours();
  mins = time.getMinutes();
  secs = time.getSeconds();
  closeTime = hours*3600+mins*60+secs;
  Timer();
 }

 function Timer() {
  var time = new Date();
  hours = time.getHours();
  mins = time.getMinutes();
  secs = time.getSeconds();
  curTime = hours*3600+mins*60+secs
  closeTime += 60;
 
  if (curTime >= closeTime) {
   document.all['pop1'].style.display = "none";
  } else {
   window.setTimeout("Timer()",1000);
  }
 }

 function setCookie( name, value, expiredays ) {
  var todayDate = new Date();
  todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
 }

 function closeWin() {
  if ( document.all.popcheck.checked ) {
   setCookie( "maindiv", "done" , 1 );
  }
 
  document.all['pop1'].style.display = "none";
 }


</script>

여기서부터는 div 스타일입니다.
css파일로 만들어서 사용하시면 파일에 붙여 넣기 하시면 됩니다.


#popup {position:absolute;margin:0;padding:0;left:10px;top:10px;}

#pop1 {float:left;margin:0;padding:0;}
#popContent {position:relative;margin:0;padding:0;width:400px;height:210px;}
#popFooter {position:relative;margin:0;padding:0;width:400px;height:30px;_height:20px;background-color:#f39800;}
#popFooter .popChk {float:left;margin:5px 0 0 10px;padding:0;width:20px;height:30px;_height:20px;}
#popFooter .popTxt {float:left;margin:5px 0 0 1px;padding:5px 0 0 0;_padding:6px 0 0 0;width:150px;height:30px;_height:20px;}
#popFooter .popTxt span {color:#ffffff;}
#popFooter .popClose {float:right;margin:0;padding:10px 0 4px 0;width:60px;height:30px;_height:20px;}
#popFooter .popClose span {color:#ffffff;font-weight:bold;}

출처 : http://on1456.tistory.com/tag/%EC%98%A4%EB%8A%98%ED%95%98%EB%A3%A8%EC%95%88%EB%B3%B4%EA%B8%B0

블로그 이미지

레몬도리 LemonDory

개발자의 이야기