티스토리 뷰
이제 까지 배운것들을 아무런 가공없이 통합만 해볼것이다.
먼저 bxslider.class.php 은 순전히 스킨정보만 컴파일해서 리턴한다.
<?php
class bxslider extends WidgetHandler
{
function proc($args)
{
// Set a path of the template skin (values of skin, colorset settings)
$tpl_path = sprintf('%sskins/%s', $this->widget_path, $args->skin);
// Specify a template file
$tpl_file = 'bxslider';
// Compile a template
$oTemplate = &TemplateHandler::getInstance();
return $oTemplate->compile($tpl_path, $tpl_file);
}
}
/* End of file bxslider.class.php */
/* Location: ./widgets/bxslider/bxslider.class.php */
======================================================
아래 파일은 bxslider.html 파일이다.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<!--<link href="lib/jquery.bxslider.css" rel="stylesheet" />-->
<load target="lib/jquery.bxslider.css" />
<ul class="bxslider">
<li><img src="images/pic1.jpg" title="Funky roots"/></li>
<li><img src="images/pic2.jpg" title="Funky roots1"/></li>
<li><img src="images/pic3.jpg" title="Funky roots2"/></li>
</ul>
<script>
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
pause: 2000
});
</script>
단순히 적용만 시켜 보았다. 화면에서 보면 잘 나올것이다.
여기서 주의할 것은
<!--<link href="lib/jquery.bxslider.css" rel="stylesheet" />-->
<load target="lib/jquery.bxslider.css" />
이 부분이다.
그냥 html 에서는 css읽어 들일때 <link href="lib/jquery.bxslider.css" rel="stylesheet" /> 이렇게 써주면 읽히나 xe에서는 안된다. 때문에 xe에서는 <load target="lib/jquery.bxslider.css" /> 이런식으로 써줘야 한다.
반면 자바스크립트는 html과 xe에서 둘다 <script src="js/jquery.bxslider.min.js"></script> 이렇게 써도 잘 읽힌다.
'XE(XpressEngine) 강좌 > XE 위젯 제작 강좌' 카테고리의 다른 글
xe 위젯 개발 강좌 (5) - 위젯 확장변수를 이용한 bxslider xe 위젯 만들기 (0) | 2017.05.19 |
---|---|
xe 위젯 개발 강좌 (5) - counter 위젯을 사용하여 스킨 컬러셋 추가,사용하기 (0) | 2017.05.17 |
xe 위젯 개발 강좌 (3) - bxslider 를 이용한 위젯만들기 준비 (0) | 2017.05.16 |
xe 위젯 개발 강좌 (2) - 카운터 위젯을 뜯어보자 (0) | 2017.05.16 |
xe 위젯 개발 강좌 (1) - 위젯 동작 원리 개념 (0) | 2017.05.16 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- MySQL
- 자바
- JDBC
- ocjap
- 포인터
- XE3
- 이클립스
- 파싱
- 인포믹스
- 오라클
- ocajp
- php
- XE
- xe addon
- C언어
- C
- 자바 smtp
- proc
- 프로씨
- 자바 셀레니움
- xe애드온
- 파이썬
- webix
- 스크래핑
- 문자열
- KG
- esql
- EC
- Python
- ocpjp
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함