الحيل مع رابط "اقرأ المزيد". إخفاء وعرض النص الإضافي - البرنامج المساعد jQuery Auto Line-Height - تباعد الأسطر تلقائيًا

المهمة قياسية تمامًا، لكن البحث عن مكون إضافي مناسب لـ jquery لم يكن ناجحًا، لأنه في جميع المكونات الإضافية التي تم العثور عليها، لا يتم تعيين القيود بعدد الأحرف، ولكن حسب ارتفاع الكتلة. أي أنه يتم تحديد ارتفاع الحاوية، ويقوم البرنامج الإضافي بقص النص الذي يتجاوز حدوده. على شبكة الإنترنت يمكنك أن تجد تماما خيارات مريحةالمكونات الإضافية مثل Readmore.js وdotdotdot. علاوة على ذلك، يمكن لهذا الأخير مراقبة التغييرات في حجم النافذة وتحديث النتيجة تلقائيًا.

ومع ذلك، كانت المشكلة هي أن الموقع مستجيب وأن الكتلة تأخذ عرضًا مختلفًا اعتمادًا على عرض نافذة المتصفح. ونتيجة لذلك، قد ينشأ موقف حيث يوجد عدد قليل جدًا من الأحرف في الكتلة. بالطبع، يمكنك استخدام بعض الخوارزميات لتغيير ارتفاع الكتلة عند تغيير حجم النافذة، ولكن تقرر عدم إجراء أي نوع من الإضافات على بعض حل جاهز، لكن اكتب مكونًا إضافيًا صغيرًا خاصًا بك والذي سيقطع النص في jquery بناءً على عدد معين من الأحرف.

هناك العديد من المزايا لهذا النهج.

يمكنك التأكد من أن الكتلة ستعرض حجمًا من النص يحمل حملًا دلاليًا حتى عند طيه.

ليست هناك حاجة لمعالجات إضافية لتغيير حجم النافذة والتي من شأنها التحقق باستمرار من حجم النص الذي يناسب الكتلة.

أثناء التنفيذ كان من الضروري أيضًا مراعاة شيئين يؤثران على جمال النتيجة. أولاً، يجب قطع النص بكلمة كاملة. ثانيًا، تجنب موقف "الكشف عن القليل جدًا" - والذي يمكن أن يحدث عندما يكون إجمالي عدد الأحرف في الكتلة أكبر قليلاً من القيمة المحددة التي سيتم من خلالها القطع، على سبيل المثال، بمقدار 50 إلى 100 حرف. إذا لم يتم تحديد المعلمات، فستستخدم الوحدة القيم الافتراضية.

لذا، فإن خوارزمية المشكلة بسيطة جدًا:

الجزء الأكثر استهلاكًا للوقت في تنفيذ البرنامج النصي المفسد لـ html هو الحصول على الإعلان من النص الكامل للكتلة، نظرًا لأن الكتلة لا يمكن أن تحتوي على نص فحسب، بل على علامات منسقة باستخدام علامات html.

يوجد أدناه وظيفة مسؤولة عن قطع جزء من كود html الذي يكون عدد أحرفه التي لا تمثل علامات html مساويًا للقيمة المحددة في المعلمات أو أكبر بنهاية الكلمة الأخيرة من الإعلان.

// إنشاء إعلان person.cutBrief = function() ( var tmp, i = 0, // عداد الدورة j = 0, // عداد الدورة html = data.html, // block html htmlLength = html.length, // كمية أحرف HTMLعدد الكتل = 0، // العداد أحرف النص countFlag = true، // الحرف الحالي ليس علامة html endCharsLen = ENDCHARS.length، // حجم مصفوفة الأحرف التي تشير إلى نهاية الكلمة end = htmlLength، // موضع نهاية الإعلان عند البحث resultLimit = data.limit.total - data Limit.delta، // عدد الأحرف المطلوب tagName، // اسم العلامة tagStack = ; // مجموعة العلامات التي يجب إغلاقها في نهاية الإعلان if (data.count > data.limit.total) ( // تشكيل إعلان لـ (؛ i< htmlLength; i++) { // если открывается тег if (html[i] === "", i+1); if (tmp >0) ( // التنسيق الصحيح لإغلاق العلامة tagName = html.substr(i+2, tmp-i-2); // هل يجب أن تحتوي العلامة المكتشفة على جزء إغلاق؟ if ($.inArray(tagName, TAGDIC) >= 0) ( tagStack(); ) ) ) else ( // العلامة هي العلامة الافتتاحية // الحرف التالي هو أي حرف لاتيني؟ if (/\w/gi.test(html)) ( // الحصول على اسم العلامة وتحديد ما إذا كان يجب إغلاقها tmp = html.indexOf(">"، i+1); / / يجب أن تحتوي العلامة على جزء إغلاق if ($.inArray(tagName, TAGDIC) >= 0) ( tagStack.push(tagName); ) ) else ( // ليست علامة countFlag = true; ) ) else ( // is ليست علامة countFlag = true ) ) ) ) // زيادة عداد أحرف النص if (countFlag) ( count++; ) // إذا كانت العلامة مغلقة if (html[i] === ">") ( countFlag = صحيح ) // وصل إلى نهاية حجم الإعلان المطلوب if (count >= resultLimit ) ( // الحرف الحالي ليس نهاية الكلمة if ($.inArray(html[i], ENDCHARS)< 0) { // символ не последний if (i < htmlLength - 1) { // следующий символ тоже не конец слова if ($.inArray(html, ENDCHARS) < 0) { // ищем первое вхождение каждого символа из набора и выбираем ближайший for (; j < endCharsLen; j++) { tmp = html.indexOf(ENDCHARS[j], i+1); if ((tmp >0) && (تم< end)) { end = tmp; } }; i = end; } } } else { // слово закончилось целиком count--; } break; } }; // вырезаем кусок html data.brief = html.substr(0, i); // добавляем точки data.brief += opt.ellipsis; // закрываем открытые теги for (i = tagStack.length - 1; i >= 0؛ i--) ( data.brief += ""; ); ) else ( // لا تقطع data.brief = html; ) );

يتم استخدام البرنامج المساعد بشكل قياسي:

$(".b-block--first").readmore();

يوفر البرنامج المساعد المعلمات التالية:

• علامة الحذف (سلسلة) - الأحرف التي سيتم عرضها في نهاية الإعلان؛
• textOpen (سلسلة) - نص الارتباط المطوي؛
• textClose (سلسلة) - ربط النص في الحالة الموسعة؛
• رد الاتصال (وظيفة) - وظيفة يتم تنفيذها بعد فتح/إغلاق كتلة؛
• مختصر (عدد صحيح) - الحد الأقصى لعدد أحرف الإعلان، ويتم تقليله عن طريق الإضافة؛
• إضافة (عدد صحيح) - الحد الأدنى لعدد أحرف الجزء الموسع من النص؛
• بسلاسة (عدد صحيح) - وقت الفتح/الإغلاق السلس للكتلة بالمللي ثانية.

تجدر الإشارة إلى أن وظيفة رد الاتصال يتم تشغيلها فقط بعد انتهاء الرسوم المتحركة النصية، والتي يتم تنفيذها في jquery باستخدام طريقة الرسوم المتحركة، وتأخذ معلمتين للإدخال: رابط الكتلة والحالة الحالية.

فيما يلي مثال لكيفية تنفيذ أي من إجراءاتك، اعتمادًا على حالة الكتلة:

$(".b-block-- Second").readmore(( علامة الحذف: "[...]"، textOpen: "Open"، textClose: "Close"، رد الاتصال: function(self, State) (state ? self .css("background", "#e74c3c") : self.css("background", "#3498db" ), مختصر: 500, إضافة: 100 ));

CSS في المثال صغير جدًا، ويمكنك الاستغناء عنه تمامًا (الكود موجود في SCSS):

ب-قراءة المزيد ( الحشو: 15 بكسل 0 0 0؛ &__ الرابط ( اللون: #000؛ زخرفة النص: تسطير؛ &: التمرير، &: التركيز، &: نشط ( اللون: #000؛ زخرفة النص: لا شيء؛ ) ) &__فتح ( العرض: كتلة مضمّنة؛ ) &__ إغلاق ( عرض: لا شيء؛ ) & -- مفتوح & ( &__ مفتوح ( عرض: لا شيء؛ ) &__ إغلاق ( عرض: كتلة مضمنة؛ ) ) )

نقوم بالتقييم والتعليق على أفضل السبل لعمل حرق للموقع بناءً على العدد المحدد من الأحرف.

المكونات الإضافية من هذه المجموعة ليست مخصصة لإنشاء الأدوات الذكية والجماليات المختلفة، على سبيل المثال، الرسوم المتحركة أو ما شابه ذلك، ولكن لضمان التشغيل الصحيح لصفحة الويب. ستكون هناك حاجة إليها في الحالة التي يصبح فيها الشخص عاجزًا أمام المهمة التي بين يديه. على سبيل المثال، إذا كنت بحاجة إلى أتمتة قطع النص حسب عدد الأحرف أو ارتفاع الكتلة، إذا كنت بحاجة إلى إعداد الطباعة بسرعة وبشكل صحيح في موقع ويب سريع الاستجابة، وكذلك مع محاذاة النص المعقدة، وما إلى ذلك.

غالبًا ما نستخدم هذه المكونات الإضافية أو استخدمناها في عملنا. لذا. فيما يلي أفضل 10 مكونات إضافية لـ jQuery للعمل مع النص، والتي ستساعدك على تنفيذ فكرة تصميم غير قياسية بسرعة وفعالية.

TextTailor - قص النص حسب ارتفاع الكتلة TextTailor هو مكون إضافي مفيد للغاية سيساعدك على قص النص (وضع رابط "مزيد من التفاصيل") بحيث يملأ الحاوية التي يوجد بها قدر الإمكان. أي أنه يسمح لك بقص النص اعتمادًا على ارتفاع الكتلة الأصلية وإزالة كل ما لا يتناسب مع القطة. الشرط الوحيد لكي يعمل البرنامج النصي بشكل صحيح هو أن يكون للكتلة ارتفاع معين بقيمة ثابتة أو نسبة مئوية.
غالبًا ما يتم استخدام TextTailor في الصفحات التي تحتوي على قائمة بالمقالات في شكل مربعات، عندما يتم ترتيب الكتل التي تحتوي على معاينات الموضوع عدة مرات في صف واحد وبعناوين مقالات بأحجام مختلفة. بالإضافة إلى ذلك، يمكن أن يصبح هذا الأمر أكثر تعقيدًا إذا تغير عرض هذه الكتل، على سبيل المثال في . في مثل هذه الحالات، كقاعدة عامة، عدد الأحرف وصف مختصر(الشروح) محدودة بشكل فظ، ولأن العناوين ذات ارتفاعات مختلفة، تنتهي الكتل بمساحات فارغة. سوف يساعدك TextTailor في التغلب على هذه المشكلة وملء كتلة الرسالة بالنص.

P/S ربما سيكون مفيدًا لشخص ما. لقد نشرنا ذات مرة مكونًا إضافيًا يسمى flexMenu الذي يضبط عدد العناصر اعتمادًا على عرض الكتلة الأصلية. يتم إرسال أي شيء غير مناسب إلى القائمة المنسدلة. لقد جاء بمقال بعنوان "5 قوائم قابلة للتكيف لمهام مختلفة."

بالإضافة إلى كل هذا، يقوم البرنامج المساعد أيضًا بوظيفة ثانية لا تقل أهمية. يمكن استخدامه للقياس نص متعدد الأسطرحسب حجم الوحدة الأم أو الشاشة. كل ما عليك فعله هو تكوين المعلمات المطلوبة، وسيقوم البرنامج المساعد بالباقي نيابة عنك. سيقوم تلقائيًا بتغيير حجم الخط وحجم الخط بالنسبة لحجم شاشة المستخدم لضمان تجربة القراءة الأكثر راحة.

مقتضب - قص النص بعدد الأحرف Succinct هو مكون إضافي لـ jQuery يسمح لك بوضع رابط "مزيد من التفاصيل" أو علامة حذف بعد عدد محدد من الأحرف في النص. يتم قطع أي شيء غير مناسب.
في الواقع، يعد هذا أسلوبًا قياسيًا لقص النص، وذلك باستخدام jQuery فقط، وليس PHP.

Readmore.js - إخفاء النص تحت المفسدReadmore.js يسمح لك بإخفاء جزء من النص تحت المفسد. يقوم السكربت، بعد عدد معين من الأحرف في النص، بوضع زر "مزيد من التفاصيل"، وعند الضغط عليه يظهر جزء مخفي من النص مع تأثير "الانتقال للخارج" للأسفل، مما يؤدي إلى إزاحة بقية المحتوى.

FitText - تغيير حجم النص ليناسب عرض الشاشة FitText - مكون jQery الإضافي الذي يغير حجم الخط ديناميكيًا اعتمادًا على عرض الشاشة أو الكتلة الرئيسية. مثالي لإنشاء رؤوس الشاشة في مواقع الويب سريعة الاستجابة. الآن لا تحتاج إلى تغيير حجم الخط لكل دقة شاشة.

ارتفاع الخط التلقائي - تباعد الأسطر تلقائيًا يتيح لك ارتفاع الخط التلقائي حساب ارتفاع الخط (ارتفاع الخط) تلقائيًا عند تغيير حجم النافذة. كقاعدة عامة، يتم استخدامه في مواقع الويب سريعة الاستجابة لتحسين إمكانية قراءة النص على الأجهزة المحمولة.

لحم الخنزير المقدد - محاذاة النص على طول منحنى Bacon هو مكون إضافي لـ jQuery سيساعدك على محاذاة النص في الصفحة على طول دائرة أو منحنى معين.
نادرا ما يستخدم هذا الحل في العمل، ولكن مع فكرة تصميم متطورة لا يمكنك الاستغناء عنها.

jQSlickWrap - محاذاة النص مع الصورة يتيح لك jQSlickWrap محاذاة النص كيفما تشاء. غالبًا ما يستخدم لمحاذاة النص حول بعض المواضيع التي تظهر في الصورة. أي ليس حسب الأبعاد المعطاة للسيارة نفسها، بل حسب ما هو موضح في الصورة بالضبط. تظهر لقطة الشاشة بوضوح مبدأ عملها.

يرى العديد من الأشخاص أن إنشاء المكونات الإضافية الخاصة بهم أمر صعب ومعقد. هذا ليس هو الحال بالنسبة لـ jQuery على الإطلاق. إذا كانت لديك معرفة أساسية بتشفير jQuery، فسيكون إنشاء المكون الإضافي الخاص بك أمرًا سهلاً. هذا الدليلسوف يصف خطوة بخطوة كيفية إنشاء البرنامج المساعد الخاص بك. سوف يسمح البرنامج المساعد إخفاء النص الزائد. دعنا نقول على الخاص بك الصفحة الرئيسيةهناك عنصر واجهة مستخدم مثل "تلميح اليوم". سيسمح لنا المكون الإضافي الخاص بنا بقصه إلى الطول الذي نحتاجه وسيقوم بإنشاء رابط، عند النقر عليه ستتوسع الأداة بالكامل ينسحبالمحتوى الذي يحتوي عليه.

فيما يلي مثال عملي:

يرجى ملاحظة أنه عند تعطيل JavaScript (أو عدم دعمه)، سيتم عرض المحتوى بالكامل.
مستعد؟ ثم لنبدأ...

الخطوة 1

في الخطوة الأولى، أضفنا طريقة التغليف الخاصة بنا (الاقتطاع) إلى jQuery. نظرًا لأن طريقتنا تم إنشاؤها كخاصية للكائن $.fn، فسيشير سياق الوظيفة (هذا) في نص هذه الطريقة إلى المجموعة الملتفة.

$.fn.truncate = function(options)( return.this.each(function())( // كود لكل عنصر في المجموعة الملتفة ));

كما سمعت على الأرجح الآن، يجب على مطوري المكونات الإضافية عدم استخدام الاسم المستعار $ لأنه قد يتسبب في حدوث تعارضات مع المكتبات الأخرى. هذا صحيح جزئيا فقط. الجزء التالي هو نفس الجزء الأول، مع استثناء واحد: لقد انتهينا من الإعلان وظيفة خارجيةمما يضمن تطابق الاسم المستعار $ مع معرف jQuery. سوف نستمر في استخدام $.

(function($)( $.fn.truncate = function(options)( return.this.each(function())( // كود لكل عنصر من المجموعة الملتفة )); ); ))(jQuery);

الخطوة 2

قبل أن نمضي قدمًا، دعونا ننشئ صفحة اختبار بسيطة سنختبر فيها المكون الإضافي الخاص بنا. قم بإنشاء صفحة وقم بتسميتها مهما كان ما تريده.html. الصق التعليمة البرمجية التالية. كما ترون، قمت بوضع البرنامج المساعد ومكتبة jQuery في مجلد js. لاحظ أنه في هذا المقتطف، يكون المكون الإضافي قيد التشغيل بالفعل، على الرغم من أننا لم نكتب بعد الكود المسؤول عن سلوكه.

مثال تجريبي للمكون الإضافي للاقتطاع $().ready(function() ( $(".tip").truncate(); )); لوريم إيبسوم دولور سيت أميت، consectetuer adipiscing إيليت. Etiam fringilla, Purus a ultrices blandit, odio ante scelerisque neque, vitae impdiet odio velit ac nisl. Sed tortor metus، placerat condimentum، feugiat in، feugiat adipiscing، mi. Donec pulvinar sem vitae Leo. الدهليز eget lectus et ligula هندريريت فارترا. سيد بورتا جوستو ميلان نيسل. Aliquam nisi erat، sed pellentesque، sagittis eu، fringilla sit amet، dolor. نام ميلان مي. Pellentesque pede Purus، Mattis aliquet، semper nec، cursus a، orci. Duis bibendum nibh ac Massa. عدد صحيح في الاتحاد الأوروبي معذب. Aenean convallis quam في nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio، iaculis ut، feugiat vitae، ultrices in، tortor. Quisque في النخبة. في هاك الموطن هضبة القول المأثور.

الخطوه 3

بعد ذلك، نحتاج إلى إنشاء آلية تسمح للمستخدم بتحرير المكون الإضافي. نحن بحاجة إلى مكون إضافي يكون مرنًا قدر الإمكان من حيث الإعدادات. في هذه الحالة، يجدر تعيين عدد من المعلمات بقيم افتراضية حتى لا يضطر المستخدم إلى تعيين قائمة طويلة من المعلمات وقيمها بنفسه. لتحقيق ذلك، سنستخدم طريقة تمديد jQuery. قم بتحديث البرنامج المساعد الخاص بك ليطابق ما يلي:

لن نقوم بتغيير المعلمات بالقيم الافتراضية في الوقت الحالي، وسنوضح ذلك لاحقًا.

(function($)( $.fn.truncate = function(options) ( var defaults = ( length: 300, minTrail: 20, moreText: "more"، lessText: "less"، ellipsisText: "...")؛ var options = $.extend(defaults, options); return this.each(function() ())(jQuery);

jQuery.extend
يقوم بتوسيع كائن بكائنات أخرى وإرجاع الكائن المعدل.

الخطوة 4

بعد الانتهاء من مناقشاتنا التمهيدية، دعنا ننتقل إلى ترميز وظيفة البرنامج المساعد. كما رأيت من قبل، يقوم المكون الإضافي بإرجاع this.each(...) . يتكرر التابع every()‎ على كافة العناصر الموجودة في المجموعة الملتفة. لذا، إذا اتصلنا بـ $("p").truncate() ، فسيتم تشغيل الكود الذي سنكتبه قريبًا لكل علامة p. نظرًا لأننا نعيد المجموعة الملتفة التي تم الحصول عليها نتيجة لكل طريقة، فيمكن أن تكون طريقتنا جزءًا من سلاسل الطريقة.

على افتراض أنك على دراية بـ jQuery، لن أصف بالتفصيل كيفية عمل الوظيفة (لكنني وصفتها على أي حال). إذا كان هناك شيء غير واضح في الكود، فارجع إلى الوثائق أو اطرح سؤالاً في التعليقات. لإضفاء مظهر كامل على المكون الإضافي، قم بتحديثه ليطابق ما يلي:

(function($)( $.fn.truncate = function(options) ( var defaults = ( length: 300, minTrail: 20, moreText: "read in full"، lessText: "hide"، ellipsisText: "..." ) ; var options = $.extend(defaults, options); return this.each(function() ( // عنصر DOM للتكرار الحالي obj = $(this); // استرداد محتويات العنصر كـ ترميز HTMLفار الجسم = obj.html(); if(body.length > options.length + options.minTrail) ( // إرجاع الموضع بعد الرقم (options.length) الذي تبدأ منه المطابقة // في حالتنا هو مسافة var SplitLocation = body.indexOf(" "، options .length); // إذا تم العثور على تطابق، if(splitLocation != -1) ( // إخفاء نص تلميح الأداة var SplitLocation = body.indexOf(" ", options.length); var str1 = body. substring(0, SplitLocation) ; var str2 = body.substring(splitLocation, body.length - 1); obj.html(str1 + "" + options.ellipsisText + "" + "" + str2 + ""); css("display", "none"); // أدخل رابط "القراءة بالكامل" في نهاية المحتوى الموجود obj.append("" + "" + options.moreText + "" + ""); للرابط "قراءة كاملة"/"إخفاء" var moreLink = $(".truncate_more_link"، obj); var moreContent = $(".truncate_more"، obj); // نص إضافي خلف النص، على سبيل المثال "... " var ellipsis = $(".truncate_ellipsis"، obj); moreLink.click(function() ( if(moreLink.text() == options.moreText) ( moreContent.show("normal"); moreLink.text(options.lessText); ellipsis.css("display", "none"); ) else ( moreContent.hide("normal"); moreLink.text(options.moreText); ellipsis.css("display", "inline"); ) إرجاع false; )); ) ) // إنهاء إذا ))؛

); ))(مسج);

لاحظ أنه كلما كنت بحاجة إلى تحديد أي عنصر داخل البرنامج المساعد، استخدمت obj كسياق (على سبيل المثال: moreLink = $(".truncate_more_link"، obj)). يعد ذلك ضروريًا لربط كل تحديد بالعنصر الحالي الذي يتم اقتطاعه. وبدون هذا السياق، يمكن الحصول على نتائج غير متوقعة.

إليكم الأمر – أول مكون إضافي لـ jQuery! في حين أن هناك المزيد في المستقبل، فقد وعدت سابقًا بأنني سأوضح تغيير القيم الافتراضية للمعلمات. في المثال التالي، يتم استبدال قيمة كل معلمة (من المقبول تمامًا تغيير بعض المعلمات فقط).

استبدل البرنامج النصي في صفحة الاختبار الخاصة بك بما يلي:

$().ready(function() ( $(".tip").truncate(( length: 120, minTrail: 10, moreText: "show more"، lessText: "show less"، ellipsisText: " " )); ));

ويمكن رؤية النتيجة في المثال التجريبي.

مكون إضافي يسمح لك بإخفاء جزء من النص إذا تجاوز طولًا محددًا. تتم إضافة رابط، عادةً على شكل زر "مزيد من التفاصيل" - عند النقر عليه، يتم عرض النص المخفي.

متوافق مع إصدارات jQuery الأعلى من 1.7.0

شبيبة

مكالمة البرنامج المساعد بسيطة:

$("مقال").readmore(); يمكن الاتصال بها من:

$("article").readmore(( السرعة: 75, الحد الأقصى للارتفاع: 500 ));

خيارات

• السرعة: 100 (بالميلي ثانية)
• أقصى ارتفاع: 200 (بالبكسل)
• heightMargin : 16 (بالبكسل، لتجنب كسر الكتل التي تكون أكبر قليلاً من الارتفاع المحدد - maxHeight)
• المزيد الرابط : "مزيد من التفاصيل"
• رابط أقل: "إخفاء"
• embedCSS : صحيح (يقوم بإدراج أنماط CSS ديناميكية، قم بتعيين خطأ إذا كنت ستقوم بتضمين جميع الأنماط بنفسك في ملف النمط الخاص بك)
• قسمCSS: "العرض: الكتلة؛ العرض: 100%؛" (يحدد نمط الكتلة)
• startOpen : خطأ (افتراضيًا تكون الكتلة مخفية، إذا كانت المعلمة صحيحة - سيتم عرض النص بالكامل، ولكن مع إمكانية الإخفاء)
• ExtendedClass: "readmore-js-expanded" (تمت إضافة الفئة إلى الكتلة الموسعة)
• lapsedClass : "readmore-js-collapsed" (تمت إضافة الفئة إلى الكتلة المطوية)
• beforeToggle : function() () (يتم استدعاء الوظيفة بعد النقر على زر "التفاصيل" أو "إخفاء"، ولكن قبل طي الكتلة أو توسيعها)
• afterToggle : function() () (يتم استدعاء الوظيفة بعد توسيع الكتلة أو طيها)

إذا تم ضبط الحد الأقصى للارتفاع على العنصر أنماط CSS، فإن المكون الإضافي سيستخدم هذه القيمة بالضبط، وليس قيمة خيار maxHeight

أتصل مرة أخرى:

تأخذ دوال رد الاتصال beforeToggle() و afterToggle() نفس الوسائط: المشغل والعنصر والمزيد.

• المشغل: أزرار "مزيد من التفاصيل" أو "إخفاء".
• العنصر: الكتلة التي تنهار أو تتوسع حاليًا
• المزيد: منطقي، صحيح - يعني أن الكتلة ممتدة

مثال رد الاتصال.
فيما يلي مثال لاستخدام وظيفة afterToggle للتمرير إلى أعلى الكتلة عند النقر فوق الزر "إخفاء":

$("article").readmore(( afterToggle: function(trigger, element, more) ( if(! more) ( // تم النقر على الزر "Hide" $("html, body").animate(( التمريرTop: العنصر .offset().top ),( المدة: 100 ));

يمكنك تعطيل وظيفة البرنامج المساعد مثل هذا:

$("مقال").readmore("تدمير");

أو يمكنك تحديد عنصر لا ينبغي أن يعمل عليه المكون الإضافي:

$("article:first").readmore("تدمير");

CSS

بشكل افتراضي، يقوم البرنامج الإضافي بإدراج رمز CSS التالي في الصفحة:

قراءة المزيد-js-toggle، .readmore-js-section ( العرض: كتلة؛ العرض: 100٪؛ ) .readmore-js-section ( تجاوز السعة: مخفي؛ )

باستخدام خيار البرنامج المساعد يمكنك تغيير القاعدة الأولى:

$("article").readmore(( sectionCSS: "display: inline-block; width: 50%;" ));

إذا كنت تريد استخدام ملف النمط الخاص بك، فحدد خطأ في إعدادات البرنامج الإضافي:

$("article").readmore(( embedCSS: false ));

مساء الخير

لنبدأ من البداية في حال كان أي شخص لا يعرف شيئًا عن المزيد.

لم أذهب إلى البحر.

- حسنًا، لا تغمره، فأنا لم أذهب إلى البحر من قبل!

- لم يكن لدي فرصة، لم أكن...

- لقد طرقنا بالفعل باب الجنة، وشربنا التيكيلا، وودعنا أنفسنا حرفيًا في رحلتنا الأخيرة، لكنك لم تذهب إلى البحر بعد؟!

- لم يكن لدي الوقت، لم ينجح الأمر...

"لم أكن أعلم أنه لا يوجد مكان في الجنة بدون هذا؟"

فيلم "طرق باب الجنة"

كيفية إضافة المزيد

لذلك، يتم تعيين أي جزء من النص سيتم عرضه في الإعلان باستخدام علامة المزيد. يقسم هذا الوسم المقالة إلى قسمين: تمهيدية (إعلان) واستمرارية.

في محرر WordPress، يمكن إدراج علامة المزيد باستخدام الزر الموجود في شريط الأدوات.

1. وضع المحرر المرئي:

2. وضع محرر النصوص:

في وضع النص، يمكنك أيضًا تقسيم الإدخال يدويًا: فقط اكتب

و الأن معلومات مهمة، وهو ما لا يعرفه الجميع!

لذا، هناك طريقة أولية لمنح كل رابط بعد الإعلان نصًا فريدًا خاصًا به!

يمكنك القيام بذلك ببساطة عن طريق الكتابة، النص المطلوبالتصميم الداخلي مع المزيد. مثله:

قد تسأل لماذا تفعل هذا؟ اكتب أيضًا النص في كل مرة.

لأكون صادقًا، أنا نفسي أحب ذلك =) لقد قمت بالفعل بنشر 84 مقالًا، وأنا للتو "خرجت من الغابة" حول هذا الموضوع.

كيفية تغيير النص؟

1. الطريقة الأولى - الأسهل - هي إضافة النص الخاص بك (عادةً في ملف Index.php) إلى وظيفة the_content

2. الطريقة الثانية هي استخدام الخطاف_content_more_link. ما عليك سوى إضافة الكود التالي وتعيين نص الرابط المطلوب.

الوظيفة my_more_link($more_link, $more_link_text) ( return str_replace($more_link_text, "مواصلة القراءة..."، $more_link); ) add_filter("the_content_more_link", "my_more_link", 10, 2);

تعتبر هذه الطريقة ملائمة لأنك لا تحتاج إلى البحث في ملفات القالب للعثور على المكان الدقيق الذي يتم استخدام the_content فيه (لا يلزم أن يكون هذا في ملف Index.php، بل يمكن أن يكون content.php أو أي شيء آخر.) هنا تعمل فقط في ملف jobs.php.

3. في النقطة الثالثة، سأقوم ببساطة بحفظ الطريقة للتاريخ باستخدام حقل WordPress مخصص.

يعد إدخال النص مباشرة أسهل وأكثر وضوحًا بالطبع.

هنا، ما عليك سوى ضبط استدعاء الدالة the_content بإحدى طريقتين.

كيفية إزالة #المزيد من الرابط

في الكود، تم تعيين هذا المرساة بهذه الطريقة: