Make a select like Google Translate_问答_开发者

I'm trying to make a select like the snapshoot but I can't make it, and then receve a value with php, I need 开发者_JAVA百科the select only appears a image, but on click appears image and little description on image's right side, and when click an option close menu and change image to selected, but allow to change it again (Google not allow to change, see an expample that I need on picture added or here: Google Translate (snapshoot make on Chrome).

I need it to receive data by php script. I'm try it but I can't do it, please help me, thank in advanced (sorry for my bad english).

Make a select like Google Translate

That is not really a <select> it is an image and when you click on it, it shows a <div> that was previously hidden. When you click on one of the rating icons it changes the picture and the tooltip text and sends an AJAX request to store your rating.

Instead of sending an AJAX request you could also change the value in a hidden field, that would somehow resemble a <select>.

Some pseudo HTML/JS code

<input type="hidden" name="myField" id="myField" />
<img src="unselected.png" onClick="document.getElementById('selectDiv').style.visibility = 'visible'" id="image" />
<div style="visibility: hidden" id="selectDiv">
<ul>
  <li><a href="#" onclick="document.getElementById('image').src = 'option1.png'; document.getElementById('myField').value = 'option1'">Option 1</li>
  <li><a href="#" onclick="document.getElementById('image').src = 'option2.png'; document.getElementById('myField').value = 'option2'">Option 2</li>
  <li><a href="#" onclick="document.getElementById('image').src = 'option2.png'; document.getElementById('myField').value = 'option3'">Option 3</li>
</ul>
</div>

Just quick & dirty. You would need to move the div so that it displays underneath the image and some styling, etc... But that's the general idea behind this

I know it's late, but for those of you, who just happen to still see this.

For "click away" that was asked for please see "outside" event in jQuery. There is a really beautiful example here:

http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/

Have fun

As requested I'm putting the example here to be viewed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testpage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">


/*!
 * jQuery outside events - v1.1 - 3/16/2010
 * http://benalman.com/projects/jquery-outside-events-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

// Script: jQuery outside events
//
// *Version: 1.1, Last updated: 3/16/2010*
// 
// Project Home - http://benalman.com/projects/jquery-outside-events-plugin/
// GitHub       - http://github.com/cowboy/jquery-outside-events/
// Source       - http://github.com/cowboy/jquery-outside-events/raw/master/jquery.ba-outside-events.js
// (Minified)   - http://github.com/cowboy/jquery-outside-events/raw/master/jquery.ba-outside-events.min.js (0.9kb)
// 
// About: License
// 
// Copyright (c) 2010 "Cowboy" Ben Alman,
// Dual licensed under the MIT and GPL licenses.
// http://benalman.com/about/license/
// 
// About: Examples
// 
// These working examples, complete with fully commented code, illustrate a few
// ways in which this plugin can be used.
// 
// clickoutside - http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/
// dblclickoutside - http://benalman.com/code/projects/jquery-outside-events/examples/dblclickoutside/
// mouseoveroutside - http://benalman.com/code/projects/jquery-outside-events/examples/mouseoveroutside/
// focusoutside - http://benalman.com/code/projects/jquery-outside-events/examples/focusoutside/
// 
// About: Support and Testing
// 
// Information about what version or versions of jQuery this plugin has been
// tested with, what browsers it has been tested in, and where the unit tests
// reside (so you can test it yourself).
// 
// jQuery Versions - 1.4.2
// Browsers Tested - Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1.
// Unit Tests      - http://benalman.com/code/projects/jquery-outside-events/unit/
// 
// About: Release History
// 
// 1.1 - (3/16/2010) Made "clickoutside" plugin more general, resulting in a
//       whole new plugin with more than a dozen default "outside" events and
//       a method that can be used to add new ones.
// 1.0 - (2/27/2010) Initial release
//
// Topic: Default "outside" events
// 
// Note that each "outside" event is powered by an "originating" event. Only
// when the originating event is triggered on an element outside the element
// to which that outside event is bound will the bound event be triggered.
// 
// Because each outside event is powered by a separate originating event,
// stopping propagation of that originating event will prevent its related
// outside event from triggering.
// 
//  OUTSIDE EVENT     - ORIGINATING EVENT
//  clickoutside      - click
//  dblclickoutside   - dblclick
//  focusoutside      - focusin
//  bluroutside       - focusout
//  mousemoveoutside  - mousemove
//  mousedownoutside  - mousedown
//  mouseupoutside    - mouseup
//  mouseoveroutside  - mouseover
//  mouseoutoutside   - mouseout
//  keydownoutside    - keydown
//  keypressoutside   - keypress
//  keyupoutside      - keyup
//  changeoutside     - change
//  selectoutside     - select
//  submitoutside     - submit

(function($,doc,outside){
  '$:nomunge'; // Used by YUI compressor.
  
  $.map(
    // All these events will get an "outside" event counterpart by default.
    'click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup'.split(' '),
    function( event_name ) { jq_addOutsideEvent( event_name ); }
  );
  
  // The focus and blur events are really focusin and focusout when it comes
  // to delegation, so they are a special case.
  jq_addOutsideEvent( 'focusin',  'focus' + outside );
  jq_addOutsideEvent( 'focusout', 'blur' + outside );
  
  // Method: jQuery.addOutsideEvent
  // 
  // Register a new "outside" event to be with this method. Adding an outside
  // event that already exists will probably blow things up, so check the
  // <Default "outside" events> list before trying to add a new one.
  // 
  // Usage:
  // 
  // > jQuery.addOutsideEvent( event_name [, outside_event_name ] );
  // 
  // Arguments:
  // 
  //  event_name - (String) The name of the originating event that the new
  //    "outside" event will be powered by. This event can be a native or
  //    custom event, as long as it bubbles up the DOM tree.
  //  outside_event_name - (String) An optional name for the new "outside"
  //    event. If omitted, the outside event will be named whatever the
  //    value of `event_name` is plus the "outside" suffix.
  // 
  // Returns:
  // 
  //  Nothing.
  
  $.addOutsideEvent = jq_addOutsideEvent;
  
  function jq_addOutsideEvent( event_name, outside_event_name ) {
    
    // The "outside" event name.
    outside_event_name = outside_event_name || event_name + outside;
    
    // A jQuery object containing all elements to which the "outside" event is
    // bound.
    var elems = $(),
      
      // The "originating" event, namespaced for easy unbinding.
      event_namespaced = event_name + '.' + outside_event_name + '-special-event';
    
    // Event: outside events
    // 
    // An "outside" event is triggered on an element when its corresponding
    // "originating" event is triggered on an element outside the element in
    // question. See the <Default "outside" events> list for more information.
    // 
    // Usage:
    // 
    // > jQuery('selector').bind( 'clickoutside', function(event) {
    // >   var clicked_elem = $(event.target);
    // >   ...
    // > });
    // 
    // > jQuery('selector').bind( 'dblclickoutside', function(event) {
    // >   var double_clicked_elem = $(event.target);
    // >   ...
    // > });
    // 
    // > jQuery('selector').bind( 'mouseoveroutside', function(event) {
    // >   var moused_over_elem = $(event.target);
    // >   ...
    // > });
    // 
    // > jQuery('selector').bind( 'focusoutside', function(event) {
    // >   var focused_elem = $(event.target);
    // >   ...
    // > });
    // 
    // You get the idea, right?
    
    $.event.special[ outside_event_name ] = {
      
      // Called only when the first "outside" event callback is bound per
      // element.
      setup: function(){
        
        // Add this element to the list of elements to which this "outside"
        // event is bound.
        elems = elems.add( this );
        
        // If this is the first element getting the event bound, bind a handler
        // to document to catch all corresponding "originating" events.
        if ( elems.length === 1 ) {
          $(doc).bind( event_namespaced, handle_event );
        }
      },
      
      // Called only when the last "outside" event callback is unbound per
      // element.
      teardown: function(){
        
        // Remove this element from the list of elements to which this
        // "outside" event is bound.
        elems = elems.not( this );
        
        // If this is the last element removed, remove the "originating" event
        // handler on document that powers this "outside" event.
        if ( elems.length === 0 ) {
          $(doc).unbind( event_namespaced );
        }
      },
      
      // Called every time a "outside" event callback is bound to an element.
      add: function( handleObj ) {
        var old_handler = handleObj.handler;
        
        // This function is executed every time the event is triggered. This is
        // used to override the default event.target reference with one that is
        // more useful.
        handleObj.handler = function( event, elem ) {
          
          // Set the event object's .target property to the element that the
          // user interacted with, not the element that the "outside" event was
          // was triggered on.
          event.target = elem;
          
          // Execute the actual bound handler.
          old_handler.apply( this, arguments );
        };
      }
    };
    
    // When the "originating" event is triggered..
    function handle_event( event ) {
      
      // Iterate over all elements to which this "outside" event is bound.
      $(elems).each(function(){
        var elem = $(this);
        
        // If this element isn't the element on which the event was triggered,
        // and this element doesn't contain said element, then said element is
        // considered to be outside, and the "outside" event will be triggered!
        if ( this !== event.target && !elem.has(event.target).length ) {
          
          // Use triggerHandler instead of trigger so that the "outside" event
          // doesn't bubble. Pass in the "originating" event's .target so that
          // the "outside" event.target can be overridden with something more
          // meaningful.
          elem.triggerHandler( outside_event_name, [ event.target ] );
        }
      });
    };
    
  };
  
})(jQuery,document,"outside");






$(function(){
  
  // Elements on which to bind the event.
  var elems = $('#test, #test div, #test .bind-me');
  
  // Clear any previous highlights and text.
  $(document)
    .bind( 'click', function(event){
      elems
        .removeClass( 'event-outside' )
        .children( '.event-target' )
          .text( ' ' );
    })
    .trigger( 'click' );
  
  // Bind the 'clickoutside' event to each test element.
  elems.bind( 'clickoutside', function(event){
    var elem = $(this),
      target = $(event.target),
      
      // Update the text to reference the event.target element.
      text = 'Clicked: ' + target[0].tagName.toLowerCase()
        + ( target.attr('id') ? '#' + target.attr('id')
          : target.attr('class') ? '.' + target.attr('class').replace( / /g, '.' )
          : ' ' );
    
    // Highlight this element and set its text.
    elem
      .addClass( 'event-outside' )
      .children( '.event-target' )
        .text( text );
  });
  
});

</script>

<style type="text/css">
#test,
#test div {
  padding: 1em;
  margin-top: 1em;
}

#test .bind-me {
  padding: 0 0.5em;
  margin-left: 0.5em;
  white-space: nowrap;
  line-height: 1.6em;
}

#test,
#test div,
#test .bind-me {
  color: #ccc;
  border: 2px solid #ccc;
}

.event-outside {
  color: #0a0 !important;
  border-color: #0a0 !important;
  background-color: #cfc !important;
}

#test .bind-me,
.event-target {
  display: inline-block;
  width: 180px;
  overflow: hidden;
  white-space: pre;
  vertical-align: middle;
}




</style>
</head>

<body>
<div id="test" class="event-outside">
  test <span class="event-target">Clicked: body </span>
  
  <div id="a" class="event-outside">
      a <span class="event-target">Clicked: body </span>
      <div id="b" class="event-outside">
          b <span class="event-target">Clicked: body </span>
      </div>
  </div>
  
  <div id="c" class="event-outside">
      c <span class="event-target">Clicked: body </span>
      <span id="d" class="bind-me event-outside">d <span class="event-target">Clicked: body </span> </span>
      <span id="e" class="bind-me event-outside">e <span class="event-target">Clicked: body </span> </span>
  </div>
  
  <div id="f" class="event-outside">
      f <span class="event-target">Clicked: body </span>
      <div id="g" class="event-outside">
          g <span class="event-target">Clicked: body </span>
          <span id="h" class="bind-me event-outside">h <span class="event-target">Clicked: body </span> </span>
          <span id="i" class="bind-me event-outside">i <span class="event-target">Clicked: body </span> </span>
      </div>
  </div>
</div>
</body>
</html>