查看“Widget:CreateGallery/源代码”的源代码

<noinclude>用来输出画廊图片生成代码到id为“createGalleryBox”的div，作者[[User:AnnAngela]]。</noinclude><includeonly><!--{if !isset($wgCreateGallery) || !$wgCreateGallery}--><!--{assign var="wgCreateGallery" value=true scope="global"}-->
<div class="nomobile" id="createGalleryTitle">画廊代码生成框</div>
<div class="createGalleryBoxNoDesktop">移动版不适用画廊代码自动生成，请使用桌面版。</div><div class="nomobile" id="createGalleryError">创建画廊代码生成框失败，请刷新。</div><div class="nomobile" id="createGalleryBox"></div>
<script type="text/javascript">
(function($, mw) {
    if (!$('body.skin-vector')[0]) return console.debug('移动版不适用画廊代码自动生成');
    else if (typeof mw.config.values.createGallery == 'undefined') {
        mw.config.set('createGallery', 'on');
        $(function() {
            var _Content, _ContentLine, _ContentLinePic, _ContentLinePgN, _ContentLinePgT, _Output, _Self;
            $('.createGalleryBoxNoDesktop,#createGalleryError').hide();
            $('#createGalleryBox').show();
            $('#createGalleryBox').append('<div id="createGallery"/>');
            $('#createGallery').append('<div id="createGalleryContent"/><hr/><div id="createGalleryButton"/><hr/><div id="createGalleryOutput"/>');
            $('#createGalleryContent').before('<div>输入区：</div>').after('<div>如果一行中“图片名”和“页面名”有一个不是有效值则不输出该行！</div>').append('<div id="createGalleryContentMode"/><input id="createGalleryContentLine"/><ol/>').find('#createGalleryContentLine').attr('type', 'button').val('点击新增一行').bind('click', function() {
                _Content = $('#createGalleryContent ol').append('<li class="createGalleryContentLine"/>').find('.createGalleryContentLine:empty').append('<input class="createGalleryContentLine1"/><input class="createGalleryContentLine2"/><input class="createGalleryContentLine3"/>');
                _Content.find('.createGalleryContentLine1').attr({
                    'type': 'input',
                    'placeholder': '图片名（不带File:或Image:前缀）'
                });
                _Content.find('.createGalleryContentLine2').attr({
                    'type': 'input',
                    'placeholder': '页面名'
                });
                _Content.find('.createGalleryContentLine3').attr({
                    'type': 'input',
                    'placeholder': '链接标题（不填则使用页面名）'
                });
            });
            $('#createGalleryContentMode').append('<span>模　式：</span><input id="createGalleryMode"/>').find('#createGalleryMode').attr({
                'type': 'input',
                'placeholder': '默认为traditional'
            });
            $('#createGalleryButton').append('<span>操　作：</span><input id="createGalleryButton2Output"/><input id="createGalleryButton2Clear"/>');
            $('#createGalleryOutput').append('<div>输出区：</div><pre/>');
            $('#createGalleryButton2Output').attr('type', 'button').val('输出').bind('click', function() {
                _ContentMode = $('#createGalleryMode'), _ContentLine = $('#createGalleryContent .createGalleryContentLine'), _Output = $('#createGalleryOutput pre');
                switch (_ContentMode.val()) {
                    case 'traditional':
                    case 'nolines':
                    case 'packed':
                    case 'packed-overlay':
                    case 'packed-hover':
                        _Output.empty().append('&lt;gallery mode="' + _ContentMode.val() + '">');
                        break;
                    default:
                        _Output.empty().append('&lt;gallery mode="traditional">');
                }
                _ContentLine.each(function() {
                    _Self = $(this), _ContentLinePic = _Self.find('.createGalleryContentLine1').val(), _ContentLinePgN = _Self.find('.createGalleryContentLine2').val(), _ContentLinePgT = _Self.find('.createGalleryContentLine3').val();
                    if (!_ContentLinePic || !_ContentLinePgN || _ContentLinePic.toLowerCase().indexOf('file:') + _ContentLinePic.toLowerCase().indexOf('image:') != -2) return true;
                    else if (_ContentLinePgT) _Output.append('\nImage:' + _ContentLinePic + '|[[' + _ContentLinePgN + '|' + _ContentLinePgT + ']\]|link=' + _ContentLinePgN + '|alt=' + _ContentLinePgN);
                    else _Output.append('\nImage:' + _ContentLinePic + '|[[' + _ContentLinePgN + ']\]|link=' + _ContentLinePgN + '|alt=' + _ContentLinePgN);
                });
                _Output.append('\n&lt;/gallery>');
            });
            $('#createGalleryButton2Clear').attr('type', 'button').val('清空').bind('click', function() {
                $('#createGalleryContent ol,#createGalleryOutput pre').empty();
            });
        });
    }
})(jQuery, mediaWiki);
</script>
<style type="text/css">
#createGalleryBox,
.skin-vector #createGalleryBoxNoDesktop {
    display:none;
}

#createGalleryTitle {
    text-align:center;
    font-weight:bold;
}

#createGallery {
    margin: 1em;
    border: 1px solid #a7d7f9;
    padding: 1em;
}

#createGallery span {
    height: 22px;
}

#createGallery hr {
    margin: 1em;
}

#createGalleryContent {
    margin-bottom: 1em;
    border: 1px solid #a7d7f9;
    padding: 1em;
}

#createGalleryContentMode {
    margin-bottom: 1em;
}

#createGalleryContent ol input {
    width: 30%;
    margin-right: 1em;
}
</style>
<!--{/if}--></includeonly>