我有一個包含大量技術內容的PHP網站。我爲網站上使用的一些比較晦澀的術語創建了詞彙表。我希望每當用戶將鼠標懸停在這些術語中的任何一個上時,都會顯示工具提示(或提示氣泡,無論它們被稱爲什麼)。自定義詞彙表的自動網站工具提示?
我發現了大量的jQuery擴展,它們似乎按照我想要的方式工作,但他們需要通過將span
標記設置爲特定的類來手動鏈接到每個術語實例。
我希望這個自動完成。我應該如何繼續?
我有一個包含大量技術內容的PHP網站。我爲網站上使用的一些比較晦澀的術語創建了詞彙表。我希望每當用戶將鼠標懸停在這些術語中的任何一個上時,都會顯示工具提示(或提示氣泡,無論它們被稱爲什麼)。自定義詞彙表的自動網站工具提示?
我發現了大量的jQuery擴展,它們似乎按照我想要的方式工作,但他們需要通過將span
標記設置爲特定的類來手動鏈接到每個術語實例。
我希望這個自動完成。我應該如何繼續?
我建議做這個服務器端。當頁面上有很多元素時,jQuery插件會減慢頁面的速度。 你可能會得到這樣的:
$content = "<p>Lorem ajax ipsum</p>";
$terms = array(
'ajax' => 'Asynchronous JavaScript and XML',
);
foreach ($terms as $term => $explained) {
$content = str_replace($term, '<acronym title="' . htmlspecialchars($explained) . '">' . $term . '</acronym>', $content);
}
我建過sroes'的答案,但需要解決兩個問題:
這個例子可能會改進一個正則表達式或其他方式來刪除嵌套的foreach循環,建議歡迎 - 但請記住在stritr中的序列替換。
function add_glossary_tooltips($text) {
global $glossary;
if(empty($glossary))
return $text;
// Create array of replacements, using only individual
// words surrounded by spaces or other punctuation
$endings = array(
'.',
' ',
',',
'!',
'-',
'?',
'&',
);
$beginnings = array(
'-',
' ',
);
$replacements = array();
foreach ($glossary as $entry) {
$clean_defintion = htmlentities(strip_tags($entry['definition']), ENT_QUOTES);
$replacement = "<abbr
class='tooltip'
title='".$clean_defintion."'
>"
.$entry['glossary_word']
."</abbr>";
foreach ($endings as $ending) {
foreach ($beginnings as $beginning) {
$replacements[$beginning.$entry['glossary_word'].$ending] = $beginning.$replacement.$ending;
}
}
}
$text = stritr($text, $replacements);
return $text;
}
這受自定義不區分大小寫的strstr支持。 (不是我的工作)
function stritr($string, $one = NULL, $two = NULL){
/*
stritr - case insensitive version of strtr
Author: Alexander Peev
Posted in PHP.NET
*/
if( is_string($one) ){
$two = strval($two);
$one = substr( $one, 0, min(strlen($one), strlen($two)) );
$two = substr( $two, 0, min(strlen($one), strlen($two)) );
$product = strtr( $string, (strtoupper($one) . strtolower($one)), ($two . $two) );
return $product;
}
else if( is_array($one) ){
$pos1 = 0;
$product = $string;
while( count($one) > 0 ){
$positions = array();
foreach( $one as $from => $to ){
if( ( $pos2 = stripos($product, $from, $pos1) ) === FALSE ){
unset( $one[ $from ] );
}
else{
$positions[ $from ] = $pos2;
}
}
if( count($one) <= 0 )break;
$winner = min($positions);
$key = array_search( $winner, $positions );
$product = ( substr( $product, 0, $winner ) . $one[$key] . substr( $product, ($winner + strlen($key)) ) );
$pos1 = ( $winner + strlen($one[$key]) );
}
return $product;
}
else{
return $string;
}
}/* endfunction stritr */
+1爲服務器端解決方案。但你仍然需要添加一些樣式,或者甚至是一個簡單的JS函數來顯示懸停時的工具提示。 – Leron
實際上,瀏覽器自動使用'title'屬性來顯示懸停時的工具提示。 – sroes