طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumافزایش تعداد فالور اینستاگرام - بسیار بسیار ارزان219daymobile
iconforumافزونه کوتاه کننده لینک12194AHF-victory
iconforumلایسنس ویژوال کامپوسر650tiger2
iconforumراهنمای در مورد چند اسکریپت217tiger2
iconforumنرخ های جدید اینترنت همراه اول اعلام شد011AynaZ
iconforumخرید شریکی اسکریپت3220AynaZ
iconforumدرخواست هاست اسپانسری12222AynaZ
iconforumتغییر نکردن فونت سایت در وردپرس470AynaZ
iconforumطراحی492AynaZ
iconforumتغییر دامین در ورپرس9111AynaZ
iconforumدر پلاگین فرم تماس236AynaZ
درگاه پرداخت
درگاه پرداخت

نمایش متون دلخواه به صورت لایت باکس

CSS , آموزش ها , اسکریپت ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند
نمایش متون دلخواه به صورت لایت باکسReviewed by جواد on Aug 12Rating: 5.0نمایش متون دلخواه به صورت لایت باکسسلام دوستان.دراین آموزش سعی داریم که با استفاده از جی کوئری یک متن دلخواه رو به صورت لایت باکس به نمایش در بیاریم. پس همراه ما باشید…

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


توضیحات:
خط اول، لینکی رو با نامی دلخواه و قابل ویرایش برامون میسازه که با کلیک بر روی اون، محتویات  کلاس box که شامل متنی دلخواهه به نمایش در میاد.
* توجه : در کلاس box کدی هم وجود داره که به وسیله اون (با دخالت کدهای jQuery  و css) میتونیم تصویر یک ضربدر رو برای زیبایی بیشتر در گوشه بالای سمت راست  به نمایش در بیاریم که با کلیک بر روی اون، باکس حاوی متون ما بسته میشه. برای دانلود و مشاهده این تصویر کلیک کنید.
* توجه : حتما پس از آپلود تصویر بالا، به آدرس فراخوانی اون در کد مربوطه، دقت داشته باشید.
کلاس backdrop هم با کمک جی کوئری تصویر پس زمینه رو تیره رنگ میکنه.

حتما بخوانید  اجرای آنلاین موسیقی در وب سایت با اسکریپت Clean HTML Audio Player

پس از انجام مرحله قبل، نوبت به زیبا سازی میرسه، پس به شیوه نامه (style.css) قالبتون برید و کد زیر در آخر کدهای موجود در اونجا قرار بدید.

خوبه، حالا نوبت به آخرین مرحله میرسه، یعنی استفاده از کدهای جی کوئری.
همونطور که میدونید ابتدا باید کتابخونه جی کوئری رو در قالبمون فراخوانی کنیم.
پس کد زیر رو بین دو تگ head در سربرگ (header.php) قرار بدید.

حتما بخوانید  اسکریپت جامعه مجازی PHPFox مدل Neutron نسخه 4.0.7

و بعد از اون هم، قطعه کد جی کوئری زیر رو که شامل کلاس های کدهای خطوط اولمونه رو در همون قسمتی که فراخوانی کتابخونه جی کوئری رو انجام دادید، قرار بدید.
البته اگه خواستید از ازدحام کدها در سربرگ جلوگیری کنید، راه بهتری هم وجود داره و اونم اینه که کد زیر رو با فرمت js  در قالبتون ذخیره و سپس در سربرگ فراخوانیش کنید.

کار تمومه…

امیدوارم که آموزش مفید بوده باشه.


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

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/05/21 2 CSS , آموزش ها , اسکریپت ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند

لینک کوتاه مطلب : http://www.20script.ir/?p=7911

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,661اسکریپت اسلاید Coverflow به صورت 3D با jQuery و CSS3 تاریخ : 1393/06/18
1,521اسکریپت بنر های اسلایدی حرفه ای CJ Shuffle تاریخ : 1395/05/14
4,271ساخت تابلو اعلانات با کمک جی کوئری تاریخ : 1393/05/21
4,232ساخت گالری تصاویر کاملا واکنش گرا با جی کوئری تاریخ : 1393/08/18
1,095پلاگین جی کوئری نمایش فید مخازن گیتهاب Github تاریخ : 1395/01/26
2,009با jQuery Notes به تصاویر خود برچسب بزنید تاریخ : 1393/02/19
2,667منو جی کوئری MetNav 2 به سبک ویندوز مترو تاریخ : 1392/08/30
1,502اسکریپت 9 سبک خاص آیکون های متحرک شبکه های اجتماعی تاریخ : 1395/04/22
1,229مدیریت ساده برچسب ها به صورت جی کوئری تاریخ : 1392/11/26
5,691اسلاید بندی تصاویر پس زمینه وبسایت با استفاده از backstretch تاریخ : 1393/04/29
1,706اسکریپت لیست کارها به صورت ایجکس تاریخ : 1392/07/29
3,369افکت گذاری بسیار زیبا بر روی تصاویر با جی کوئری تاریخ : 1392/12/17
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب