측 면에 텍스트가 있는 이미지리스트입니다.

Options

HTML

		

			

				
				RemoteCall 
				

					상담원이 웹브라우저를 통해 고객의 디바이스에 접속하여 원격으로 장애를 진단하고 실시간 문제 해결하는 원격지원 솔루션입니다. 
					고객의 PC 화면을 공유하여 실시간으로 고객의 문제를 해결할 수 있는 원격지원/제어 제품으로, 고객은 접속페이지에서 원클릭만으로 쉽게 연결이 가능합니다.
 
					고객과의 원활한 커뮤니케이션을 위해, Instant Web-Based Chat, Video/Voice Chat, Whiteboard 등의 툴을 제공하는 RemoteCall은 고객지원,
					사내 컴퓨터 유지보수, 업무 공유를 위한 협업 등의 다양한 업무에 활용할 수 있습니다.
				
			
			

				
				RemoteHelp 
				

					대형 콜센터의 대규모 고객 상담지원 강화를 위한 원격지원 제품으로 RemoteCall의 기본 원격지원 기능에 대량의 고객지원 요청 콜과 다수의 상담원을 효율적으로 관리할 수 있도록 개발된 제품입니다.
					고객은 원격지원 서비스를 받기 위해 고객지원 센터로 전화할 필요없이 웹에서 원격지원을 요청할 수 있으며, 지원 가능한 상담원이 존재하지 않을 경우에는 예약시스템을 이용해 예약할 수 있습니다.
					상담원을 그룹화하여 관리 가능하며, 고객이 상담 요청 시 그룹 설정에 따라, 자동으로 콜이 분배됩니다. 분배된 콜은 지원 가능한 상담원이 자동 연결되어 상담이 시작됩니다.
				
			
			

				
				RemoteView 
				

					ASP는 IDC센터나 기업내 Server를 관리하는 전산 담당자, 국내.외 출장이 잦은 직장인, 이동이 많은 프리랜서나 재택 근무자, 가맹점 관리가 필요한 매니저에게 아주 유용한 제품입니다. 
					또한, Windows, Mac, Linux OS 뿐만 아니라, 모든 스마트폰 OS를 지원합니다. iPhone, iPad, Android phone, Windows Mobile phone계열의 모바일 기기로 다른 디바이스를 원격 제어할 수 있습니다.
					장애가 발생했을 때 원격으로 신속하게 문제를 파악하고 해결함으로써 출장 경비, 이동시간은 줄이면서 고객 만족도가 높은 RemoteView Server제품을 사용해보세요. 
				
			
		
	

CSS

		.lst-type-right { overflow: hidden; width: 705px; padding: 0 10px 10px; border: 1px solid #c2c2c2; }
		.lst-type-right:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }
		.lst-type-right li { 
		  overflow: hidden; clear: both; margin: 10px 0 0; color: #2d2c2d; font-family: '돋움', Dotum; font-size: 12px; line-height: 16px; list-style: none; 
		}
		.lst-type-right li .thumb-title { clear: both; margin-left: 10px; font-size: 15px; font-weight: bold; }
		.lst-type-right li img { float: left; width: 90px; height: 90px; display: inline; }
		.lst-type-right li .more { margin-left: 100px; margin-top: 5px; }
	

Javascript

	/** =======================================================
	 * RFC readmore Plugin
	 * 
	 * @Author Choi Jae Hee
	 * @Copyright © 2012 RSUPPORT. CO, LTD. All rights Reserved.
	 * 
	 * @Required jQuery
	 * ======================================================== */
	;(function($) {
		$.fn.readmore = function(options) {
			console.log('readmore', arguments);
		  var opts = $.extend({}, $.fn.readmore.defaults, options);
		 		  	 
		  return this.each(function() {		  			  	
		    var $this = $(this)
		      , content = $this.html();
		      
		    if (content.length > opts.showChar) {
		      var c = content.substr(0, opts.showChar)
		        , h = content.substr(opts.showChar , content.length - opts.showChar)
		        , html = c + '' + opts.ellipsesText + '' +
		      		h + '  ' + opts.moreText + '';
		      $this.html(html);
		      $(".morecontent span").hide();
		    }
		    
		    $('.morelink').live('click', function() {
			    var $this = $(this);
			    if ($this.hasClass('less')) {
			      $this.removeClass('less');
			      $this.html(opts.moreText);
			    } else {
			      $this.addClass('less');
			      $this.html(opts.lessText);
			    }
			    $this.parent().prev().toggle();
			    $this.prev().toggle();
			    return false;
			  });
		  });
		}
		
		// Default Options
		$.fn.readmore.defaults = {
			showChar: 300,
			ellipsesText: '...',
			moreText: 'read more',
			lessText: 'less'
		};
		
		$('.more').readmore();
	})(jQuery);
	

플러그인 사용법 : $('DOM').readmore();

History

• more & less 기능 추가 및 마크업 수정. [최재희 | 2012.05.08]