437 lines
19 KiB
Plaintext
437 lines
19 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="themes.aspx.cs" Inherits="FineUIPro.Web.common.themes" %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head runat="server">
|
|||
|
|
<title></title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
background: none !important;
|
|||
|
|
background-color: #000 !important;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
}
|
|||
|
|
/* 选择主题 */
|
|||
|
|
#themecontainer ul {
|
|||
|
|
list-style-type: none;
|
|||
|
|
margin: 10px 0 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#themecontainer ul li {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin: 0 10px 10px;
|
|||
|
|
border: solid 2px #000;
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#themecontainer ul li .title {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 13px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#themecontainer ul li.hover,
|
|||
|
|
#themecontainer ul li.active {
|
|||
|
|
border-bottom-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#themecontainer ul li.hover .title,
|
|||
|
|
#themecontainer ul li.active .title {
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#themecontainer ul li img {
|
|||
|
|
width: 125px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#themecontainer .grouptitle {
|
|||
|
|
color: #ccc;
|
|||
|
|
font-size: 16px;
|
|||
|
|
border-bottom: solid 1px #333;
|
|||
|
|
padding: 5px;
|
|||
|
|
margin: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#themecontainer .note {
|
|||
|
|
color: #ccc;
|
|||
|
|
font-size: 11px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#themecontainer .note a {
|
|||
|
|
color: #ccc;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<form id="form1" runat="server">
|
|||
|
|
<f:PageManager ID="PageManager1" runat="server"></f:PageManager>
|
|||
|
|
<div id="themecontainer">
|
|||
|
|
<div class="grouptitle">
|
|||
|
|
内置（纯色背景）
|
|||
|
|
</div>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/pure_black.png" alt="Pure Black" data-value="Pure_Black" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Pure Black</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/pure_green.png" alt="Pure Green" data-value="Pure_Green" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Pure Green</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/pure_blue.png" alt="Pure Blue" data-value="Pure_Blue" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Pure Blue</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/pure_purple.png" alt="Pure Purple" data-value="Pure_Purple" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Pure Purple</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/pure_orange.png" alt="Pure Orange" data-value="Pure_Orange" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Pure Orange</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/pure_red.png" alt="Pure Red" data-value="Pure_Red" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Pure Red</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="grouptitle">
|
|||
|
|
内置（Metro）
|
|||
|
|
</div>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/default.png" alt="Default" data-value="Default" /></a>
|
|||
|
|
<div class="title">Default</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/metro_blue.png" alt="Metro Blue" data-value="Metro_Blue" /></a>
|
|||
|
|
<div class="title">Metro Blue</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/metro_dark_blue.png" alt="Metro Dark Blue" data-value="Metro_Dark_Blue" /></a>
|
|||
|
|
<div class="title">Metro Dark Blue</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/metro_gray.png" alt="Metro Gray" data-value="Metro_Gray" /></a>
|
|||
|
|
<div class="title">Metro Gray</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/metro_green.png" alt="Metro Green" data-value="Metro_Green" /></a>
|
|||
|
|
<div class="title">Metro Green</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/metro_orange.png" alt="Metro Orange" data-value="Metro_Orange" /></a>
|
|||
|
|
<div class="title">Metro Orange</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="grouptitle">
|
|||
|
|
内置（jQuery UI）
|
|||
|
|
</div>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/black_tie.png" alt="Black Tie" data-value="Black_Tie" /></a>
|
|||
|
|
<div class="title">Black Tie</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/blitzer.png" alt="Blitzer" data-value="Blitzer" /></a>
|
|||
|
|
<div class="title">Blitzer</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/cupertino.png" alt="Cupertino" data-value="Cupertino" /></a>
|
|||
|
|
<div class="title">Cupertino</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/dark_hive.png" alt="Dark Hive" data-value="Dark_Hive" /></a>
|
|||
|
|
<div class="title">Dark Hive</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/dot_luv.png" alt="Dot Luv" data-value="Dot_Luv" /></a>
|
|||
|
|
<div class="title">Dot Luv</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/eggplant.png" alt="Eggplant" data-value="Eggplant" /></a>
|
|||
|
|
<div class="title">Eggplant</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/excite_bike.png" alt="Excite Bike" data-value="Excite_Bike" /></a>
|
|||
|
|
<div class="title">Excite Bike</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/flick.png" alt="Flick" data-value="Flick" /></a>
|
|||
|
|
<div class="title">Flick</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/hot_sneaks.png" alt="Hot Sneaks" data-value="Hot_Sneaks" /></a>
|
|||
|
|
<div class="title">Hot Sneaks</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/humanity.png" alt="Humanity" data-value="Humanity" /></a>
|
|||
|
|
<div class="title">Humanity</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/le_frog.png" alt="Le Frog" data-value="Le_Frog" /></a>
|
|||
|
|
<div class="title">Le Frog</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/mint_choc.png" alt="Mint Choc" data-value="Mint_Choc" /></a>
|
|||
|
|
<div class="title">Mint Choc</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/overcast.png" alt="Overcast" data-value="Overcast" /></a>
|
|||
|
|
<div class="title">Overcast</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/pepper_grinder.png" alt="Pepper Grinder" data-value="Pepper_Grinder" /></a>
|
|||
|
|
<div class="title">Pepper Grinder</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/redmond.png" alt="Redmond" data-value="Redmond" /></a>
|
|||
|
|
<div class="title">Redmond</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/smoothness.png" alt="Smoothness" data-value="Smoothness" /></a>
|
|||
|
|
<div class="title">Smoothness</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/south_street.png" alt="South Street" data-value="South_Street" /></a>
|
|||
|
|
<div class="title">South Street</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/start.png" alt="Start" data-value="Start" /></a>
|
|||
|
|
<div class="title">Start</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/sunny.png" alt="Sunny" data-value="Sunny" /></a>
|
|||
|
|
<div class="title">Sunny</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/swanky_purse.png" alt="Swanky Purse" data-value="Swanky_Purse" /></a>
|
|||
|
|
<div class="title">Swanky Purse</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/trontastic.png" alt="Trontastic" data-value="Trontastic" /></a>
|
|||
|
|
<div class="title">Trontastic</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/ui_darkness.png" alt="UI Darkness" data-value="UI_Darkness" /></a>
|
|||
|
|
<div class="title">UI Darkness</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/ui_lightness.png" alt="UI Lightness" data-value="UI_Lightness" /></a>
|
|||
|
|
<div class="title">UI Lightness</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/vader.png" alt="Vader" data-value="Vader" /></a>
|
|||
|
|
<div class="title">Vader</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="grouptitle">
|
|||
|
|
自定义
|
|||
|
|
</div>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/customtheme.png" alt="Custom Default" data-value="custom_default" /></a>
|
|||
|
|
<div class="title">Custom Default</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/customtheme.png" alt="Bootstrap Pure" data-value="bootstrap_pure" /></a>
|
|||
|
|
<div class="title">Bootstrap Pure</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/customtheme.png" alt="Custom Light Green" data-value="custom_light_green" /></a>
|
|||
|
|
<div class="title">Custom Light Green</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<div class="grouptitle">
|
|||
|
|
自定义（图片背景）
|
|||
|
|
<span class="note">注：本分组的背景图片来自网络，版权归原作者！
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_black_sky1.png" alt="Image Black Sky" data-value="image_black_sky" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Black Sky</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_green_rain.png" alt="Image Green Rain" data-value="image_green_rain" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Green Rain</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_green_drip.png" alt="Image Green Drip" data-value="image_green_drip" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Green Drip</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_green_poppy.png" alt="Image Green Poppy" data-value="image_green_poppy" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Green Poppy</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_green_lotus.png" alt="Image Green Lotus" data-value="image_green_lotus" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Green Lotus</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_blue_sky1.png" alt="Image Blue Sky" data-value="image_blue_sky" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Blue Sky</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_blue_star.png" alt="Image Blue Star" data-value="image_blue_star" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Blue Star</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_blue_moon.png" alt="Image Blue Moon" data-value="image_blue_moon" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Blue Moon</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_blue_drip.png" alt="Image Blue Drip" data-value="image_blue_drip" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Blue Drip</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_purple_fog.png" alt="Image Purple Fog" data-value="image_purple_fog" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Purple Fog</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_orange_light.png" alt="Image Orange Light" data-value="image_orange_light" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Orange Light</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:;">
|
|||
|
|
<img src="../res/images/themes/small/image_red_dawn.png" alt="Image Red Dawn" data-value="image_red_dawn" />
|
|||
|
|
</a>
|
|||
|
|
<div class="title">Image Red Dawn</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: none;">
|
|||
|
|
<!-- 缓存背景图片 -->
|
|||
|
|
<img src="../res/themes/image_black_sky/sky1.jpg" />
|
|||
|
|
<img src="../res/themes/image_blue_drip/drip.jpg" />
|
|||
|
|
<img src="../res/themes/image_blue_moon/moon.jpg" />
|
|||
|
|
<img src="../res/themes/image_blue_sky/sky1.jpg" />
|
|||
|
|
<img src="../res/themes/image_blue_star/star.jpg" />
|
|||
|
|
<img src="../res/themes/image_green_drip/drip.jpg" />
|
|||
|
|
<img src="../res/themes/image_green_lotus/lotus.jpg" />
|
|||
|
|
<img src="../res/themes/image_green_poppy/poppy.jpg" />
|
|||
|
|
<img src="../res/themes/image_green_rain/rain.jpg" />
|
|||
|
|
<img src="../res/themes/image_orange_light/light.jpg" />
|
|||
|
|
<img src="../res/themes/image_purple_fog/fog.jpg" />
|
|||
|
|
<img src="../res/themes/image_red_dawn/dawn.jpg" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</form>
|
|||
|
|
<script>
|
|||
|
|
F.ready(function () {
|
|||
|
|
// 选择主题窗口
|
|||
|
|
$('#themecontainer li').hover(function () {
|
|||
|
|
$(this).addClass('hover');
|
|||
|
|
}, function () {
|
|||
|
|
$(this).removeClass('hover');
|
|||
|
|
}).click(function () {
|
|||
|
|
//var imgSrcRegex = /([^\.\/]+)\.png$/.exec(imgSrc);
|
|||
|
|
var imgNode = $(this).find('img');
|
|||
|
|
|
|||
|
|
var themeName = imgNode.attr('data-value');
|
|||
|
|
F.cookie('Theme', themeName, {
|
|||
|
|
expires: 100 // 单位：天
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var themeTitle = imgNode.attr('alt');
|
|||
|
|
F.cookie('Theme_Title', themeTitle, {
|
|||
|
|
expires: 100 // 单位：天
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
top.window.location.reload();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 初始化
|
|||
|
|
var themeName = F.cookie('Theme');
|
|||
|
|
if (!themeName) {
|
|||
|
|
themeName = 'Cupertino';
|
|||
|
|
}
|
|||
|
|
themeName = themeName.toLowerCase();
|
|||
|
|
$('#themecontainer li').each(function () {
|
|||
|
|
var cnode = $(this);
|
|||
|
|
if (cnode.find('img').attr('data-value').toLowerCase() === themeName) {
|
|||
|
|
cnode.addClass('active');
|
|||
|
|
} else {
|
|||
|
|
cnode.removeClass('active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|