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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 2 نخستنخست 12
نمایش نتایج: از 11 به 18 از 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 | #11

    پیش فرض

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

    2 تشکر توسط:





  2. گیفت کارت آیتونز

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

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

    پیش فرض

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

  4. Top | #13

    پیش فرض

    بدون شک آپلود نکردید چون Page Not Found میده ، بله ارسال کنید ! (Cpanel)

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


  5. Top | #14

  6. Top | #15
    مدیر بازنشته

    ورژن ویبولتین
    My Own Version
    نوشته ها
    2,440
    میزان امتیاز
    361

    پیش فرض

    وه !
    یکی با اون هکه، و یکی نیز با این یکی، دوتا سورپرایز باحال اساسی داشتم امشب، که بسی حال داد !
    دمت گرم رفیق !
    بسی شُشمان حال آمد !
    کلبه دار

  7. Top | #16

    پیش فرض

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

    دوستان ، به زودی qTip های جدید هم اضافه میشه . سر بزنید

    2 تشکر توسط:


  8. Top | #17
    مدیر بازنشته

    ورژن ویبولتین
    My Own Version
    نوشته ها
    2,440
    میزان امتیاز
    361

    پیش فرض

    یه مُدل نیز من واس دردونه م دُرُس کردم، گفتم به اشتراک بگذارمش باحاله.

    فقط، می باس یه تصویر نیز تو فایل images فارومتون آپلود کنید، که ضمیمه ش کردم..

    بعد، شما میاید کُد ذیل را، در 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);
    }
    اسکرین شات :
    کلبه دار
    تصاویر پیوست شده تصاویر پیوست شده

  9. Top | #18

    پیش فرض

    ممنون مهیار جان ، فراموش کردم در پست اول قرار بدم !

    بقیه دوستان هم اگه استایلی برای این qTip زدن قرار بدن تا در پست اول با نام خودتون اضافه بشه ....

    3 تشکر توسط:


صفحه 2 از 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)

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

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