API tools faq
paste
nyk0r

Languages Drop Down List

nyk0r
Apr 6th, 2012
122
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.04 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.         <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  4.         <title>FLAGS DEMO</title>
  5.         <script src="jquery-1.7.1.js"></script>
  6.         <script>
  7.             (function($){              
  8.                 $.fn.languageSelect = function(opts) {
  9.                     /*
  10.                         opts example
  11.                         [
  12.                             {val:'us', text:'English', img:'us.png'},
  13.                             {val:'ru', text:'Русский', img:'ru.png'},
  14.                             {val:'uz', text:'Ўзбекча', img:'uz.png'}
  15.                         ]
  16.                     */
  17.                     function onLanguageSelectClick(e) {
  18.                         if (e.data == 'selected') {
  19.                             $(this).next().slideToggle(100);
  20.                         }
  21.                         else if (e.data == 'option') {
  22.                             var select = $(this).parent().parent().parent();
  23.                             select.find('.options').slideUp(100);
  24.                            
  25.                             var href = $(this).find('a').attr('href');
  26.                             href = href.substr(href.indexOf('#')+1, href.length);
  27.                             select.prev().val(href);
  28.                            
  29.                             select.find('.selected > a').
  30.                                 html(generateLanguageRow(findOption(href, opts)) + '<img src="ad.png" class="arrowDown" />');
  31.                         }
  32.                         else {
  33.                             $('li.options').slideUp(100);
  34.                         }
  35.                         return false;
  36.                     }
  37.                    
  38.                    
  39.                     var opt = findOption(this.val(), opts);
  40.                     var selectedRow =
  41.                         opt
  42.                         ? generateLanguageRow(opt)
  43.                         : '<span class="empty">Langauge</span>';
  44.                     var optionRows = '';
  45.                     for(var i = 0; i < opts.length; i++) {
  46.                        optionRows +=
  47.                            '<li>' +
  48.                                 '<a href="#'+ opts[i].val +'">'
  49.                                     + generateLanguageRow(opts[i]) +
  50.                                 '</a>' +
  51.                             '</li>';                            
  52.                     }
  53.                     var html =
  54.                         '<ul class="languageSelect">' +
  55.                                 '<li class="selected">' +
  56.                                     '<a href="#">' +
  57.                                         selectedRow +
  58.                                         '<img src="ad.png" class="arrowDown" />' +
  59.                                     '</a>' +
  60.                                 '</li>' +
  61.                                 '<li class="options" style="display: none; z-index:12;">' +
  62.                                     '<ul>' +
  63.                                         optionRows +
  64.                                     '</ul>' +
  65.                                 '</li>' +
  66.                         '</ul>';
  67.                     this.after(html);
  68.                    
  69.                     var langaugeSelect = this.next('ul.languageSelect');
  70.                     langaugeSelect.find('li.selected').click('selected', onLanguageSelectClick);
  71.                     langaugeSelect.find('li.options > ul li').click('option', onLanguageSelectClick);
  72.                     $(document).click(onLanguageSelectClick);
  73.                    
  74.                     return this;
  75.                 };
  76.                
  77.                 function findOption(val, opts) {
  78.                     for (var i = 0; i < opts.length; i++) {
  79.                        if (opts[i].val == val) return opts[i];
  80.                    }
  81.                    return null;
  82.                }
  83.                
  84.                function generateLanguageRow(opt) {
  85.                    var html =
  86.                        '<img src="' + opt.img + '" class="flag" alt="' + opt.text +'" />';
  87.                     html +=
  88.                         '<span class="language">' + opt.text + '</span>';
  89.                     return html;
  90.                 }
  91.             }(jQuery));
  92.            
  93.             $(function() {
  94.                 $('#language').languageSelect(
  95.                     [
  96.                         {val:'us', text:'English', img:'us.png'},
  97.                         {val:'ru', text:'Русский', img:'ru.png'},
  98.                         {val:'uz', text:'Ўзбекча', img:'uz.png'}
  99.                     ]
  100.                 );
  101.                 $('#emptyLanguage').languageSelect(
  102.                     [
  103.                         {val:'us', text:'English', img:'us.png'},
  104.                         {val:'ru', text:'Русский', img:'ru.png'},
  105.                         {val:'uz', text:'Ўзбекча', img:'uz.png'}
  106.                     ]
  107.                 );                
  108.             });
  109.         </script>
  110.         <style type="text/css">
  111.             #content {
  112.                
  113.             }
  114.            
  115.             img {
  116.                  border: 0;
  117.             }
  118.            
  119.             ul {
  120.                 list-style: none;
  121.                 padding: 0;
  122.                 margin: 0;
  123.             }
  124.            
  125.             li {
  126.                 padding: 0;
  127.                 margin: 0;
  128.             }
  129.            
  130.             ul.languageSelect {
  131.                 background: #FFF;
  132.                 color: #000;
  133.             }
  134.            
  135.             ul.languageSelect a, ul.languageSelect a:visited {
  136.                 color: #000;
  137.                 text-decoration: none;
  138.             }
  139.            
  140.             ul.languageSelect li.selected {
  141.                 position: relative;
  142.                 border: 1px solid #ccc;
  143.                 width: 120px;
  144.             }
  145.            
  146.             ul.languageSelect li.selected img.arrowDown {
  147.                 width: 18px;
  148.                 height: 18px;
  149.                 vertical-align: middle;
  150.                 margin: 0 3px;
  151.                
  152.                 position: absolute;
  153.                 top: 3px;
  154.                 right: 0px;
  155.             }
  156.            
  157.             ul.languageSelect .empty {
  158.                 display: inline-block;
  159.                 padding-left: 3px;
  160.             }
  161.            
  162.             ul.languageSelect li.options {
  163.                 margin-top: 5px;
  164.                 border: 1px solid #ccc;
  165.                 width: 120px;
  166.             }
  167.            
  168.             ul.languageSelect img.flag {
  169.                 width: 24px;
  170.                 height: 24px;
  171.                 vertical-align: middle;
  172.                 margin:0 3px;
  173.             }
  174.            
  175.             ul.languageSelect .language {
  176.                 vertical-align: middle;
  177.             }
  178.         </style>
  179.     </head>
  180.     <body>
  181.         <div id="content">
  182.             <input type="hidden" id="language" value="ru" />
  183.             <br />
  184.             <input type="hidden" id="emptyLanguage" value="" />
  185.         </div>
  186.     </body>
  187. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!