jimfog Posted December 10, 2013 Share Posted December 10, 2013 If you go to store an event in outlook.com calendar a modal appears with a start field from where you can choose the time that the event starts. It is an input type="text" element but what puzzles me is that this element does give the option of creating drop down menus as in this case here. It seems that jquery is utilized to create the drop-down menu but the question is how this is done. I want to build something similar in the calendar app I am using and I am trying to understand why the developers did not use a simple select element like in the case of the duration field next to it. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 10, 2013 Share Posted December 10, 2013 They use an onclick event on the field to show an element that has the options in it. Among other things, it allows for a dropdown box that you can type in (to filter, add a new entry, etc). Link to comment Share on other sites More sharing options...
jimfog Posted December 11, 2013 Author Share Posted December 11, 2013 I am having difficulty pinpointing the event handler of that click event. I am using Chrome DevTools and on the corresponding input element I have set a DOM breakpoint. This "leads" me to two files,jquery and wlive.js but I cannot locate exactly where is this click event handler.I mean devtools point me to some code but I cannot understand how this is related to the click handler. Where do you see it exactly?You would be very helpful to direct me here. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 11, 2013 Share Posted December 11, 2013 I don't have an account on outlook.com, I'm just speaking generally about how that is done. There's another example here, look at the state dropdown: http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/form/xml-form.html Notice how you can type in it to filter the options. That's a text field with some extra stuff added to it, presumably the same type of thing as what you're describing. Like with Ext JS, I seriously doubt they would manually put a text field on that page and then write a click handler for it. I almost guarantee that they are using a component which has all of those options implemented, and when they add a field like that to the page they create a new component and set their options. For example, on the page I linked to above, the way they create that dropdown is with this config object: { xtype: 'combobox', fieldLabel: 'State', name: 'state', store: Ext.create('Ext.data.ArrayStore', { fields: ['abbr', 'state'], data : Ext.example.states // from states.js }), valueField: 'abbr', displayField: 'state', typeAhead: true, queryMode: 'local', emptyText: 'Select a state...'} That says that the component to create should be a combobox component, and they set other properties that they want to override for the defaults for the combobox component. Here is the API documentation for the combobox component which lists the various configuration options for it, as well as all of the properties, methods, and events that the instantiated object will have: ComboBox Note that they don't need to set a click handler, all of that happens automatically in the constructor for the component. That's the point of reusable components, so that you don't need to rebuild the thing every time you want to use one. I don't know what interface library outlook.com is using, but they would be using a similar component model. In the code to make that dropdown they create whatever component they are using and set the options that they want on it. Link to comment Share on other sites More sharing options...
jimfog Posted December 11, 2013 Author Share Posted December 11, 2013 I understand now what are you talking about. The first thing that comes in my head right now to search for a jquery plugin that makes a similar job. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now