본문 바로가기

분류 전체보기216

onClick 시 다른 요소 Toggle 시키기 class ToggleMenu extends React.Component { constructor(props) { super(props); this.state = { visible: false }; this.toggleMenu = this.toggleMenu.bind(this); } toggleMenu() { this.setState({visible: !this.state.visible}) } render() { return ( Show Right Menu! {this.state.visible && First Page Second Page Third Page } ); } } ​ 2020. 4. 10.
this.toggle 여러개 작동하게 코딩하기 class ModalExample extends React.Component { constructor(props) { super(props); this.state = { modal: true, tooltipOpen: false }; this.toggleModal = this.toggleModal.bind(this); this.toggleTooltip = this.toggleTooltip.bind(this); } toggleModal() { this.setState({ modal: !this.state.modal }); } toggleTooltip() { this.setState({ tooltipOpen: !this.state.tooltipOpen }); } ... } ​ 2020. 4. 10.
scss에서 img 경로 설정 scss의 경로 : source/src/assets/components/bootstrab4/_modal.scss img의 경로 : source/node_modules/utils/images/icon/pop-close.png background: url(../../utils/images/icon/pop-close.png) no-repeat; scss에서 위처럼 썼더니 src 밖의 경로를 잡았다고 에러뜸. 아래처럼 수정하니 잘 나옴! background: url(./utils/images/icon/pop-close.png) no-repeat; background: url(~assets/utils/images/icon/pop-close.png) no-repeat; 2020. 4. 10.
체크박스 체크 했을 때 이벤트 checked $("#Checked").on("click", function(){ if ($(this).is(':checked') == true){ $("#basic_companyId").hide(); $("#a_companyId").show(); }else{ $("#basic_companyId").show(); $("#a_companyId").hide(); } }); 2020. 4. 10.
[bxslider.js] nodata 일 때 maxslide 1 if($(".mainMenu .slider li").length > 0){ $(".mainMenu .slider").bxSlider({ auto: false, pager: true, controls: false, minSlides: 1, maxSlides: 3, moveSlides: 1, slideWidth: 376, slideMargin: 36, infiniteLoop: false, shrinkItems: true, touchEnabled : (navigator.maxTouchPoints > 0) }); }else { $(".mainMenu .slider").bxSlider({ auto: false, pager: true, controls: false, minSlides: 1, maxSlides: 1,.. 2020. 4. 10.
mouseleave resize 실행 될 때 $("#header").on("mouseleave focusout", function() { $("#header").find(".nav").addClass("over"); $(".open_menu").show(); }); $("#header").on("mouseleave focusout", function() { if(document.body.clientWidth > 1400){ $("#header").find(".nav").addClass("over"); $(".open_menu").show(); } }); https://stackoverflow.com/questions/38563018/mouseover-function-and-mouseleave-function-keeps-working-when-res.. 2020. 4. 10.
[bxslider.js] thumbnail controls 호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 제주신라호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 제주신라호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 호텔누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출 $(document).ready(function(){ var realSlider= $(".fac_slider .slide-wrap .bxslider").bxSlider({ auto: false, pager:false, infinite.. 2020. 4. 10.
[swiper.js] 마우스 드래그 방지, 반응형 설정 var blogContents = new Swiper('.blog-contents-wrap', { allowTouchMove: true, breakpointsInverse: true, breakpoints: { 1023: { allowTouchMove: false } } }); 2020. 4. 10.
글자수 일정 이상일 때 Tooltip 표시 $(".set-tab a").on("mouseenter",function(){ var txCon = $(this).find("i").text(); var txLength = $(this).find("i").text().length; if(txLength > 7){ $(".tb-r").remove(); $(this).append(''+txCon+''); $(".tb-r").stop().fadeIn(400); } }).on("mouseleave",function(){ $(".tb-r").stop().fadeOut(400); }); ​ 아래는 부모의 overflow:hidden; 때문에 안보일 때 fixed $(".gantt-aside-item").find('.tx-row2').on("mouseenter", .. 2020. 4. 10.

티스토리툴바