<include file="public@header"/> <style> html, body { padding: 0; height: 100%; margin: 0; overflow: hidden; } #simulator, #setting-iframe { width: 100%; height: 100%; } .setting-panel-wrap { position: fixed; left: 0; bottom: 0; top: 0; width: 350px; border-right: 1px solid #eee; display: none; background: #fff; } #setting-iframe-wrap { position: absolute; top: 0; bottom: 50px; right: 0; left: 0; } .setting-panel-wrap .panel { } .setting-panel-wrap .footer { position: absolute; bottom: 0; width: 100%; height: 50px; border-top: 1px solid #eee; padding: 8px; } #close-setting-panel { position: absolute; top: 10px; right: 10px; z-index: 99; font-size: 18px; } #show-setting-panel { position: fixed; top: 30px; left: 30px; z-index: 99; font-size: 20px; line-height: 50px; width: 50px; border: 1px solid #eee; text-align: center; border-radius: 50%; cursor: pointer; background: #fff; } #update-theme-btn { position: fixed; top: 30px; right: 30px; z-index: 99; font-size: 20px; line-height: 50px; width: 50px; border: 1px solid #eee; text-align: center; border-radius: 50%; cursor: pointer; background: #fff; } #update-theme-btn:focus { outline: none; } #show-setting-panel:hover { background: #eee; border-color: #ddd; } #think_page_trace { display: none !important; } #think_page_trace_open { display: none !important; } </style> <script> setInterval(function () { $.ajax({ url: "{:url('Theme/design')}?theme={:input('param.theme')}&status=1", type: 'post' }); },2000); </script> </head> <body> <a id="show-setting-panel" title="编辑当前页" data-toggle="tooltip"><i class="fa fa-pencil"></i></a> <a id="update-theme-btn" title="刷新当前页" data-toggle="tooltip"><i class="fa fa-refresh"></i></a> <div class="setting-panel-wrap"> <a href="javascript:;" id="close-setting-panel"><i class="fa fa-close"></i></a> <div id="setting-iframe-wrap"> <iframe frameborder="0" id="setting-iframe"></iframe> </div> <div class="footer text-center"> <a id="save-btn" class="btn btn-primary">保存</a> </div> </div> <iframe src="__ROOT__/?_design_theme={:input('param.theme')}" frameborder="0" id="simulator"></iframe> <script src="__STATIC__/js/admin.js"></script> <script> var simulator = $('#simulator').get(0).contentWindow; var $simulator = $(simulator); var $settingIframe = $('#setting-iframe'); var simulatorNeedRefresh = true; $('#update-theme-btn').click(function () { simulator.location.reload(true); }); $('#save-btn').click(function () { $settingIframe.get(0).contentWindow.confirm(); }); $('#close-setting-panel').click(function () { hideSettingPanel(); }); $('#show-setting-panel').click(function () { showSettingPanel(); }); function hideSettingPanel() { $('.setting-panel-wrap').fadeOut(function () { $('#show-setting-panel').show(); }); } function showSettingPanel() { $('.setting-panel-wrap').fadeIn(); $('#show-setting-panel').hide(); } function showDesignBtn() { if (!$('.setting-panel-wrap').is(':visible')) { $('#show-setting-panel').show(); } } function hideDesignBtn() { $('.setting-panel-wrap').hide(); $('#show-setting-panel').hide(); } function simulatorRefresh() { if (simulatorNeedRefresh) { $settingIframe.attr('src', "{:url('Theme/fileSetting')}?theme={:input('param.theme')}&file=" + simulator._themeFile); $simulator.load(function () { $(simulator.document).on('click', 'a', function () { var target = $(this).attr('target'); var href = $(this).attr('href'); if (target == '_blank' && href.indexOf('http') < 0) { simulator.location.href = href; return false; } }); }); } simulatorNeedRefresh = true; } function afterSaveSetting() { simulatorNeedRefresh = false; simulator.location.reload(); } </script> </body> </html>