• Címkék:
  • dropdown
  • lebomló
  • select
  • lista
  • menu
  • HTML5
  • JSON

ddSlick

Példa 1 - adatok JSON-ból

Deklaráció

        $(document).ready(function(){
          var varJSON = [
            {
              text: "Facebook",
              value: 1,
              selected: false,
              description: "Description with Facebook",
              imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            },
            {
              text: "Twitter",
              value: 2,
              selected: false,
              description: "Description with Twitter",
              imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            },
            {
              text: "LinkedIn",
              value: 3,
              selected: false,
              description: "Description with LinkedIn",
              imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            },
            {
              text: "Foursquare",
              value: 4,
              selected: false,
              description: "Description with Foursquare",
              imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            }
          ];

          $('#pelda-1').ddslick({
            data: varJSON,
            width: 300,
            selectText: "Válassz!",
            imagePosition: "left"
          });
        });
      

HTML kód

        <div id="pelda-1"></div>
      

Példa 2 - adatok HTML-ből

Deklaráció

        $(document).ready(function(){
          $('#pelda-2').ddslick();
        });
      

HTML kód

        <select id="pelda-2">
          <option
            value="0"
            data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            data-description="Description with Facebook">
            Facebook
          </option>
          <option
            value="1"
            data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            data-description="Description with Twitter">
            Twitter
          </option>
          <option
            value="2"
            selected="selected"
            data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            data-description="Description with LinkedIn">
            LinkedIn
          </option>
          <option 
            value="3"
            data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            data-description="Description with Foursquare">
            Foursquare
          </option>
        </select>
      

« bezár