اسم این ابزار چیه ؟

در اين بخش مي‌توانيد در مورد تمامي مسائل و موضوعات مرتبط با طراحي صفحات اينترنتي به بحث بپردازيد

مدیران انجمن: Mahdi Mahdavi, شوراي نظارت

ارسال پست
Captain
Captain
پست: 4933
تاریخ عضویت: چهار شنبه 18 بهمن 1385, 12:46 pm
محل اقامت: شیراز
سپاس‌های ارسالی: 22364 بار
سپاس‌های دریافتی: 5555 بار

اسم این ابزار چیه ؟

پست توسط Present » چهار شنبه 11 دی 1392, 10:02 pm

دوستان می خواستم بدونم اسم این ابزارها که در عکس زیر با کادر قرمز مشخص کردم در JQUERY چیه ؟
می خوام نمونه های مختلفی پدا کنم که به سایتم بخوره ولی اسمش رو نمی دونم چیه ؟
ممنون می شم راهنمایی کنید!!
تصویر
پروانه نیستم که به یک شعله جان دهم / شمعم که سوزم و دودی نیاورم

گــــــــــــــــاهی تــــــــــــــاوان شیــــــــــر بودن قـــفس اســـت ...
امــــــــا شـــــغال هــــا در شـــــهــــر آزاد مـــــیگـــــــردنــــــــــد ... !

به زودی تعمیرکار لب تاپ می شم :-)

Colonel II
Colonel II
نمایه کاربر
پست: 6940
تاریخ عضویت: جمعه 20 اردیبهشت 1387, 9:44 am
سپاس‌های ارسالی: 5878 بار
سپاس‌های دریافتی: 12405 بار
تماس:

Re: اسم این ابزار چیه ؟

پست توسط Solver » پنج شنبه 12 دی 1392, 7:14 pm

Present, واضح نیست منظورت؟

دقیقا از ابزار منظورت چی هست الان؟

منظورت باکس نمایش اطلاعات هست، یا ... ؟

و دقیقا ارتباطش با جی کئوری چیه؟
Personal Site: [لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]

Captain
Captain
پست: 4933
تاریخ عضویت: چهار شنبه 18 بهمن 1385, 12:46 pm
محل اقامت: شیراز
سپاس‌های ارسالی: 22364 بار
سپاس‌های دریافتی: 5555 بار

Re: اسم این ابزار چیه ؟

پست توسط Present » پنج شنبه 12 دی 1392, 11:58 pm

M.Abooali, ببینید ، دقیقا منظورم همان باکس هست ولی رابطه آن با جی کوری این هست که من می خوام از توابع جی کوری استفاده کنم و نه از خود visual studio که به صورت ساده در اختیار ما قرار میده ، می دونم در زیر مجموعه jquery.ui هست ولی دقیقا نمی دونم کدام موضوع هست !
برای مثال category ,accordion و ... هست ولی اینها مد نظرم نیست و می خوام نمونه های دیگری از این نمونه باکس ها را سرچ کنم ولی هر چی می گردم جایی پیداش نمی کنم .
به هر حال باید یک مثال پیدا کنم تا بتونم سفارشی سازی ان را انجام بدم !
مال خود VS فکر کنم web part باشه ولی در توابع جی کوری نمی دونم کدوم گزینه است !!
برای مثال برای اجرای یک Slider کافیه به مسیر زیر برید و مثال آن را ببینید \jquery-ui-1.10.3\demos\slider ولی برای همچنین چیزی که می خوام مثال پیدا نکردم !!
پروانه نیستم که به یک شعله جان دهم / شمعم که سوزم و دودی نیاورم

گــــــــــــــــاهی تــــــــــــــاوان شیــــــــــر بودن قـــفس اســـت ...
امــــــــا شـــــغال هــــا در شـــــهــــر آزاد مـــــیگـــــــردنــــــــــد ... !

به زودی تعمیرکار لب تاپ می شم :-)

Colonel II
Colonel II
نمایه کاربر
پست: 6940
تاریخ عضویت: جمعه 20 اردیبهشت 1387, 9:44 am
سپاس‌های ارسالی: 5878 بار
سپاس‌های دریافتی: 12405 بار
تماس:

Re: اسم این ابزار چیه ؟

پست توسط Solver » جمعه 13 دی 1392, 11:38 am

Present,

من به طراحی وب با ویژوال استودیو زیاد آشنا نیستم و تجربیات کمی درش دارم، اما به هر حال اگر یک نمونه لینک بدین شاید بتونم بهتون کمک کنم. منظورم یک نمونه از چیزی که نیاز دارید است.

چون من دقیقا همین را نفهمیدم، ایا شما دنبال یک اسلایدر باکس هستید؟
Personal Site: [لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]

Captain
Captain
پست: 4933
تاریخ عضویت: چهار شنبه 18 بهمن 1385, 12:46 pm
محل اقامت: شیراز
سپاس‌های ارسالی: 22364 بار
سپاس‌های دریافتی: 5555 بار

Re: اسم این ابزار چیه ؟

پست توسط Present » جمعه 13 دی 1392, 7:58 pm

M.Abooali, ممنون که وقت گذاشتی برای جواب دادن به من
یک چیزی شبیه اینی که تو لینک زیره :
[لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]
ولی این pop-up هست و روی بقیه صفحه ها باز می شه و من نمی خوام روی بقیه صفحه ها باز بشه !!
اسمش رو می خوام برای اینکه شمااسمش رو تو قسمت image گوگل که سرچ بکنی انواع ظاهرا آن را خواهی دید ولی اگر بخوای بی هدف بگردی کلاهت پس معرکه است !
برای مثال همین ابزار وقتی تو گوگل سرچش کنی :
[لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]
پروانه نیستم که به یک شعله جان دهم / شمعم که سوزم و دودی نیاورم

گــــــــــــــــاهی تــــــــــــــاوان شیــــــــــر بودن قـــفس اســـت ...
امــــــــا شـــــغال هــــا در شـــــهــــر آزاد مـــــیگـــــــردنــــــــــد ... !

به زودی تعمیرکار لب تاپ می شم :-)

Captain
Captain
پست: 4933
تاریخ عضویت: چهار شنبه 18 بهمن 1385, 12:46 pm
محل اقامت: شیراز
سپاس‌های ارسالی: 22364 بار
سپاس‌های دریافتی: 5555 بار

Re: اسم این ابزار چیه ؟

پست توسط Present » جمعه 13 دی 1392, 8:53 pm

با تشکر از دوستان
خودم پیداش کردم و یک مثال هم گذاشتم تا بقیه دوستانی که دنبال همچنین چیزی می گردند هم راحت کنم !!

تصویر

مثالی که پیاده سازی می کنیم شبیه تصویر بالاست !!
وقتی که کرسر موس روی عکس ها میاد با یک جلوه اطلاعات تصویر رو می زنه !!

[لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]

آموزش :
یک پروژه وب جدید خالی در VS2010 می سازیم ، و یک فرم خالی رو اضافه می کنیم !

ابتدا فایلهای زیر رو از پوشه مثال در solution برنامه وب سایت خود کپی می کنیم !!
jquery-1.3.1.min.js
jquery-1.9.1.js
jquery-ui.css
style.css
و یکی یکی آنها را به قسمت head وب سایت خود اضافه می کنیم !!

کد: انتخاب همه

<script src="Scripts/jquery-1.3.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/style.css" rel="stylesheet" type="text/css" />


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

کد: انتخاب همه

<script>

      $(document).ready(function () {

        //move the image in pixel
        var move = -15;

        //zoom percentage, 1.2 =120%
        var zoom = 1.2;

        //On mouse over those thumbnail
        $('.item').hover(function () {

          //Set the width and height according to the zoom percentage
          width = $('.item').width() * zoom;
          height = $('.item').height() * zoom;

          //Move and zoom the image
          $(this).find('img').stop(false, true).animate({ 'width': width, 'height': height, 'top': move, 'left': move }, { duration: 200 });

          //Display the caption
          $(this).find('div.caption').stop(false, true).fadeIn(200);
        },
    function () {
      //Reset the image
      $(this).find('img').stop(false, true).animate({ 'width': $('.item').width(), 'height': $('.item').height(), 'top': '0', 'left': '0' }, { duration: 100 });

      //Hide the caption
      $(this).find('div.caption').stop(false, true).fadeOut(200);
    });

      });

</script>


کد: انتخاب همه

<style>
      
      body {
        font-family:arial;   
      }

      .item {
        width:125px;
        height:125px;   
        border:4px solid #222;   
        margin:5px 5px 5px 0;
   
        /* required to hide the image after resized */
        overflow:hidden;
   
        /* for child absolute position */
        position:relative;
   
        /* display div in line */
        float:left;
      }

      .item .caption {
        width:125px;
        height:125px;
        background:#000;
        color:#fff;
        font-weight:bold;
      
        /* fix it at the bottom */
        position:absolute;
        left:0;

        /* hide it by default */
        display:none;

        /* opacity setting */
        filter:alpha(opacity=80);    /* ie  */
        -moz-opacity:0.8;    /* old mozilla browser like netscape  */
        -khtml-opacity: 0.8;    /* for really really old safari */ 
        opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

      }

      .item .caption a {
        text-decoration:none;
        color:#0cc7dd;
        font-size:16px;   
   
        /* add spacing and make the whole row clickable*/
        padding:5px;
        display:block;
      }

      .item .caption p {
        padding:5px;   
        margin:0;
        font-size:10px;
      }

      img {
        /* allow javascript moves the img position*/
        border-style: none;
          border-color: inherit;
          border-width: 0;
          position:absolute;
          top: 0px;
          left: 0px;
        }

      .clear {
        clear:both;   
      }

.toggler {
width: 800px;
height: 700px;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
width: 400px;
height: 200px;
padding: 0.4em;
}
#effect h3 {
margin: 0;
padding: 0.4em;
text-align: center;
}
</style>


کد: انتخاب همه

<script>
    $(function () {
      // run the currently selected effect
      function runEffect() {
        // get effect type from
        var selectedEffect = $("#effectTypes").val();
        // most effect types need no options passed by default
        var options = {};
        // some effects have required parameters
        if (selectedEffect === "scale") {
          options = { percent: 0 };
        } else if (selectedEffect === "size") {
          options = { to: { width: 200, height: 60} };
        }
        // run the effect
        $("#effect").toggle(selectedEffect, options, 500);
      };
      // set effect from select menu value
      $("#button").click(function () {
        runEffect();
        return false;
      });
    });
</script>



کد های زیر رو هم در قسمت body وب سایت و بعد از تگ form وارد می کنیم .

کد: انتخاب همه

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">مثال از شی مورد نظر</h3>
    <table>
   <tr>
     <td>
       <div class="item">
    <a href="#"><img src="1.gif" alt="Cycliner" title="" width="125" height="125"/></a>
    <div class="caption">
      <div class="caption">
   
      <a href="">CentralClubs</a>
      
      <p>Welcome To CC</p>
    </div>
    </div>
</div>
     </td>
     <td>
      <div class="item">
    <a href="#"><img src="1.gif" alt="Cycliner" title="" width="125" height="125"/></a>
    <div class="caption">
   
      <a href="">CentralClubs</a>
      
      <p>Welcome To CC</p>
    </div>
</div>
     </td>
   </tr>
    </table>
    </div>
    </div>


یک فایل gif هم هست که شما از مثال پروژه می تونید در solution وب سایت خود اضافه کنید و در تگ img قسمت src و با فشردن ctrl+space می تونید مسیر به این تگ اضافه کنید و ...
تصویر تصویر تصویر تصویر

منبع :www.centralclubs.com
پروانه نیستم که به یک شعله جان دهم / شمعم که سوزم و دودی نیاورم

گــــــــــــــــاهی تــــــــــــــاوان شیــــــــــر بودن قـــفس اســـت ...
امــــــــا شـــــغال هــــا در شـــــهــــر آزاد مـــــیگـــــــردنــــــــــد ... !

به زودی تعمیرکار لب تاپ می شم :-)

Colonel II
Colonel II
نمایه کاربر
پست: 6940
تاریخ عضویت: جمعه 20 اردیبهشت 1387, 9:44 am
سپاس‌های ارسالی: 5878 بار
سپاس‌های دریافتی: 12405 بار
تماس:

Re: اسم این ابزار چیه ؟

پست توسط Solver » جمعه 13 دی 1392, 11:19 pm

آهان. الان فهمیدم شما منظورتان چیست.

شما در حقیقت دنبال اینفو لایر هستید.
Personal Site: [لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]

Captain
Captain
پست: 4933
تاریخ عضویت: چهار شنبه 18 بهمن 1385, 12:46 pm
محل اقامت: شیراز
سپاس‌های ارسالی: 22364 بار
سپاس‌های دریافتی: 5555 بار

Re: اسم این ابزار چیه ؟

پست توسط Present » یک شنبه 6 بهمن 1392, 6:55 pm

تصویر
سلام دوستان برای پیدا کردن همیچنین ابزاری چی باید چک کنم ?
می خوام یک منوی باز شو از کنار سمت چپ داشته باشم که به صورت slider ( باز شو ) به سمت راست باشه که برای ثبت نام بذارم !!
امیدوارم درست منظورم رو رسونده باشم ؟!
[لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]
پروانه نیستم که به یک شعله جان دهم / شمعم که سوزم و دودی نیاورم

گــــــــــــــــاهی تــــــــــــــاوان شیــــــــــر بودن قـــفس اســـت ...
امــــــــا شـــــغال هــــا در شـــــهــــر آزاد مـــــیگـــــــردنــــــــــد ... !

به زودی تعمیرکار لب تاپ می شم :-)

Colonel II
Colonel II
نمایه کاربر
پست: 6940
تاریخ عضویت: جمعه 20 اردیبهشت 1387, 9:44 am
سپاس‌های ارسالی: 5878 بار
سپاس‌های دریافتی: 12405 بار
تماس:

Re: اسم این ابزار چیه ؟

پست توسط Solver » سه شنبه 8 بهمن 1392, 8:31 am

fly menu

اگر دیده باشید، ابزار ردآپ همچین منویی بود دیگه. css3 و یک واکنش ساده با جاوا اسکریپت کفایت میکند، نیاز به کتابخانه هم نیست اما خوب اگر تو طراحی وبت از کتابخانه خاصی داری استفاده میکنی مطمئنا با کمک اون میتونی افکت ها و نوسان سرعتی حرکتی دلخواه را ایجاد کنی.
Personal Site: [لینک خارجی برای کاربران مهمان مخفی است، لطفا برای مشاهده لینک ثبت نام نموده و یا وارد سایت شوید]

ارسال پست

بازگشت به “طراحي صفحات اينترنتي”