萬盛學電腦網

浏覽器 windows 10 wps office 殺毒軟件 數據庫 excel教程 文件管理 word教程 網頁制作 裝機必備軟件 linux教程

萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 簡易Tag Cloud

簡易Tag Cloud

標簽雲是一個非常棒的顯示方式，它能幫助你顯示您的博客訪問者所感興趣的主題。除了從這些鏈接能夠看出你的站點覆蓋了哪些方面，還能夠幫助讀者輕易找到站點中熱門的話題。另一個有關標簽雲巨大作用的是，它們可以用來描述任何和頻率相關的東西，您可以鏈接到文章、博客帖子、圖片、視頻或其他內容只要您的網站內容足夠豐富。

在沒有jQuery之前，標簽雲做起來並不是很容易。得感謝jQuery為我們帶來了這麼方便的書寫javascript的方式。下面的簡易教程將使用jQuery 1.4.2版本，服務端采用php+mysql，用ajax從服務端獲取包含標簽信息（標簽名，頻率）的json串。

源代碼下載：tag cloud

Gettting Started

首先創建一個簡單的HTML頁面，這個頁面很簡單，僅僅包含一個異步請求，從服務端獲取包含標簽信息的json串

以下為引用的內容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <link rel="stylesheet" type="text/css" href="tagcloud.css">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>jQuery Tag Cloud</title>

  </head>

  <body>

    <div id="tagCloud">

      <h2>Tag Cloud</h2>

    </div>

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript">

    $(function() {

       //get tag feed

    $.getJSON("http://localhost:9000/jquery/tagcloud.php?callback=?", function(data) {

      //process JSON object

});

});

    </script>

  </body>

</html>

getJSON

上面的HTML頁面發起了一個異步請求，並通過回調函數來處理獲取的異步數據（當然這裡還未做任何處理）。下面創建一個php頁面，用於查詢數據庫，並返回一個包含標簽信息的json串，這個json串就是$.getJSON的回調函數（$.getJSON第二個參數）的參數值。

創建一個數據庫tagcloud，並添加一個tags表，插入幾條數據，以tags表作為數據源。

以下為引用的內容：

CREATE DATABASE tagcloud

GO

USE tagcloud

GO

CREATE TABLE tags

tag varchar(100),

frequency int

INSERT INTO tags(tag,frequency)

SELECT 'jQuery',200  UNION

SELECT 'javascript',190  UNION

SELECT 'css',180 UNION

SELECT 'yui',170 UNION

SELECT 'html',150 UNION

SELECT 'design',120 UNION

SELECT 'php',110 UNION

SELECT 'mysql',100 UNION

SELECT 'ajax',90 UNION

SELECT 'json',90 UNION

SELECT 'security',70 UNION

SELECT 'browsers',60 UNION

SELECT 'tutorial',60 UNION

SELECT 'semantics',50 UNION

SELECT 'widgets',40 UNION

SELECT 'oop',30 UNION

SELECT 'wordpress',20 UNION

SELECT 'debugging',20 UNION

SELECT 'seo',10

以下為引用的內容：

<?php

    //connection information

    $host = "localhost";

    $user = "root";

    $password = "root";

    $database = "tagcloud";

    //make connection

    $server = mysql_connect($host,$user,$password);

    $connection = mysql_select_db($database, $server);

    //query the database

    $query = mysql_query("SELECT * FROM tags");

    //start json object

    $json = "({ tags:[";

    //loop through and return results

    for($x=0; $x < mysql_num_rows($query); $x++){

        $row = mysql_fetch_assoc($query);

        //continue json object

        $json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";

        //add comma if not last row, closing brackets if is

        if($x < mysql_num_rows($query) - 1)

            $json .= ",";

        else

            $json .= "]})";

    //return JSON with GET for JSONP callback

$response =

源代碼下載：tag cloud

Gettting Started

首先創建一個簡單的HTML頁面，這個頁面很簡單，僅僅包含一個異步請求，從服務端獲取包含標簽信息的json串

以下為引用的內容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <link rel="stylesheet" type="text/css" href="tagcloud.css">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title&

萬盛學電腦網

萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 簡易Tag Cloud

簡易Tag Cloud

交互設計排行

程序編程推薦

熱門文章

相關文章

圖片文章

蘋果mac os怎麼用命令行終端打開app應用程序

Dreamweaver代碼視圖

16個版式設計出色搶眼的優秀網站

CSS相框效果示例代碼

萬盛學電腦網 | 設為首頁 | 加入收藏