تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 18

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

    1. دو qTip بسیار زیبا ، بهینه شده ، همراه آموزش کامل + اختصاصی وی بی ایران »

      دو qTip بسیار زیبا ، بهینه شده ، همراه آموزش کامل + اختصاصی وی بی ایران

      نگارش: , by (مدیر بازنشسته)
      2013/04/11 07:11 PM
      امتیاز: 

      طبق درخواست یکی از دوستان تصمیم گرفتم آموزش استفاده از qTip رو قرار بدم

      اما قبل از آموزش ، باید بدونید qTip چیست ؟ شما در هر تگی از صفت title استفاده کنید با رفتن ماوس روی اون قسمت ، متن عنوان داخل کادر سفید و ساده ای میاد !

      با این آموزش شما میتونید این کادر رو زیباتر کنید ، خوبی این قابلیت اینه که برخلاف Tooltip اینه که نیاز ندارید به قسمت مورد نظر کدی اضافه کنید و تمام title های شما تغییر میکنن !

      البته اونایی که در قالب استفاده کردید رو باید خودتون تغییر بدید

      qTip شماره 1 :

      این qTip کاملا بهینه شده و حجم بسیار کمی داره ، برای تغییر در ظاهرش هم نیاز نیست وقت زیادی بذارید و راحته ! در اینجا دو مدل کد براش قرار داده میشه ، اگر تغییر خاصی لازم داشتید بگید تا براتون کدنویسی کنم

      فایل پیوست (qTip) رو دانلود کرده ، در روت انجمن اکسترکت کنید . حالا در قالب headinclude_bottom تهش بزنید :

      کد:
      <script src="qtip.js" type="text/javascript"></script>
      ته additional.css بزنید :

      کد:
      div#qTip{
          padding:3px;
          border:1px solid #666;
          display:none;
          background:#999;
          color:#FFF;
          font:bold 9px Verdana, Arial, sans-serif;
          position:absolute;
          z-index:1000;
      }
      شات :


      حالا بستگی به خودتون داره که چه طور میخواهید کادربندی بشه و باید کد additional.css رو تغییر بدید !

      براتون یکی دیگه هم میذارم ، یکم تغییرش دادم

      کد:
            div#qTip{
          padding:5px;
          border: 1px solid #666;
          display: none;
          background: black;
          color: red;
          font: bold 9px tahoma;
          position: absolute;
          z-index: 1000;
          border-radius:8px;
          -moz-border-radius:8px;
          -webkit-border-radius:8px;
          -o-border-radius:8px;
          box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
          -moz-box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
          -webkit-box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
          -o-box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
          -ms-box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
      }
      شات :

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

      در additional.css قرار بدید :

      کد:
      div#qTip{
          padding:5px;
          border: 2px solid #000000;
          display: none;
          background:url('images/dorduneh.png') repeat;
          color: #000000;
          font: 15px tahoma;
          position: absolute;
          z-index: 1000;
          border-radius:8px;
          -moz-border-radius:8px;
          -webkit-border-radius:8px;
          -o-border-radius:8px;
          box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
          -moz-box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
          -webkit-box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
          -o-box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
          -ms-box-shadow:5px 3.5px 0 rgba(0,0,0,0.24);
      }
      عکس پیوست شده dorduneh.png رو به پوشه Images در هاست انتقال بدید ، اینم از شات :



      حالا اگر دقت کرده باشید برای عکس ها این qTip کار نمیکنه ، برای اینکه به عکس ها هم اضافه بشه باید فایل qTip.js رو ادیت کنید

      در خط اول این فایل نوشته :

      کد:
      var qTipTag="a,label,input";
      یعنی به تگ های a , Label , Input اضافه میشه . پس اگر دوست دارید به عکس هم اضافه بشه باید img هم اضافه کنید

      کد:
      var qTipTag="a,label,input,img";
      این قضیه درباره بقیه تگ ها هم ادامه داره ....

      دو خط پائینی موقعیت کادر رو مشخص میکنه ، اولی بر مختصات X دومی Y

      کد:
      var qTipX=0;
      var qTipY=15;
      با تغییر 0 و 15 متوجه میشید کارش چیه ! خوب اینم از اولین qTip که امیدوارم خوشتون اومده باشه !





      qTip شماره 2 :

      فایل پیوست qtip 1.0.0 رو دانلود و در روت Extract کنید .

      حالا ته headinclude_bottom بزنید

      کد:
      <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
      <script type="text/javascript">$(document).ready(function() {$('a[href][title]').qtip({content: {text: false},style: 'cream'});});</script>
      برای تغییر این یکی qTip باید از خود فایل js اقدام کنید و کمی سخته ، همینطور حجم بالاتری داره !

      شات :



      تمام شد ! موفق باشید
      تصاویر پیوست شده
      فایل های پیوست شده
      ویرایش توسط [email protected] : 2013/04/15 در ساعت 10:51 PM
  1. Top | #2
    کاربر مفید و فعال

    ورژن ویبولتین
    3
    نوشته ها
    362
    میزان امتیاز
    48

    پیش فرض

    z-index:1000;

    این کد برای چی استفاده میشه؟

  2. Top | #3
    کاربر اخراجی

    ورژن ویبولتین
    4.2
    نوشته ها
    453
    میزان امتیاز
    0

    پیش فرض

    استاد خیلی ممنون که به درخواست من این اموزش رو گذاشتید!

    ولی من انجام دادم نشد!!!!

  3. Top | #4
    مدیر بازنشته

    ورژن ویبولتین
    ☻Google
    نوشته ها
    5,116
    میزان امتیاز
    601

    پیش فرض

    نقل قول نوشته اصلی توسط #>MOHAMMAD<# نمایش پست ها
    z-index:1000;

    این کد برای چی استفاده میشه؟
    که در جلوترین قسمت قرار بگیره

  4. Top | #5

    پیش فرض

    نقل قول نوشته اصلی توسط #>MOHAMMAD<# نمایش پست ها
    z-index:1000;

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

    نقل قول نوشته اصلی توسط Amin1 نمایش پست ها
    استاد خیلی ممنون که به درخواست من این اموزش رو گذاشتید!

    ولی من انجام دادم نشد!!!!
    خواهش میکنم ، شما additional.css رو در headinclude_bottom بذارید به اینصورت :

    کد:
    <style type="text/css">
    Code ha Inja
    </style>

    4 تشکر توسط:


  5. Top | #6
    کاربر اخراجی

    ورژن ویبولتین
    4.2
    نوشته ها
    453
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    این خاصیت ترتیب قرار گیری عناصر رو مشخص میکنه . شماره بزرگتر در اولویت بالاتر قرار میگیرن !



    خواهش میکنم ، شما additional.css رو در headinclude_bottom بذارید به اینصورت :

    کد:
    <style type="text/css">
    Code ha Inja
    </style>
    نشد!

  6. Top | #7

    پیش فرض

    آدرس انجمن ؟!

    کاربر مقابل از [email protected] بابت این پست مفید تشکر کرده است:


  7. Top | #8
    کاربر اخراجی

    ورژن ویبولتین
    4.2
    نوشته ها
    453
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    آدرس انجمن ؟!
    انجمن نوجوانان ایران

  8. Top | #9

  9. Top | #10
    کاربر اخراجی

    ورژن ویبولتین
    4.2
    نوشته ها
    453
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    فایل qTip رو آپلود نکردید !

    http://nojavanforum.ir/qTip.js
    فایل رو اپلود کردم و اکستراکت کردم بعدش توی فایل qTip.js اون img رو بین تگ ها قرار دادم!!!!

صفحه 1 از 2 12 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 35
    آخرين نوشته: 2014/03/30, 11:21 AM
  2. پاسخ: 12
    آخرين نوشته: 2013/08/21, 11:31 PM
  3. استایل بسیار زیبا برای صفحات 404 {طراحی اختصاصی وی بی ایران/بسیار زیبا وساده}
    توسط AmirAshkan در انجمن دانلود استایل ها ، قالب های رایگان و پرمیوم
    پاسخ: 5
    آخرين نوشته: 2013/01/17, 11:07 AM
  4. پاسخ: 0
    آخرين نوشته: 2012/11/09, 10:25 PM
  5. پک درجات کاربری بسیار زیبایFinical{اختصاصی وی بی ایران+PSD}
    توسط AmirAshkan در انجمن پک درجه های کاربری
    پاسخ: 3
    آخرين نوشته: 2012/10/14, 10:02 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •