web-dev-qa-db-ja.com

クリックすると、画面オプションのチェックボックスと同様に、メタボックスのグループを隠す?

編集画面にいくつかのメタボックスがあります。

私はユーザーがチェックボックスをクリックすることができる別のメタボックスを作成するでしょう、そしてそれはチェックボックスがクリックされるときだけそれはメタボックスのグループを隠す/切り替えます。

誰もがこれに近づく方法を知っていますか?そうでない場合は、クリック時に表示される画面オプションメニューで使用されるコードは何ですか、メタボックスを非表示にします。 ?

ありがとう。

1
John

ボックスの切り替え部分は十分に簡単で、管理できますが、ボックスの状態を保存するのはより面倒です。残念ながらJSは私の強みの1つではないので、郵便受けにその状態を保存させることはできません。そうは言っても、私はボックスのグループをトグルし、それに応じてチェックボックスを調整する方法をあなたに示すことができます。あるいは、画面に戻っても、表示設定を切り替えたボックスのグループは、その状態を記憶していません。

トグルリンク用のHTML

<p>
    <a class="metabox-group" id="group-1" href="#">Group 1</a> | 
    <a class="metabox-group" id="group-2" href="#">Group 2</a>
    <span class="hidden" id="meta-group-1">commentstatusdiv,commentsdiv</span>
    <span class="hidden" id="meta-group-2">categorydiv,tagsdiv-post_tag</span>
</p>  

スパンはスパンである必要はありません。もちろん、入力を使用することも、カンマ区切りのボックスのリスト(それらのIDのリスト)を使用して保持することもできます。

切り替えのためのjQuery/JS

<script type="text/javascript">
    jQuery(document).ready(function($){

        // Attach a click function to links with the metabox-group class
        $('a.metabox-group').click(function(){

            // Find the element containing a list of elements to hide and split into array
            var box_group = $('#meta-'+this.id).text().split(',');

            // Ensure there's at least two items to toggle
            if( 2 > box_group.length )
                return false;

            // Loop over the pieces(the array of element IDs)
            $(box_group).each(function(){

                // Find and store the associated checkbox
                var toggle_checkbox = $('input#' + this + '-hide');

                // If the checkbox is currently unchecked
                if( !toggle_checkbox.is(':checked') ) {

                    // Show the metabox
                    $('#'+this).show();

                    //if ( $.isFunction( postboxes.pbshow ) )
                        //postboxes.pbshow( this );
                }
                // Else
                else {

                    // Hide the metabox
                    $('#'+this).hide();

                    //if ( $.isFunction( postboxes.pbhide ) )
                        //postboxes.pbhide( this );
                }
                // Toggle the checkbox 
                $(toggle_checkbox).attr('checked',!toggle_checkbox.is(':checked'));

            });

            //postboxes.save_state(page);

            return false;
        });
    });
</script>

そこに表示されている郵便番号のコードは機能しないのでコメントアウトされています(期待していたことです)。手助けする立場にある他の人は私が試したことを見ることができます..;)

すみません私は完全な答えを与えることができませんでした、しかし、私はそれがすべて同じように役立つことを願っています.. :)

1
t31os