2014-04-24 7 views
0

Chosen을 구현하기 위해 간단한 Codeigniter PHP 앱을 작성했습니다. 나는이 플랫폼에 아주 새로운 오전, 높은 명성을 가지고 있지 않기 때문에 나는 그것이 어떻게 생겼는지의 화면 캡처를 게시 할 수 없습니다,선택한 플러그인이 제대로 표시되지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="<?php echo base_url();?>js/jquery-1.11.0.min.js"></script> 
    <script src="<?php echo base_url();?>js/chosen.jquery.js"></script> 

    <script> 
     jQuery(document).ready(
      function() { 
       jQuery(".chosen").chosen(); 
      } 
     ); 
    </script> 
</head> 
<body> 
    <h2>Chosen Plugin Test</h2> 

    <select class="chosen" style="width: 200px; display: none;"> 
     <option>Choose...</option> 
     <option>jQuery</option> 
     <option selected="selected">MooTools</option> 
     <option>Prototype</option> 
     <option>Dojo Toolkit</option> 
    </select> 
    <select class="chosen" multiple="true" name="faculty"> 
     <option value="AC">A</option> 
     <option value="AD">B</option> 
     <option value="AM">C</option> 
     <option value="AP">D</option> 
    </select> 
</body> 
</html> 

: 여기 페이지입니다. 대신 설명해 드리겠습니다.

데모에서 볼 수있는 멋진 컨트롤과는 다른 것으로 보이는 선택 컨트롤을 얻었으며 같은 방식으로 동작하지 않습니다.

내가 뭘 잘못하고 있는지 물어봐도 될까요?

답변

2

당신은 JS 파일과 CSS 파일을 선택, 선정 작품의 CSS 파일을 포함하지 않았습니다. 그것을 위해 필요한

이러한 파일 : 단지 클래스 를 추가하는 데 필요한 select 태그에

<link href="/PulseBeta/css/chosen.css" rel="stylesheet" type="text/css"> 
    <link href="/PulseBeta/css/prism.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="/PulseBeta/js/chosen.jquery.js"></script> 
    <script type="text/javascript" src="/PulseBeta/js/prism.js"></script> 

은 "선택 - 선택"뿐만 아니라 당신이 누락되었습니다.

HTML :

<select class="chosen-select" id="SubDepartmentsDDL" name="SubDepartmentsDDL"> 

<option value="1">Hematology (2)</option> 

<option value="2">Clinical Chemistry (0)</option> 

<option value="3">Histopatholgy (0)</option> 

</select> 

초기화 스크립트 :

<script type="text/javascript"> 
     var config = { 
      '.chosen-select': {}, 
      '.chosen-select-deselect': { allow_single_deselect: true }, 
      '.chosen-select-no-single': { disable_search_threshold: 10 }, 
      '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }, 
      '.chosen-select-width': { width: "95%"}//, 
      //'.chosen-search': {disable_search: false} 
     } 
     for (var selector in config) { 
      $(selector).chosen(config[selector]); 
     } 
    </script> 

Tutorial Here at my Blog I made few months ago

+0

감사를 참조하십시오. 이 제안들은 효과가있었습니다! –

+0

도움이 된 것을 기쁘게 생각합니다. –

관련 문제