هذه مُجرَّد مُعاينة لتصميم تم اختياره من موقع Hitskin.com
تنصيب التصميم في منتداك • الرجوع الى صفحة بيانات التصميم
(JAVASCRIPT)كود معاينة الموضوع او المساهمه قبل الارسال بشكل جميل***MoHaMeD NsR
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA
صفحة 1 من اصل 1
(JAVASCRIPT)كود معاينة الموضوع او المساهمه قبل الارسال بشكل جميل***MoHaMeD NsR
بسم الله الرحمن الرحيم
السلام عليكم اخواني واخواتي
اقدم اليكم كود,,,الا وهو معاينة الموضوع او المساهمه قبل ارسالها بشكل جميل جدا وفي نفس الصفحه
صوره للكود:
الان نأتي لطريقة وضع الكود:
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان:كما تريد
أضف الكود الى : المواضيع
كود Javascript * :
ثم نتوجه الى
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الالوان>>ورقة تصميم ال css
وضع الكود التالي:
منقول للافادة وتم التعديل والترجمة من قبلي
وبهذا نكون انتهينا من شرح الكود التالي
بالتوفيق ليكم
MoHaMeD NsR
فريق المساعدة
السلام عليكم اخواني واخواتي
اقدم اليكم كود,,,الا وهو معاينة الموضوع او المساهمه قبل ارسالها بشكل جميل جدا وفي نفس الصفحه
صوره للكود:
الان نأتي لطريقة وضع الكود:
لوحة الاداره>>عناصر اضافيه>>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
فريق المساعدة
أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سر/ قائمة بكل مواضيع الاســئلة الشائعة
--------------------------------------------------
تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
لا يتم المساعدة على الخاص!
Mohamed- احلى إدارة
-
عدد المساهمات : 11354
معدل النشاط : 16000
السُمعة : 454
مواضيع مماثلة
» (JAVASCRIPT) كود معاينة البيانات الشخصيه عند الضغط على اسم العضو
» (JAVASCRIPT)كود معاينة المواضيع قبل الدخول الى الموضوع***Mohamed Nsr
» (JAVASCRIPT) كود اظهار علبة الدردشه بشكل جميل***MoHaMeD NsR
» وضع المساهمه بشكل جميل جدً
» (JAVASCRIPT)كود اضافة زر رد سريع في الموضوع ***Mohamed Nsr
» (JAVASCRIPT)كود معاينة المواضيع قبل الدخول الى الموضوع***Mohamed Nsr
» (JAVASCRIPT) كود اظهار علبة الدردشه بشكل جميل***MoHaMeD NsR
» وضع المساهمه بشكل جميل جدً
» (JAVASCRIPT)كود اضافة زر رد سريع في الموضوع ***Mohamed Nsr
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى