我的插件的WordPress内置对话框

时间:2015-07-01 作者:Varun Sridharan

我需要一个像媒体上传后编辑页面模式框。但在这方面,我只需要使用AJAX调用插入一个html表单。。

我试图获得输出,但我做不到,所以我尝试了ThickBox 我得到了如下所示的输出,但有两个问题。

我得到的型号:

Model I wanted

我需要一个基于选项卡的弹出窗口,如media upload[更新/媒体库]中的弹出窗口https://codex.wordpress.org/Javascript_Reference /ThickBox

Modal I Want Like : {不需要图像列表,但需要AJAX调用和带选项卡的html表单}

Modal i want

我输入的代码

<div id="my-content-id" style="display:none;"> <p> This is my hidden content! It will appear in ThickBox when the link is clicked. </p> </div>

我想用javascript控制我的模型,还需要该模型中的选项卡视图,如

温馨提示:我的插件在后期编辑页面工作wp-admin/post-new.php?post_type=page

1 个回复
SO网友:Domain

这可以使用前端开发人员的技能来完成。

我通过定制实现了以下目标。

enter image description here

enter image description here

通过以下代码:

<?php add_thickbox(); ?>
<div id="my-content-id" style="display:none;">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

<div id="tabs" style="">

  <ul>
    <li><a href="#tabs-1">Insert Edit/link</a></li>
    <li><a href="#tabs-2">My Second Tab</a></li>
  </ul>
  <div id="tabs-1">
     <p>
          This is my hidden content! It will appear in ThickBox when the link is clicked.
     </p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
</div>
</div>

<a title="<h2 style=\'padding:0.5em;\'>My Custom Popup<h2>" href="#TB_inline?width=600&height=550&inlineId=my-content-id" class="thickbox">View my inline content!</a>    
添加Css代码如下:

#tabs
{
height:100%;width:100%;border:none;padding:0 !important;

}

.ui-widget-header {
  border: none !important;
    background:none !important;
}

.ui-tabs .ui-tabs-nav li {
  }

  #TB_ajaxWindowTitle{
      color:red;
  }

  #TB_title{

      height: 4em !important;
  }
不是你想要的确切结构,但离它很近。

使用css和jquery可以获得与媒体盒等样式的精确匹配。

结束

相关推荐

是否可以使用MEDIA_SIDELOAD_IMAGE上传本地文件?

我想添加media_sideload_image 以编程方式上载文件。当图像URL联机时,我可以使用它(例如。http://etc...) 但当它是来自硬盘或网络驱动器的本地文件时(例如。file://etc).我得到错误Catchable fatal error: Object of class WP_Error could not be converted to string.这可能吗?我想一定有办法解决这个问题,因为Wordpress管理站点可以上传本地文件。