(JAVASCRIPT)كود معاينة الموضوع او المساهمه قبل الارسال بشكل جميل***MoHaMeD NsR

من طرف **Mohamed** 12/9/2014, 1:49 am

بسم الله الرحمن الرحيم
السلام عليكم اخواني واخواتي
اقدم اليكم كود,,,الا وهو معاينة الموضوع او المساهمه قبل ارسالها بشكل جميل جدا وفي نفس الصفحه

صوره للكود:

الان نأتي لطريقة وضع الكود:
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان:كما تريد
أضف الكود الى : المواضيع
كود Javascript * :

الكود:: $(function () { $(function () { $("#quick_reply input[name='preview']").click(function (b) { b.preventDefault(); b = $("#text_editor_textarea").sceditor("instance"); 3 >= b.val().length ? alert("عليك كتابة نص في نافذة الإرسال قبل ارسال المساهمة.") : ($("#Zzpreview_overlay").length || ($("body").append('<div id="Zzpreview_overlay"><p class="h2"><span class="Zzpreview_title left">معاينة</span><a href="#quickreply" class="Zzpreview_close">اغلاق</a></p><div class="post-entry"><div class="entry-content"><div id="Zzpreview_post"><img src="http://i.imgur.com/m3NXDa6.gif" alt="loading..." /> Carregando...</div></div></div><div class="center"><input type="button" class="Zzpreview_full Zzpreview_button" value="المعاينة الكامله"> <input type="button" class="Zzpreview_submit Zzpreview_button" value="ارسال"></div></div>'), $("#Zzpreview_post").width($(".entry-content:first").width()), "true" == my_getcookie("Zzpreview_check") && $("#getPreview").prop("checked", !0)), $("#Zzpreview_post").html('<img src="http://i.imgur.com/m3NXDa6.gif" alt="loading..." /> Carregando...'), $.sceditor.isWysiwygSupported && !$("#getPreview").prop("checked") ? (b.toggleSourceMode(), b.inSourceMode() && b.toggleSourceMode(), $("#Zzpreview_post").html(b.getBody().clone().html()), $("#Zzpreview_post > div:not([align])").replaceWith(function () { return $(this).html().replace(/<br>$/g, "") + "<br />" }), $("#Zzpreview_post").html(function () { var a = $(this).html(), a = a.replace(/(\[spoiler=\"(.*)\"\])/g, '<dl class="codebox spoiler"><dt style="cursor: pointer;">$2:</dt><dd><div class="spoiler_content">'), a = a.replace(/(\[spoiler\])/g, '<dl class="codebox spoiler"><dt style="cursor: pointer;">Spoiler:</dt><dd><div class="spoiler_content">'), a = a.replace(/(\[\/spoiler\])/g, "</div></dd></dl>"), a = a.replace(/\[hide\]/g, '<dl class="codebox hidecode"><dd>'); return a = a.replace(/\[\/hide\]/g, "</dd></dl>") }), $("#Zzpreview_post code").wrap('<dl class="codebox"><dd class="cont_code"></dd></dl>').parent("dd").before("<dt>Code:</dt>")) : $.post("/post", { mode: "reply", notify: 1, preview: 1, t: $("#quick_reply input[name='t']").val(), message: $("#text_editor_textarea").sceditor("instance").val() }, function (a) { $("#Zzpreview_post").html($(a).find(".entry-content:first").html()) }), $("#Zzpreview_overlay").fadeIn()) }); $(document).on("change", "#getPreview", function () { my_setcookie("Zzpreview_check", $("#getPreview").prop("checked"), !0) }); $(document).on("click", ".Zzpreview_full", function () { $("#quick_reply").attr("action", "/post?preview=1").submit() }); $(document).on("click", ".Zzpreview_submit", function () { $("#quick_reply input[name='post']").click() }); $(document).on("click", ".Zzpreview_close", function () { $("#Zzpreview_overlay").fadeOut() }) }) });

ثم نتوجه الى
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الالوان>>ورقة تصميم ال css
وضع الكود التالي:

الكود:: #fa_toolbar { z-index:9998; } #Zzpreview_overlay { position:fixed; width:100%; height:100%; left:0; top:0px; background:rgba(0,0,0,0.85); z-index:9999; } #Zzpreview_post { width: 800px; max-width: 1000px; min-height:300px; max-height:500px; overflow:auto; background:#FFF; border:3px solid #333; margin:0 auto; padding:10px 20px; } #Zzpreview_overlay > p.h2 { height:40px; line-height:40px; background:#111; margin-bottom:30px; text-align:right; } #Zzpreview_overlay .Zzpreview_title { display:block; background: transparent; color:#FFF; font-weight:700; font-size:1.23em; margin:0 10px; padding:0 15px; } #Zzpreview_overlay > div.center > input.Zzpreview_button { border:1px solid; height:34px!important; line-height:32px; color:#FFF; background:#111; margin:10px; padding:0 15px!important; } #Zzpreview_overlay > div.center > input.Zzpreview_button:hover{ cursor:pointer; background:#444; } #Zzpreview_overlay .Zzpreview_close { display:inline-block; height:40px; background:red; color:#FFF; font-weight:700; padding:0 15px; } .Zzpreview_close:hover,.Zzpreview_get:hover { color:#FF0; cursor:pointer; } #Zzpreview_post ol,#Zzpreview_post ul { margin-left:30px; }

منقول للافادة وتم التعديل والترجمة من قبلي
وبهذا نكون انتهينا من شرح الكود التالي
بالتوفيق ليكم
MoHaMeD NsR
فريق المساعدة