Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Вопросы к администрации » Уменьшаем объем страницы, сокращаем форму:


Уменьшаем объем страницы, сокращаем форму:

Сообщений 1 страница 3 из 3

1

Максим!
Есть возможность сокращения объема каждой страницы топика,(Помимо идеи подгрузки скриптов и стилей от сервиса из кеша клиента Ссылка)


Тут кешируем статический контент скриптом,
в дальнейшем можно закешировать в Localstorage на клиенте

Текущий Вид формы:

<form id="post" class="container" method="post" action="/post.php?tid=34135" onsubmit="this.submit.disabled=true;if(process_form(this)){return true;}else{this.submit.disabled=false;return false;}">
    <fieldset>
        <legend><span>Напишите ваше сообщение и нажмите отправить</span></legend>
        <div class="fs-box hashelp">
        <div id="formkey"></div>
        <div id="formetc" style="display:none"></div>
        <input type="hidden" name="form_sent" value="1" />
        <input type="hidden" name="form_user" value="Deff" />
        <div id="form-buttons"></div>
        <script type="text/javascript">
        html = '<table cellspacing="0" cellpadding="0"><tr>';
        $.each(FORUM.get('editor'), function(key,value){
            if (key != 'settings'){
            html += '<td id="button-'+key+'" title="'+value.name+'"><img onclick="FORUM.get(\'editor.'+key+'.onclick()\')" src="/i/blank.gif" /></td>';
            }
        });
        html += '</tr></table>';
        $('#form-buttons').append(html);
        </script>
        <div class="container" id="font-area" style="display:none" onclick="changeVisibility('font-area')"></div>
        <script type="text/javascript">
        html = '';
        $.each(FORUM.get('editor.font.fonts'), function(key,value){
            html += '<div style="font-family:'+value+'"><span>'+value+'</span><img onclick="bbcode(\'[font=+value+]\',\'[/font]\')" src="/i/blank.gif" /></div>';
        });
        $('#font-area').append(html);
        </script>
        <div class="container" id="size-area" style="display:none" onclick="changeVisibility('size-area')"></div>
        <script type="text/javascript">
        html = '';
        $.each(FORUM.get('editor.size.sizes'), function(key,value){
            html += '<div style="font-size:'+value+FORUM.get('editor.size.unit')+'"><span>'+value+FORUM.get('editor.size.unit')+'</span><img onclick="bbcode(\'[size=+value+]\',\'[/size]\')" src="/i/blank.gif" /></div>';
        });
        $('#size-area').append(html);
        </script>
        <div class="container" id="color-area" style="display:none" onclick="changeVisibility('color-area')"></div>
        <script type="text/javascript">
        html = '<table cellspacing="0" cellpadding="0"><tr>';
        $.each(FORUM.get('editor.color.colors'), function(key,value){
            html += '<td style="background-color:'+value+'"><img onclick="bbcode(\'[color=+value+]\',\'[/color]\')" src="/i/blank.gif" /></td>';
        });
        html += '</tr></table>';
        $('#color-area').append(html);
        </script>
        <div class="container" id="table-area" style="display:none"></div>
        <script type="text/javascript">
        html = '<table cellspacing="0" cellpadding="0">';
        for (r=1; r<=FORUM.get('editor.table.rows'); r++){
            html += '<tr>';
            for (c=1; c<=FORUM.get('editor.table.cols'); c++){
            html += '<td><img onclick="tag_table('+c+','+r+'); changeVisibility(\'table-area\')" src="/i/blank.gif" alt="'+c+'x'+r+'" title="'+c+'x'+r+'" /></td>';
            }
            html += '</tr>';
        }
        html += '</table>';
        html += '<div><p><input id="table-layout" type="checkbox"'+(FORUM.get('editor.table.layout') == 'auto' ? '' : ' checked="checked"')+' onclick="FORUM.set(\'editor.table.layout\', ($(this).is(\':checked\') ? \'fixed\' : \'auto\'));" /><label for="table-layout">Ячейки одной ширины</label></p></div>';
        $('#table-area').append(html);
        $('#table-area td').hover(function() {
            for (var x = 0; x <= $(this).index(); x++) {
            for (var y = 0; y <= $(this).parent().index(); y++) {
                $(this).parent().parent().children().eq(y).children().eq(x).addClass('selected');
            }
            }
        }, function() {
            $('#table-area td').removeClass('selected');
        });
        </script>
        <div class="container" id="smilies-area" style="display:none" onclick="changeVisibility('smilies-area')">
            <div id="smilies-block"></div>
        </div>
        <script type="text/javascript">
        FORUM.set('editor.smile.dir', 'img/smilies/MyBB/light');
        FORUM.set('editor.smile.smilies', {":angry:":"angry.gif","o.O":"blink.gif",":blush:":"blush.gif",":canthearyou:":"canthearyou.gif",":confused:":"confused.gif",":cool:":"cool.gif",":crazyfun:":"crazyfun.gif",":crazy:":"crazy.gif",":'(":"cry.gif",":disappointed:":"disappointed.gif",":dontcare:":"dontcare.gif",":dontknow:":"dontknow.gif",":flag:":"flag.gif",":flirt:":"flirt.gif","8-)":"funny.gif",":glasses:":"glasses.gif","^^":"happy.gif",":hobo:":"hobo.gif",":huh:":"huh.gif",":idea:":"idea.gif",":insane:":"insane.gif",":jumping:":"jumping.gif",":D":"lol.gif",":love:":"love.gif",":mad:":"mad.gif",":music:":"music.gif",":mybb:":"mybb.gif",":|":"neutral.gif",":no:":"no.gif",":nope:":"nope.gif",":offtop:":"offtop.gif",":playful:":"playful.gif",":question:":"question.gif",":rain:":"rain.gif",":rofl:":"rofl.gif",":rolleyes:":"rolleyes.gif",":(":"sad.gif",":sceptic:":"sceptic.gif",":shine:":"shine.gif",":O":"shock.gif",":x":"sick.gif",":)":"smile.gif",":smoke:":"smoke.gif",":stupor:":"stupor.gif",":surprise:":"surprise.gif",":suspicious:":"suspicious.gif",":tired:":"tired.gif",":tomato:":"tomato.gif",":P":"tongue.gif",":unsure:":"unsure.gif","%-)":"wacko.gif",":whistle:":"whistle.gif",";)":"wink.gif",":writing:":"writing.gif",":yep:":"yep.gif"});
        </script>
        <div class="container" id="image-area" style="display:none">
            <div id="image-area-sels" style="display:block">
            <div><strong>Выберите источник изображения</strong></div>
            <div id="image-source-list">
                <a id="action-computer" class="turn_link">С компьютера</a>
                <a id="action-internet" class="turn_link">Из интернета</a>
            </div>
            </div>
            <div id="image-area-tcon-internet" style="display:none">
            <div id="image-area-thd">Вставьте ссылки на изображения (по одной на строку)</div>
            <textarea id="image-area-tinp" rows="5"></textarea>
            </div>
            <div id="image-area-tcon-computer" style="display:none">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                <td id="imageupload-left">
                    <div id="image_upload"></div>
                    <div id="file"></div>
                    <div id="image-width" style="display:none"></div>
                    <div id="image-thumb-width" style="display:none"></div>
                    <div id="upload-button-container" style="display:none"><img src="/js/uploadify/upload.png" /></div>
                    <div id="image-insert-format" style="display:none"></div>
                </td>
                <td id="imageupload-right">
                    <div id="load-image-container" style="display:none">
                    <div id="imageQueue" style="display:none"></div>
                    <div id="uploaded-images" style="display:none"></div>
                    </div>
                    <div id="insert-image-tip" style="display:none"><span>Нажмите на изображение, чтобы вставить в форму.</span></div>
                </td>
                </tr>
            </table>
            </div>
            <div id="image-area-actions" style="display:none">
            <a id="action-insert-textarea" style="display:none">Вставить</a>
            <a id="action-insert-uploaded" style="display:none">Вставить все</a>
            <a id="action-close">Закрыть</a>
            <a id="action-return">Другой источник</a>
            <a id="action-clean-textarea" style="display:none">Очистить</a>
            <a id="action-clean-uploaded" style="display:none">Очистить</a>
            <a id="action-drop-files" style="display:none">Удалить файлы</a>
            </div>
        </div>
        <div class="container" id="video-area" style="display:none">
            <div id="video-area-hsel" style="display:block;" onclick="MYBB_vsi(this,arguments)">
            <div><strong>Выберите видеохостинг</strong></div>
            <div id="video-host-list"></div>
            </div>
            <div id="video-area-tcon" style="display:none;">
            <div id="video-area-thd">Вставьте ссылку или embed-код видеофайла</div>
            <textarea id="video-area-tinp" onclick="this.select();"></textarea>
            <div id="video-area-msg"></div>
            </div>
            <div id="video-area-actions" style="display:none">
            <a href="#" onclick="MYBB_vsc.parse(); return false;">Вставить</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" onclick="changeVisibility('video-area'); return false;">Закрыть</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" onclick="MYBB_vsc.reInit(); return false;">Другой хостинг</a>
            </div>
        </div>
        <script type="text/javascript">
        html = [];
        $.each(FORUM.get('editor.video.hosts'), function(key,value){
            html.push('<a class="turn_link" href="#'+value+'">'+value+'</a>');
        });
        $('#video-host-list').append(html.join(', '));
        </script>
        <div class="container" id="keyboard-area" style="display:none">
            <span id="keyboard-span"></span>
        </div>
        <script type="text/javascript">
        html = '';
        $.each(FORUM.get('editor.keyboard.keys'), function(key,value){
            html += value == '_NL_' ? '<br />' : '<input type="button" value="'+value+'" onclick="keyboard(\''+value+'\')" />';
        });
        $('#keyboard-span').append(html);
        </script>
        <div class="container" id="addition-area" style="display:none" onclick="changeVisibility('addition-area')"></div>
        <script type="text/javascript">
        html = '';
        $.each(FORUM.get('editor.addition.tags'), function(key,value){
            html += '<div onclick="FORUM.get(\'editor.addition.tags.'+key+'.onclick()\')"><span>'+value.name+'</span></div>';
        });
        $('#addition-area').append(html);
        </script>
        <p class="areafield required">
            <span class="input"><textarea id="main-reply" name="req_message" rows="13"></textarea></span>
        </p>
        </div>
    </fieldset>
    <p class="formsubmit"><input type="submit" class="button" name="submit" value="Отправить" accesskey="s" title="Accesskey:s" /> <input type="submit" class="button" name="preview" value="Посмотреть" accesskey="p" /></p>
    </form>

Итоговый вид сокращенной формы:

<script type="text/javascript" src="http://forumstatic.ru/files/0013/61/e9/99761.js"></script>
<form id="post" class="container" method="post" action="/post.php?tid=34135" onsubmit="this.submit.disabled=true;if(process_form(this)){return true;}else{this.submit.disabled=false;return false;}">
    <fieldset>
        <legend><span>Напишите ваше сообщение и нажмите отправить</span></legend>
        <div class="fs-box hashelp">
        <div id="formkey"></div>
        <div id="formetc" style="display:none"></div>
        <input type="hidden" name="form_sent" value="1" />
        <input type="hidden" name="form_user" value="Deff" />
        <script>document.write(FORUMsetPostForm)</script>
        <p class="areafield required">
            <span class="input"><textarea id="main-reply" name="req_message" rows="13"></textarea></span>
        </p>
        </div>
    </fieldset>
    <p class="formsubmit"><input type="submit" class="button" name="submit" value="Отправить" accesskey="s" title="Accesskey:s" /> <input type="submit" class="button" name="preview" value="Посмотреть" accesskey="p" /></p>
    </form>


Изменяемая часть расположена:
от <input type="hidden" name="form_user"
до <p class="areafield required">
И, - сам скрипт, перед формой

Отредактировано Deff (Чт, 13 Фев 2014 05:56:12)

0

2

:flag:

0

3

Он последний раз был 10 февраля

0


Вы здесь » Единый форум поддержки » Вопросы к администрации » Уменьшаем объем страницы, сокращаем форму: