Mohamed Mohamed1 نشر 19 يوليو 2022 أرسل تقرير مشاركة نشر 19 يوليو 2022 محتاج كود html لكتابة النص بخط كبير مع التحكم فى اللوان وعمل اطار مربع للنص وعمل نسخ النص ومشاركة النص زي الي في الصورة دي 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 19 يوليو 2022 أرسل تقرير مشاركة نشر 19 يوليو 2022 بتاريخ 1 ساعة قال Mohamed Mohamed1: محتاج كود html لكتابة النص بخط كبير مع التحكم فى اللوان وعمل اطار مربع للنص وعمل نسخ النص ومشاركة النص زي الي في الصورة دي ماهو الامر الذي تريد الاستفسار عنه تحديداً ؟ يمكنك تنفيذ الازرار الثلاثة التي تطلبها بشكل مشابه للتالي : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="text"> <p class="textToShare">النص المخصص للنسخ</p> <a class="whatsapp" href="whatsapp://send?text=Hello%20World!">Share with whatsapp</a> <button class="Share">Share</button> <button class="copy">copy</button> </div> <div class="text"> <p class="textToShare">النص المخصص للنسخ</p> <a class="whatsapp" href="whatsapp://send?text=Hello%20World!">Share with whatsapp</a> <button class="Share">Share</button> <button class="copy">copy</button> </div> <script> const textContainers = document.getElementsByClassName("text"); Array.from(textContainers).forEach((element, index) => { const textToShare = document.getElementsByClassName("textToShare")[index] // الكود الخاص بالمشاركة عبر واتساب const href = "whatsapp://send?text=" + textToShare.innerText; const whatsapp = document.getElementsByClassName("whatsapp")[index] whatsapp.addEventListener("click", () => { location.assign(href) }) // الكود الخاص بنسخ النص const copy = document.getElementsByClassName("copy")[index] copy.addEventListener("click", () => { navigator.clipboard.writeText(textToShare.innerText); alert("تم نسخ النص " + textToShare.innerText) }) // الكود الخاص بالمشاركة const Share = document.getElementsByClassName("Share")[index] Share.addEventListener("click", async () => { const shareData = { title: 'مشاركة النص', text: textToShare.innerText, url: location.href } await navigator.share(shareData) }) }); </script> </body> </html> لاحظ كيف وضعنا العناصر الخاصة بكل زر وكذلك العنصر الخاص بالنص داخل div واعطيناه كلاس test وكذلك اعطينا الكلاسات textToShare و whatsapp و Share و copy للازرار ، وهذا لنستطيع التحكم بالازرار في js وكذلك في الـ css. وفي البداية قمنا باحضار الـ div الحاوي على كل العناصر باستخدام الكود : const textContainers = document.getElementsByClassName("text"); واستخدمنا الكود التالي لتحويله إلى array عادي وذلك لأنه لايمكننا استخدام الـ forEach على العنصر textContainers مباشرةً : Array.from(textContainers).forEach((element, index) => {...} لاحظ كيف قمنا باستدعاء العنصر الحاوي النص المراد مشاركته: const textToShare = document.getElementsByClassName("textToShare")[index] حيث الـ [index] هنا تقوم بالاشارة لـ رقم الـ div الحاوي على العناصر، فنحن نريد ان نحصل على النص الخاص بال div عندما يقوم الشخص بالنقر على اي زر موجود بالـ div الأول. ثم قمنا بإنشاء الـ herf الخاص بواتساب : const href = "whatsapp://send?text=" + textToShare.innerText; ووضعنا الـ innerText للحصول على النص الموجود داخل الـ textToShare التي حددناها في الخطوة السابقة. بعد ذلك قمنا بإستدعاء الزر الخاص بالمشاركة عبر واتساب والخاص بالـ div بنفس الطريقة الخاصة بالنص الذي نريد مشاركته. ثم قمنا بإنشاء الـ event الخاص بالنقر على زر المشاركة عبر واتساب : const whatsapp = document.getElementsByClassName("whatsapp")[index] whatsapp.addEventListener("click", () => { location.assign(href) }) حيث ان الـ location.assign مماثلة للنقر على العنصر a في html. وبعد ذلك قمنا بإعادة العملية بالنسبة لكل من الزر صاحب الكلاس copy والزر صاحب الكلاس Share : const copy = document.getElementsByClassName("copy")[index] copy.addEventListener("click", () => { navigator.clipboard.writeText(textToShare.innerText); alert("تم نسخ النص " + textToShare.innerText) }) const Share = document.getElementsByClassName("Share")[index] Share.addEventListener("click", () => { const shareData = { title: 'مشاركة النص', text: textToShare.innerText, url: location.href } navigator.share(shareData) }) حيث ان الـ navigator.clipboard.writeText و الـ navigator.share هي وظائف مبنية في js. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mohamed Mohamed1
محتاج كود html لكتابة النص بخط كبير مع التحكم فى اللوان وعمل اطار مربع للنص وعمل نسخ النص ومشاركة النص زي الي في الصورة دي
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.