popup - 기본적인 예제

간단설명

플러그인 이름만 보면 무슨 팝업창을 뛰우기 위한 것 같지만
실제로는 <input type=text> 타입으로 셀렉트박스를
대신 할수 있는 것이다.
박스의 모양은 jquery.popup.css 를 수정함으로써 가능하다.
일반적인 형태와 트리형태 두가지를 사용할수 있다.
일반적인 형태일 경우에는 jquery.dimensions.js 만 추가로 필요하고
트리뷰 형태로 사용할 경우에는 jquery.treeview.js 와 jquery.cookie.js 가 더 필요하다

jQuery(function($){
      $("input.popup").popup('<a href="#" id="demo1">demo1Text</a><br /><a href="#" id="demo2">demo2Text</a>');
      $("input#TreeViewPopup").popup(' <ul class="treeview-popup"><li><a href="#" id="node_100">Europe</a><ul><li><a href="#" id="node_101">Norway</a><ul><li><a href="#" id="node_102">Rogaland</a><ul><li class="tree_sheet.gif"><a href="#" id="node_103">Stavanger</a></li><li class="tree_sheet.gif"><a href="#" id="node_104">Haugesund</a></li></ul></li><li class="tree_sheet.gif"><a href="#" id="node_105">Hordaland</a></li>            <li class="tree_sheet.gif"><a href="#" id="node_106">Oslo</a></li>          </ul>        </li>        <li><a href="#" id="node_107">United Kingdom</a>          <ul>            <li><a href="#" id="node_108">London</a></li>            <li><a href="#" id="node_109">Manchester</a></li>            <li><a href="#" id="node_110">Oxford</a></li>          </ul>        </li>        <li><a href="#" id="node_111">Sweden</a></li>        <li><a href="#" id="node_112">Denmark</a></li>        <li><a href="#" id="node_113">Germany</a></li>      </ul>    </li>    <li><a href="#" id="node_114">Asia</a></li>    <li><a href="#" id="node_115">Africa</a><ul><li><a href="#" id="node_116">Tanzania</a></li><li><a href="#" id="node_117">Kenya</a></li></ul></li><li><a href="#" id="node_118">America</a><ul><li class="tree_sheet.gif"><a href="#" id="node_119">Canada</a></li><li><a href="#" id="node_120">United States</a></li><li class="tree_sheet.gif"><a href="#" id="node_121">Mexico</a></li><li><a href="#" id="node_122">Argentina</a></li></ul></li></ul>');
      $(".treeview-popup").treeview({
        persist: "cookie",
        cookieId: "treeview-popup"
      });
    });