در حال بارگیری صفحه در حین پیمایش. من را کاملاً بچرخانید

19.04.2019 برنامه ها

همانطور که می بینید، همه چیز ساده است. اما به چه نکاتی باید توجه کرد؟ و به div با id = "smartPortfolio"، id = "moreButton" و id = "loadingDiv" توجه کنید، زیرا در اسکریپت استفاده می شود، که به ما کمک می کند محتوا را از صفحات دیگر بارگذاری کنیم. SmartPortfolio ظرف نمونه کارها ما است. MoreButton - این دکمه ما خواهد بود، وقتی روی آن کلیک می کنید، قسمت دیگری از نمونه کارها بارگیری می شود. LoadingDiv - ناحیه ای که وقتی نمونه کارها به طور کامل باز می شود یا نوعی خطا رخ می دهد، متن در آن نمایش داده می شود.

به عنوان مثال، برخی از خوانندگان همچنان سعی می کنند این اسکریپت را نه روی سرور آزمایش کنند، بلکه به سادگی فایل فهرست را در مرورگر باز می کنند. در این صورت یک پیغام خطا مشاهده خواهند کرد. علاوه بر این، با اتصال بسیار کند، دانلود فایل ها ممکن است زمان بر باشد و برای اینکه کاربر متوجه شود که فرآیند در حال انجام است، می توانید پیامی را در آنجا وارد کنید که بارگیری در حال انجام استداده یا قرار دادن (یک تصویر، یک نشانگر پیشرفت یا چیز دیگری).

من خود اسکریپت را ننوشتم، اما آن را در یکی از سایت ها یافتم، نویسنده در منبع ذکر شده است که علاقه مند است - نگاهی بیندازید. از آنجایی که او هم نیست سایز بزرگ، سپس همه را می دهم، اما اگر قصد دارید از همان نام شناسه ها و مسیرهای فایل ها استفاده کنید، ممکن است حتی به آن نگاه نکنید، بلکه آن را در جلوی بسته شدن وصل کنید. برچسب بدن(در پاورقی).

برای کسانی که قصد ویرایش دارند، در اینجا خود فیلمنامه آمده است:

وار تنبل = تنبل || () (تابع ($، lazyload) ("استفاده از سخت"؛ var page = 2، buttonId = "#moreButton"، loadingId = "#loadingDiv"، container = "#smartPortfolio"؛ lazyload.load = تابع () (var url = "./pages/" + page + ".html"؛ $ (buttonId) .hide (); $ (loadingId) .show ()؛ $ .ajax ((url: url, موفقیت: function (پاسخ) (اگر ( پاسخ || answer.trim () == "هیچ") ($ (buttonId) .fadeOut () $ (loadingId) .text ("پورتفولیو به طور کامل بارگیری شد")؛ بازگشت؛) appendContests (پاسخ)؛ خطا : function (response) ($ (loadingId) .text ("متأسفیم، در درخواست خطایی وجود داشت. لطفاً صفحه را بازخوانی کنید.");)))؛ var appendContests = تابع (پاسخ) (var id = $ (buttonId) $ (buttonId) .show () $ (loadingId) .hide () $ (response) .appendTo ($ (container))؛ page + = 1;);)) (jQuery, lazyload) .

بنابراین، اکنون ارزش آن را دارد که در مورد آن فایل هایی که اطلاعات را از آنها بارگیری می کنیم صحبت کنیم. اسکریپت فرض می کند که اینها فایل هایی با نام 2.html ... 5.html و غیره خواهند بود. که اطلاعات ما در آن نهفته است. به عنوان مثال، فایل من 2.html ابتدا بارگذاری می شود و محتوای زیر را دارد:

در ساختار سایت من، صفحاتی که اطلاعات برای بارگذاری بعدی با کلیک از آنها گرفته می شود، در پوشه pages قرار دارد. سه تا فایل هست که دوتاشون پر و آخری خالی. منطق فیلمنامه این را فرض می کند.

مسیر در اسکریپت به صورت زیر مشخص می شود:

Var url = "./pages/" + page + ".html";

اگر قصد دارید از مسیر دیگری استفاده کنید، حتما آن را در اسکریپت جایگزین کنید. علاوه بر این، اگر از شناسه های دیگری استفاده کرده اید، باید در اسکریپت دوباره تعریف شوند. درست همین جا:

ButtonId = "#moreButton", loadingId = "#loadingDiv"، container = "#smartPortfolio";

و همانطور که گفتم، قبل از تگ بدنه بسته، خود اسکریپت را نیز اضافه می کنیم:

مانند این در صفحه فرودامکان اجرای "بارگذاری تنبل" وجود دارد. لطفاً موضوعات بیشتری را ارسال کنید که می خواهید پست وبلاگ را بخوانید. تا آنجا که ممکن است، سعی می کنم نه مطالب برنامه ریزی شده، بلکه مطالبی را که در مورد آن می پرسید در بخش "پیشنهادات شما" منتشر کنم. و این همه برای امروز است. تا!

جعبه شنی

استخدام کردن فوریه 9, 2013 در 09:42 ب.ظ

من را کاملاً بچرخانید. طرح بندی پاسخگو با پیمایش بی نهایت

• اتاق الوار *

چندی پیش به مشکلی برخوردم:
- طرح بندی یک طرح پاسخگو. هنگامی که اندازه یک پنجره را تغییر می دهید، عناصر موجود در صفحه تا یک عرض معین مقیاس می شوند. اگر عرض کمتر از حداقل باشد، تعداد عناصر در ردیف کوچکتر می شود و در عین حال کل صفحه را پر می کند. معنی واضح است - صفحه باید روی هر مانیتوری ظاهر شود، از جمله. در دستگاه های تلفن همراه
- بارگذاری محتوا هنگام پیمایش صفحه رخ می دهد، بنابراین تنها بخشی از محتوا نمایش داده می شود، بقیه با اسکرول کردن به پایین بارگذاری می شود (مشابه با دیوار VK).
- ظاهر عناصر در صفحه به نوبه خود با افزایش تدریجی شفافیت هر عنصر رخ می دهد. پس از اینکه عنصر اول مات شد، افکت روی آن اعمال می شود مورد بعدی... و غیره برای همه.

راه حل آماده ای پیدا نکردم، مجبور شدم همه چیز را از ابتدا بنویسم. شاید کل این ویژگی بی فایده باشد، اما اگر ناگهان کسی به کارتان آمد - از آن استفاده کنید، آن را آزمایش کنید، از آن لذت ببرید:

Html... من یک طرح بسیار ساده برای آزمایش با عجله درست کردم. برای اینکه مدت زیادی استایل ها را اذیت نکنم، بوت استرپ را وصل کردم. این نشانه گذاری است:
// در اصل، شما می توانید یک کلاس را نه در اینجا، و بدون پارامتر، مقداردهی اولیه کنید. بیشتر در این مورد بعدا. // ظرفی که همه موارد در آن نمایش داده می شوند. // در مورد ما، هر مورد است عنصر جداگانهدر صفحه. ما تعداد زیادی از آنها را به نمایش خواهیم گذاشت. // ... بسیاری از موارد

// پاکسازی را انجام دهید، زیرا اقلام ما شناور هستند: سمت چپ

CSS... همه چیز بسیار ساده است. من بوت استرپ را وصل کردم، چند سبک برای محتوا تنظیم کردم - و شما می روید!
آدرس @import ("bootstrap.css")؛ بدنه (پس‌زمینه: # 000؛) section.container (موقعیت: مطلق؛ بالا: 50 پیکسل؛ پایین: 50 پیکسل؛ عرض: 100%؛ سرریز: خودکار؛) section.container> section.item (موقعیت: نسبی؛ شناور: چپ؛ حاشیه: 0؛ بالشتک: 0؛ ارتفاع: 140 پیکسل؛ سرریز: پنهان؛) section.container> section.item> img (عرض: 100%؛)

جی اس... اینجا قبلاً جالب است. در ابتدا، توابع را جداگانه نوشتم، سپس، وقتی همه چیز کار کرد، آنها را در یک کلاس ترکیب کردم
GALLERY = (// پارامترهای پیش‌فرض را تنظیم کنید که می‌توانند در طول مقداردهی اولیه لغو شوند. Container: "section.container"، // کانتینر اصلی: "section.item"، // یک آیتم گالری جداگانه img: "section.item> img. hidden "، // تصویری که در ابتدا خواهیم داشت" مخفی می کند "فاصله: 200، // تاخیر تعداد اثر شفافیت: 5، // تعداد عناصر اضافه شده در ابتدا: تابع (پارام ها) (var _self = این؛ // پارامتر تعریف مجدد (در صورت تصویب. اگر نه، از پیش فرض استفاده کنید.) if (پارامز! = تعریف نشده) (برای (کلید var در پارامترها) (_self = params;)) return _self.setUp ();)، setUp: تابع ( ) (var _self = this; // ما کنترل کننده های رویداد را آویزان می کنیم. در مورد ما، پنجره به چنین (تغییر اندازه) $ (window) .bind ("تغییر اندازه"، تابع () (_self.adjust ();)) نیاز دارد. / ... برای بارگیری صفحه $ (document) .ready (function () (_self.adjust (); _self.play ();)); // ... به بلوک والد اسکرول کنید $ (_ self.container .bind ("scroll"، تابع () (_self.checkScr oll (); ))؛ )، // بسته به اندازه پنجره، عرض و تعداد موارد را در یک ردیف تنظیم کنید: تابع () (var _self = این؛ var outWidth = $ (_ self.container) .width () var outHeight = $ (_ self.container) .height ()؛ var minWidth = 220؛ var cnt = Math.floor (outWidth / minWidth)؛ var itemWidth = outWidth / cnt؛ $ (_ self.item) .css (("width ": itemWidth + "px")) ;)، // افکت fade-in را راه اندازی کنید. کمی تفاوت: کلاس پنهان // برای تصویر مورد نیاز است نه برای پنهان کردن آن (این کار با روش زیر انجام می شود)، بلکه برای یافتن // عنصر اول هر بار که محتوا به روز می شود. چرخه روش بازی() پس از اعمال // افکت fadeIn () از بین تمام تصاویر با کلاس پنهان (در ابتدا همه یکی دارند) می رود و کلاس را حذف می کند. بنابراین، هنگام بارگیری محتوای جدید، چرخه // نه از اولین عنصر، بلکه از اولین عنصر بارگذاری شده شروع می شود. // اولین بار با استفاده از روش صف () مواجه شد. play: تابع () (var _self = این؛ var آیتم ها = $ (_ self.container) .find (_self.img)؛ $ (اقلام) .each (تابع (i) (var cur = $ (this) .hide ( ) $ (document) .queue ("myQueue"، تابع (n) (cur.removeClass ("hidden"). fadeIn (_self.interval, n);)))؛ $ (document) .dequeue ( " myQueue ");)، // محتوا در حال بارگیری خودش است. همه چیز در اینجا ساده است: ما درخواستی را به سرور ارسال می کنیم - // محتوای جدیدی را در صفحه دریافت می کنیم (در صورت وجود) و آن را در انتهای بارگیری بلوک والد نمایش می دهیم: تابع () (var _self = this; $ . ajax ((url: "/ load .php ", type:" POST ", data: (" count ": _self.count), dataType:" json ", success: function (json) (if (json.output) ( $ (_ self.container) .children ("div.clearfix"). قبل از (json.output)؛ _self.adjust (); _self.play ();))));)، // وضعیت اسکرول را بررسی کنید. اگر پیمایش عمودیدر بلوک والد // برابر با حداکثر ممکن است - یک درخواست برای محتوای جدید ارسال کنید. // بنابراین، بارگذاری محتوا تنها در صورتی انجام می شود که ما // صفحه را تا انتها تمام کرده باشیم. checkScroll: تابع () (var _self = این؛ var scrollH = $ (_ self.container) .prop ("scrollHeight")؛ var scrollT = $ (_ self.container) .prop ("scrollTop")؛ var scrollS = $ ( _self.container) .prop ("scrollTop") + $ (_ self.container) .height (); if (scrollS == scrollH) (_self.load ();)))

PHP... اینجا همه چیز بدوی است، فقط برای آزمایش.
$ json = آرایه (); $ html = ""; $ items_on_page = خالی ($ _ POST ["count"])؟ (int) $ _ POST ["count"]: 5; برای ($ i = 0؛ $ i< $items_on_page; $i++) { $html .= "";) $ json [" خروجی "] = $ html; echo json_encode ($ json);
در اینجا، تنها یک پارامتر به _POST $ (تعداد بلوک‌های اضافه شده) ارسال می‌شود، اما می‌توانید نقطه شروع را نیز طبق اصل صفحه‌بندی ارسال کنید. می توان آن را در JS با استفاده از:
var آیتم = $ (_ self.container) .find (_self.img); var start = items.length; // و در درخواست ارسال کنید: data: ("count": _self.count، "start": start)، // ... سپس هنگام واکشی داده ها، ... "LIMIT" را مشخص کنید. (int) $ _ POST ["شروع"]. "،". $ items_on_page;

اینگونه شد "صفحه بندی بدون صفحه بندی" اما در یک صفحه لاستیکی. یک نمونه کار اینجاست.

در سال 2011، بسیار شیک بود (به نظر من، این مد از فیس بوک آمده است) انجام "پیمایش بی پایان" در سایت های خود: این زمانی است که کاربر چرخ ماوس را می چرخاند و تمام نتایج جستجوی جدید توسط Ajax بارگذاری می شوند. پایین صفحه، اسکرول معمولی را به بی پایان تبدیل می کند و باعث ایجاد "ناهماهنگی شناختی" در اولین کاربر می شود.

همچنین اخیراً مقاله ای را در این سایت دیدم که در آن نویسنده نارضایتی خود را از "پیمایش بی پایان" ابراز کرده و خواستار استفاده از "کدگذاری" خوب قدیمی شده است.

من با نویسنده موافقم. من خودم معتاد به موادمخدر هستم و گاهی اوقات مثل اینکه مسحور شده پشت مانیتور می نشینم، با چشمان شیشه ای، می چرخم، می چرخم، چرخ جادو را می چرخانم، نمی توانم به تجارت بروم / کار کنم / به فروشگاه / بخورم / بنوشم / بروم توالت، و من با یک فکر آن را می چرخانم: "خب، کی تمام شدی؟!" (چه کاری می توانید انجام دهید - من عادت دارم همه چیز را به آخر برسانم).

یک روز صبح بلند شدم و با قاطعیت تصمیم گرفتم: "دیگر بس است که این را تحمل کنم!"

فیلمنامه کوچکم را که اخیراً برای فیلمنامه‌ام نوشتم به شما تقدیم می‌کنم. شبکه اجتماعی(با بلک جک و فاحشه ها).

برای دیدن دمو، آرشیو را دانلود کرده و فایل "test/test.html" را اجرا کنید.

این اسکریپت چه نوآوری هایی ارائه می دهد:

از آنجایی که آنها "نوار پیمایش" اصلی را به چیزی غیرقابل درک تبدیل کردند، باید "نوار پیمایش" معمولی را که با کشیدن یک نوار خاکستری در سمت راست صفحه، بلافاصله در سمت چپ "نوار پیمایش" معمولی انجام دادیم، برگردانیم.

جایی که این نوار از بالا به آن رسیده است، تعداد نمونه‌ای از نتایج است که قبلاً در آن پیمایش کرده‌ایم. به طور کلی، این نوار به نوعی مشکی است. جایی که خاکستری است، جایی است که در کل نمونه ما اکنون هستیم.

همچنین توجه داشته باشید که آدرس صفحه با اسکرول تغییر می کند. بنابراین می‌توانید تا نیمه راه امشب را پیمایش کنید، صفحه را نشانه‌گذاری کنید، رایانه‌تان را خاموش کنید، بخوابید، صبح از خواب بیدار شوید، رایانه‌تان را روشن کنید، به صفحه‌ای که دیروز قبل از خواب علامت‌گذاری کرده‌اید بروید و از همان ابتدا به پیمایش ادامه دهید. جایی که توقف کردی و علاوه بر این، می توانید از این مکان نه تنها به جلو، بلکه به عقب نیز پیمایش کنید.

و در مورد ناوبری به هر صفحه مورد نظر: در اینجا می توانید به هر صفحه ای دسترسی پیدا کنید - فقط شماره صفحه انتخابی مورد نیاز خود را در آدرس صفحه وب جایگزین کنید. از آنجایی که آدرس های اینترنتی قابل خواندن توسط انسان در حال حاضر استاندارد هستند، این باید یک راه حل قابل اجرا باشد.

این فیلمنامه، بدیهی است که چیزی در سنگ گرانیت حک شده نیست، و من خودم، امروز صبح که از خواب بیدار شدم، نیمی از آن را بازنویسی کردم. با این وجود، به نظر می رسد عملکرد پایدار است و در آخرین مورد آزمایش شده است نسخه های کرومو فایرفاکس من فوراً می گویم: من دنبال "کراس مرورگر" نیستم - اگر کسی بخواهد از این اسکریپت در سایت "کراس مرورگر" خود استفاده کند، همیشه می توان آن را تمام کرد.

به نظر می رسد همه چیز، نسخه ی نمایشی برای خود صحبت می کند. این پست باعث تحریک نظرات می شود.

چه کارهای دیگری می توان انجام داد (بر اساس نظرات):

هنگامی که روی هر نقطه از نوار کلیک می کنید، به صفحه مربوطه از انتخاب بروید.

هنگامی که داده های زیادی در یک صفحه وب وجود دارد، صفحات داده را از بالای یک صفحه وب حذف کنید (به منظور کاهش سرعت).

نمونه هایی از بهبود یافته "پیمایش بی پایان".

چیزی که مدتهاست هیچ کدی منتشر نکرده بودم. امروز وضعیت را درست می کنم و چند قطعه مفید جی کوئری را در اختیار شما قرار می دهم که قطعا در سایت های شما مفید خواهند بود.

من وارد تئوری نمی شوم، تمام اسناد جی کوئری در وب سایت رسمی کتابخانه موجود است. من فقط به شما یادآوری می کنم که jQuery چیست.

جی کوئری یک کتابخانه جاوا اسکریپت است که بر تعامل جاوا اسکریپت و HTML تمرکز دارد. کتابخانه jQuery به شما کمک می کند تا به راحتی به هر عنصر DOM دسترسی داشته باشید، به ویژگی ها و محتوای عناصر DOM دسترسی داشته باشید و آنها را دستکاری کنید. کتابخانه jQuery همچنین یک API مناسب برای کار با AJAX ارائه می دهد.

پس بزن بریم!

1. پیمایش صاف به بالای صفحه

هیچ سایتی نمی تواند بدون آن کار کند. فقط 4 خط کد به بازدیدکنندگان شما این امکان را می دهد که به راحتی کل صفحه را با یک کلیک به سمت بالا حرکت دهند.

$ ("a"). کلیک کنید (تابع () ($ ("html، بدن"). animate ((scrollTop: 0)، "slow"); return false;)).

2. سرصفحه های جدول تکراری

برای بهبود خوانایی و خوانایی جداول خود، می توانید عناوین آنها را در زیر جدول کپی کنید. این یک چیز جزئی به نظر می رسد، اما در جداول پیچیده و بزرگ که در یک صفحه قرار نمی گیرند، بسیار راحت است.

Var $ tfoot = $ (" ")؛ $ ($ (" thead "). شبیه سازی (درست، واقعی) .children (). دریافت (). معکوس ()). هر یک (تابع () ($ tfoot.append ($ (این));) $ tfoot.insertAfter ("table thead");

3. بارگذاری داده های خارجی

با با استفاده از جی کوئریبارگذاری محتوای خارجی در صفحات وب بسیار آسان است. می توان آن را مستقیماً به یک بلوک DIV مانند مثال زیر خروجی داد.

$ ("# محتوا"). load ("somefile.html"، تابع (پاسخ، وضعیت، xhr) (// رسیدگی به خطا اگر (وضعیت == "خطا") ($ ("# محتوا"). html (" خطایی روی داد: "+ xhr.status +" "+ xhr.statusText);)));

4. ارتفاع ستون یکسان

شناخته شده است که بلوک ها را در ارتفاع با استاندارد تراز می کند با استفاده از HTMLو CSS به این راحتی نیست. فقط چند خط کد زیر به شما این امکان را می دهد که ارتفاع همه بلوک ها را با ارتفاع بلوک بزرگتر برابر کنید.

var maxheight = 0; $ ("div.col") هر (تابع () (اگر ($ (this) .height ()> maxheight) (maxheight = $ (this) .height ();))); $ ("div.col"). height (maxheight);

5. گورخر جدولی

همانطور که می دانید، در صورت ایجاد یک متناوب چند رنگ از جدول، درک و خوانایی جدول به طور قابل توجهی بالاتر خواهد بود. پیاده سازی این کار در جی کوئری بسیار آسان است.

$ (document) .ready (function () ($ ("table tr: even"). addClass ("stripe");));

6. به روز رسانی جزئی صفحه

اجرای بروزرسانی صفحه (جزئی) با jQuery بسیار آسان است. برای مثال، کد زیر به شما این امکان را می دهد که هر 10 ثانیه به طور خودکار بلوک #refresh را به روز کنید.

SetInterval (تابع () ($ ("# refresh"). Load (location.href + "#refresh> *"، "");)، 10000); // میلی ثانیه صبر کنید

7. از پیش بارگذاری تصاویر

این کد به شما امکان می دهد تصاویر را در آن بارگذاری کنید زمینهبدون بارگذاری در فرآیند مشاهده صفحه. فقط تصاویری را که باید در خط 7 از قبل بارگذاری کنید فهرست کنید.

$ .preloadImages = تابع () (برای (var i = 0; i ") .attr (" src "، آرگومان ها [i]);)) $ (سند) .ready (تابع () ($ .preloadImages (" hoverimage1.jpg "," hoverimage2.jpg ");));

8. باز کردن پیوندهای خارجی در پنجره ها / تب های جدید

این قطعه تمام پیوندهای خارجی صفحه را مجبور می کند در یک پنجره مرورگر جدید باز شوند. اسکریپت corny دامنه فعلی سایت را تعیین می کند و اگر با آدرس موجود در پیوند مطابقت نداشته باشد فعال می شود.

$ ("a"). هر (تابع () (var a = RegExp جدید ("/" + window.location.host + "/")؛ اگر (! a.test (this.href)) ($ (این ) .click (تابع (رویداد) (event.preventDefault ()؛ event.stopPropagation ()؛ window.open (this.href, "_blank");));)));

9. کل پنجره مرورگر را مسدود کنید

این اسکریپت به شما کمک می کند بلوک را برای پر کردن کل صفحه مرورگر گسترش دهید. ایده آل برای مدال و دیالوگ.

Var winWidth = $ (پنجره) .width (); var winHeight = $ (پنجره) .height (); $ ("div"). css (("width": winWidth، "height": winHeight،)); $ (پنجره) .resize (تابع () ($ ("div"). css (("width": winWidth، "height": winHeight،));));

10. بررسی پیچیدگی رمز عبور

اگر به بازدیدکنندگان سایت خود اجازه می دهید رمز عبور خود را وارد کنند، بهتر است پیچیدگی را کنترل کرده و بازدیدکننده را در مورد آن مطلع کنید.

ابتدا بخش HTML کد را بنویسیم:

و با کمک کد زیر رمز وارد شده را بررسی می کنیم و اطلاعاتی را به بازدید کننده نمایش می دهیم: رمز عبور پیچیده، متوسط ​​یا ضعیف است و همچنین بررسی می کنیم که آیا خیلی کوتاه است.

$ ("# پاس"). keyup (عملکرد (e) (var strongRegex = RegExp جدید ("^ (? =. (8،)) (? =. *) (? =. *) (? =. *) (? =. * \\ W). * $ "," G "); var mediumRegex = RegExp جدید (" ^ (? =. (7،)) (((? =. *) (? =. *) ) | ((? =. *) (? =. *)) | ((? =. *) (? =. *))). ? =. (6،)). * "" G")؛ اگر (نادرست == کافیRegex.test ($ (این) .val ())) ($ ("# قدرت عبور"). Html (" کاراکترهای بیشتر ");) other if (strongRegex.test ($ (this) .val ())) ($ (" # passstrength "). className = "ok "; $ (" # passstrength "). html ("قوی!" );) else if (mediumRegex.test ($ (this) .val ())) ($ ("# passrength"). className = "alert"؛ $ ("# passrength"). html ("Medium!") ;) else ($ ("# قدرت عبور"). className = "خطا"؛ $ ("# قدرت عبور"). html ("ضعیف!");) بازگشت true;));

11. اندازه تصاویر را با استفاده از جی کوئری تغییر دهید

البته منطقی تر است که تصاویر را در سمت سرور با استفاده از PHP و GD تغییر اندازه دهید، اما شرایطی وجود دارد که این کار باید در سمت مشتری انجام شود. JQuery دوباره در این مورد به ما کمک خواهد کرد.

$ (پنجره) .bind ("بار"، تابع () ($ ("# product_cat_list img"). هر کدام (تابع () (var maxWidth = 120؛ var maxHeight = 120؛ نسبت var = 0؛ عرض var = $ ( this) .width ()؛ var height = $ (this) .height (); if (width> maxWidth) (نسبت = maxWidth / عرض؛ $ (this) .css ("width"، maxWidth)؛ $ (این) .css ("ارتفاع"، ارتفاع * نسبت؛ ارتفاع = ارتفاع * نسبت؛) عرض var = $ (این) .width ()؛ ارتفاع var = $ (این) .height (); if (ارتفاع> maxHeight) ( نسبت = حداکثر ارتفاع / ارتفاع؛ $ (این) .css ("ارتفاع"، حداکثر ارتفاع)؛ $ (این). "#contentpage img"). show (); // IMAGE RESIZE));

12. بارگذاری محتوا هنگام اسکرول کردن صفحه به پایین

این تکنیک اغلب به عنوان اسکرول بی پایان نامیده می شود. وقتی کاربر صفحه را پیمایش می کند، محتوا بارگذاری می شود. اجرای این کار با کد زیر به اندازه کافی آسان است.

Var loading = false; $ (پنجره) .scroll (تابع () (if ((($ (پنجره) .scrollTop () + $ (پنجره) .height ()) + 250)> = $ (سند) .height ()) (اگر ( بارگیری == نادرست) (بارگیری = درست؛ $ ("# loadingbar"). css ("نمایش"، "بلاک")؛ $ .get ("load.php? start =" + $ ("# loaded_max"). val ()، تابع (بارگذاری شده) ($ ("body"). اضافه (بارگذاری شده)؛ $ ("# loaded_max"). val (parseInt ($ ("# loaded_max"). val ()) + 50؛ $ ("#loadingbar"). css ("نمایش"، "هیچکدام"); $ (document) .ready (function () ($ ("# loaded_max"). val (50);));

13. بررسی آپلود تصویر

اغلب لازم است بررسی شود که آیا تصویر در لحظه بارگذاری شده است یا خیر. JQuery دوباره در این مورد به ما کمک خواهد کرد.

Var imgsrc = "img / image1.png"; $ (" ") .load (عملکرد () (هشدار ("تصویر بارگیری شده")؛)). خطا (عملکرد () (هشدار ("خطا در بارگیری تصویر");)). attr (" src ", imgsrc);

14. مرتب سازی بر اساس حروف الفبا

اگر می خواهید لیست را به صورت پویا و بر اساس حروف الفبا مرتب کنید، این قطعه کوچک قطعا به شما کمک خواهد کرد.

$ (تابع () ($ .fn.sortList = تابع () (var mylist = $ (این)؛ var listitems = $ («li»، mylist) .get ()؛ listitems.sort (تابع (a, b) (var compA = $ (a) .text (). toUpperCase (); var compB = $ (b) .text (). toUpperCase ()؛ return (compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

ذخیره - مفید خواهد بود.

جدیدترین و جالب ترین ها از دنیای وردپرس در کانال تلگرام من. اشتراک در!