wordpress admin의 Jquery UI 대화 상자

wordpress admin의 Jquery UI 대화 상자

Wordpress 테마 관리 페이지에서 jQuery UI 대화 상자 스크립트를 사용하려고 합니다.UI 데모에서는 모든 것이 직선입니다만, 다이얼로그가 아무것도 표시되지 않고, 대신에 닫힘 본문 태그의 바로 앞에 있는 맨 아래 구석에 묻히는 다이얼로그 박스가 표시됩니다.

UI 대화 상자 스크립트는 (구글 API에서) jquery와 UI core에서처럼 소스 코드에 표시되므로 wp_enqueue_script와 함께 적절하게 큐잉됩니다.

jQuery(document).ready(function($) {
    $("#dialog").dialog();
}); //end onload stuff

그러면 옵션 페이지에 다음과 같은 내용이 표시됩니다.

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

갈 준비 다 됐어WP에는 이미 대화상자와 스타일이 있습니다.

사용 순서는 다음과 같습니다.

1. 대화상자를 작성하기 위한 jQuery를 작성합니다.대화상자를 작성하려면dialogClass의wp-dialog
2. 위의 파일을 큐에 넣습니다.init적절한 의존관계 사용(jquery-ui-dialog)
3. 적절한 WP 스타일을 큐잉합니다(wp-jquery-ui-dialog)

예를 들어 다음과 같습니다.

// custom.js
jQuery(function($) {
    var $info = $("#modal-content");
    $info.dialog({                   
        'dialogClass'   : 'wp-dialog',           
        'modal'         : true,
        'autoOpen'      : false, 
        'closeOnEscape' : true,      
        'buttons'       : {
            "Close": function() {
                $(this).dialog('close');
            }
        }
    });
    $("#open-modal").click(function(event) {
        event.preventDefault();
        $info.dialog('open');
    });
});    

PHP에서

add_action( 'admin_enqueue_scripts', 'queue_my_admin_scripts');

function queue_my_admin_scripts() {
    wp_enqueue_script (  'my-spiffy-miodal' ,       // handle
                        URL_TO_THE_JS_FILE  ,       // source
                        array('jquery-ui-dialog')); // dependencies
    // A style available in WP               
    wp_enqueue_style (  'wp-jquery-ui-dialog');
}

다음 코드를 사용하여 대화 상자를 표시하려고 했지만 스타일링이 적용되지 않았습니다.

add_action('init', 'myplugin_load');

function myplugin_load(){
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-dialog' );
}

사용하는 콜의 경우:

$("#dialog-view").dialog({
   height: 240,
   modal: true
});

(현재는 테스트를 할 수 있는 위치가 아니기 때문에) 차이가 있는지는 모르겠지만 jQuery UI 사이트의 코드를 그대로 사용해 보십시오.

$(function() {
   $("#dialog").dialog();
});

행운을 빌어요! ^^

언급URL : https://stackoverflow.com/questions/3196392/jquery-ui-dialog-in-wordpress-admin