210908_jQuery UI/Vue.js(Mustache, Directive, v-bind)

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

Datepicker

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  
  <!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> --> <!-- css cdn -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css"> <!-- theme는 소문자로 -->
  <link rel="stylesheet" href="/resources/demos/style.css"> <!-- css -->
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <!-- javascript -->
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- ui javascrip -->
 
  <script>
  /* datepicker 함수 기억하자*/
  
  $( function() {
    $( "#datepicker" ).datepicker({ // 속성 디테일하게 만들기
    	dayNamesMin:['일','월','화','수','목','금','토'],
    	monthNames:['1월','2월','3월','4월','5월','6월',
    				'7월','8월','9월','10월','11월','12월']
    });
  } );
  </script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

Tabs

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
	  // tabs 함수 사용!!
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>
 
<div id="tabs"> <!-- 여기는 건들지 말기! -->
  <ul> <!-- 서버로 응답을 보내는 파일을 만들자 -->
    <li><a href="tabpage/content1.html">경제 상식</a></li>
    <li><a href="tabpage/content2.html">정치 이슈</a></li>
    <li><a href="tabpage/content3.html">코로나 현황</a></li>
  </ul>
 
  
</div>
 
 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2> 제목 </h2>
<p> 내용 </p>
<p> 내용 </p>
</body>
</html>

Accordion

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion({
    /* 컨텐츠에 맞게 accodion의 높이를 조절하는 옵션을 사용 -- default 값은 fill */ 
    	heightStyle:'content'
    });
  		
  		
	// ------------ 비동기 연결
		  
	//1. h3 태그를 클릭
	$('#accordion h3').click(function () {
		var text = $(this).text();
		//alert(text);
	
		
	//2. 비동기 시작 (2번 일어나야함)
		if(text=="여신강림"){
			$.ajax({
				type:'get',
				url:'subject.jsp',
				
				success:function(resultdata){
					$('#subject').html(resultdata);
				}
			});//ajax
			
		}else if(text=="연애혁명"){
			$.ajax({
				type:'get',
				url:'itcom.jsp',
				
				success:function(resultdata){
					$('#itcom').html(resultdata);
				}
			}); //ajax
		}
	}); //click	
	
	// 버튼클릭
	$('#createSection').click(function () {
		var footercontent = "<h3>연놈</h3><div>중2 여름, 가지 말라는 말도 좋아했다는 말도 하지 못한 채 보낸 그녀가 3년 만에 나타났다. 지나버린 시간과 마주한 소년 그리고 소녀의 이야기 </div>"; 
		
	
	// 붙이면서 버튼을 없앤다 -- remove()
		$(this).remove();
	
	// 이것을 붙인다 -- append()
	// 동적으로 아코디언을 생성할 떄는 이전 아코디언을 완전히 다 삭제한 후 다시 어코디언을 부여해야한다. -- destroy 사용
		$('#accordion').append(footercontent).accordion('destroy').accordion({
			heightStyle:'content' // 새로 아코디언이 부여되기 때문에 다시 값을 줘야한다.
		});
	});
  });

  </script>
</head>
<body>
 
<div id="accordion">
	<h3>윈드브레이커</h3> <!-- 이것이 하나 접히는 session -->
	<div>
		혼자서 자전거를 즐겨타던 모범생 조자현.<br/>
		원치 않게 자전거 크루의 일에 자꾸 휘말리게 되는데...<br/>
		자유를 꿈꾸는 청춘들의 스트릿라이딩 드라마!<br/>
	</div>
	
	<h3>여신강림</h3>
	<div id ="subject">
		네웹 대표 글로벌 인기작! 주경, 수호, 서준.<br/>
		세 청춘의 두근두근 눈호강 로맨스~♡ <br/>
		메이크업으로 여신이 된 주경이는 꿈과 사랑을 이룰 수 있을까?<br/>
	</div>
	
	<h3>연애혁명</h3> 
	<div id ="itcom">
		평범하면서 금사빠인 고등학생 순정남 공주영은<br/>
		까칠하고 차가운 여학생 왕자림을 보고 사랑에 빠져버린다.<br/>
		너무 다른 둘, 괜찮을까?<br/>
	</div>
</div>

<hr>
<input type="button" value="Create Section addction" id="createSection">
 
</body>
</html>

<!-- itcom.jsp -->

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<ul>
	<li>366. Focusing</li>
	<li>365. Nineteen</li>
	<li>364. Changes</li>
	<li>363. after raining</li>
	<li>362. 딜레마존 (7)</li>
	<li>361. 딜레마존 (6) <분기점></li>
</ul>
</body>
</html>

Draggable & Droppable

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Droppable - Default functionality</title>
  
  <style type="text/css">
  	#clothing{margin-left: 10px; width:600px; float:left;}
  	#cart{ margin: 0px; width: 450px; float: left; padding: 2em; margin-top: 10px}
  </style>
  
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
		//1. 아코디언 적용
		$('#catalog').accordion({
			heightStyle:'content'
		}); //accordion
		
		
		//2. draggable 적용
		$('#catalog li').draggable({
			helper:'clone', //다시 제자리로 돌아오는 기능 
			appendTo:'#cart'
		}); //draggable
		
		
		//3. droppable 적용
		$('#cart ol').droppable({
			drop: function( event, ui ) {
				var uidrag = ui.draggable.text(); //끌고가는 ui에 text를 받아서 사용해야한다
				//alert(uidrag);
				
				// placeholer 부분을 먼저 삭제한다.
				$(this).find('.placeholder').remove()
				$(this).append('<li>' + uidrag + '</li>');
			}
		});
  });
  </script>
</head>
<body>
	<div id = "clothing">
		<h2 class="ui-widget-header"> 카 탈 로 그 </h2>
		<div id = "catalog">
			<h2><a href="#">상의류</a></h2>
			<div>
				<ul>
					<li>셔츠</li>
					<li>폴라티</li>
					<li>자켓</li>
					<li>가디건</li>
					<li>티</li>
					<li>코트</li>
				</ul>
			</div>
			
			<h2><a href="#">하의류</a></h2>
			<div>
				<ul>
					<li>청바지</li>
					<li>스커트</li>
					<li>반바지</li>
					<li>레깅스</li>
				</ul>
			</div>
			
			<h2><a href="#">기타 액세서리</a></h2>
			<div>
				<ul>
					<li>손목시계</li>
					<li>백팩</li>
					<li>지갑</li>
					<li>목걸이</li>
					<li>팔찌</li>
				</ul>
			</div>
		</div>
	</div> 
	
	<!-- drop할 영역을 지정 :: 일정의 장바구니 , cart -->
	<div id = "cart">
		<h2 class="ui-widget-header">Clothing Cart</h2>
		<div class="ui-widget-content"> <!-- droppable 되어지는 역할 -->
			<ol> <!-- Ordered List의 줄임 말로, 순서가 있는 목록 -->
				<li class="placeholder">Dropping Here!!</li>
			</ol>
		</div>
	</div>
</body>
</html>

✔ UI를 만드는 방법

1. Html, css, jQuery → UI

2. 1번과 함께 Bootstrap 사용 → Ajax(비동기)

3. 2번 + vue → Ajax(비동기), Axio (비동기) + 서버

vue.js

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크

https://kr.vuejs.org/v2/guide/index.html

시작하기 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

화면 구성과 Mustache Expression 문법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MVVM pattern</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- view port -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.cdn -->
</head>
<body>
<!-- // 1.화면구성 (V :: 인트로화면, 결과페이지)-->
	<div id="app">
		<h2>{{message}}</h2>  <!-- 1. Mustache Expression : 데이터 적용하는 렌더링-->
	</div>

<!-- vue 에서는 script를 아래에 쓴다. 위에 사용하려면 jQuery 사용해야한다 -->

<script type="text/javascript">
//2. 데이터모델 (M :: 정적인데이터, 동적인데이터)
	var model = {message:"Vue.js START!!"} //message란 이름으로 Vue.js START라는 값을 model에 바인딩 시킴

//3. 뷰모델 VueModel (VM :: 화면(1)에 데이터(2)를 연결하는 역할 -- Controller :: 화면에 서버를 연결하는 역할)
	new Vue({ // 객체, 속성이 존재한다. (el : 어느영역, data : 데이터)
		
		//화면 부분중에서 어느 영역에 적용 될지를 지정하는 속성
		el:'#app',
		
		//el에 적용된 화면에 출력할 데이터 정보를 지정하는 속성
		data:model // 정적인데이터 즉 모델을 바인딩하는 문법
	});
	
Vue.config.devtools=true;

</script>	
</body>
</html>

Directive Expression 문법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- div :: 화면영역 -->
<div id = "app">
	<!-- 1. Mustache Expression :: Vue Model 에 바인딩된 데이터를 출력하는 문법-->
	<div>{{title}}</div>

	<!-- 2. Directive Expression ::
	
		 v-text는 jquery의 text() 함수와 동일
		 v-html은 jquery의 html() 함수와 동일
	 -->
	<div v-text="title"></div>
	<div v-html="title"></div>

</div>

<script>
	var model = {title:'<h2> Vue Test </h2>'} // 데이터 받아오는 방법
	var app = new Vue({ // Vue영역 :: controller 역할 
		el:'#app',
		data:model
	});	
</script>
</body>
</html>

활용

<!-- 


	-- 1.
		정적인 모델을 지정
		데이터에 이름, 나이, 사는 곳에 관한 정보를 담을 수 있는 모델을 만든다
	
	-- 2.
		app 라고 지정한 화면에 모델에 지정한 데이터의 내용이
		table형식으로 출력되도록 한다.
	
		* 출력조건
		1) Mustache Expression :: {{}}
		2) Directive Expression :: v-text | v-html
	
	-- 3.
		모든 컨텐츠가 메모리에 로딩된 다음 script 부분이 가동 되도록 한다. (jQuery사용)

 -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- 3. 하려면 jquery 사용하면 된다. -->

<!-- Vue, data 영역 :: jquery를 사용했기 때문에 아래 모든 컨텐츠 메모리에 로딩된 후 script 부분 가동된다.-->
<script type="text/javascript">
	$(function(){
		var person = {
				name:'James',
				age:77,
				address:'NY'
		}
		var app = new Vue({
			el:'#app',
			data:person
		})
	});
</script>
</head>

<!-- 화면 영역 -->
<body>
<div id="app">
	<table border="1">
	<caption>Vue Example</caption>
	<p>
	<thead>
		<tr>
			<th>NAME</th><th>AGE</th><th>ADDRESS</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td>{{name}}</td>
			<td v-text="age"></td>
			<td v-html="address"></td>
		</tr>
	</tbody>
	
	</table>
</div>
</body>
</html>

v-bind :: 속성에 해당하는 값들을 모델로 연결하는 기법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> v-bind :: 속성에 해당하는 값들을 모델로 연결하는 기법 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
	$(function () {
		var model = {
				message1:"Mustache Expression 으로 출력하기",
				message2:"<h2> Directive Expression 으로 출력하기 </h2>",
				message3:"<h2> Directive Expression 으로 출력하기",
				
				// v-bind 
				prop1:"center", //css 속성 연결
				prop2:"http://sample.bmaster.kro.kr/photos/61.jpg", //img src 속성 연결
				
				title:"Hello V-MODEL!!!"
		}
		new Vue ({
			el: '#app',
			data:model
		});
	});
</script>
</head>


<body>
	<div id="app">
		<H1>{{title}}</H1>
		Greet Message<input type="text" name="greet" v-model='title'>
		<!-- v-model :: 단방향 데이터 흐름기술이 → 양방향 데이터 기술로 변함-->
		
		<h2>{{message1}}</h2>
		<h2 v-text="message2"></h2> <!-- 태그표시 있음 -->
		<h2 v-html="message3"></h2> <!-- h2 태그표시 없음 -->
		<h3 :align="prop1"> 안녕하세요, 가운데 정렬입니다 </h3> <!-- 이 부분을 정렬해 보자 -->
		<img alt="" :src="prop2">
		
		<!-- 
			1. html 문법 :: <h3 align="center"> 안녕하세요, 가운데 정렬입니다 </h3>
			2. v-bind 문법 :: 
								v-bind:align="prop1" 를
									  :align="prop1" 이렇게 사용한다.
		 -->
	</div>
</body>
</html>

Greet Message 의 input 칸 수정하면 윗 부분도 변경된다, 이것이 양방향 모델이다 :: v-model

'｜Playdata_study > JavaScript' 카테고리의 다른 글

210910_Vue.js(event : v-cloak, v-once) (0)	2021.09.10
210909_Vue.js(v-for, v-if, v-show) (0)	2021.09.09
210907_jQuery_Ajax (servlet, LocalStorage) (0)	2021.09.07
210906_jQuery (bind, hover, find, traversal, click, key) (0)	2021.09.06
210903_jQuery(기본 실행 및 Template, 함수) (0)	2021.09.03

HYERI_PLACE

210908_jQuery UI/Vue.js(Mustache, Directive, v-bind)

jQuery UI

Datepicker

Tabs

Accordion

Draggable & Droppable

vue.js

화면 구성과 Mustache Expression 문법

Directive Expression 문법

활용

v-bind :: 속성에 해당하는 값들을 모델로 연결하는 기법

'｜Playdata_study > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

210908_jQuery UI/Vue.js(Mustache, Directive, v-bind)

jQuery UI

Datepicker

Tabs

Accordion

Draggable & Droppable

vue.js

화면 구성과 Mustache Expression 문법

Directive Expression 문법

활용

v-bind :: 속성에 해당하는 값들을 모델로 연결하는 기법

'｜Playdata_study > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바