WordPress.org

Make WordPress Core

Ticket #9657: screen-meta-sample-code.txt

File screen-meta-sample-code.txt, 2.8 KB (added by alexkingorg, 5 years ago)

Sample code for fully abstracting/filtering screen meta tabs and generic CSS and JS

Line 
1<?php
2
3$screen_meta = array(
4        array(
5                __('help'),
6                __('Help'),
7                'name_of_function'
8        ),
9        array(
10                __('screen-options'),
11                __('Screen Options'),
12                'name_of_function'
13        ),
14);
15
16function screen_meta_html($meta) {
17        extract($meta);
18        if (function_exists($content)) {
19                $content = $content();
20        }
21        echo '
22<div id="screen-meta-'.$key.'-wrap" class="screen-meta-wrap hidden">
23        <div class="screen-meta-content">'.$content.'</div>
24</div>
25<div id="screen-meta-'.$key.'-link-wrap" class="hide-if-no-js screen-meta-toggle added">
26<a href="#screen-meta-'.$key.'-wrap" id="screen-meta-'.$key.'-link" class="show-settings">'.$label.'</a>
27</div>
28        ';
29}
30
31function screen_meta_output() {
32        global $screen_meta;
33/*
34expected format:
35$screen_meta = array(
36        array(
37                'key' => 'drafts',
38                'label' => 'Drafts',
39                'content' => 'screen_meta_drafts_content' // can be content or function name
40        )
41);
42*/
43        $screen_meta = apply_filters('screen_meta', $screen_meta);
44        echo '<div id="screen-meta-extra-content">';
45        foreach ($screen_meta as $meta) {
46                screen_meta_html($meta);
47        }
48        echo '</div>';
49}
50
51?>
52
53
54<style type="text/css">
55.screen-meta-toggle {
56        float: right;
57        background: transparent url( <?php bloginfo('wpurl'); ?>/wp-admin/images/screen-options-left.gif ) no-repeat 0 0;
58        font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
59        height: 22px;
60        padding: 0;
61        margin: 0 6px 0 0;
62}
63.screen-meta-wrap h5 {
64        margin: 8px 0;
65        font-size: 13px;
66}
67.screen-meta-wrap {
68        border-style: none solid solid;
69        border-top: 0 none;
70        border-width: 0 1px 1px;
71        margin: 0 15px;
72        padding: 8px 12px 12px;
73        -moz-border-radius: 0 0 0 4px;
74        -webkit-border-bottom-left-radius: 4px;
75        -khtml-border-bottom-left-radius: 4px;
76        border-bottom-left-radius: 4px;
77}
78</style>
79<script type="text/javascript">
80jQuery(function($) {
81
82// These hacks not needed if adopted into core
83// move tabs into place
84        $('#screen-meta-extra-content .screen-meta-toggle.added').each(function() {
85                $('#screen-meta-links').append($(this));
86        });
87// Move content into place
88        $('#screen-meta-extra-content .screen-meta-wrap').each(function() {
89                $('#screen-meta-links').before($(this));
90        });
91// end hacks
92
93// simplified generic code to handle all screen meta tabs
94        $('#screen-meta-links a.show-settings').unbind().click(function() {
95                var link = $(this);
96                $(link.attr('href')).slideToggle('fast', function() {
97                        if (link.hasClass('screen-meta-shown')) {
98                                link.css({'backgroundImage':'url("images/screen-options-right.gif")'}).removeClass('screen-meta-shown');
99                                $('.screen-meta-toggle').css('visibility', 'visible');
100                        }
101                        else {
102                                $('.screen-meta-toggle').css('visibility', 'hidden');
103                                link.css({'backgroundImage':'url("images/screen-options-right-up.gif")'}).addClass('screen-meta-shown').parent().css('visibility', 'visible');
104                        }
105                });
106                return false;
107        });
108});
109</script>