React: Button Dropdown

This entry is part 34 of 35 in the series React JS

See the Pen React Dropdown by Tristan W (@tristaaan) on CodePen.

var Dropdown = React.createClass({
  getInitialState() {
    return { toggled: false };
  },
  componentDidUpdate: function(prevState) {
    if (this.state.toggled && !prevState.toggled) {
      window.addEventListener("click", this.handleClickOutside);
    } else if (!this.state.toggled && prevState.toggled) {
      window.removeEventListener("click", this.handleClickOutside);
    }
  },
  handleClickOutside: function(e) {
    var children = this.getDOMNode().getElementsByTagName("*");
    for (var x in children) {
      if (children[x] == e.target) {
        return;
      }
    }
    this.toggle();
  },
  toggle(e) {
    this.setState({ toggled: !this.state.toggled });
  },
  render() {
    var isHidden = !this.state.toggled ? "hidden" : "";
    return (
      <div className="dropdown">
        <button
          ref="dropdownButton"
          className="dropdown-button"
          onClick={this.toggle}
        >
          {this.props.buttonText}
        </button>
        <section
          ref="dropdownContent"
          className={isHidden + " dropdown-content"}
        >
          {this.props.children}
        </section>
      </div>
    );
  }
});

var Main = React.createClass({
  render() {
    return (
      <Dropdown buttonText="hello">
        <p>Goodbye</p>
      </Dropdown>
    );
  }
});

React.render(<Main />, document.getElementById("content"));

ReactJS: Dropdown with no windows listener

This entry is part 28 of 35 in the series React JS

See the Pen React Dropdown – No Window Listener by daryl (@darylw) on CodePen.0

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
      value: "Donuts"
    };
  }

  expand() {
    this.setState({ expanded: true });
  }

  collapse() {
    this.setState({ expanded: false });
  }

  handleItemClick(e) {
    this.setState({
      expanded: false,
      value: e.target.innerText
    });
  }

  handleTriggerClick() {
    this.setState({ expanded: !this.state.expanded });
  }

  render() {
    let dropdown = undefined;
    if (this.state.expanded) {
      dropdown = (
        <div className="content">
          {this.props.options.map(item => {
            return (
              <div
                onClick={e => {
                  this.handleItemClick(e);
                }}
                className="item"
              >
                {item}
              </div>
            );
          })}
        </div>
      );
    }

    return (
      <div
        className={'dropdown ${this.state.expanded ? "active" : ""}'}
        tabIndex="0"
        onBlur={() => {
          this.collapse();
        }}
      >
        <div
          className="trigger"
          onClick={() => {
            this.handleTriggerClick();
          }}
        >
          {this.state.value}
        </div>
        {dropdown}
      </div>
    );
  }
}

ReactDOM.render(
  <Dropdown
    options={["Strawberry Cream", "Chocolate Flakes", "Marshmallow Sprinkles"]}
  />,
  document.getElementById("app")
);

ReactJS: Dropdown

This entry is part 27 of 35 in the series React JS

See the Pen React Dropdown by daryl (@darylw) on CodePen.0

class DropdownItem extends React.Component{
  render() {
    return (<li className="dropdown-option" 
              onClick={this.props.click}>
                {this.props.label}
          </li>);
  }
}

class DropdownMenu extends React.Component {
  render() {
    let className="dropdown-select";
    if (this.props.toggled) {
      className += " open";
    }
    
    return <ul className={className}>
          {this.props.children}
        </ul>
  }
}

class Dropdown extends React.Component {
  constructor (){
    super();
    
    this.state = {
      toggled: false,
      selected: "Default"
    };
  }
  
  toggleDropdown () {
    this.setState({toggled: !this.state.toggled});
  }

  handleClick(value) {
    this.setState({selected: value});
    
    this.closeDropdown();
  }

  render () {
    var className="dropdown-container";
    
    if (this.props.className) {
      className += " " + this.props.className;
    }

    var dropdown = React.Children.map(
      this.props.children, (child, i) => {
      
      var clonedProps = {};
      clonedProps.click = this.handleClick.bind(this, i);

      return React.cloneElement(child, clonedProps);
    });

    return (
      <div className={className} 
        onClick={this.toggleDropdown.bind(this)}>
        <div className="dropdown-label">
          {this.props.label}
        </div>
        <div className="dropdown-active">
          {this.props.children[this.state.selected]}
        </div>
        <DropdownMenu toggled={this.state.toggled} >
          {dropdown}
        </DropdownMenu>
      </div>
    );
  }
}

React.render(
    <Dropdown label="Dropdown Label">
      <DropdownItem label="Choice 1" value="Number 1" />
      <DropdownItem label="Choice 2" value="2" />
    </Dropdown>,
  document.getElementById('app')
);

jQuery UI & Autocomplete: Custom data and display in drop down

This entry is part 7 of 7 in the series jQuery UI Autocomplete

jQuery UI Autocomplete – Custom data and display

You can use your own custom data formats and displays by simply overriding the default focus and select actions.

Try typing “j” to get a list of projects or just press the down arrow.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Custom data and display</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
        }

        #project-icon {
            float: left;
            height: 32px;
            width: 32px;
        }

        #project-description {
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        $(function () {
            var projects = [
                {
                    value: 'jquery',
                    label: 'jQuery',
                    desc: 'the write less, do more, JavaScript library',
                    icon: 'jquery_32x32.png'
                },
                {
                    value: 'jquery-ui',
                    label: 'jQuery UI',
                    desc: 'the official user interface library for jQuery',
                    icon: 'jqueryui_32x32.png'
                },
                {
                    value: 'sizzlejs',
                    label: 'Sizzle JS',
                    desc: 'a pure-JavaScript CSS selector engine',
                    icon: 'sizzlejs_32x32.png'
                }
            ];

            $('#project').autocomplete({
                minLength: 0,
                source: projects,
                focus: function (event, ui) {
                    $('#project').val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $('#project').val(ui.item.label);
                    $('#project-id').val(ui.item.value);
                    $('#project-description').html(ui.item.desc);
                    $('#project-icon').attr('src', 'images/' + ui.item.icon);

                    return false;
                }
            })
                    .data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li>')
                        .append('<a>' + item.label + '<br>' + item.desc + '</a>')
                        .appendTo(ul);
            };
        });
    </script>
</head>
<body>

<div id='project-label'>Select a project (type 'j' for a start):</div>
<img id='project-icon' src='http://jqueryui.com/resources/demos/autocomplete/images/transparent_1x1.png'
     class='ui-state-default' alt=''>
<input id='project'>
<input type='hidden' id='project-id'>

<p id='project-description'></p>

</body>
</html>
Try The Code

jQuery Mobile: Mini drop down menu

This entry is part 67 of 73 in the series jQuery Mobile

This is a mini drop down menu with a selected option.

The 3rd option is selected in the menu.

This is the so called native drop down menu as building this is the same as building a Javascript drop down menu.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>A Mini Drop Down Menu App</h1>
    </div>

    <div data-role='content'>
        <form>
            <div class='ui-field-contain'>
                <select name='name1' id='id1' data-mini='true'>
                    <option value='1'>The 1st Option</option>
                    <option value='2'>The 2nd Option</option>
                    <option value='3' selected='selected'>The 3rd Option</option>
                    <option value='4'>The 4th Option</option>
                </select>
            </div>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code