यहाँ एक बहुत ही बुनियादी उदाहरण है ..
/*
Code assumes it will be in the theme functions.php file
Update the enqueue path if using it elsewhere
*/
add_action( 'add_meta_boxes_post', 'add_post_metabox' );
function add_post_metabox() {
wp_enqueue_script( 'mytabs', get_bloginfo( 'stylesheet_directory' ). '/mytabs.js', array( 'jquery-ui-tabs' ) );
add_meta_box( 'examplebox' , __('Example box'), 'my_example_metabox', 'post', 'side', 'core'/*,array()*/);
}
function my_example_metabox() {
?>
<div id="mytabs">
<ul class="category-tabs">
<li><a href="#frag1">Tab 1</a></li>
<li><a href="#frag2">Tab 2</a></li>
<li><a href="#frag3">Tab 3</a></li>
</ul>
<br class="clear" />
<div id="frag1">
<p>#1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="hidden" id="frag2">
<p>#2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="hidden" id="frag3">
<p>#3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<?php
}
Mytabs.js के लिए jQuery को एन्केयू में संदर्भित किया गया है।
jQuery(document).ready(function($) {
$("#mytabs .hidden").removeClass('hidden');
$("#mytabs").tabs();
});
टिप्पणियाँ:
- एक प्लगइन के अंदर उपयोग किया जाता है, स्ट्रिंग के
plugins_url( '/mytabs.js', __FILE__ )स्थान पर एन्क्यू को कॉल करना चाहिए get_bloginfo।
- प्रत्येक टैब के लिए एंकर लिंक उस सामग्री तत्व की आईडी से मेल खाना चाहिए, जिसे वह संदर्भित करता है, जैसे। frag1, frag2, आदि।
- एक छिपी हुई कक्षा को प्रत्येक सामग्री पर लागू किया जाता है DIV पहले के बाद वे पृष्ठ लोड पर छिपे हुए हैं (अन्यथा आप पृष्ठ में एक संक्षिप्त छलांग पर ध्यान देंगे), पृष्ठ लोड के बाद कक्षा को हटा दिया जाता है, अन्यथा वे छिपे रहेंगे।
- आप जिस प्रकार का प्रभाव डालना चाहते हैं
add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, उस पोस्ट को प्रतिबिंबित करने के लिए शीर्ष कार्रवाई को अद्यतन किया जाना चाहिए , जिसका मैंने postउदाहरण में उपयोग किया है।
- मौजूदा वर्डप्रेस सीएसएस का उपयोग करने के लिए आपको साइड में मेटाबॉक्स को प्रस्तुत करना होगा, जो टैब एलआई तत्वों को इनलाइन पर स्थित करता है (आप हमेशा लोड कर सकते हैं कि आप सीएसएस से निपटने के लिए खुद के स्टाइलशीट हैं)।
टैब स्क्रिप्ट को कॉन्फ़िगर करने के तरीके के बारे में अधिक जानकारी के लिए यहां देखें।
http://docs.jquery.com/UI/Tabs
उम्मीद है की वो मदद करदे..