你在这里

分享 - 利用D7自带的jquery_ui制作当页弹出式webform

主标签

最终效果:

过程:

1. 创建一个webform表单,在表单设置 Form settings 中的Advanced settings选项卡中勾选Available as block选项;

2. 在block管理中,找到这个webform的区块,并启用此区块至自定义的region中,比如这里建立了1个名为popup的region;

3. 接下来需要在当页调用需要用到的jquery ui和输出popup。首先建立page--[内容类型,这里用article].tpl.php,调出需要的jquery ui:
<code>
<?php drupal_add_library('system', 'ui.position'); ?>
<?php drupal_add_library('system', 'ui.resizable'); ?>
<?php drupal_add_library('system', 'ui.dialog'); ?>
</code>

4. 然后输出自定义的region:
<code>
<div id="dialog">
<?php print render($page['popup']); ?>
</div>
</code>

5. 最后,再在页面里制作触发按钮:
<code>

<div id="btn-take-photos" class="center">

<button id="opener" name="nid">申请获取照片</button>

</div>
 

<script>
$(function() {
    
    $( "#dialog" ).dialog({
        width: 460,
        autoOpen: false,
        resizable: false,
        draggable: true,
        modal: true
    });
    
    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });
});
</script>
</code>

Ok,这样就完成了。这么做的好处可以避免安装类似colorbox之类比较大的模块插件,而且很简洁,自定义很方便,看下jquery ui的在线文档即可。

标签: 

猜你喜欢

直接在.tpl.php文件里使用drupal_add_library()貌似不是个好主义,应该在THEME_preprocess_page加。还有

<?php
 
print render($page['popup']);
?>
也是

为什么一定要写在_preprocess_page中呢?只是当页调所需的library。

还有print render($page[&#39;popup&#39;]) 这些都是page中的默认输出region的方式啊。

好文!