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

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

 من طرف Mohamed الجمعة 12 سبتمبر 2014 - 1:49

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

---

صوره للكود:

---

الان نأتي لطريقة وضع الكود:
لوحة الاداره>>عناصر اضافيه>>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
فريق المساعدة

 أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سر/ قائمة بكل مواضيع الاســئلة الشائعة
--------------------------------------------------
 تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
 لا يتم المساعدة على الخاص!