• <center id="suhdv"></center>
    • <samp id="suhdv"></samp><tfoot id="suhdv"><source id="suhdv"></source></tfoot>
    • \n...\n<\/body>\n<\/html>\n<\/pre>\n
      Replace APIKey<\/code><\/strong> with your application's API key you obtained in the previous step. Parameter v=1<\/code> is the version. Maybe in the future, Twitter will add new features and maybe new syntax. To prevent breaking existing @Anywhere code, they will retain the old code (if specified). Version 1 supports all major browsers, including IE6. <\/p>\n
      \nAfter including this JavaScript file, we have access to the twttr<\/code> object, which will call the anywhere()<\/code> function with the arguments when @Anywhere is ready: <\/p>\n
      \ntwttr.anywhere(function(twitter) {\n\t\/\/ Actions when @Anywhere is ready\n});\n<\/pre>\nThe 
       parameter (twitter<\/code> in this case) is the object we will use, similar to jQuery's $<\/code>. <\/p>\n
      \nNext, we need to create an HTML library. Copy and paste the following code and place it inside the \"body\" tag. <\/p>\n
      \n
      \n\t
      \n\t\t
      My blog post<\/h2>\n\t\t
      \n\t\t\t
      This is a test blog post testing @Anywhere by @twitter.<\/p>\n\t\t\t
      If you enjoyed this tutorial, please follow me<\/a> and keep in touch with @NETTUTS for more awesomeness.<\/p>\n\t\t<\/div>\n\t<\/div>\n\t
      \n\t
      Comments<\/h3>\n\t
        \n\t\t
      1. @corcholat<\/span> says:\n\t\t\t
        Such a great tutorial! <\/p>\n\t\t<\/li>\n\t\t
      2. @faelazo<\/span> says:\n\t\t\t
        You should also follow @smashingmag<\/p>\n\t\t<\/li>\n\t<\/ol>\n\t<\/div>\n<\/div>\n<\/pre>\n
         Now let’s delve deeper. <\/p>\n
        \n
        \n1.<\/span> linkifyUsers: Convert @something to a link<\/h2>\n
        \n@Anywhere allows us to convert @mentions into links. This feature is called linkifyUsers<\/code>, and it's very simple: it sets the HTML elements you want to turn into links. <\/p>\n
        \nSince we want to convert all @mentions in the document into links, we simply call the linkifyUsers()<\/code> function in the body element: <\/p>\n
        \ntwttr.anywhere(function(twitter) {\n\ttwitter(\"body\").linkifyUsers();\n});\n<\/pre>\n\"使用\n
        \nAs mentioned earlier, the \"twitter\" parameter inside the callback function is much like jQuery's \"$\" alias; if we want to convert @mentions into links, but only within a specific section, we can use a CSS selector, As follows. <\/p>\n
        \ntwttr.anywhere(function(twitter) {\n\ttwitter(\".post\").linkifyUsers();\n});\n<\/pre>\n
        \nlinkifyUsers()<\/code> accepts an object as a parameter and has two properties: className<\/code> and success<\/code>. With className<\/code> you can specify the class to apply when @mentions are found; so, for example, you could add an unsemantic \"red\" class and specify it in the CSS: <\/p>\n
        \n\t.red { color:#f00; }\n<\/pre>\n
        \nHere is the code. <\/p>\n
        \ntwttr.anywhere(function(twitter) {\n\ttwitter(\"body\").linkifyUsers({\n\t\tclassName:'red'\n\t});\n});\n<\/pre>\n
        \n
        \n2.<\/span>hovercards: Display additional information on hover<\/h2>\n
        \nmousecards() converts @mentions into links, but also loads a small popup tooltip on mouseover. Here is a basic example of its usage. <\/p>\n
        \ntwttr.anywhere(function(twitter) {\n\ttwitter.hovercards();\n});\n<\/pre>\n\"使用\n
        \nHowever, hovercards()<\/code> is flexible enough to include certain elements even if they don't have a @mention in them. In the HTML, I linked \"follow me\" to http:\/\/twitter.com\/faelazo<\/code>;but @anywhere was smart enough to convert this link into a hover card. By adding the \"hovercard\" class to the anchor tag, Twitter will take care of the rest! <\/p>\n
        \ntwttr.anywhere(function(twitter) {\n    \/\/ Find the @mentions and linkify as usual\n    twitter(\"body\").hovercards();\n    \n    \/\/ Let's find the elements which has a hovercard class\n    twitter(\".hovercard\").hovercards({\n        username: function(node){\n            var twitter_regexp = \/twitter\\.com\\\/([a-z0-9_]*)\\\/?(.*)?\/gi;\n            if(node.href.match(twitter_regexp) && (twitter_match = twitter_regexp.exec(node.href))){\n                return twitter_match[1];\n            }\n            return '';\n        }\n    });\n});\n<\/pre>\n
        \nThe username<\/code> argument takes a function whose argument will be the found object (in this case node<\/code>). Here's what happens line by line inside the function. <\/p>\n
        var twitter_regexp = \/twitter\\.com\\\/([a-z0-9_]*)\/gi;\n<\/pre>\n
        This is a regular expression. It will match the twitter.com\/<\/code> string with an alphanumeric value and an underscore. <\/p>\n
        if(node.href.match(twitter_regexp) && (twitter_match = twitter_regexp.exec(node.href))){\n<\/pre>\n
        \nIf the regular expression matches the href attribute in the node element, the variable twitter_match is set to capture the value in the array. <\/p>\n
        return twitter_match[1];\n<\/pre>\n
         It will return the found matches. <\/p>\n
        \n我們添加一個“return”，以防元素確實有一個類，但不引用 twitter.com<\/code>；所以不會有匹配。如果它返回 false<\/code> 或 NULL<\/code>，則腳本會引發(fā)錯誤。使用空字符串時，它會顯示一個懸停卡，但未找到用戶。<\/p>\n
        現(xiàn)在，如果這有點太復(fù)雜，您可以隨時簡化過程，并將用戶名添加為錨標記的標題屬性。 <\/p>\n
        \nfollow me<\/a>\n<\/pre>\n
        \n只需返回 node<\/code> 的 title<\/code> 屬性即可。容易多了，對吧？ <\/p>\n
        \ntwitter(\".hovercard\").hovercards({\n    username: function(node){\n        return node.title;\n    }\n});\n<\/pre>\n
        \n“hovercards”可以應(yīng)用于任何元素（甚至是 div），只要它指定用戶名即可。<\/p>\n
        \ntwitter(\"#main\").hovercards({ username: function(){ return 'therrorcom'; }});\n<\/pre>\n
        \n
        \n3.<\/span> followButton：一鍵邀請關(guān)注<\/h2>\n
        \nfollowButton()<\/code> 將在先前指定的元素中的用戶名參數(shù)后面附加一個按鈕。 <\/p>\n
        以下代碼將在 #main<\/code> div 中附加一個按鈕以關(guān)注 Nettuts+。<\/p>\n
        \ntwttr.anywhere(function(twitter) {\n    twitter(\"#main\").followButton(\"nettuts\");\n});\n<\/pre>\n\"使用\n
        \nfollowButton()<\/code> 需要一個參數(shù)：要跟隨的用戶名。夠簡單吧？<\/p>\n
        \n
        \n4.<\/span> tweetBox：來自您網(wǎng)站的推文<\/h2>\n
        \ntweetBox()<\/code> 將附加一個框，用戶可以在其中輸入評論并通過您的網(wǎng)站發(fā)布推文。<\/p>
        tweetBox<\/code> 可以接收一個對象作為參數(shù)，具有以下屬性：<\/p> >\n