منوی بازشو به همراه تصویر با استفاده از Jquery

چهارشنبه 31 تیر 1394

در این مقاله قصد داریم یک منوی زیبای بازشو (DropDownList) زیبا با استفاده از جی کوئری ایجاد کنیم .

منوی بازشو به همراه تصویر با استفاده از Jquery

برای ساخت نمونه نیاز به کتابخانه jquery.ddslick.min.js داریم

 <script src="Scripts/jquery.ddslick.min.js" type="text/javascript"></script>

 

با استفاده از تابع زیر آیتم های منو را ایجاد میکنیم

        $(function () {  
            var ddlData = [  
            {  
                text: "Facebook",  
                value: 1,  
                description: "Facebook",  
                imageSrc: "Social/facebook.png"  
            },  
            {  
                text: "Twitter",  
                value: 2,  
                description: "Twitter",  
                imageSrc: "Social/twitter.png"  
            },  
            {  
                text: "LinkedIn",  
                value: 3,  
                description: "LinkedIn",  
                imageSrc: "Social/linkedin.png"  
            },  
            {  
                text: "Google+",  
                value: 3,  
                description: "Google+",  
                imageSrc: "Social/GooglePlus2.jpg"  
            },  
            {  
                text: "c-SharpCorner",  
                value: 4,  
                description: "A Community For Professional",  
                imageSrc: "Social/cSharp.png"  
            }  
            ];  
            $('#ddlSocial').ddslick({  
                data: ddlData,  
                width: 300,  
                imagePosition: "left",  
                onSelected: function (selectedData) {  
                    //Write your logic on Selection index change.                      
                }  
            });  
        });   

 

میتوانید از منوی باز شوی زیبا آیتم ها را انتخاب کنید

 

برای نوشتن رویداد برای تغییر آیتم انتخاب شده میتوانید کد ها را در بخش زیر بنویسید

     onSelected: function (selectedData) {
                    //Write your logic on Selection index change.                    
                }

 

فایل های ضمیمه

ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان
  • Jquery
  • 1k بازدید
  • 6 تشکر

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید