문답/제안/버그


스마툴즈 빌더에 대한 질문이나 제안사항, 또는 버그신고를 위한 게시판입니다.

질문드롭다운 등 작동되지 않을 때

작성자: 가얌이님    작성일시: 작성일2017-10-16 19:48:29    조회: 3,019회    댓글: 0

다음과 같은 드롭다운이라든지

컬러픽커와 같은 메뉴가 작동되지 않는 듯합니다.

순정 그누에서는 작동되지만.

어떻게 수정해야 할까요?

 

=드롭다운 샘플 php =

<head>
  <title>dropselect jQuery plugin - Bootstrap v3 Example Page</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <style>
    body {
      padding-top: 70px;
    }
    div.test > div{
  margin: 20px;
    }
    div.test > .jumbotron{
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
    }
 div.test {
  padding-bottom:50px;
 } 
 #display{
  color: #ff0000;
 }
 hr {
  padding-bottom:20px;
 } 
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery.dropselect.js"></script>
</head>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">dropselect jQuery plugin - Bootstrap v3 Example Page</a>
    </div>
  </div>
</nav>

<div class="container test">
            <div class="jumbotron">
                <p style="font-size:18px;">dropselect jQuery plugin</p>
                <p style="font-size:16px;">jQuery plugin to make Bootstrap dropdown to "behave like" html select element</p>
            </div>

   <!-- Example dropdown Bootstrap v3 html -->
            <div id="fruit-select" class="dropdown dropselect">
                <input type="hidden" name="fruit" value="">
                Fruit: (dropdown example)<br /> 
                <button class="btn btn-default dropdown-toggle" type="button" id="fruit" data-toggle="dropdown" aria-expanded="true">
                    <span class="dropdown-label">Dropdown</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="option-post-cleanup">
                    <li role="presentation"><a data-value="orange" data-selected="selected" role="menuitem" tabindex="-1">Orange</a></li>
                    <li role="presentation"><a data-value="pear" role="menuitem" tabindex="-1">Pear</a></li>
                    <li role="presentation"><a data-value="apple" role="menuitem" tabindex="-1">Apple</a></li>
                    <li role="presentation"><a data-value="" role="menuitem" tabindex="-1">None</a></li>
                </ul>
            </div>                                   
   <!-- Example dropdown Bootstrap v3 html -->
   
            <!-- Example of manually selecting -->
   <div>
            <button class="btn btn-default" type="button" onclick="$('#fruit-select').dropselect('select','pear');"> Manually select "pear" using javascript </button>
            </div>           
   
            <!-- red information line displayed here -->
   <div id="display">
            </div>
   <hr>
      
   <!-- Example dropup Bootstrap v3 html  -->
            <div id="vegetable-select" class="dropup dropselect">
                <input type="hidden" name="vegetable" value="">
                Vegetable: (dropup example)<br /> 
                <button class="btn btn-default dropdown-toggle" type="button" id="vegetable" data-toggle="dropdown" aria-expanded="true">
                    <span class="dropdown-label">Dropdown</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="option-post-cleanup">
                    <li role="presentation"><a data-value="broccoli" data-selected="selected" role="menuitem" tabindex="-1">Broccoli</a></li>
                    <li role="presentation"><a data-value="spinach" role="menuitem" tabindex="-1">Spinach</a></li>
                    <li role="presentation"><a data-value="cabbage" role="menuitem" tabindex="-1">Cabbage</a></li>
                    <li role="presentation"><a data-value="" role="menuitem" tabindex="-1">None</a></li>
                </ul>
            </div>                                   
   <!-- Example dropup Bootstrap v3 html  -->
   
</div>

<!-- Example dropselect javascript -->
<script>   
    function display_fruit(){
  //get current value of select
        var value=$('#fruit-select').dropselect('value');
  //display red information line
        $("#display").html('<br><p>"'+value+'" selected. This will post a hidden input named "fruit" and a value of "'+value+'" if wrapped by a form element.</p>');
    }
   
    $(document).ready(function () {
        //make Bootstrap dropdown to behave like select
  //this is enough for most people! When user selects an option, a hidden input named "fruit" with the selected value is created.
        $('.dropselect').dropselect();
  
    //set onchange event handler to display red information line
    $('#fruit-select').on('change', display_fruit);     
 }); 
</script>

 

== js 파일 ==

;(function($, window, document, undefined) {
 
    $.fn.dropselect = function(method, param) {
        switch (method){
           
            // Concstructor: Example: $('.dropselect').dropselect();
            case undefined:
            case '':
                this.filter( ".dropdown, .dropup" ).each(function() {
                    // element a
                    $(this).find('.dropdown-menu a').attr('href','').addClass('dropselect-option').css('cursor','pointer');
                    $(this).find('.dropdown-menu a[data-selected="selected"]').each(function() {
                        // Set label from initial selected element
                        $(this).parents('.dropdown, .dropup').find('button[data-toggle="dropdown"] .dropdown-label').html( $(this).text() );
                        // Set hidden input value from initial selected element
                        $(this).parents('.dropdown, .dropup').find('input[type="hidden"]').val( $(this).attr('data-value') );
                    });
                    //Click event function
                    $(this).find('.dropdown-menu a').on('click',function(event){
                        // Focus selected dropdown
                        $(this).parents('.dropdown, .dropup').find('button[data-toggle="dropdown"]').focus();
                        // Update label from selected element
                        $(this).parents('.dropdown, .dropup').find('button[data-toggle="dropdown"] .dropdown-label').html( $(this).text() );
                        // Update hidden input value from selected element
                        $(this).parents('.dropdown, .dropup').find('input[type="hidden"]').val( $(this).attr('data-value') );
                        //Decide to call onchange handler later
                        var trigger_change=( 'selected'==$(this).attr('data-selected') ) ? false : true;
                        // Unselect all
                        $(this).parents('.dropdown, .dropup').find('a').removeAttr('data-selected');
                        // Select current
                        $(this).attr('data-selected','selected');
                        //Manually trigger change event
                        if (trigger_change)
                            $(this).trigger('change');
                        //Prevent default click event
                        event.preventDefault();
                    });                           
                });
                return this;
           
            // Manually select by value. Example: $('.dropselect').dropselect('select','anyval');
            case 'select':
                //Decide to call onchange handler later
                var trigger_change=( 'selected'==$(this).filter('.dropdown, .dropup').find('.dropdown-menu a[data-value="'+param+'"]').attr('data-selected') ) ? false : true;
                // Unselect all
                $(this).filter('.dropdown, .dropup').find('.dropdown-menu a').removeAttr('data-selected');
                // Select current
                $(this).filter('.dropdown, .dropup').find('.dropdown-menu a[data-value="'+param+'"]').attr('data-selected','selected');
                // Update label from selected element
                $(this).filter('.dropdown, .dropup').find('button[data-toggle="dropdown"] .dropdown-label').html( $(this).filter('.dropdown, .dropup').find('.dropdown-menu a[data-selected="selected"]').text() );
                // Update hidden input value from selected element
                $(this).filter('.dropdown, .dropup').find('input[type="hidden"]').val( $(this).filter('.dropdown, .dropup').find('.dropdown-menu a[data-selected="selected"]').attr('data-value') );
                //Manually trigger change event
                if (trigger_change)
                    $(this).filter('.dropdown, .dropup').find('.dropdown-menu a').trigger('change');
                return this;
                break;
           
            // Get selected option value. Example: var anyvalue=$('#mydropselect').dropselect('value');
            case 'value':
                return $(this).filter('.dropdown, .dropup').find('a.dropselect-option[data-selected="selected"]').attr('data-value');
               
        }//switch
       
    };//function
 
})(jQuery, window, document);

 

두 파일을 첨부 파일로 올렸습니다. 

 

댓글목록

등록된 댓글이 없습니다.