选项卡

注意:文章自定义字段和设置页面都支持选项卡样式,但是分类字段由于代码结构限制没法实现。效果图如下。tabs

文章自定义字段

文章自定义字段的选项卡样式如上图,需要说明的是,选项卡中每一项目前就一个字段。例如,上图中Tinymce Input项目中,仅有一个编辑器没有其它字段了。

实现方法非常简单,正常情况下,如果您使用本站框架,并且使用如下一段配置代码,那么你将在文章编辑页面得到一个很普通的自定义面板,里面含有3个自定义字段,效果图如下。(注意:下面的示例代码,在框架的范例中已经存在)

  1. /***tab**/
  2. $tab_meta = array();
  3. $tab_conf = array(
  4.   'title' => 'Tab Title',
  5.   'id'=>'tabbox',
  6.   'page'=>array('page','post'),
  7.   'context'=>'normal',
  8.   'priority'=>'low',
  9.   'callback'=>''
  10. );
  11. $tab_meta[] = array(
  12.   'name' => 'Texearea Input',
  13.   'id'   => '_tab_textarea',
  14.   'desc' => 'description or notice',
  15.   'std'  => 'Default content',
  16.   'size' => array(60,5),
  17.   'type' => 'textarea'
  18. );
  19. $tab_meta[] = array(
  20.   'name'  => 'Tinymce Input',
  21.   'id'    => '_tab_tinymce',
  22.   'desc'  => 'Pleas add some content',
  23.   'std'   => 'Hello, world.',
  24.   'media' => 1,
  25.   'type'  => 'tinymce'
  26. );
  27. $tab_meta[] = array(
  28.   'name' => 'Image gallery',
  29.   'id'   => '_tab_gallery',
  30.   'desc' => 'Pleas upload images',
  31.   'std'  => '',
  32.   'button_text' => 'Add',
  33.   'size' => 40,
  34.   'type' => 'gallery'
  35. );
  36. $tab_box = new ashu_meta_box($tab_meta$tab_conf);

普通效果tab_normal

改变

要想使上面的的自定义面板中的三个字段显示为选项卡样式非常简单,只需要往自定义面板中的配置变量(范例中的$tab_conf)中添加一个'tab'=>true即可。

  1. //在范例代码中$tab_conf变量中添加一个'tab'=>true即可。如下
  2. $tab_conf = array(
  3.   'title' => 'Tab Title',
  4.   'id'=>'tabbox',
  5.   'page'=>array('page','post'),
  6.   'context'=>'normal',
  7.   'priority'=>'low',
  8.   'callback'=>'',
  9.   'tab'=>true
  10. );

设置页面

设置页面添加选项卡样式,我们也以具体实例说明。(注意:下面的示例代码,在框架的示例代码中已经存在)。

在3.0之前的版本,我们添加设置页面的配置代码如下:

  1. /*********Other top page************/
  2. $tab_info = array(
  3.   'full_name' => 'Top page',
  4.   'optionname'=>'toppage',
  5.   'child'=>false,
  6.   'filename' => 'toppage_slug',
  7.   'tab'=>true
  8. );
  9. $tab_option = array();
  10. $tab_option[] = array(
  11.   'name' => 'Tab1',
  12.   'id'   => 'option_tab1',
  13.   'type' => 'open'
  14. );
  15. $tab_option[] = array(
  16.   'name' => 'Test input in tab1',
  17.   'id'   => '_tab1_text',
  18.   'desc' => '',
  19.   'std'  => 'hello word',
  20.   'size' => 40,
  21.   'type' => 'text'
  22. );
  23. $tab_option[] = array(
  24.   'name' => 'Textarea in tab1',
  25.   'id'   => '_tab1_textarea',
  26.   'desc' => '',
  27.   'std'  => 'hello word',
  28.   'size' => 40,
  29.   'type' => 'textarea'
  30. );
  31. $tab_option[] = array(
  32.   'name' => 'Image Upload in tab2',
  33.   'id'   => '_tab2_upload',
  34.   'desc' => 'Pleas upload a image, Or fill the blank with image url',
  35.   'std'  => '',
  36.   'size' => 40,
  37.   'button_text' => 'Upload',
  38.   'type' => 'upload'
  39. );
  40. $tab_option[] = array(
  41.   'name' => 'Gallery in tab2',
  42.   'id'   => '_tab2_gallery',
  43.   'desc' => 'Pleas upload a images',
  44.   'std'  => '',
  45.   'size' => 40,
  46.   'button_text' => 'Upload',
  47.   'type' => 'gallery'
  48. );
  49. $tab_option[] = array(
  50.   'name'  => 'Tinymce Input in tab3',
  51.   'id'    => '_tab3_tinymce',
  52.   'desc'  => 'Pleas add some content',
  53.   'std'   => 'Hello, world.',
  54.   'media' => 1,
  55.   'type'  => 'tinymce'
  56. );
  57. $tab_option[] = array(
  58.   'type' => 'close',
  59.   'name' => ''
  60. );
  61. $tab_page = new ashu_option_class($tab_option$tab_info);

然后再后台将得到一个普通的设置页面。normal_options

范例配置代码解析:上面的配置代码的结构如下。关于如何添加设置页面,也可参考资料中的“配置文件”这一项。

每个页面的选项配置都是以一组'type'=>'open'开头,'type'=>'close'结束,其中一个页面可以有多组。也许你已经猜到,在3.0以后的版本中,选项卡样式的实现就是以此为基础,每一组会出现在同一项中。

  1. //首先一个页面配置变量$tab_info配置页面的标题,选项名称等基本参数。
  2. $tab_info = array( 'full_name' => 'Top page', 'optionname'=>'toppage', 'child'=>false, 'filename' => 'toppage_slug', 'tab'=>true );
  3. //接着是具体选项的配置变量$tab_option
  4. $tab_option = array();
  5. //先以一个 'type'=>'open' 开始
  6. $tab_option[] = array(
  7.   'name' => 'Tab1',
  8.   'id'   => 'option_tab1',
  9.   'type' => 'open'
  10. );
  11. //中间配置了5个选项
  12. $tab_option[] = array(...);
  13. /***省略...***/
  14. //以一个 'type'=>'close' 结束
  15. $tab_option[] = array(
  16.   'type' => 'close',
  17.   'name' => ''
  18. );
  19. $tab_page = new ashu_option_class($tab_option$tab_info);

改变
首先,我们需要用’type'=>'open'开头,'type'=>'close'结尾将我们的选项分成3组,注意 'type'=>'open'中id参数为必须,而'type'=>'close'中id参数没卵用。

然后,在页面配置参数中(范例中的$tab_info)加上'tab'=>true,和自定义字段一样。
代码如下:

  1. /*********Other top page************/
  2. $tab_info = array(
  3.   'full_name' => 'Top page',
  4.   'optionname'=>'toppage',
  5.   'child'=>false,
  6.   'filename' => 'toppage_slug',
  7.   'tab'=>true  //注意加上'tab'=>true
  8. );
  9. $tab_option = array();
  10. /*tab1*/
  11. $tab_option[] = array(
  12.   'name' => 'Tab1',
  13.   'id'   => 'option_tab1',
  14.   'type' => 'open'
  15. );
  16. $tab_option[] = array(
  17.   'name' => 'Test input in tab1',
  18.   'id'   => '_tab1_text',
  19.   'desc' => '',
  20.   'std'  => 'hello word',
  21.   'size' => 40,
  22.   'type' => 'text'
  23. );
  24. $tab_option[] = array(
  25.   'name' => 'Textarea in tab1',
  26.   'id'   => '_tab1_textarea',
  27.   'desc' => '',
  28.   'std'  => 'hello word',
  29.   'size' => 40,
  30.   'type' => 'textarea'
  31. );
  32. $tab_option[] = array(
  33.   'type' => 'close',
  34.   'name' => 'hello world.'
  35. );
  36. /*tab2*/
  37. $tab_option[] = array(
  38.   'name' => 'Tab2',
  39.   'id'   => 'option_tab2',
  40.   'type' => 'open'
  41. );
  42. $tab_option[] = array(
  43.   'name' => 'Image Upload in tab2',
  44.   'id'   => '_tab2_upload',
  45.   'desc' => 'Pleas upload a image, Or fill the blank with image url',
  46.   'std'  => '',
  47.   'size' => 40,
  48.   'button_text' => 'Upload',
  49.   'type' => 'upload'
  50. );
  51. $tab_option[] = array(
  52.   'name' => 'Gallery in tab2',
  53.   'id'   => '_tab2_gallery',
  54.   'desc' => 'Pleas upload a images',
  55.   'std'  => '',
  56.   'size' => 40,
  57.   'button_text' => 'Upload',
  58.   'type' => 'gallery'
  59. );
  60. $tab_option[] = array(
  61.   'type' => 'close',
  62.   'name' => ''
  63. );
  64. /*tab3*/
  65. $tab_option[] = array(
  66.   'name' => 'Tab3',
  67.   'id'   => 'option_tab3',
  68.   'type' => 'open'
  69. );
  70. $tab_option[] = array(
  71.   'name'  => 'Tinymce Input in tab3',
  72.   'id'    => '_tab3_tinymce',
  73.   'desc'  => 'Pleas add some content',
  74.   'std'   => 'Hello, world.',
  75.   'media' => 1,
  76.   'type'  => 'tinymce'
  77. );
  78. $tab_option[] = array(
  79.   'type' => 'close',
  80.   'name' => ''
  81. );
  82. $tab_page = new ashu_option_class($tab_option$tab_info);

选项卡效果:
tab_option