فیلتر محصول تطبیقی دریافت اطلاعات از مشتری

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

چه کنیم؟

ما فقط باید 3 امتیاز را تکمیل کنیم:

• 1. داده ها را از مشتری دریافت کنید و آن ها را مطابق با نیازهای سرور پردازش کنید. به عنوان مثال، پارامترهای پیش فرض را تنظیم کنید
• 2. در واقع خود کد را برای بازیابی محصولات از پایگاه داده بنویسید. اول از همه یک پرس و جو sql آماده کنید
• 3. داده های دریافتی را به مشتری برگردانید

دریافت اطلاعات از مشتری

ممکن است بپرسید: اگر بتوانیم به راحتی همه داده ها را از آرایه $_GET خارج کنیم، چرا باید این عملیات ساده را جداگانه برجسته کنیم؟

ابتدا به منظور تنظیم مقادیر پیش فرض. شما نمی توانید به مشتری تکیه کنید که خودش از این موضوع مراقبت کند.

ثانیاً، همه داده‌ها به صورت $_GET به شکل قابل استفاده نیستند. به عنوان مثال، برای ما راحت تر است که مرتب سازی را از مشتری با یک پارامتر به شکل field_direction، به عنوان مثال، price_asc ارسال کنیم. اما در پرس و جوی sql اینها موجودیت های جداگانه ای هستند، بنابراین باید از قبل پردازش شوند.

در مورد برندها نیز وضعیت مشابه است. روی کلاینت آنها را به صورت آرایه ای از برندها ارسال می کنیم و php نیز آنها را به صورت آرایه دریافت می کند. اما برای پرس و جوی sql به یک رشته نیاز دارید - لیستی از مارک ها که با کاما از هم جدا شده اند. بنابراین، برندها نیز نیاز به پردازش بیشتری دارند.

بنابراین، اجازه دهید یک تابع getOptions() بنویسیم که داده‌ها را از $_GET بازیابی می‌کند و آن را به فرمی مناسب برای ما تبدیل می‌کند. من قبلاً تقریباً تمام اطلاعات مقدماتی را داده ام ، بنابراین بیایید فوراً به کد نهایی نگاه کنیم.

// دریافت داده از آرایه _GET تابع getOptions() ( // دسته و قیمت $categoryId = (isset($_GET["category"])) ? (int)$_GET["category"] : 0; $minPrice = ( isset($_GET["min_price"])) ? (int)$_GET["min_price"] : 0; $maxPrice = (isset($_GET["max_price"])) ? (int)$_GET["max_price" " ] : 1000000; // برندهای $brands = (isset($_GET["brands"])) ? implode($_GET["brands"]، ","): null؛ // مرتب سازی $sort = (isset( $ _GET["مرتب‌سازی"])) $_GET["مرتب‌سازی"] : "price_asc"؛ $sort = explode("_"، $sort)؛ $sortBy = $sort؛ $sortDir = $sort؛ آرایه برگشتی( " " => $brands، "category_id" => $categoryId، "min_price" => $minPrice، "max_price" => $maxPrice، "sort_by" => $sortBy، "sort_dir" => $sortDir)؛ )

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

بیایید مرتب سازی را متفاوت تغییر دهیم. به طور جداگانه، قسمت مرتب سازی و پارامتر را بیرون بکشید: asc یا desc.

لطفاً توجه داشته باشید که در همه موارد فراموش نمی کنیم که مقدار پیش فرض را جایگزین کنیم اگر پارامتر مورد نیاز از مشتری دریافت نشد. و اکنون که تمام داده‌ها تبدیل شده‌اند، تنها چیزی که باقی می‌ماند این است که آن را از تابع موجود در آرایه انجمنی از طریق آرایه بازگشتی (...) برگردانیم.

آماده سازی پرس و جوی SQL و بازیابی داده ها از پایگاه داده

تمام داده ها به شکلی که ما نیاز داریم آماده شده است، حالا بیایید یک درخواست بنویسیم و آن را اجرا کنیم. تابع getGoods($options, $conn) این کار را انجام می دهد. در پارامترها، $options - داده های آماده شده توسط تابع قبلی، و $conn - شی اتصال پایگاه داده که در درس قبلی ایجاد کردیم را می گیرد. وظیفه ما نوشتن یک پرس و جو sql است. به طور کلی به نظر می رسد این است:

g.id را به عنوان good_id، g.good به عنوان خوب، b.brand به عنوان مارک، g.price به عنوان قیمت، g.rating به عنوان رتبه، g.photo را به عنوان عکس از کالاها به عنوان g، مارک ها را به عنوان b که در آن g.category_id = Select_category انتخاب کنید. و g.brand_id در (لیست مارک‌ها با کاما از هم جدا شده) و g.brand_id = b.id و (g.price بین حداقل_قیمت و حداکثر_قیمت) به ترتیب مرتب‌سازی_فیلد_جهت

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

هر محصولی که داریم همیشه یک دسته بندی دارد. هیچ مفهومی از دسته صفر در پایگاه داده ما وجود ندارد - ما این کار را برای راحتی خود انجام دادیم تا بفهمیم که کاربر در مرورگر هیچ دسته ای را انتخاب نکرده است (یا همه را انتخاب کرده است - برای ما یکسان است). و در این صورت نباید خط را در درخواست وارد کنیم
g.category_id = select_category و
در مورد برندها هم همینطور است؛ اگر انتخاب نشدند، خط مربوطه را رد می کنیم. در اینجا چیزی است که در کد به نظر می رسد.

// تابع دریافت کالا getGoods($options, $conn) ( // پارامترهای مورد نیاز $minPrice = $options["min_price"]؛ $maxPrice = $options["max_price"]؛ $sortBy = $options["sort_by"] ؛ $sortDir = $options["sort_dir"]؛ // پارامترهای اختیاری $categoryId = $options["category_id"]؛ $categoryWhere = ($categoryId !== 0) ? " g.category_id = $categoryId و " : " "; $brands = $options["brands"]; $brandsWhere = ($brands !== null) ? " g.brand_id در ($brands) و " : ""؛ $query = " g.id را به عنوان good_id انتخاب کنید ، g.good به عنوان خوب، b.brand به عنوان نام تجاری، g.price به عنوان قیمت، g. رتبه بندی به عنوان رتبه، g.photo به عنوان عکس کالا از به عنوان g، مارک های به عنوان b در جایی که $categoryWhere $brandsWhere g.brand_id = b.id و (g.price بین $minPrice و $maxPrice) سفارش توسط $sortBy $sortDir "؛ $data = $conn->query($query)؛ بازگشت $data->fetch_all(MYSQLI_ASSOC)؛ )

ابتدا، متغیرهای قیمت و مرتب‌سازی را از آرایه $options استخراج می‌کنیم - آنها به سادگی بدون تغییر در کوئری وارد می‌شوند. و برای دسته و برندها، خطوط $categoryWhere و $brandsWhere را طبق این اصل تشکیل می دهیم: شرط لازم برای بخش Where، در صورت وجود داده، و یک خط خالی در صورت عدم وجود داده. بنابراین، ما یک پرس و جو نسبتاً منطقی sql دریافت کردیم که تمام خواسته های ما را در نظر می گیرد. دو خط آخر این درخواست را اجرا می کنند و آرایه ای از اشیا را با فیلدهای مورد نیاز از تابع برمی گرداند. تنها چیزی که باقی می‌ماند این است که همه چیز را کنار هم بگذاریم و کالاهای دریافتی را به مشتری / مرورگر از قبل در انتظار ارسال کنیم.

ما کالا را به مشتری برمی گردانیم

این ساده ترین قسمت درس است. بیایید به خرد نوشته شده در درس قبل نگاه کنیم.

// اتصال به پایگاه داده $conn = connectDB(); // پاسخ موفقیت آمیز را به مشتری echo برگردانید json_encode(array("code" => "success", "data" => $_GET));

بیایید این کد را جایگزین کنیم

// اتصال به پایگاه داده $conn = connectDB(); // دریافت داده از مشتری $options = getOptions(); // دریافت کالا $goods = getGoods($options, $conn); // بازگرداندن یک پاسخ موفق به مشتری echo json_encode(array("code" => "success", "options" => $options, "goods" => $goods));

ما چند خط اضافه کردیم: تابع getOptions داده ها را در متغیر $options بازیابی کرد. ما بلافاصله از آن برای به دست آوردن کالاهای getGoods استفاده کردیم، نتایج در $goods ذخیره شد. و ما پاسخ را به مشتری گسترش دادیم. پارامتر داده به گزینه تغییر نام داده شد و محتوای $_GET به آن بازگردانده نشد، بلکه مقادیر قبلاً تبدیل شده بودند. و در پارامتر کالا، آرایه ای از کالاهای دریافتی برگردانده شد.

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

بررسی نتایج کار

بیایید دسته گوشی های هوشمند را انتخاب کنیم و برندهای اپل و سامسونگ را علامت گذاری کنیم. در پاسخ خواهیم دید که سرور 3 محصول را بر اساس قیمت صعودی مرتب شده است

حالا حداقل قیمت را 20 هزار قرار می دهیم و مرتب سازی را به قیمت نزولی تغییر می دهیم
همانطور که می بینید اکنون فقط 2 محصول وجود دارد - یکی از سامسونگ به دلیل قیمت 17 هزار که با فیلترها مطابقت نداشت کنار گذاشته شد. و کالاها به صورت معکوس مرتب می شوند. اگر همه چیز را به درستی انجام داده باشید، دقیقاً همان تصویر را خواهید دید.

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

اما HTML از کار با فیلترها نیز پشتیبانی می کند. با اعمال فیلترهای مختلف بر روی متن، می توانید به افکت های جالبی دست پیدا کنید. ولی مراقب باشید، همه مرورگرها همان جلوه هایی را که فیلترها قرار است ارائه دهند، نمایش نمی دهند، برخی از مرورگرها کاملاً فیلترها را نادیده می گیرند. بنابراین، صفحات وب خود را در مرورگرهای مختلف تست کنید. همه فیلترها در Internet Exhlorer به درستی کار می کنند.پس بیایید نحوه عملکرد فیلترها را بررسی کنیم.

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

ماسک فیلتر.

متن یا بهتر است بگوییم پس‌زمینه‌ای که متن روی آن نوشته شده را انتخاب می‌کند، انگار متن را با ماوس انتخاب کرده‌اید.

نحو فیلتر: STYLE="filter:Mask(Color="Color")

رنگ - رنگ انتخابی به صورت هگزادسیمال (به عنوان مثال، #000FFF) یا نام رنگ به زبان انگلیسی، به عنوان مثال، قرمز، آبی، سبز. این تعریف رنگ در همه فیلترها استفاده می شود، بنابراین دیگر تکرار نخواهد شد.

لیست 19.1.

فیلتر DropShadow.

یک سایه به متن اضافه می کند.

نحو فیلتر:
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positive")"

رنگ - رنگ سایه
OffX - تغییر سایه در X
OffY - افست سایه Y
مثبت - سایه چپ یا راست (به ترتیب 0 یا 1)

لیست 19.3.

این شکلی است که در صفحه وب به نظر می رسد:

فیلتر FlipV.

متن را به صورت عمودی ورق می‌زند.

نحو فیلتر: STYLE="filter:FlipV"

لیست 19.5.

این شکلی است که در صفحه وب به نظر می رسد:

فیلتر موج.

متن را موج دار می کند.

نحو فیلتر:STYLE="filter: Wave(Freq="Freq", Add="Add", LightStrength="LightStrength", Phase="Phase", Strength="Strength")"

فرکانس - تعداد امواج
افزودن - نمایش/پنهان کردن حاشیه (به ترتیب 1 یا 0)
LightStrength - قدرت موج
فاز - زاویه موج
قدرت - شدت موج

لیست 19.7.

این شکلی است که در صفحه وب به نظر می رسد:

فیلتر تاری

متن را در جهت خاصی محو می کند.

نحو فیلتر:
STYLE="filter:Blur(Add="Add", Direction="Direction", Strength="Strength")"

افزودن - تاری متوسط ​​یا قوی (به ترتیب 1 یا 0)
جهت - تاری در کدام جهت رخ می دهد (از 0 تا 315)
قدرت - جبران تاری

در نهایت، من زمان پیدا کردم و می خواهم اسکریپت جدید خود را که به شما امکان می دهد داده ها را در جداول html فیلتر کنید، به شما معرفی کنم.

این اسکریپت از انواع فیلترهای زیر پشتیبانی می کند:

• فیلد متنی
• لیست کشویی
• دکمه های رادیویی
• چک باکس ها

این اسکریپت از نظر اندازه کوچک است و اتصال آن بسیار آسان است و همچنین به خوبی با اسکریپت مرتب‌کننده جدول ترکیب می‌شود؛ می‌توانید آن را به همراه نمونه‌های اتصال و پیکربندی در مخزن من دانلود کنید: bitbucket.org

فیلتر جدول نمایشی:

از نظر مفهومی، اسکریپت از دو بخش تشکیل شده است: اشیاء فیلتر filterTable.Filterو از خود تابع جدول فیلتر (...)، که این اشیاء فیلتر را به جدول html متصل می کند.

شی فیلتر دارای سازنده زیر است:

/** * فیلتر شی. * @param HTMLInputElement | HTML انتخاب HTMLElementRef | - پیوند یا آرایه ای از پیوندها * به عناصر html که به عنوان فیلتر عمل می کنند. * @param تابع پاسخ به تماس - عملکرد پاسخ به تماس. زمانی فراخوانی می شود که اسکریپت * محتویات سلول را تأیید کند. تابع برای هر ردیف از جدول، برای * هر سلول از ستونی که فیلتر برای آن اختصاص داده شده است فراخوانی می شود. * این تابع 3 پارامتر ارسال می کند: callback (مقدار، فیلترها، i) که در آن: * مقدار رشته - مقدار سلول جدول در زمانی که تابع نامیده می شود بررسی می شود * فیلترهای HTMLElements - آرایه ای از عناصر HTML که به عنوان فیلتر اختصاص داده شده اند. برای ستون در حال بررسی * شماره i شاخص عنصر فیلتر در آرایه فیلترها است که * اعتبارسنجی تماس فعلی است. آن ها filters[i] در داخل تابع callback * حاوی عنصری است که کاربر * با آن تعامل داشته است و در نتیجه فرآیند اعتبارسنجی راه اندازی می شود. * @param String eventName - نام رویداد مرتبط با فیلتر، که * برای اعتبارسنجی (onkeyup | onclick | onblur | onchange و غیره) * @constructor */ filterTable.Filter = تابع (HTMLElementRef، callback، eventName) آرگومان اول: HTMLElement HTMLElementRef

آرگومان دوم: تابع فراخوانی

تابع: پاسخ تماس (مقدار، فیلترها، i)جایی که:
مقدار رشته- مقدار سلول جدول در زمان فراخوانی تابع بررسی می شود
فیلترهای HTMLElements- آرایه ای از عناصر HTML که به عنوان فیلتر برای ستون در حال بررسی اختصاص داده شده است.
شماره i- شاخص عنصر فیلتر در آرایه فیلترها که اعتباردهنده تماس فعلی است. آن ها فیلترهای[i] در داخل تابع callback شامل عنصری است که کاربر با آن تعامل داشته است، در نتیجه فرآیند اعتبارسنجی آغاز شده است. تابع باید درست یا نادرست را برگرداند، بسته به این که آیا مقدار ورودی فیلتر می شود، زمانی که مقدار فیلتر [i] مطابق با ایده شما تنظیم می شود یا خیر.

آرگومان سوم: رشته رویدادName

نام رویداد مرتبط با فیلتری که اعتبارسنجی توسط آن راه‌اندازی می‌شود (onkeyup | onclick | onblur | onchange و غیره) onchange - مقدار پیش‌فرض

خود تابع جدول فیلتردارای امضای زیر است:

جداول * @param فیلترهای شی - شیء پیکربندی فیلتر: ( N: FILTER[, N: FILTER] ) * * جایی که: * NUM یک عدد طبیعی است - تعداد ستون جدول ارائه شده توسط * فیلتر. این عدد می تواند مقادیری از 0 تا تعداد * ستون های جدول - 1 داشته باشد. اعداد را می توان بدون ترتیب مشخص کرد. * * FILTER پیوندی به یک عنصر HTML است که یک عنصر فرم HTML است * و دارای یک ویژگی مقدار (انتخاب شامل) یا * یک شی از نوع tableKit.Filter */filterTable(HTMLTBodyRef، aFilters)

کاملا گیج کننده به نظر می رسد، اما اجازه دهید با یک مثال به آن نگاه کنیم. ابتدا به یک قاب جدول HTML نیاز داریم. لطفاً توجه داشته باشید که فیلترها فقط عناصر یک فرم html هستند؛ به هر حال، آنها دارای ویژگی های شناسه منحصر به فرد هستند که به وسیله آنها آنها را برای ارسال به سازنده filterTable.Filter انتخاب می کنیم.

بنابراین ما یک قاب داریم. فیلتر داره تنها چیزی که باقی می ماند این است که همه را به هم گره بزنیم. اما اجازه دهید ابتدا ساده‌ترین گزینه اتصال را بررسی کنیم و فقط فیلترهای ستون‌های 2 و 3 را در نظر بگیریم، زیرا آنها از یک فیلد متنی و یک لیست کشویی از مقادیری استفاده می‌کنند که فیلتر اسکریپت بدون نیاز به درک "بومی" آن را می‌فهمد. ايجاد كردن filterTable.Filterمن عمداً عناصر 0، 3، 4 را کامنت گذاشتم و در حال حاضر اجرای آنها را به عنوان "..." تعیین کردم تا زودتر از موعد دل را نترسانم :)

لطفاً توجه داشته باشید که آرگومان دوم تابع فیلتر جدول (...، (...))یک شیء پیکربندی فیلتر است که ویژگی های آن دارای نام های عددی است که شروع می شود از 0 تا NUMBER_COLUMN_TABLE-1مقدار هر یک از این ویژگی ها باید یک فیلتر باشد:

جداول */ document.getElementById("هدف")، /* شیء پیکربندی فیلتر: */ ( /* فیلتر برای کادرهای چک ستون اول: 0: ...، */ /* فیلتر فیلد متنی ستون دوم - مطابقت دقیق فقط : */ 1: document.getElementById("متن")، /* فیلتر برای ستون سوم لیست کشویی: */ 2: document.getElementById ("رقم")، /* فیلتر برای ستون چهارم دکمه رادیویی: 3: ... , /* فیلتر برای ستون پنجم ورود تدریجی کلمه: 4: ... */ ));

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

باز هم توجه داشته باشید که برای قسمت متن و لیست کشویی، ارسال یک لینک به عنصر html کافی است. و همچنین به اتصال آخرین فیلتر دقت کنید. ممکن است بپرسید چرا - زیرا در ستون آخر فیلتر یک فیلد متنی است! بله، این درست است، اما اگر با دقت با مثال آزمایشی کار کرده باشید، متوجه شده اید که اولین فیلتر - فیلد آزمایشی تنها پس از وارد کردن کل مقدار و فشار دادن دکمه "Enter" یا کلیک کردن در هر جای دیگری در صفحه، یعنی فیلتر توسط رویداد پیش فرض "onchange" فعال می شود! اما قسمت فیلتر متن ستون آخر به محض وارد کردن یک کاراکتر فوراً کار می کند. برای پیاده سازی این رفتار، من مجبور شدم یک فیلتر طبق تمام قوانین با ایجاد کنم filterTable.Filterهمچنین لازم بود یک تابع تماس مجدد تنظیم شود و علاوه بر این، نام رویداد "onkeyup" که توسط آن فرآیند فیلترینگ آغاز می شود، ارسال شود. مثل این. امیدوارم شما را کاملا گیج نکرده باشم.

FilterTable(/* مرجع عنصر جداول */ document.getElementById("هدف")، /* شی پیکربندی فیلتر: */ ( /* فیلتر برای چک باکس های ستون اول: */ 0: new filterTable.Filter([ /* عناصر فیلتر */ document.getElementById( "charA")، document.getElementById("charB")، document.getElementById("charC") ]، /* تابع فراخوانی اعتبارسنجی */ تابع (مقدار، فیلترها، i) ( /* اگر کادر انتخاب علامت زده نشود، مقدار در اعتبار سنجی شرکت نمی کند، بنابراین باید true */ if (false === filters[i].checked) را برگردانیم true؛ /* بعد، هنگام بررسی، باید مقادیر همه عناصر را به طور همزمان بررسی کنیم. مجموعه، به شرطی که چک باکس علامت زده شود */ filters.checked && filters.value === مقدار || filters.checked && filters.value === مقدار || filters.checked && filters.value === value; ) )، /* فیلتر برای قسمت متن ستون دوم - فقط مطابقت دقیق: */ 1: document.getElementById("text")، /* فیلتر برای ستون سوم لیست کشویی: */ 2: document.getElementById(" اعداد")، /* فیلتر برای ستون چهارم دکمه رادیویی: */ 3: new filterTable.Filter(, /* تابع تماس اعتبارسنجی */ تابع (مقدار، فیلترها، i) ( /* در فیلترها - ما یک دکمه رادیویی "انتخاب نشده"، اگر نصب شده باشد، فیلتر در اعتبارسنجی شرکت نمی کند و ما باید true */ را برگردانیم اگر (true === filters.checked) return true; /* اگر برخی از دکمه‌های رادیویی علامت زده شده است و محتویات سلولی که بررسی می‌شود مطابقت دارد، مقدار true */ بازگشت filters.checked && filters.value === مقدار || filters.checked && filters.value === مقدار || filters.checked && filters.value === value; ))، /* فیلتر برای ستون پنجم ورود تدریجی کلمه: */ 4: new filterTable.Filter(document.getElementById("regexp")، /* تابع فراخوانی اعتبارسنجی */ تابع (مقدار، فیلترها، i) (مقدار بازگشتی .indexOf(filters[i].value) === 0; ), /* ما اعتبار سنجی روی رویداد onkeyup فیلتر را فراخوانی می کنیم */ "onkeyup") ));

این همه است، من منتظر نظرات و پیشنهادات شما هستم و امیدوارم کار من برای شما مفید باشد. خوب، و در نهایت، لیست کامل اسکریپت در اینجا آمده است.

/** * فیلترها را به جدول متصل کنید. * @param HTMLTableSectionElement HTMLTBodyRef - ارجاع به عنصر جداول * @param فیلترهای شی - شیء پیکربندی فیلتر: ( N: FILTER[, N: FILTER] ) * * جایی که: * NUM یک عدد طبیعی است - تعداد ستون جدول ارائه شده توسط * فیلتر. این عدد می تواند مقادیری از 0 تا تعداد * ستون های جدول - 1 داشته باشد. اعداد را می توان بدون ترتیب مشخص کرد. * * FILTER پیوندی به یک عنصر HTML است که عنصری از یک فرم * HTML است و دارای یک ویژگی مقدار (انتخاب شامل) یا * یک شی از نوع tableKit.Filter */ var filterTable = تابع (HTMLTBodyRef, aFilters) ( ردیف‌های var = HTMLTBodyRef.getElementsByTagName("TR")، فیلترها = ()، n، walkThrough = تابع (ردیف‌ها) (var tr، i، f؛ برای (i = 0؛ i< rows.length; i += 1) { tr = rows.item(i); for(f in filters) { if (filters.hasOwnProperty(f)) { if (false === filters[f].validate(tr.children[f].innerText)) { tr.style.display = "none"; break; } else { tr.style.display = ""; } } } } }; for(n in aFilters) { if (aFilters.hasOwnProperty(n)) { if (aFilters[n] instanceof filterTable.Filter) { filters[n] = aFilters[n]; } else { filters[n] = new filterTable.Filter(aFilters[n]); } filters[n]._setAction("onchange", function () {walkThrough(rows);}); } } } /** * Объект фильтр. * @param HTMLInputElement | HTMLSelect HTMLElementRef | - Ссылка, или массив ссылок * на html-элементы, служащие фильтрами. * @param Function callback - ф-ция обратного вызова. Вызывается когда скрипт * производит валидацию содержимого ячейки. Ф-ция вызывается для каждой строки таблицы, для * каждой ячейки столбца, для которого назначен фильтр. * Функции будут переданы 3 параметра: callback(value, filters, i) где: * String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции * HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца. * Number i - индекс элемента фильтра в массиве filters который является * валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции * обратного вызова будет содержать элемент, с которым провзаимодействовал * пользователь, в результате чего был запущен процесс валидации. * @param String eventName - название события привязанного к фильтру, по которому будет * запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) * @constructor */ filterTable.Filter = function (HTMLElementRef, callback, eventName) { /* Если ф-цию вызвали не как конструктор фиксим этот момент: */ if (!(this instanceof arguments.callee)) { return new arguments.callee(HTMLElementRef, callback, eventName); } /* Выравниваем пришедший аргумент к массиву */ this.filters = {}.toString.call(HTMLElementRef) == "" ? HTMLElementRef: ; /** * Шаблонный метод вызывается для каждой строки таблицы, для соответствующей * ячейки. Номер ячейки задается в объекте-конфигурации фильтров ф-ции * filterTable (См. параметр 2 ф-ции tableFilter) * @param String cellValue - строковое значение ячейки * @returns {boolean} */ this.validate = function (cellValue) { for (var i = 0; i < this.filters.length; i += 1) { if (false === this.__validate(cellValue, this.filters[i], i)) { return false; } } } this.__validate = function (cellValue, filter, i) { /* Если фильтр был создан явно и явно указана функция валидации: */ if (typeof callback !== "undefined") { return callback(cellValue, this.filters, i); } /* Если в фильтр напихали пробелов, или другой непечатной фигни - удаляем: */ filter.value = filter.value.replace(/^\s+$/g, ""); /* "Фильтр содержит значение и оно совпало со значением ячейки" */ return !filter.value || filter.value == cellValue; } this._setAction = function (anEventName, callback) { for (var i = 0; i < this.filters.length; i += 1) { this.filters[i] = callback; } } };

محدوده مقادیر "FROM" و "TO" را فیلتر کنید

به درخواست کارگران، من نشان می دهم که چگونه می توانید فیلتری را پیاده سازی کنید که به شما امکان می دهد محدوده مقادیر را برای اعداد "از" و "به" انتخاب کنید. در هدر ستونی که به این فیلتر نیاز دارد، کد را می نویسیم که دو لیست کشویی است. بر این اساس: اولی مقدار «از» و دومی مقدار «به» است:

و در فراخوانی اسکریپت یک فیلتر می نویسیم (برای ستون سوم) برای اختصار، لیست را کوتاه کردم و فقط تعریف فیلتر "از" و "به" را باقی گذاشتم:

FilterTable(/* مرجع عنصر tables */ document.getElementById("target"), /* شیء پیکربندی فیلتر: */ ( /* فیلتر برای چک باکس های ستون اول: */ 0: ... , /* فیلتر برای قسمت متن ستون دوم - مطابقت دقیق فقط : */ 1: ... , /* FILTER محدوده مقادیر FROM و TO */ 2: new filterTable.Filter([ document.getElementById("digits-from"), document.getElementById("digits-to" ") ]، تابع (مقدار، فیلترها، i) (var accept = true؛ value = parseInt(value,10) if (filters.value) (accept = (value >= parseInt(filters.value,10)) ; ) if (accept && filters.value) (accept = (value<= parseInt(filters.value,10)); } return accept; }), /* Фильтр для четвертого столбца радио кнопки: */ 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: ... });

نمونه هایی از فیلترهای جداول حساس به حروف کوچک و بزرگ

فیلتر کنید مورد غیر حساسبرای تطابق دقیق (شما می توانید استاندارد را با آن جایگزین کنید)

filterTable.Filter جدید(document.getElementById("متن")، تابع (مقدار، فیلترها، i) (var vala_filter = filters[i].value == "»، match_value = value.toLowerCase() == فیلترها[i] .value.toLowerCase()؛ بازگردانی vala_filter || match_value; ))

فیلتر کنید مورد غیر حساسبرای وارد کردن یک کلمه به تدریج

filterTable.Filter جدید(document.getElementById("regexp")، /* تابع فراخوانی اعتبارسنجی */ تابع (مقدار، فیلترها، i) (var c_value = value.toLowerCase()، f_value = filters[i].value. toLowerCase( )؛ بازگشت c_value.indexOf(f_value) === 0; ), /* ما اعتبار سنجی را در رویداد onkeyup فیلتر */ "onkeyup") فراخوانی می کنیم.

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

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

منابع

برای تجارت الکترونیک، این روشی برای افزایش نرخ تبدیل با کاهش زمان لازم برای یافتن کاربر برای یافتن آنچه به دنبالش است، است.

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

از CSS Transitions، CSS Transformations و jQuery بهره می برد تا در صورت نیاز، انتقال های روان را ارائه دهد.

ایجاد یک ساختار

ساختار HTML کمی پیچیده تر از حد معمول است. اول از همه، دو بلوک اصلی محتوا وجود دارد: هدر و عناصر اصلی، بلوک دوم برای بسته بندی هر دو gallery.cd-gallery و filter.cd-filter استفاده می شود. علاوه بر این، ما یک ناوبری داخلی (تودرتو در 2 عنصر div، به دلیل جلوه کشویی در دستگاه های تلفن همراه قابل مشاهده است) و یک فیلتر trigger.cd-filter-trigger داریم.

همچنین ممکن است متوجه نام‌های کلاس‌های زیادی (مثلاً در موارد فهرست گالری) و فیلترهای داده شوید: این فیلترها برای فیلتر کردن محتوا استفاده می‌شوند، نه برای استایل‌سازی.

توجه داشته باشید. هدف عنصر .cd-gallery> li.gap این است که در ترکیب با متن کار کند: justify; ویژگی به .cd-gallery اعمال می شود تا یک شبکه گالری ایجاد شود. شما باید به تعداد عناصر .gap به اندازه حداکثر تعداد عناصر در یک ردیف -1 ایجاد کنید.

اضافه کردن یک سبک

بیشتر CSS به عناصر فرم یک ظاهر طراحی شده و سایر تزئینات اساسی مربوط می شود. جالب است که چگونه برخی از کلاس ها را - در ترکیب با jQuery - برای تغییر رفتار برخی عناصر بر اساس رویدادهای خاص تعریف و استفاده کردیم.

به عنوان مثال: در همه دستگاه‌ها، نوار فیلتر هنگامی که به بالای پنجره دید می‌رسد، یخ می‌زند. برای دستیابی به این اثر، ما از کلاس .is-fixed اعمال شده بر روی عنصر اصلی (.cd-main-content) استفاده کردیم تا بتوانیم برخی از فرزندان آن را جهت دهی کنیم. به طور خاص: .cd-tab-filter-wrapper در یک موقعیت ثابت است، در حالی که .cd-filter و .cd-filter-trigger در یک موقعیت مطلق (نسبت به .cd-main-content) قرار دارند. وقتی کلاس .is-fixed را به .cd-main-content اعمال می کنیم، موقعیت همه این عناصر را به Fixed تغییر می دهیم.

Cd-tab-filter-wrapper ( پس زمینه رنگ: #ffffff; z-index: 1; ) .cd-filter ( موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ عرض: 280 پیکسل؛ ارتفاع: 100٪؛ پس زمینه: #ffffff؛ z-index: 2؛ transform: translateX(-100%)؛ transition: transform 0.3s, box-shadow 0.3s; .cd-filter-trigger ( موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0. ارتفاع: 50 پیکسل؛ عرض: 60 پیکسل؛ شاخص z: 3؛ ) .cd-main-content.is-fixed .cd-tab-filter-wrapper ( موقعیت: ثابت؛ بالا: 0؛ سمت چپ: 0؛ عرض: 100% . ;)

نکته دیگری که قابل ذکر است کلاس .filter-is-visible است. هنگامی که کاربر پانل فیلتر را راه اندازی می کند، روی چندین عنصر اعمال می شود. در همه دستگاه‌ها، برای تغییر مقدار translateX عنصر .cd-filter (از -100٪ به 0) استفاده می‌شود. در دستگاه‌های بزرگ‌تر (> 1170 پیکسل) همچنین cd-gallery و .cd-tab-filter را هدف قرار می‌دهیم و عرض آنها را کاهش می‌دهیم: به این ترتیب پانل روی محتوا همپوشانی نخواهد داشت و کاربر فضای اضافی برای اعمال فیلترها و مشاهده تغییرات به طور همزمان خواهد داشت. بدون نیاز به بستن پنل

مدیریت رویداد

برای پیاده سازی عملکرد فیلتر محتوا، ما افزونه MixItUp jQuery را ادغام کردیم. برای مقداردهی اولیه پلاگین در کانتینر گالری، از تابع mixItUp() استفاده می کنیم و یک متغیر buttonFilter را اعلام می کنیم که شامل تمام عملکردهای فیلتر سفارشی است. علاوه بر این، ما از jQuery برای باز کردن/بستن پنل فیلتر و تعمیر آن (همراه با پیمایش تب دار) استفاده می کنیم تا همچنان هنگام پیمایش در گالری ظاهر شود.

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

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

اما هنوز یک اشکال کوچک برای فیلترهای CSS وجود دارد - همه مرورگرهای وب از جلوه های بصری پشتیبانی نمی کنند. البته فقط مسئله زمان است. و هنگامی که ساعت "x" فرا می رسد، توسعه دهندگان باید آماده باشند. در حال حاضر، بیایید به آنچه قبلاً تاکنون اجرا شده است نگاه کنیم.

پشتیبانی مرورگر از فیلترهای CSS

اساساً، همه مرورگرهای محبوب، فایرفاکس، کروم، اپرا، رابطه دوستانه ای با جلوه های فیلتر دارند. در مورد IE که به طور کامل از پشتیبانی از افکت ها حتی در آخرین نسخه ها خودداری می کند، نمی توان همین را گفت.

توابع و نحو فیلترهای CSS

تمام خصوصیات CSS دارای پارامترهای خاصی هستند که ترتیب نوشتن مقادیر را با هم ترکیب می کنند. ویژگی فیلتر نیز از این قاعده مستثنی نیست، مانند سایر موارد، می تواند از ترکیبی از چندین قانون در یک برنامه استفاده کند. به عنوان مثال، یک فیلتر روشنایی برای یک تصویر اضافه کنید، و بعد از یک فاصله، فیلتر دیگری را مشخص کنید - کنتراست. برای درک بهتر در این مقاله با چند مثال همه چیز را پوشش خواهیم داد.

نحو

فیلتر: نام فیلتر (درصد ارزش)؛ فیلتر: url(img.svg); فیلتر: blur (10px)؛ فیلتر: روشنایی (0.9)؛ فیلتر: کنتراست (150%)؛ فیلتر: drop-shadow (5px 5px 10px سیاه)؛ فیلتر: مقیاس خاکستری (80%)؛ فیلتر: چرخش رنگ (60 درجه)؛ فیلتر: معکوس (80%)؛ فیلتر: کدورت (50%)؛ فیلتر: اشباع (50%)؛ فیلتر: sepia (40%); /* اعمال چندین فیلتر */ فیلتر: کنتراست (150%) مقیاس خاکستری (80%).

لیست فیلترها

نمونه هایی از فیلترهای CSS

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

فیلتر تاری

در ویرایشگرهای گرافیکی، فیلتر blur ابزاری ضروری است و اغلب در کار استفاده می شود. این می تواند به راحتی تصویری تار ایجاد کند، اما می تواند اثر فوکوس روی یک عنصر خاص را ایجاد کند در حالی که بقیه تصویر زیر تاری قرار می گیرد. و خیلی بیشتر.

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

اصلی

فیلتر کنید

اثر شناور

/*قانون ثابت*/ .efbl1 img( فیلتر: blur(2px); -webkit-filter: blur(2px); ) /*برای جلوه شناور*/ .efbl2 img(transition: all 0.6s ease 0s;) . efbl2 :hover img( فیلتر: blur(4px); -webkit-filter: blur(4px)؛ انتقال: همه 0.6s ease 0s;)

سایه فیلتر

ویژگی shadow با نسخه سوم جدول cascading به ما آمد. البته برای همه کسانی که در توسعه وب سایت فعالیت می کنند آشناست، زیرا box-shadow نقش مهمی در طراحی دارد. فیلتر drop-shadow را می‌توان یک جایگزین پایین‌تر با پارامترهای مشابه نامید و تنها 5 مورد از آنها وجود دارد، بدون احتساب سایه داخلی.

ترتیب نوشتن به شرح زیر است: 5px/-5px (تغییر افقی)، 5px/-5px (افست عمودی)، 15px (شعاع تاری سایه)، 5px/-5px (کشش سایه)، سیاه (رنگی). این فیلتر از تمام دستورات به جز مقادیر کشش و درج و همچنین افزودن چندین سایه جدا شده با کاما پشتیبانی می کند. اما با وجود همه اینها، مزایایی وجود دارد، به عنوان مثال، فیلتر شبه عناصر را در نظر می گیرد که به شما امکان می دهد شکل دقیق سایه عنصر را نمایش دهید.

همچنین جالب این است که وقتی بلوک پس‌زمینه ندارد، اما فقط یک خط مرزی مشخص می‌شود، هنگام استفاده از box-shadow یک سایه نمایش داده می‌شود که ظاهراً پس‌زمینه را در نظر می‌گیرد، یعنی یک پس‌زمینه جامد. و در مورد استفاده از drop-shadow، سایه بدون در نظر گرفتن پس‌زمینه، حالت ضربه به خود می‌گیرد.

اصلی

فیلتر کنید

اثر شناور

/*قانون استاتیک*/ efdrswd1 img( فیلتر: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0 , 0.4))؛ ) /*برای جلوه شناور*/ .efdrswd2 img( انتقال: همه 0.6s ease 0s; .efdrswd2:hover img( فیلتر: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)؛ -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4))؛ انتقال: همه 0.6s ease 0s؛ )

فیلتر رنگ زدایی

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

اصلی

فیلتر کنید

اثر شناور

/*قانون ثابت*/ efgrays1 img( فیلتر: مقیاس خاکستری(90%)؛ -وبکیت-فیلتر: مقیاس خاکستری(90%)؛ ) /*برای جلوه شناور*/ .efgrays2 img( انتقال: همه 0.6 ثانیه آسان 0 ثانیه؛ ) efgrays2:hover img( فیلتر: مقیاس خاکستری(90%)؛ -webkit-filter: grayscale(90%)؛ انتقال: همه 0.6 ثانیه ease 0s؛ )

فیلتر روشنایی

اضافه کردن نور به گوشه های سیاه "ناکاوش" تصویر. اغلب در پردازش عکس استفاده می شود، زیرا عکس های آماتور معمولاً در مکان های کم نور گرفته می شوند. روشنایی فیلتر از 0% (تصویر کاملا سیاه) تا ناپدید شدن تقریباً کامل تصویر قابل تنظیم است. نقطه اصلی به عنوان 100٪ تعریف شده است و مقدار را می توان به صورت کسری نیز مشخص کرد.

اصلی

فیلتر کنید

اثر شناور

/*قانون استاتیک*/ .efbrig1 img( فیلتر: روشنایی (150%)؛ -webkit-filter: روشنایی (150%)؛ ) /*برای جلوه شناور*/ .efbrig2 img( انتقال: همه 0.6 ثانیه ease 0s; ) .efbrig2:hover img( فیلتر: روشنایی (150%)؛ -webkit-filter: روشنایی (150%)؛ انتقال: همه 0.6 ثانیه ease 0s؛ )

فیلتر کنتراست

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

اصلی

فیلتر کنید

اثر شناور

/*قانون استاتیک*/ .efcontr1 img( فیلتر: کنتراست(150%)؛ -وبکیت-فیلتر: کنتراست(150%)؛ ) /*برای جلوه شناور*/ .efcontr2 img( انتقال: همه 0.6 ثانیه ease 0s; ) efcontr2: شناور img( فیلتر: کنتراست (150%)؛ -webkit-filter: کنتراست (150%)؛ انتقال: همه 0.6s ease 0s؛ )

فیلتر تن رنگ

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

اگر مقدار مثبت (150 درجه) باشد، چرخش در جهت عقربه‌های ساعت اتفاق می‌افتد. بر این اساس، اگر منفی است، در خلاف جهت عقربه های ساعت. در دو حالت از 0 درجه تا 360 درجه شروع می شود.

اصلی

فیلتر کنید

اثر شناور

/*قانون ثابت*/ .efhrotai1 img( فیلتر: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*برای جلوه شناور*/ .efhrotai2 img( انتقال: همه 0.6s ease 0s ; ) .efhrotai2:hover img( فیلتر: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg)؛ انتقال: همه 0.6s ease 0s; )

فیلتر وارونگی

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

اصلی

فیلتر کنید

اثر شناور

/*قانون استاتیک*/ .efinve1 img( فیلتر: معکوس (100%)؛ -وبکیت-فیلتر: معکوس (100%)؛ ) /*برای جلوه شناور*/ .efinve2 img( انتقال: همه 0.6s ease 0s; ) .efinve2:hover img( فیلتر: invert(100%)؛ -webkit-filter: invert(100%)؛ transition: all 0.6s ease 0s; )

فیلتر اشباع

هنگامی که یک تصویر به دلایل ناشناخته رنگ طبیعی خود را از دست می دهد (چیزی مانند یک تی شرت سفید شده در برابر نور خورشید)، افزایش اشباع می تواند فوراً ظاهر اصلی خود را بازگرداند. و اگر این فیلتر در ترکیب با فیلترهای دیگر استفاده شود، نتیجه بسیار رضایت بخش خواهد بود. تنظیم از 0 نمای اولیه تا اعداد بزرگ انجام می شود.

اصلی

فیلتر کنید

اثر شناور

. efsatut2:hover img( فیلتر: saturate(165%)؛ -webkit-filter: saturate(165%)؛ انتقال: همه 0.6s ease 0s؛ )

فیلتر سپیا

تقلید از جلوه عکس های قدیمی (رنگ کمی قهوه ای). این به یک سبک یکپارچهسازی با سیستمعامل از تصویر دست می یابد که به ویژه محبوب است. فیلتر sepia از 0% (موقعیت خانه) تا 100% قابل تنظیم است.

اصلی

فیلتر کنید

اثر شناور

/*قانون استاتیک*/ .efsepiaa1 img( فیلتر: sepia(100%)؛ -webkit-filter: sepia(100%)؛ ) /*برای جلوه شناور*/ .efsepiaa2 img( انتقال: همه 0.6s ease 0s; ) .efsepiaa2:hover img( فیلتر: sepia (100%)؛ -webkit-filter: sepia (100%)؛ انتقال: همه 0.6s ease 0s؛ )

شفافیت فیلتر

فیلتری شبیه به ویژگی opacity از جدول آبشاری نسخه 3. نحو یکسان است، اما مقدار شفافیت از 0٪ تا 100٪ (موقعیت اصلی) قابل تنظیم است.

اصلی

فیلتر کنید

اثر شناور

/*قانون استاتیک*/ .efopaty1 img( فیلتر: کدورت(50%)؛ -وبکیت-فیلتر: کدورت(50%)؛ ) /*برای جلوه شناور*/ .efopaty2 img( انتقال: همه 0.6 ثانیه ease 0s؛ ) .efopaty2:hover img( فیلتر: opacity(50%)؛ -webkit-filter: opacity(50%)؛ transition: all 0.6s ease 0s; )

لینک فیلتر

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

مولد فیلترهای CSS

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

نتیجه

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