Tham khảo tài liệu 'jquery in action phần 10', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | Putting it all together 261 Perhaps not as much code as expected but there s a lot going on in there Let s take it one step at a time. First we use the pattern that we learned in chapter 7 to establish the API for the termifier command o. The only parameter expected is an object whose properties serve as our options. To be friendly we provide a default set that we merge into the passed options using the services of the .extend utility function c. The defined options are as follows lookupResource Specifies the URL of the server-side resource to be used flyoutclass The CSS class name applied to newly created flyout elements As a helpful tip to our customers we add a title attribute to the target element so that if they hover the mouse cursor over the highlighted term they will see a message letting them know that clicking the term will do something wonderful. We establish a click handler on every element in the matched set 0. Remember that the function context this for a jQuery command is the matched set so applying other jQuery commands to the matched set is as easy as calling the commands on this. In the listener for the click event we initiate the Ajax call that will retrieve the term definition. For maximum control we use the .ajax function 0 and pass it an object that defines the following options The URL specified by the command options either the default or one provided by the page author An HTTP method of GET because the request is clearly idempotent A request parameter named term that s set to the content of the event target the function context within the listener Identification of the expected response data as HTML A success callback o that uses the response data to create the flyout A lot of the more interesting things happen in the success callback for the Ajax request. First a new and empty div element is created and then the following operations are performed on it using the magic ofjQuery chaining again CSS styles are added to the div element that .
