jqueryのテーマとテーマSwitcher_jqueryの使い方まとめ

まず第一に、最後のスクリーンショット、効果は良好です:

1. jquery テーマの導入
head 内の jquery テーマの CSS リンクを参照http://ajax.googleapis.com/ajax/libs / jqueryui/1.7/messages/base/jquery-ui.css他にもさまざまなテーマがあります:base、black-tie、blitzer、cupertino、dark-hive、dot-luv、eggplant、excite-bike、flick、ホットスニークス、人類、ルフロッグ、ミントチョコ、曇り、ペッパーグラインダー、レドモンド、スムーズネス、サウスストリート、スタート、晴れ、おしゃれな財布、トロンタスティック、UI-暗闇、UI-明るさ、ベイダー。別のテーマに切り替えるには、上のリンクの Base をテーマ名に置き換えるだけです。

2. jquery テーマのテーマを使用します
次のようなクラスを追加します。 Nothing's Gonna Change my love for you はデフォルトの UI を意味し、corner-all は丸い四隅を意味します。

3. ホバー効果を増加します

ここでは jquery スクリプトを使用する必要があります。まず、head に jquery ライブラリを導入します

をクリックすると、ページ上の任意の場所にレイヤーを追加できます

テーマ切り替え機能を読み込み中...

, この切り替えウィキゲットには慣れています apDiv レイヤーを使用すると、適切な位置に簡単に移動できます。最後に、このレイヤーをアクティブにするスクリプトを手書きします:
$('#switcher').themeswitcher();

5. Web ページに独自のテーマを記憶させる テーマを変更するたびに、Web ページに独自のテーマを記憶させるために、jquery は Cookie を書き込みます。この Cookie を抽出してページの CSS を更新するだけです。 スクリプトを作成します

コードをコピーします コードは次のとおりです:

$( function() {if(theme==null) updateCSS("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/主題/base/jquery-ui.css");else updateCSS(" http:// /ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/" テーマ "/jquery-ui.css");})

function updateCSS(locStr){var cssLink=$( '< link href="' locStr '"type="text/css" rel="Stylesheet" class="ui-theme"/>');$("head").append(cssLink);if( $(" link.ui-theme").size()>3){$("link.ui-theme:first").remove();}}


最後のページコードはおそらく次のようになります。 Sub:

コードをコピー コードは次のとおりです:


<%@ 페이지 언어="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>


<머리>






<제목>

<본문>

主题切换功能载入中...

당신에 대한 나의 사랑은 아무것도 변하지 않을 것입니다