자바스크립트로 마지막 글자에 포커스 하는 방법입니다.

모든 브라우져에서 테스트해 보진 않았지만.

IE 8,9, Chrome 에서 테스트 해 봤습니다.

 

	function focusCampo(id) {
		var inputField = document.getElementById(id);
		if (inputField != null && inputField.value.length != 0) {
			if (inputField.createTextRange) {
				var FieldRange = inputField.createTextRange();
				FieldRange.moveStart('character', inputField.value.length);
				FieldRange.collapse();
				FieldRange.select();
			}
			else if (inputField.selectionStart || inputField.selectionStart == '0') {
				var elemLen = inputField.value.length;
				inputField.selectionStart = elemLen;
				inputField.selectionEnd = elemLen;
				inputField.focus();
			}
		}
		else {
			inputField.focus();
		}
	}

 

출처는 아래와 같습니다.

http://stackoverflow.com/questions/4609405/set-focus-after-last-character-in-text-box

 

고맙습니다.


 

페이스 북처럼 URL이 입력되면 하단부에 이미지와 해당 페이지의 제목을 가져오도록 만들어봤습니다…

 

실력이 형편없어서.. 엉성합니다.

완벽한 제품도 아니고요…

 

Textarea에 입력되는 키 값으로 처리해서.. 오류가 있습니다만… 그냥 이런식으로 한다라고 참고만 해 주십시오.

 

 


    plugin 부분의 스크립트입니다.

(function($) {
	$.fn.GetPageInfo = function(settings) {
		var config = {"widht": "100", "height": "200"};
		var UrlData = null;
		var Timer = null;

		if(settings) $.extend(config, settings);

		this.each(function(){
			jQuery.support.cors = true;
			if(this.tagName && this.tagName.toLowerCase() == "textarea"){
				var data = null;
				$(this).keyup(function(e){
					data = this.value;

					if(data.indexOf("http://") >= 0 && ValidURL(data)){
						if($("div#divLinker").length <= 0){
							$(this).after("<div id='divLinker'><img  id='imgLoading' src='http://jimpunk.net/Loading/wp-content/uploads/loading22.gif' alt='loading' />		<table id='tbContents' border='0' cellspacing='0' cellpadding='0' style='width:100%; display:none;'><tr>				<td width='120px'><img src='' border='0px' alt='' /></td>				<td>					<span class='' id='spanTitle'></span><br />					<span class='' id='spanBody'></span></td>			</tr>		</table></div>");
						}
						else{
							$("div#divLinker").css("display", "");
						}
						var url = null;

						if(data.indexOf("http://") == 0){
							switch(data.substr(data.length)){
								case " ":
									url = data.substr(0);
									break;
								case "\r":
									url = data.substr(0);
									break;
								default:
									url = data;
									break;
							}
						}
						else{
							url = data.substring(data.indexOf("http"), data.length);
						}
						
						if(UrlData != url){
							clearTimeout(Timer);

							UrlData = url;
							Timer = setTimeout(function(){
								fnAjaxCall();
							}, 1000);
						}
					}
				});
			}
		});

		function ValidURL(str) {
			var pattern = /(http|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/
			if(!pattern.test(str)) {
				return false;
			}
			else {
				return true;
			}
		}

		function fnAjaxCall(){
			var loading = $("div#divLinker img#imgLoading");
			var contentArea = $("div#divLinker table");

			loading.css("display", "");
			contentArea.css("display", "none");
			$.ajax({
				url: UrlData
				, async: false
				, contentType: "text/html; charset=UTF-8"
				, context: document.body
				, dataType: "html"
				, success: function(data, textStatus, jqXHR){
					$("div#divLinker img#imgLoading").css("display", "none");
					debugger;
					var linker = $(data);
					contentArea.css("display", "");

					var imgFirst = linker.find("img:first");
					if(imgFirst.width() > imgFirst.height())
						contentArea.find("img").width("100px");
					else
						contentArea.find("img").height("100px");
					
					if(imgFirst.length > 0){
						contentArea.find("img").css("display", "");
						contentArea.find("img").attr("src",imgFirst.attr("src"));
					}
					else
						contentArea.find("img").css("display", "none");

					contentArea.find("span#spanBody").text(data.match("<title>(.*?)</title>")[1]);
					contentArea.find("span#spanBody").text(linker.find("meta[name=description]").attr("content"));
				}
				, error: function(XMLHttpRequest, textStatus, errorThrown){
					$("div#divLinker").css("display", "none");
					alert(errorThrown);
				}
			});
		}

		return this;
	}
})(jQuery);

 

 


    Html 파일입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> new document </title>
		<meta name="generator" content="editplus">
		<meta name="author" content="angeleyes">
		<meta name="keywords" content="angeleyes,testhtml,testjavascript">
		<meta name="description" content="test document">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=8" />

		<style type="text/css">

		</style>

		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<script type="text/javascript" src="pageinfoplugin.js"></script>
		<!--script type="text/javascript" src="http://dev.sencha.com/deploy/dev/docs/resources/ext-base.js"></script>
		<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/docs/resources/ext-all.js"></script-->

		<script language="javascript" type="text/javascript">
		//<![cdata[
			$(document).ready(function() {
				$("#txtData").GetPageInfo();
			});
			
			function fnFunction(){
				try {
					
				}
				catch(e) {
					alert("test ==> " + e.message);
				}
			}
		//]]>
		</script>
	</head>

	<body>
		<input type="text" id="txtText" value="" />
		<textarea id="txtData" rows="3" cols=""></textarea>
		<input type="button" id="btnButton" value="button" onclick="fnFunction();" />

	</body>
</html>

 

 

적용화면은 아래와 같습니다.

 

 

추후 Plugin 부분에서 텍스트 박스의 URL 체크 부분은 업데이트 하도록 하겠습니다.

 

그리고 아래 부분은 현재까지의 오류 현황입니다.

  • URL 다음에 작성된 텍스트가 있는 경우 URL 제대로 인식 못함
  • 이미지 교체 불가
  • loading 이미지 불완전
  • 본문의 text를 가져오지 못함..
  • 메타 태그의 description도 못 가져옴
  • https 구분 불가
  • 등 등 등 등….

 

오류 투성이입니다. *_*

 

PS. 혹시 괜찮은 스크립트 작성 툴 알고 계시면 추천 부탁 드립니다.

 

감사합니다.


 

페이스 북처럼 URL이 입력되면 하단부에 이미지와 해당 페이지의 제목을 가져오도록 만들어봤습니다…

 

실력이 형편없어서.. 엉성합니다.

완벽한 제품도 아니고요…

 

Textarea에 입력되는 키 값으로 처리해서.. 오류가 있습니다만… 그냥 이런식으로 한다라고 참고만 해 주십시오.

 

 


    plugin 부분의 스크립트입니다.

(function($) {
	$.fn.GetPageInfo = function(settings) {
		var config = {"widht": "100", "height": "200"};
		var UrlData = null;
		var Timer = null;

		if(settings) $.extend(config, settings);

		this.each(function(){
			jQuery.support.cors = true;
			if(this.tagName && this.tagName.toLowerCase() == "textarea"){
				var data = null;
				$(this).keyup(function(e){
					data = this.value;

					if(data.indexOf("http://") >= 0 && ValidURL(data)){
						if($("div#divLinker").length <= 0){
							$(this).after("<div id='divLinker'><img  id='imgLoading' src='http://jimpunk.net/Loading/wp-content/uploads/loading22.gif' alt='loading' />		<table id='tbContents' border='0' cellspacing='0' cellpadding='0' style='width:100%; display:none;'><tr>				<td width='120px'><img src='' border='0px' alt='' /></td>				<td>					<span class='' id='spanTitle'></span><br />					<span class='' id='spanBody'></span></td>			</tr>		</table></div>");
						}
						else{
							$("div#divLinker").css("display", "");
						}
						var url = null;

						if(data.indexOf("http://") == 0){
							switch(data.substr(data.length)){
								case " ":
									url = data.substr(0);
									break;
								case "\r":
									url = data.substr(0);
									break;
								default:
									url = data;
									break;
							}
						}
						else{
							url = data.substring(data.indexOf("http"), data.length);
						}
						
						if(UrlData != url){
							clearTimeout(Timer);

							UrlData = url;
							Timer = setTimeout(function(){
								fnAjaxCall();
							}, 1000);
						}
					}
				});
			}
		});

		function ValidURL(str) {
			var pattern = /(http|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/
			if(!pattern.test(str)) {
				return false;
			}
			else {
				return true;
			}
		}

		function fnAjaxCall(){
			var loading = $("div#divLinker img#imgLoading");
			var contentArea = $("div#divLinker table");

			loading.css("display", "");
			contentArea.css("display", "none");
			$.ajax({
				url: UrlData
				, async: false
				, contentType: "text/html; charset=UTF-8"
				, context: document.body
				, dataType: "html"
				, success: function(data, textStatus, jqXHR){
					$("div#divLinker img#imgLoading").css("display", "none");
					debugger;
					var linker = $(data);
					contentArea.css("display", "");

					var imgFirst = linker.find("img:first");
					if(imgFirst.width() > imgFirst.height())
						contentArea.find("img").width("100px");
					else
						contentArea.find("img").height("100px");
					
					if(imgFirst.length > 0){
						contentArea.find("img").css("display", "");
						contentArea.find("img").attr("src",imgFirst.attr("src"));
					}
					else
						contentArea.find("img").css("display", "none");

					contentArea.find("span#spanBody").text(data.match("<title>(.*?)</title>")[1]);
					contentArea.find("span#spanBody").text(linker.find("meta[name=description]").attr("content"));
				}
				, error: function(XMLHttpRequest, textStatus, errorThrown){
					$("div#divLinker").css("display", "none");
					alert(errorThrown);
				}
			});
		}

		return this;
	}
})(jQuery);

 

 


    Html 파일입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> new document </title>
		<meta name="generator" content="editplus">
		<meta name="author" content="angeleyes">
		<meta name="keywords" content="angeleyes,testhtml,testjavascript">
		<meta name="description" content="test document">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=8" />

		<style type="text/css">

		</style>

		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<script type="text/javascript" src="pageinfoplugin.js"></script>
		<!--script type="text/javascript" src="http://dev.sencha.com/deploy/dev/docs/resources/ext-base.js"></script>
		<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/docs/resources/ext-all.js"></script-->

		<script language="javascript" type="text/javascript">
		//<![cdata[
			$(document).ready(function() {
				$("#txtData").GetPageInfo();
			});
			
			function fnFunction(){
				try {
					
				}
				catch(e) {
					alert("test ==> " + e.message);
				}
			}
		//]]>
		</script>
	</head>

	<body>
		<input type="text" id="txtText" value="" />
		<textarea id="txtData" rows="3" cols=""></textarea>
		<input type="button" id="btnButton" value="button" onclick="fnFunction();" />

	</body>
</html>

 

 

적용화면은 아래와 같습니다.

 


 

추후 Plugin 부분에서 텍스트 박스의 URL 체크 부분은 업데이트 하도록 하겠습니다.

 

그리고 아래 부분은 현재까지의 오류 현황입니다.

  • URL 다음에 작성된 텍스트가 있는 경우 URL 제대로 인식 못함
  • 이미지 교체 불가
  • loading 이미지 불완전
  • 본문의 text를 가져오지 못함..
  • 메타 태그의 description도 못 가져옴
  • https 구분 불가
  • 등 등 등 등….

 

오류 투성이입니다. *_*

 

 

 

PS. 혹시 괜찮은 스크립트 작성 툴 알고 계시면 추천 부탁 드립니다.

 

 

감사합니다.

 

jquery로 구현하게 되면 매우 간단하나.. 오늘은 샘플로 올려 놓고자 합니다..

 

아래와 같이 구현하시면 될 것 같습니다.

 

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		alert(xmlhttp.responseText);
	}
	else{
		//alert(xmlhttp.readyState);
		//alert(xmlhttp.status);
	}
	/*
		onreadystatechange = Stores a function (or the name of a function) to be called automatically each time the readyState property changes
		readyState = Holds the status of the XMLHttpRequest. Changes from 0 to 4: 
			0: request not initialized 
			1: server connection established
			2: request received 
			3: processing request 
			4: request finished and response is ready
		status
			200: "OK"
			404: Page not found
	*/
}
xmlhttp.open("GET","http://blog.angeleyes.kr/312",true);
xmlhttp.send();

 

 

onreadystatechange에서 else문으로 error를 잡으면 될 것 같습니다.

 

그리고 cross domain 문제의 경우에는 proxy를 이용한 방법으로 처리하는 것이 좋을 것 같습니다.

proxy 참고 : http://renewal.tistory.com/114

 

cross domain ajax 참고

http://greatkim91.tistory.com/107

 

 

감사합니다.

 

Extjs 3.3.0 Custom GridPanel

 

해당 컨트롤을 만든 이유는 하나의 그리드 탬플릿을 만들어 놓고

여러개의 탭 페널에서 사용하기 위함.

 

아래 쪽에서 눈 여겨 볼 부분은 Store에서 defaultParam을 받아서 처리 하는 것.

Loader를 바로 연결하여 처리한 것.

기본적인 설정을 다 해 놓은 것.

검색 툴바와 페이징 툴바를 연결해 놓은 것.

 

여기서 검색 툴바는 커스텀하게 만들어 놓은 것이라 찾아서 직접 만들어야 함.

 

Ext.ns('Ext.ecm');
Ext.ecm.grid = Ext.extend(Ext.grid.GridPanel, {
	initComponent: function () {
		var config = {
			store: new Ext.data.JsonStore({
				root: 'dataRoot'
				, totalProperty: 'totalCount'
				, remoteSort: false
				, fields: storeFields
				, baseParams: { DataType: this.defaultParam }
				, url: EcmServerURL
			})
			, defaultParam: ''
			, trackMouseOver: false
			, disableSelection: true
			, loadMask: true
			, columns: gridColumns
			, stripeRows: false
			, enableColumnMove: false
			, enableColumnResize: false
			, enableDragDrop: true
			, ddGroup: 'GridDD'
			, frame: false
			, border: false
			, loadMask: {
				msg: msgDataLoading
			}
			, sm: new Ext.grid.RowSelectionModel({
				singleSelect: false
			})
			, viewConfig: {
				forceFit: true
			}
		}

		Ext.apply(this, Ext.apply(this.initialConfig, config));

		this.tbar = new Ext.Toolbar({
			items: [
				'->'
				, new Ext.ecm.SearchField({
					hideTrigger1: true
					, hasSearch: true
					, store: this.store
					, params: { start: 0, limit: EcmLimitCount }
					, emptyText: msgDataSearchkeyword
				})
			]
		});

		this.bbar = new Ext.PagingToolbar({
			store: this.store
			, displayInfo: false
			, pageSize: EcmLimitCount
		});

		Ext.ecm.grid.superclass.initComponent.apply(this, arguments);
	}
	, onRender: function () {
		Ext.ecm.grid.superclass.onRender.apply(this, arguments);
		this.store.load({ params: { start: 0, limit: EcmLimitCount} });
	}
});

Ext.reg('ecmgrid', Ext.ecm.grid);

 

아래는 적용 예제

var tabs = new Ext.TabPanel({
	id: 'ecmTags'
	, activeTab: 0
	, border: false
	, defaults: {
		layout: 'fit'
		, autoScroll: true
	}
	, items: [{
		title: tabTitlePeolple
		, id: 'peolpleGirdTab'
		, items: {
			xtype: 'ecmgrid'
			, id: 'PeolpleGrid'
			, defaultParam: 'People'
		}
	}, {
		title: tabTitleOrganization
		, id: 'organizationGirdTab'
		, items: {
			xtype: 'ecmgrid'
			, id: 'OrganizationGrid'
			, defaultParam: 'Organization'
		}
	}, {
		title: tabTitleTag
		, id: 'tagGirdTab'
		, items: {
			xtype: 'ecmgrid'
			, id: 'TagGrid'
			, defaultParam: 'Tag'
		}
	}, {
		title: tabTitleFolder
		, id: 'folderTreeTab'
		, items: folderTree
	}]
});

 

그리드 패널의 높이를 설정할 때 한 가지 팁

GridPanel에서 autoHeight 를 설정하지 말 것

그리고 해당 그리드를 넣어둘 패널에 layout 값을 fit으로 설정 할 것

'Script > Script Extjs' 카테고리의 다른 글

EXTJS Custom GridPanel  (0) 2011.05.12
EXTJS Custom XmlTreeLoader  (0) 2011.05.12

 

ExtJs 3.3.0 Custom XmlTreeLoader

 

아래의 코드 중 손대야 하는 부분은 processAttributes 부분과 그리고 childnodes를 설정 하는 부분이다.

xml 에서 만들어 놓은 attribute를 treenode attribute로 맞춰야 하며, childnode 설정 또한 그렇다.

 

아래는 custom xml treeloader

Ext.ecm.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
	XML_NODE_ELEMENT: 1,
	XML_NODE_TEXT: 3,

	processResponse: function (response, node, callback) {
		var xmlData = response.responseXML;
		var root = xmlData.documentElement || xmlData;

		try {
			node.beginUpdate();
			node.appendChild(this.parseXml(root));
			node.endUpdate();

			if (typeof callback == "function") {
				callback(this, node);
			}
		} catch (e) {
			this.handleFailure(response);
		}
	}
	, parseXml: function (node) {
		var nodes = [];
		Ext.each(node.childNodes, function (n) {
			if (n.nodeType == this.XML_NODE_ELEMENT) {
				var treeNode = this.createNode(n);
				if (n.childNodes.length > 0) {
					var child = this.parseXml(n);
					if (typeof child == 'string') {
						treeNode.attributes.innerText = child;
					} else {
						treeNode.appendChild(child);
					}
				}
				nodes.push(treeNode);
			}
			else if (n.nodeType == this.XML_NODE_TEXT) {
				var text = n.nodeValue.trim();
				if (text.length > 0) {
					return nodes = text;
				}
			}
		}, this);

		return nodes;
	}
	, createNode: function (node) {
		var attr = {
			tagName: node.tagName
		};

		if (node.childNodes.length > 0) {
			attr['leaf'] = false;
		}
		else {
			attr['leaf'] = true;
		}

		if (node.attributes.length > 0) {
			Ext.each(node.attributes, function (a) {
				attr[a.nodeName] = a.nodeValue;
			});
		}

		this.processAttributes(attr);

		return Ext.ecm.XmlTreeLoader.superclass.createNode.call(this, attr);
	}
	, processAttributes: function (attr) {
		if (attr.type) {
			//attr.text = eval("treeNode_" + attr.title);
			attr.text = attr.title;

			if (attr.type == "fixed")
				attr.draggable = false;

			if (attr.iconClsType != undefined)
				attr.iconCls = attr.iconClsType;

			attr.leaf = false;
			attr.loaded = true;
			attr.expanded = true;
		}
		else if (attr.title) {
			attr.text = attr.title;

			if (attr.type == "fixed")
				attr.draggable = false;

			if (attr.iconClsType != undefined)
				attr.iconCls = attr.iconClsType;

			attr.leaf = true;
		}
	}
});

 

그리고 xml

<ecm id="ecm" title="ecm">
	<item id="apvLibrary" title="전자결재" type="fixed" url="/APVLibrary/Forms/AllItems.aspx">
		<tag id="ad4e70c0-2f6b-41c6-97f8-c6366a5951a7" title="김준" iconCls="People"/>
		<tag id="1e5817e4-5910-4049-8004-3dc80588890c" title="노가다" iconCls="People"/>
		<tag id="eab6b2d6-6c4d-4a4e-876c-2a7c9eab11bc" title="김뉴범" iconCls="People"/>
		<tag id="Test/개인폴더" title="개인폴더" iconCls="Folder"/>
		<tag id="Test/임시폴더" title="임시폴더" iconCls="Folder"/>
		<tag id="Test/공유폴더" title="공유폴더" iconCls="Folder"/>
	</item>
	<item id="docLibrary" title="문서함" type="fixed" url="/DOCLibrary/Forms/AllItems.aspx">
		<tag id="b2641b0f-8a63-4ba2-9a0d-fcd55be0fe4e" title="마약팀" iconCls="Organization"/>
		<tag id="2d1ca5cc-616c-4981-90b7-9356f38e1018" title="강력팀" iconCls="Organization"/>
		<tag id="eab6b2d6-6c4d-4a4e-876c-2a7c9eab11bc" title="김뉴범" iconCls="People"/>
	</item>
	<item id="rcdLibrary" title="레코드" type="fixed" url="/RCDLibrary/Forms/AllItems.aspx">
		<tag id="eab6b2d6-6c4d-4a4e-876c-2a7c9eab11bc" title="김뉴범" iconCls="People"/>
		<tag id="62625eab-eb2f-4ecf-b32d-ac67debef3c1" title="강아지" iconCls="Tag"/>
		<tag id="4a4207d8-60a4-478f-90b6-0f528d504295" title="고양이" iconCls="Tag"/>
	</item>
</ecm>

 

아래는 사용 예제

var treeLoader = new Ext.ecm.XmlTreeLoader({
	dataUrl: EcmServerURL
	, baseParams: { DataType: 'initXml', DBListName: 'ECMMDMgtDataDB' }
});

// treeLoader를 만들고
// tree에다가 낑궈 주면 됨..
// 밑에꺼는 커스텀 tree panel이나 기본 treepanel로 해도 상관 없음~
var tree = new Ext.ux.MultiSelectTreePanel({
	id: "treeTag"
	, autoScroll: true
	, animate: true
	, containerScroll: true
	, border: false
	, buttonAlign: 'center'
	, enableDD: true
	, ddGroup: 'GridDD'
	, rootVisible: false
	, root: new Ext.tree.AsyncTreeNode({ text: msgDataTreeRootName, id: 'ecm' })
	, loader: treeLoader
});

 

주의할 점은. 전혀 없고.

Ext.ecm.XmlTreeLoader 에서 processAttributes를 잘 만들어 주면 됨..

xml 의 attribute를 ext TreeNode에 맞는 값으로 설정하면 됨.

'Script > Script Extjs' 카테고리의 다른 글

EXTJS Custom GridPanel  (0) 2011.05.12
EXTJS Custom XmlTreeLoader  (0) 2011.05.12

 

javascript 혹은 jquery를 이용하여 xml 문서를 만드는 방법에 대해서 알아보도록 하겠습니다.

방법은 간단하며, javascript로 생성 시 xml selector에 대해서는 이번 시간에 설명하지 않도록 하겠습니다.

 

xml document

<?xml version="1.0" encoding="utf-8" ?>
<Nodes>
	<Node Title="Collaboration Home" Url="/" ID="18295af4-d049-40ce-a7ed-e7fdafbbff82" ParentID="" Prefix="" SiteID="81ds4s67-0509-41a1-a46c-0fc6ae94490c" />
	<Node Title="tt" Url="/tt" ID="2c62624f-07fc-44a3-3617-es67c57448e" ParentID="18295af7-d049-40ce-a7ed-e7fdafbbff82" Prefix="tt" SiteID="81s04e67-0509-41a1-a46c-0fc6ae94490c" />
	<Node Title="PI/IT Home" Url="/cc/cio" ID="5318f72b-b3b6-4cab-924d-90e0c9d7addf" ParentID="" Prefix="cc" SiteID="a1asc33b-bbfd-4285-8963-949f653eb7dd" />
	<Node Title="CIO Office Only" Url="/cc/cio/cioonly" ID="e021d10e-8592-4fa6-8e00-33fc7beas384" ParentID="53e8s72b-b3b6-4cab-924d-90e0c9d7addf" Prefix="cc" SiteID="a1aac33b-sbfd-4285-8963-949f653eb7dd" />
</Nodes>

 

Script

$(document).ready(function() {
	// Jquery call .get Method
	$.get("noname1.xml", function(xml){
		xmlString = xml;
	});

	// JQuery call ajax
	$.ajax({
		type: "get"
		,url:"noname1.xml"
		,dataType: "xml"
		,async: false
		,success: function(xml, isSuccess){
			alert(xml);
			alert(isSuccess);
		}
		,error: function(data, status, err) {
			//alert("data ==> " + data);
			alert("status ==> " + status);
			//alert("err ==> " + err);
		}
	});

	// xml document parsing by file
	try{
		var xmlhttp;
		if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.open("GET","noname1.xml",false);
		xmlhttp.send();
		xmlDoc = xmlhttp.responseXML;

		var node = xmlDoc.getElementsByTagNames("Node");
		alert(node.length);
	}
	catch(ex){
		//alert(ex.message);
	}

	// xml document parsing by string
	try{
		if (window.DOMParser){
			parser = new DOMParser();
			xmlDoc = parser.parseFromString(xmlString,"text/xml");
		}
		else{// Internet Explorer
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async = false;
			xmlDoc.validateOnParse = false;
			xmlDoc.resolveExternals = false;
			ret = xmlDoc.loadXML(xmlString);

			if(!ret){
				alert(xmlDoc.parseError.reason);
				return false;
			}
		}
	}
	catch(ex){
		//alert(ex.message);
	}
		
	// Jquery
	$(xmlDoc).find("Node").each(function(){
		alert($(this).attr("Title"));
		return false;
	});

	// Javascript
	var nodes = xmlDoc.getElementsByTagName("Node");
	for(var x = 0; x < nodes.length; x++){
		alert(nodes[x].getAttribute("Title"));
		return false;
	}
});

 

 

감사합니다.



 

javascript나 jquery 사용 시 부모의 이벤트를 무시하고 싶을 경우.

즉 <a href=” 속성을 무시하고 click 이벤트만 사용하고 싶은 경우.

 

ie 계열의 Browser에서는 event.returnValue = false;

그 외의 Browser에서는 event.preventDefault();

를 이용하여 자기 자신의 기본 이벤트를 취소하는 기능이 있습니다.

 

function test(event){
	try {
		alert('test');
//		if(event.preventDefault)
//			event.preventDefault();
//		else
//			event.returnValue = false;
	}
	catch(e) {
		alert("test ==> " + e.message);
	}
}
<a id="aNate" href="http://nate.net" onclick="test(event);">nate</a>

 

위의 코드를 그대로 적용하게 되면, Nate로 이동하게 됩니다.

주석을 제거하고 테스트 해 보시면 Nate로 이동하지 않고 단지 test라는 메시지박스만 확인 할 수 있습니다.

 

즉. href 의 페이지 이동 이벤트를 무시하게 되는 것입니다.

 

이번에는 JQuery의 예제를 보도록 하겠습니다.

 

$(document).ready(function() {
	$("a#aDaum").click(function(event){
		//event.preventDefault();
		$(this).hide("slow");
	});
});
<a id="aDaum" href="http://daum.net">daum</a>

 

Jquery에서는 IE를 구분하는 코드 필요 없이 무조건 preventDefault() 메소드를 사용하여 처리 할 수 있습니다.

javascript의 기능과 동일합니다.

주석을 제거하면 페이지 이동 없이 사라지는 것이죠..

 

Jquery의 toggle()을 이용하게 되면 여기서는 기본적으로 preventDefault() 속성을 지니고 있습니다.

 

예제를 보겠습니다.

 

$(document).ready(function() {
	$("a#aNaver").toggle(function(){
		$("a#aDaum").hide("slow");
	},
	function(){
		$("a#aDaum").show("slow");
	});
});
<a id="aNaver" href="http://naver.com">naver</a>
<a id="aDaum" href="http://daum.net">daum</a>

 

jquery의 모든 메소드를 확인해 본 것이 아니라 제가 확인한 toggel만 예제로 만들어 보았습니다.

 

참고 URL

http://api.jquery.com/event.preventDefault/

https://developer.mozilla.org/en/DOM/event.preventDefault

http://msdn.microsoft.com/en-us/library/ms534371(v=vs.85).aspx

 

 




감사합니다.




너무 간단해서 이거 참 ㅡ.ㅡ;;;


중요한게. dom으로 잡아서.  contentWindow로 잡으면 됩니다.!!

아래는 소스입니다.


여기는 head 부분
 New Document 








여기는 body 부분




여기는 iframe page

여기는 head 부분
 New Document 









감사합니다.



jquery를 이용한 테이블 로 추가 및 삭제...


		function fnAddRow(tbName) {
			try {
				// 테이블을 찾아서 로우 추가
				var tbody = $('#' + tbName + ' tbody');
				var rows = tbody.find('tr').length;
				var newRow = tbody.find('tr:last').clone(true).appendTo(tbody);

				fnControlInit(newRow, rows);

				// rno가 있으면 숫자를 입력
				newRow.find("span[id^=rno]").html(rows + 1);

				// 해외 유학경험의 달력 필드가 있으면 이벤트 바인딩
				newRow.find(":text[id^=txtStudyStartDate]").simpleDatepicker({ startdate: 1980 });
				newRow.find(":text[id^=txtStudyEndDate]").simpleDatepicker({ startdate: 1980 });
			}
			catch (e) {
				alert(e.Message);
			}
		}

		function fnRemove(obj) {
			try {
				// 현재 선택된 오브젝트의 상위 tr을 찾아서 삭제~
				var rows = $(obj).parent().parent().parent().parent().parent("tbody").find('> tr');
				var table = $(obj).parent().parent().parent().parent().parent().parent();
				
				if (table.attr("id") != "tbWDHChild" && rows.length > 2) {
					$(obj).parent().parent().parent().parent().remove();

					// 삭제시 아이디 값이 중복되는 현상으로 인해 아이디 값 재 설정.
					$(table).find("table[id^=tbWDHChild]").each(function (i) {
						var id = this.id
						if (id)
							this.id = this.id.split('_')[0] + '_' + i;
					});
				}
				else if(table.attr("id") == "tbWDHChild" && rows.length > 1){
					$(obj).parent().parent().parent().parent().remove();

					var i = 0;
					// 삭제시 아이디 값이 중복되는 현상으로 인해 아이디 값 재 설정.
					$(table).find("table[id^=tbWDHChild]").each(function (i) {
						var id = this.id
						if (id)
							this.id = this.id.split('_')[0] + '_' + i;
					});
				}

				table = $(rows).parent().parent();
				if (table.attr("id").indexOf("tbWDHChild") >= 0) {
					var tbody = $(table).find("tbody");
					tbody.find('> tr').each(function (i) {
						$(this).find("> td > div > span[id^=rno]").html(i + 1);
					});
				}
			}
			catch (e) {
				alert(e.Message);
			}
		}

		function fnControlInit(jRowobj, rowCnt){
			// input tag를 찾아서 value 지움
			jRowobj.find(':input').val('').each(function () {
				var id = this.id
				if (id) {
					this.id = this.id.split('_')[0] + '_' + rowCnt;
				}
			});
		}



대충 이런식으로 추가하거나 삭제 하시면 될 것 같습니다.

감사합니다.


참고한 플러그인은 아래와 같습니다.
http://plugins.jquery.com/project/autogrowtextarea

샘플 소스는 아래에서 확인 가능합니다.
http://www.technoreply.com/autogrow-textarea-plugin/

jquery.autogrowtextarea.js 파일은 아래 링크에서 다운가능합니다.
http://plugins.jquery.com/files/jquery.autogrowtextarea.js.txt

jquery 를 먼저 선언합니다.

	
	


그리고 페이지 안에 있는 모든 textarea에 대해서 자동 사이즈 조정 및 특정 아이디에 대한 사이즈 조정 스크립트입니다.

	


html 페이지 내의 body 영역입니다.

	


그리고 선언한 jquery plugin 코드는 아래와 같습니다.

	


이상입니다.

감사합니다~


현재 선택한 객체의 좌표를 구하는 스크립트입니다.
뭐 저도 퍼와서 이래저래 테스트 해 본 것이라.

필요하신 분 퍼가셔요~

스크립트 영역




본문 영역

	
A B



감사합니다~

현재 영역에서 마우스의 클릭한 곳에 좌표를 받아오는 코드입니다.

너무 간단해서 *_*;;

일단. 저는 div의 위치에 클릭한 경우 좌표를 받아오도록 되어 있는데요..


전체 영역의 값으로 구하시려면.

currentObj의 offset 값을 지우시면 됩니다. *_*


먼저 스크립트 부분입니다.





그 다음은 Html 부분
your protected content
Click here..

감사합니다.

여기서 window를 던지면..

자식창에서 window.dialogArguments.method() 참조가능~

showModalDialog 메서드에 대한 자세한 내용은 다음 Microsoft 웹 사이트를 참조하십시오.
http://msdn2.microsoft.com/en-us/library/ms536759.aspx (http://msdn2.microsoft.com/en-us/library/ms536759.aspx)
showModelessDialog 메서드에 대한 자세한 내용은 다음 Microsoft 웹 사이트를 참조하십시오.
 
IE 6.0에서는 위의 메소드 사용시
<a href="javascript:  과 같은 코드 사용 불가..
window.open으로.. 대체 해야 함..
 
지랄같군 ㅡ.ㅡ;

아래 내용은 개발자에게 해당되는 내용입니다.

일반 사용자 분께서는 아래 링크를 이용하여 주십시오.


2011/02/17 - [Computer/ETC] - Internet Explorer 8 사용 중 일부 링크를 열 때 "웹 페이지를 표시할 수 없습니다" 오류 메시지


Internet Explorer 8에서 아래와 같은 Script 오류와 그리고 작업이 중단되었습니다. 와 같은 message가 발견되었다.

하지만 매번 있던 것은 아니고 몇 번씩 그런다.

5회 중.. 1번 있을 정도???

 

  1. HTML Parsing Error : Unable to modify the parent container element before the child element is closed
    IE 8에서는 아래와 같이 발생 됨 헌데 가끔 아래처럼 뜨기도 함 *_*;;;;
  2. 인터넷 사이트를 열 수 없습니다.
    (IE 5.5, IE 6, IE 7)에서는 아래와 같이 발생 됨.

 

 

 

위와 같은 현상은

태그를 닫지 않고 상위 노드를 제어 하려고 하는 경우 발생 된다.

 

나의 경우에는 Jquery를 이용하여 작업을 진했으나

을 이용하지 않고 작업하여 발생된 상황이었다.

 

좀더 자세한 내용은 아래의 링크를 참조하기 바란다.

 

BUG: Internet Explorer에서 웹 페이지를 방문하거나 웹 응용 프로그램과 상호 작용하면 "작업이 중단되었습니다." 오류 메시지가 나타난다

  1. Favicon of http://imommy.tistory.com BlogIcon 꿈찾은여인 2010.05.11 14:06

    아... 어렵네요 ㅠㅠ

+ Recent posts