در حال نمایش 15 نوشته - 1 تا 15 (از کل 28)
  • نویسنده
    نوشته ها
  • #30923

    Amin
    مشارکت کننده

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


    #30932

    سعید شعبانی
    کلید دار

    درود بر شما

    برای این کار می تونید از جی کوئری کمک بگیرید. به این شکل که کل بخش مورد نظر که دکمه هم داخل اون قرار داره را در یک div با یک class خاص مثل box قرار بدید. بعد با استفاده از کد زیر در زمان کلیک کردن کاربر بر روی دکمه با کلاس but کلاس active را به اون بخش اختصاص بدید. بعد با CSS خیلی راحت می تونید اون بخش را در زمانی که کلاس active داره پنهان کنید.

    $( ".but" ).click(function() {     
        if( $('.box').hasClass('active') ){
            $('.box').removeClass('active');
        }else{
            $('.box').addClass('active');
        }
    });
    #30934

    Amin
    مشارکت کننده
    این پاسخ به عنوان خصوصی علامتگذاری شده است.
    #30939

    سعید شعبانی
    کلید دار

    داداش باید خودتون هم حداقل یکم تلاش کنید تا یاد بگیرید، کار سختی نیست. ما با استفاده از فریمورک JQuery در بالا اومدیم و به یه باکس که یه دکمه داخلش قرار داره گفتیم که با زدن دکمه، کلاس active را به باکس بده و با زدن مجدد همون دکمه این کلاس را ازش بگیره خوب ساختار html را هم به شکل زیر می تونیم بنویسیم.

    <div class="box">
    <span class="but">دکمه</span>
    <p>این هم یک متن دلخواه هست</p>
    </div>
    

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

    .box p{
      display: none;
    }
    .box.active p{
      display: block;
    }
    #30942

    Amin
    مشارکت کننده
    این پاسخ به عنوان خصوصی علامتگذاری شده است.
    #30944

    سعید شعبانی
    کلید دار

    داداش نگاه کن من داخل این تاپیک تا اینجا سه تا بخش کد را قرار دادم، کد اول مربوط به jQuery هست، کد دوم مربوط به HTML و کد سوم هم مربوط به CSS هست. این کد ها مکمل هم هستند. شما ابتدا باید کد html را داخل فایل های قالب قرار بدید، بعد داخل فایل style قالب کد CSS را بگذارید و در انتها هم برای فعال شدن قابلیت عملکرد دکمه باید کد های jQuery را فایل قالب یا اینکه در یک فایل جداگانه Js قرار بدید.

    #30956

    Amin
    مشارکت کننده

    ببخشید فایل html و query کجای قالب قرار بدم دقیقا کدوم فایل؟

    #30957

    سعید شعبانی
    کلید دار

    نگاه کنید کد های html را باید داخل یکی از فایل های قالب قرار بدید که می خواهید باکس متن داخل اون دیده شود. مثلا اگر بخواهید در همه صفحات باکس متن باشه می تونید کد های html را در فایل header.php قرار دهید. البته در برخی از قالب ها ساختار قالب به شکلی هست که باید کد های html را در فایل دیگری قرار دهید.

    کد های JQuery هم می تونید بین تگ باز و بسته script مثل زیر در فایل header قبل از بسته شدن تگ head قرار دهید.

    <script>
    $( ".but" ).click(function() {     
        if( $('.box').hasClass('active') ){
            $('.box').removeClass('active');
        }else{
            $('.box').addClass('active');
        }
    });
    </script>

    قبل از اجرای کد های JQuery هم حتما باید فایل فریم ورک JQuery در قالب لود شده باشد، در اکثر قالب ها این فایل قبل از بسته شدن تگ head لود می شود.

    کدهای CSS هم می تونید در انتهای فایل style.css قرار دهید.

    #30960

    Amin
    مشارکت کننده
    این پاسخ به عنوان خصوصی علامتگذاری شده است.
    #30962

    سعید شعبانی
    کلید دار

    این کار را باید با css انجام بدید، مثلا برای قرار دادن تصویر می تونید از خاصیت background در CSS استفاده کنید. مثلا به شکل زیر :

    .but{
    background: url("but.png") no-repeat;
    width : 20px;
    height: 10px;
    }

    #30964

    Amin
    مشارکت کننده

    سلام مرسی حل شد فقط چی کار کنم پشت زمینه سفیدی که قبل از باز کردن هست نیاد و وقتی باز شد با اندازه ی دلخواه باز شه.؟

    #30966

    سعید شعبانی
    کلید دار

    فکر کنم شما به div ای که کلاس box داره پس زمینه سفید دادید. شما می تونید به تگ p یا هر تگ دیگه ای که در کلاس box قرار داره و در زمان فعال نبودن دکمه پنهان هست یک کلاس دلخواه بدید و پس زمینه را به اون کلاس دلخواه اختصاص بدید نه خود box , عرض دلخواهتون را هم می تونید به همین کلاس جدید بدید.

    #30967

    Amin
    مشارکت کننده
    این پاسخ به عنوان خصوصی علامتگذاری شده است.
    #30968

    Amin
    مشارکت کننده
    این پاسخ به عنوان خصوصی علامتگذاری شده است.
    #30969

    Amin
    مشارکت کننده

    فکر کنم مشکل از کد وقتی کد html رو میزاری این مشکل پیش میاد من هر کاری می کنم دریت نمیشه

در حال نمایش 15 نوشته - 1 تا 15 (از کل 28)

کاربر گرامی برای پاسخ به این موضوع اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.