xe 위젯 개발 강좌 (4) - bxslider 를 이용한 위젯만들기

이제 까지 배운것들을 아무런 가공없이 통합만 해볼것이다.

먼저 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> 이렇게 써도 잘 읽힌다.