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

در این مقاله قصد داریم یک منوی زیبای بازشو (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.                    
                }

 

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