📄 11.03 - adapting an email api.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Mail API Demonstration</title> <style type="text/css" media="screen"> body { font: 62.5% georgia,times,serif; } #doc { margin: 0 auto; width: 500px; font-size: 1.3em; } </style> <script src="lib-utils.js"></script> <script type="text/javascript"> // application utilities var DED = {}; DED.util = { substitute: function (s, o) { return s.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 'string' || typeof r === 'number' ? r : a; } ); }, asyncRequest: function() { function handleReadyState(o, callback) { var poll = window.setInterval( function() { if(o && o.readyState == 4) { window.clearInterval(poll); if ( callback ){ callback(o); } } }, 50 ); } var getXHR = function() { var http; try { http = new XMLHttpRequest; getXHR = function() { return new XMLHttpRequest; }; } catch(e) { var msxml = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; for (var i=0, len = msxml.length; i < len; ++i) { try { http = new ActiveXObject(msxml[i]); getXHR = function() { return new ActiveXObject(msxml[i]); }; break; } catch(e) {} } } return http; }; return function(method, uri, callback, postData) { var http = getXHR(); http.open(method, uri, true); handleReadyState(http, callback); http.send(postData || null); return http; }; }() } // dedMail application interface. var dedMail = (function() { function request(id, type, callback) { DED.util.asyncRequest( 'GET', 'mail-api.php?ajax=true&id=' + id + '&type=' + type, function(o) { callback(o.responseText); } ); } return { getMail: function(id, callback) { request(id, 'all', callback); }, sendMail: function(body, recipient) { // Send mail with body text to the supplied recipient. }, save: function(id) { // Save a draft copy with the supplied email ID. }, move: function(id, destination) { // Move the email to the supplied destination folder. }, archive: function(id) { // Archive the email. This can be a basic facade method that uses // the move method, hardcoding the destination. }, trash: function(id) { // This can also be a facade method which moves the message to // the trash folder. }, reportSpam: function(id) { // Move message to spam folder and add sender to the blacklist. }, formatMessage: function(e) { var e = e || window.event; try { e.preventDefault(); } catch(ex) { e.returnValue = false; } var targetEl = e.target || e.srcElement; var id = targetEl.id.toString().split('-')[1]; dedMail.getMail(id, function(msgObject) { var resp = eval('('+msgObject+')'); var details = '<p><strong>From:</strong> {from}<br>'; details += '<strong>Sent:</strong> {date}</p>'; details += '<p><strong>Message:</strong><br>'; details += '{message}</p>'; messagePane.innerHTML = DED.util.substitute(details, resp); } }; })(); // Set up mail implementation. addEvent(window, 'load', function() { var threads = getElementsByClass('thread', 'a'); var messagePane = $('message-pane'); for (var i=0, len=threads.length; i<len; ++i) { addEvent(threads[i], 'click', formatMessage); } }); </script> </head> <body> <div id="doc"> <h1>Email Application Interface</h1> <ul> <li> <a class="thread" href="#" id="msg-1"> load message Sister Sonya </a> </li> <li> <a class="thread" href="#" id="msg-2"> load message Lindsey Simon </a> </li> <li> <a class="thread" href="#" id="msg-3"> load message Margaret Stoooart </a> </li> </ul> <div id="message-pane"></div> </div> </body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -