Commit e4ee0e23 authored by 神楽坂玲奈's avatar 神楽坂玲奈

deck builder

parent e1380fc3
locale = 'zh' locale = 'zh'
class Card extends Spine.Model class Card extends Spine.Model
@types = ['Warrior','Spellcaster','Fairy','Fiend','Zombie','Machine','Aqua','Pyro','Rock','Winged_Beast','Plant','Insect','Thunder','Dragon','Beast','Beast-Warrior','Dinosaur','Fish','Sea_Serpent','Reptile','Psychic','Divine-Beast','Creator_God'] @types = ['Warrior', 'Spellcaster', 'Fairy', 'Fiend', 'Zombie', 'Machine', 'Aqua', 'Pyro', 'Rock', 'Winged_Beast', 'Plant', 'Insect', 'Thunder', 'Dragon', 'Beast', 'Beast-Warrior', 'Dinosaur', 'Fish', 'Sea_Serpent', 'Reptile', 'Psychic', 'Divine-Beast', 'Creator_God']
@_attributes = ['EARTH','WATER','FIRE','WIND','LIGHT','DARK','DIVINE'] @_attributes = ['EARTH', 'WATER', 'FIRE', 'WIND', 'LIGHT', 'DARK', 'DIVINE']
@card_types = ['Monster', 'Spell','Trap',null,'Normal','Effect','Fusion','Ritual',null, 'Spirit','Union','Gemini','Tuner','Synchro',null,null,'Quick-Play','Continuous','Equip','Field','Counter','Flip','Toon','Xyz'] @card_types = ['Monster', 'Spell', 'Trap', null, 'Normal', 'Effect', 'Fusion', 'Ritual', null, 'Spirit', 'Union', 'Gemini', 'Tuner', 'Synchro', null, null, 'Quick-Play', 'Continuous', 'Equip', 'Field', 'Counter', 'Flip', 'Toon', 'Xyz']
@categories = ['Monster', 'Spell','Trap'] @categories = ['Monster', 'Spell', 'Trap']
@card_types_extra = ['Fusion','Synchro','Xyz'] @card_types_extra = ['Fusion', 'Synchro', 'Xyz']
@configure 'Card', 'id', 'name', 'card_type', 'type','attribute','level','atk','def','description' @configure 'Card', 'id', 'name', 'card_type', 'type', 'attribute', 'level', 'atk', 'def', 'description'
@extend Spine.Model.Ajax @extend Spine.Model.Ajax
@extend Spine.Events @extend Spine.Events
@hasMany 'card_usages', CardUsage
@url: "https://api.mongolab.com/api/1/databases/mycard/collections/cards?apiKey=508e5726e4b0c54ca4492ead" @url: "https://api.mongolab.com/api/1/databases/mycard/collections/cards?apiKey=508e5726e4b0c54ca4492ead"
@locale_url: "https://api.mongolab.com/api/1/databases/mycard/collections/lang_#{locale}?apiKey=508e5726e4b0c54ca4492ead" @locale_url: "https://api.mongolab.com/api/1/databases/mycard/collections/lang_#{locale}?apiKey=508e5726e4b0c54ca4492ead"
@query: (q, callback)-> @query: (q, callback)->
$.getJSON "#{@url}&q=#{JSON.stringify(q)}", (cards) => $.getJSON "#{@url}&q=#{JSON.stringify(q)}", (cards) =>
cards_id = (card._id for card in cards) cards_id = (card._id for card in cards)
$.getJSON "#{@locale_url}&q=#{JSON.stringify({_id: { $in: cards_id}})}", (langs) => $.getJSON "#{@locale_url}&q=#{JSON.stringify({_id:{ $in: cards_id}})}", (langs) =>
cards = (for lang in langs cards = (for lang in langs
for card in cards for card in cards
if card._id == lang._id if card._id == lang._id
...@@ -29,10 +30,11 @@ class Card extends Spine.Model ...@@ -29,10 +30,11 @@ class Card extends Spine.Model
i++ i++
{ {
id: card._id, id: card._id
name: lang.name, alias: card.alias
card_type: card_type, name: lang.name
type: (i=0; (i++ until lang.race >> i & 1); @types[i]) if lang.race card_type: card_type
type: (i = 0; (i++ until lang.race >> i & 1); @types[i]) if lang.race
attribute: (i = 0; (i++ until lang.attribute >> i & 1); @_attributes[i]) if lang.attribute attribute: (i = 0; (i++ until lang.attribute >> i & 1); @_attributes[i]) if lang.attribute
level: card.level level: card.level
atk: card.atk atk: card.atk
...@@ -44,11 +46,15 @@ class Card extends Spine.Model ...@@ -44,11 +46,15 @@ class Card extends Spine.Model
callback(cards) callback(cards)
class CardUsage extends Spine.Model class CardUsage extends Spine.Model
@configure "CardUsage", "card_id", "count", "side" @configure 'CardUsage', 'card_id', 'count', 'side'
@belongsTo 'card', Card @belongsTo 'card', Card
class Deck extends Spine.Controller class Deck extends Spine.Controller
events: "mouseenter .card": "show" events:
'mouseenter .card': 'show',
'click .card': 'add',
'contextmenu .card': 'minus'
key: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*-=" key: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*-="
constructor: -> constructor: ->
super super
...@@ -75,19 +81,43 @@ class Deck extends Spine.Controller ...@@ -75,19 +81,43 @@ class Deck extends Spine.Controller
main.push card_usage main.push card_usage
main_count += card_usage.count main_count += card_usage.count
category_count[(category for category in card.card_type when category in Card.categories).pop()] += card_usage.count category_count[(category for category in card.card_type when category in Card.categories).pop()] += card_usage.count
@html $("#deck_template").tmpl({main: main, side: side, extra: extra, main_count: main_count, side_count: side_count, extra_count: extra_count, category_count: category_count}) @html $('#deck_template').tmpl({main: main, side: side, extra: extra, main_count: main_count, side_count: side_count, extra_count: extra_count, category_count: category_count})
@el.jscroll({W: "12px", Btn:
{btn: false}});
tab_control: ->
$(".bottom_area div").click -> $(".bottom_area div").click ->
$(this).addClass("bottom_button_active").removeClass("bottom_button"); $(this).addClass("bottom_button_active").removeClass("bottom_button")
$(this).siblings().addClass("bottom_button").removeClass("bottom_button_active"); $(this).siblings().addClass("bottom_button").removeClass("bottom_button_active")
$dangqian = $(".card_frame .frame_element").eq($(".bottom_area div").index(this)); $dangqian = $(".card_frame .frame_element").eq($(".bottom_area div").index(this));
$dangqian.addClass("card_frame_focus"); $dangqian.addClass("card_frame_focus");
$dangqian.siblings().removeClass("card_frame_focus"); $dangqian.siblings().removeClass("card_frame_focus");
}); $('.card_frame .frame_element').jscroll({W: "12px", Btn:
{btn: false}});
show: (e) -> show: (e) ->
card = $(e.target).tmplItem().data.card() card = $(e.target).tmplItem().data.card()
$('#card').removeClass(Card.card_types.join(' ')) $('#card').removeClass(Card.card_types.join(' '))
active_page_index = $('.bottom_area div').index $(".bottom_button_active")
$('#card').html $("#card_template").tmpl(card) $('#card').html $("#card_template").tmpl(card)
$('#card').addClass(card.card_type.join(' ')) $('#card').addClass(card.card_type.join(' '))
$('.card_frame .frame_element').eq(active_page_index).addClass('card_frame_focus')
$('.bottom_area div').eq(active_page_index).addClass('bottom_button_active').removeClass("bottom_button")
@tab_control()
add: (e)->
card_usage = $(e.target).tmplItem().data
count = 0
for c in CardUsage.findAllByAttribute('card_id', card_usage.card_id) #TODO: alias
count += c.count
if count < 3 #TODO: lflist
card_usage.count++
card_usage.save()
minus: (e)->
card_usage = $(e.target).tmplItem().data
card_usage.count--
if card_usage.count
card_usage.save()
else
card_usage.destroy()
return false #TODO: prevent showing menu
parse: (str)-> parse: (str)->
card_usages = (for i in [0...str.length] by 5 card_usages = (for i in [0...str.length] by 5
decoded = 0 decoded = 0
...@@ -98,14 +128,15 @@ class Deck extends Spine.Controller ...@@ -98,14 +128,15 @@ class Deck extends Spine.Controller
count = decoded >> 27 & 0x3 count = decoded >> 27 & 0x3
{card_id: card_id, side: side, count: count} {card_id: card_id, side: side, count: count}
) )
Card.query {_id: { $in: card_usage.card_id for card_usage in card_usages}}, => Card.query {_id:
CardUsage.refresh card_usages { $in: card_usage.card_id for card_usage in card_usages}}, =>
CardUsage.refresh card_usages
$(document).ready -> $(document).ready ->
name = $.url().param('name') name = $.url().param('name')
cards_encoded = $.url().param('cards') cards_encoded = $.url().param('cards')
$('img#qrcode').attr('src', 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chld=|0&chl=' + encodeURIComponent("http://my-card.in/decks/?name=#{name}&cards=#{cards_encoded}")) $('img#qrcode').attr('src', 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chld=|0&chl=' + encodeURIComponent("http://my-card.in/decks/?name=#{name}&cards=#{cards_encoded}"))
$('#name').html(name) $('#name').html(name)
deck = new Deck(el: $("#deck")) deck = new Deck(el: $("#deck"))
deck.tab_control()
deck.parse cards_encoded deck.parse cards_encoded
\ No newline at end of file
...@@ -32,6 +32,8 @@ ...@@ -32,6 +32,8 @@
Card.extend(Spine.Events); Card.extend(Spine.Events);
Card.hasMany('card_usages', CardUsage);
Card.url = "https://api.mongolab.com/api/1/databases/mycard/collections/cards?apiKey=508e5726e4b0c54ca4492ead"; Card.url = "https://api.mongolab.com/api/1/databases/mycard/collections/cards?apiKey=508e5726e4b0c54ca4492ead";
Card.locale_url = "https://api.mongolab.com/api/1/databases/mycard/collections/lang_" + locale + "?apiKey=508e5726e4b0c54ca4492ead"; Card.locale_url = "https://api.mongolab.com/api/1/databases/mycard/collections/lang_" + locale + "?apiKey=508e5726e4b0c54ca4492ead";
...@@ -78,6 +80,7 @@ ...@@ -78,6 +80,7 @@
} }
_results.push({ _results.push({
id: card._id, id: card._id,
alias: card.alias,
name: lang.name, name: lang.name,
card_type: card_type, card_type: card_type,
type: lang.race ? (i = 0, (function() { type: lang.race ? (i = 0, (function() {
...@@ -122,7 +125,7 @@ ...@@ -122,7 +125,7 @@
return CardUsage.__super__.constructor.apply(this, arguments); return CardUsage.__super__.constructor.apply(this, arguments);
} }
CardUsage.configure("CardUsage", "card_id", "count", "side"); CardUsage.configure('CardUsage', 'card_id', 'count', 'side');
CardUsage.belongsTo('card', Card); CardUsage.belongsTo('card', Card);
...@@ -135,7 +138,9 @@ ...@@ -135,7 +138,9 @@
__extends(Deck, _super); __extends(Deck, _super);
Deck.prototype.events = { Deck.prototype.events = {
"mouseenter .card": "show" 'mouseenter .card': 'show',
'click .card': 'add',
'contextmenu .card': 'minus'
}; };
Deck.prototype.key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*-="; Deck.prototype.key = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789*-=";
...@@ -197,7 +202,7 @@ ...@@ -197,7 +202,7 @@
})()).pop()] += card_usage.count; })()).pop()] += card_usage.count;
} }
}); });
return this.html($("#deck_template").tmpl({ this.html($('#deck_template').tmpl({
main: main, main: main,
side: side, side: side,
extra: extra, extra: extra,
...@@ -206,14 +211,68 @@ ...@@ -206,14 +211,68 @@
extra_count: extra_count, extra_count: extra_count,
category_count: category_count category_count: category_count
})); }));
return this.el.jscroll({
W: "12px",
Btn: {
btn: false
}
});
};
Deck.prototype.tab_control = function() {
$(".bottom_area div").click(function() {
var $dangqian;
$(this).addClass("bottom_button_active").removeClass("bottom_button");
$(this).siblings().addClass("bottom_button").removeClass("bottom_button_active");
$dangqian = $(".card_frame .frame_element").eq($(".bottom_area div").index(this));
$dangqian.addClass("card_frame_focus");
return $dangqian.siblings().removeClass("card_frame_focus");
});
return $('.card_frame .frame_element').jscroll({
W: "12px",
Btn: {
btn: false
}
});
}; };
Deck.prototype.show = function(e) { Deck.prototype.show = function(e) {
var card; var active_page_index, card;
card = $(e.target).tmplItem().data.card(); card = $(e.target).tmplItem().data.card();
$('#card').removeClass(Card.card_types.join(' ')); $('#card').removeClass(Card.card_types.join(' '));
active_page_index = $('.bottom_area div').index($(".bottom_button_active"));
$('#card').html($("#card_template").tmpl(card)); $('#card').html($("#card_template").tmpl(card));
return $('#card').addClass(card.card_type.join(' ')); $('#card').addClass(card.card_type.join(' '));
$('.card_frame .frame_element').eq(active_page_index).addClass('card_frame_focus');
$('.bottom_area div').eq(active_page_index).addClass('bottom_button_active').removeClass("bottom_button");
return this.tab_control();
};
Deck.prototype.add = function(e) {
var c, card_usage, count, _i, _len, _ref;
card_usage = $(e.target).tmplItem().data;
count = 0;
_ref = CardUsage.findAllByAttribute('card_id', card_usage.card_id);
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
c = _ref[_i];
count += c.count;
}
if (count < 3) {
card_usage.count++;
return card_usage.save();
}
};
Deck.prototype.minus = function(e) {
var card_usage;
card_usage = $(e.target).tmplItem().data;
card_usage.count--;
if (card_usage.count) {
card_usage.save();
} else {
card_usage.destroy();
}
return false;
}; };
Deck.prototype.parse = function(str) { Deck.prototype.parse = function(str) {
...@@ -270,6 +329,7 @@ ...@@ -270,6 +329,7 @@
deck = new Deck({ deck = new Deck({
el: $("#deck") el: $("#deck")
}); });
deck.tab_control();
return deck.parse(cards_encoded); return deck.parse(cards_encoded);
}); });
......
...@@ -20,13 +20,6 @@ $(function() { ...@@ -20,13 +20,6 @@ $(function() {
// $(this).next().show(); // $(this).next().show();
// }); // });
$(".bottom_area div").click(function() {
$(this).addClass("bottom_button_active").removeClass("bottom_button");
$(this).siblings().addClass("bottom_button").removeClass("bottom_button_active");
var $dangqian = $(".card_frame .frame_element").eq($(".bottom_area div").index(this));
$dangqian.addClass("card_frame_focus");
$dangqian.siblings().removeClass("card_frame_focus");
});
}); });
......
...@@ -13,19 +13,19 @@ body{margin:0;padding:0;background:#eee;} ...@@ -13,19 +13,19 @@ body{margin:0;padding:0;background:#eee;}
.card_name{width:300px;height:auto;padding:8px 0;margin:0;font-weight:bold;color:#999999;text-shadow:1px 1px 2px #cccccc;font-size:24px;text-align:center;background:#eeeeee;border:1px solid #cccccc;border-radius:5px 0 0 0;margin:0 0 0 -1px;} .card_name{width:300px;height:auto;padding:8px 0;margin:0;font-weight:bold;color:#999999;text-shadow:1px 1px 2px #cccccc;font-size:24px;text-align:center;background:#eeeeee;border:1px solid #cccccc;border-radius:5px 0 0 0;margin:0 0 0 -1px;}
.attr_name{width:60px;height:14px;padding:0 0 5px 0;margin:0 0 10px 0;color:#FFAD6E;font-size:12px;text-shadow:1px 1px 2px #eeeeee;border-bottom:1px dashed #cccccc;}//text-align:right; .attr_name{width:60px;height:14px;padding:0 0 5px 0;margin:0 0 10px 0;color:#FFAD6E;font-size:12px;text-shadow:1px 1px 2px #eeeeee;border-bottom:1px dashed #cccccc;}//text-align:right;
.attr_real{width:75px;height:14px;padding:0 0 5px 0;margin:0 0 10px 0;color:thead_bg#999999;font-size:12px;text-shadow:1px 1px 2px #eeeeee;border-bottom:1px dashed #cccccc;} .attr_real{width:75px;height:14px;padding:0 0 5px 0;margin:0 0 10px 0;color:thead_bg#999999;font-size:12px;text-shadow:1px 1px 2px #eeeeee;border-bottom:1px dashed #cccccc;}
.more_info{margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none;}
.bottom_button_active{height:auto;width:auto;padding:8px 10px;margin:-1px 0 0 10px; border-left:1px solid #CCCCCC;border-top:1px solid #ffffff;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC; font-size:12px;border-radius:0 0 5px 5px;background:#ffffff;} .bottom_button_active{height:auto;width:auto;padding:8px 10px;margin:-1px 0 0 10px; border-left:1px solid #CCCCCC;border-top:1px solid #ffffff;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC; font-size:12px;border-radius:0 0 5px 5px;background:#ffffff;}
.bottom_button{height:auto;width:auto;padding:8px 10px;margin:-1px 0 0 10px;font-size:12px;border-radius:0 0 5px 5px;cursor:pointer;color:#999999;} .bottom_button{height:auto;width:auto;padding:8px 10px;margin:-1px 0 0 10px;font-size:12px;border-radius:0 0 5px 5px;cursor:pointer;color:#999999;}
.bottom_button:hover{color:#ffffff;background:#CCCCCC;} .bottom_button:hover{color:#ffffff;background:#CCCCCC;}
.bottom_area{height:45px;width:300px;margin:0;padding:0;background:#eeeeee;border-radius:0 0 5px 5px;} .bottom_area{height:45px;width:300px;margin:0;padding:0;background:#eeeeee;border-radius:0 0 5px 5px;}
.statistics{ .card_description{margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none;}
.card_adjustment{margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none;}
.card_statistics{
margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none; margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none;
div{ div{
line-height:24px; line-height:24px;
label{float:left;color:#333333;} label{float:left;color:#333333;}
} }
} }
.adjustment{margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none;}
.card_frame{ .card_frame{
border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;padding:10px;margin:15px 0 0 0;width:280px;height:370px; border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;padding:10px;margin:15px 0 0 0;width:280px;height:370px;
.card_frame_focus{display:block;} .card_frame_focus{display:block;}
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<!--[if IE 8]> <!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]--> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]--> <html class="no-js" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
...@@ -46,15 +46,15 @@ ...@@ -46,15 +46,15 @@
{{/if}} {{/if}}
</div> </div>
<div class="card_frame floatleft"> <div class="card_frame floatleft">
<div id="card_description" class="more_info floatleft frame_element"> <div id="card_description" class="card_description floatleft frame_element">
${description} ${description}
</div> </div>
<div id="card_adjustment" class="adjustment floatleft frame_element"> <div id="card_adjustment" class="card_adjustment floatleft frame_element">
建设中 建设中 <br/>
under construction under construction<br/>
</div> </div>
<div id="card_statistics" class="card_statistics floatleft frame_element"> <div id="card_statistics" class="card_statistics floatleft frame_element">
建设中 建设中<br/>
under construction under construction
</div> </div>
</div> </div>
...@@ -116,17 +116,33 @@ ...@@ -116,17 +116,33 @@
<div class="attr_real floatleft">世界已完蛋</div> <div class="attr_real floatleft">世界已完蛋</div>
</div> </div>
<div class="card_frame floatleft"> <div class="card_frame floatleft">
<div class="more_info floatleft frame_element card_frame_focus"> <div class="card_description floatleft frame_element card_frame_focus">
<div> <div>
这是一个卡组编辑<br/> 这是一个卡组编辑/分享系统<br/>
this is a deck builder this is a deck editing & sharing system<br/>
</div> </div>
</div> </div>
<div class="statistics floatleft frame_element"> <div class="card_adjustment floatleft frame_element">
数据来源: ygopro<br/> <ruby>数据来源
内容许可: CC-BY-SA-NC<br/> <rt>Database</rt>
源码许可: GNU GPL v3<br/> </ruby>
项目主页: github.com/zh99998/mycard : <a href="https://github.com/Fluorohydride/ygopro/">Ygopro</a><br/>
<ruby>许可协议
<rt>License</rt>
</ruby>
: <a href="http://www.gnu.org/licenses/gpl.html">GPLv3 or later</a><br/>
<ruby>项目主页
<rt>Github</rt>
</ruby>
: <a href="https://github.com/zh99998/mycard">github.com/zh99998/mycard</a><br/>
<ruby>开发成员
<rt>Authors</rt>
</ruby>
: <a href="https://plus.google.com/101873829070855379840">zh99998</a>&lt;<a
href="mailto:zh99998@gmail.com">zh99998@gmail.com</a>&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a
href="https://plus.google.com/u/0/102725466404235496819">Mesiade</a>&lt;<a
href="mailto:Mesiade746@hotmail.com">Mesiade746@hotmail.com</a>&gt;
</div> </div>
</div> </div>
<div class="floatleft bottom_area"> <div class="floatleft bottom_area">
...@@ -159,10 +175,8 @@ ...@@ -159,10 +175,8 @@
</div> </div>
</div> </div>
<div id="card_group" class="card_group"> <div id="deck" class="card_group">
<div id="deck"> <p>Loading...</p>
<p>Loading...</p>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -192,9 +206,7 @@ ...@@ -192,9 +206,7 @@
}); });
$(document).ready(function () { $(document).ready(function () {
$("#more_info").jscroll({W:"12px", Btn:{btn:false}});
$("#adjustment").jscroll({W:"12px", Btn:{btn:false}}).removeClass("card_frame_focus");
$("#card_group").jscroll({W:"12px", Btn:{btn:false}});
/*$(".main_area").hScrollPane({ /*$(".main_area").hScrollPane({
......
.line{-moz-box-shadow:0px 1px 4px #cccccc; -webkit-box-shadow:0px 1px 4px #cccccc; box-shadow:0px 1px 4px #cccccc;background:#ffffff;behavior:url('http://localhost/webCard/css/PIE.htc');}
.advanced_search_expansion{border:1px solid #cccccc;box-shadow:2px 2px 5px #cccccc;behavior:url('http://localhost/webCard/css/PIE.htc');}
.search_frame{margin:20px 0 0 10px;width:400px;background:#f5f5f5;height:25px;border:2px solid #ffffff;border-radius:3px;box-shadow:2px 2px 2px #ccc inset,0px 0px 4px #ccc;padding:0 0 0 5px;behavior:url('http://localhost/webCard/css/PIE.htc');}
.submenu{border:1px solid #cccccc;width:432px;height:128px;position:absolute;box-shadow:2px 2px 5px #CCCCCC;margin:52px 0 0 68px;display:none;background:#ffffff;behavior:url('http://localhost/webCard/css/PIE.htc');z-index:1;}
\ No newline at end of file
This diff is collapsed.
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
.hScrollPane_dragbar,
.hScrollPane_draghandle,
.hScrollPane_leftarrow,.hScrollPane_rightarrow{}
.hScrollPane_dragbar{
position:absolute;
left:0px;
bottom:0px;
height:12px;
margin:0 auto;
background-position:left -32px;
background-color: #EFEFEF;
}
.hScrollPane_draghandle{
height:10px;
width:30px;
border:1px solid #B5B5B5;
overflow:hidden;
position:absolute;
top:0px;
left:0px;
cursor:default;
background-position:center -48px;
background-repeat:no-repeat;
background-color:#FFFFFF;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.hScrollPane_leftarrow,.hScrollPane_rightarrow{
display:inline-block;
height:16px;
width:17px;
overflow:hidden;
position:absolute;
bottom:0;
}
.hScrollPane_leftarrow{left:0;}
.hScrollPane_leftarrow:hover{background-position:left -64px;}
.hScrollPane_rightarrow{right:0; background-position:left -16px;}
.hScrollPane_rightarrow:hover{background-position:left -80px;}
.draghandlealter{
background-position:center -96px;
background-color:orange;
}
\ No newline at end of file
/*主区域*/
body{margin:0;padding:0;background:#eee;}
.floatleft{float:left;} .floatright{float:right;}
.main_div{width:1000px;height:700px;margin:20px auto;border-radius:5px;}
.main_left{width:300px;height:700px;border-radius:5px;}
.main_right{width:700px;height:700px;border-radius:0 5px 5px 0;}
/*左边区域*/
.card_img{margin:10px 0 0 10px;height:auto;width:auto;}
.card_info{width:135px;height:180px;padding:15px 5px 5px 5px;margin:7px 0 0 10px;}
.card_name{width:300px;height:auto;padding:8px 0;margin:0;font-weight:bold;color:#999999;text-shadow:1px 1px 2px #cccccc;font-size:24px;text-align:center;background:#eeeeee;border:1px solid #cccccc;border-radius:5px 0 0 0;margin:0 0 0 -1px;}
.attr_name{width:62px;height:14px;padding:0 0 5px 0;margin:0 0 10px 0;color:#FFAD6E;font-size:12px;text-shadow:1px 1px 2px #eeeeee;text-align:right;border-bottom:1px dashed #cccccc;}
.attr_real{width:65px;height:14px;padding:0 0 5px 0;margin:0 0 10px 0;color:thead_bg#999999;font-size:12px;text-shadow:1px 1px 2px #eeeeee;border-bottom:1px dashed #cccccc;}
.more_info{margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none;}
.bottom_button_active{height:auto;width:auto;padding:8px 10px;margin:-1px 0 0 10px; border-left:1px solid #CCCCCC;border-top:1px solid #ffffff;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC; font-size:12px;border-radius:0 0 5px 5px;background:#ffffff;}
.bottom_button{height:auto;width:auto;padding:8px 10px;margin:-1px 0 0 10px;font-size:12px;border-radius:0 0 5px 5px;cursor:pointer;color:#999999;}
.bottom_button:hover{color:#ffffff;background:#CCCCCC;}
.bottom_area{height:45px;width:300px;margin:0;padding:0;background:#eeeeee;border-radius:0 0 5px 5px;}
.statistics{
margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none;
div{
line-height:24px;
label{float:left;color:#333333;}
}
}
.adjustment{margin:0;padding:0;height:370px;width:280px;font-size:12px;line-height:16px;letter-spacing:1px;color:#999999;display:none;}
.card_frame{
border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;padding:10px;margin:15px 0 0 0;width:280px;height:370px;
.card_frame_focus{display:block;}
}
/*右边区域*/
/*搜索*/
.search_data{height:700px;width:518px;margin:0;padding:0;}
.advanced_search{font-size:12px;margin:0;width:48px;height:12px;padding:10px 12px;background:#ffffff;}
.advanced_search:hover{cursor:pointer;}
.advanced_search_father{width:80px;height:36px;overflow:hidden;margin:18px 0 0 0;padding:4px 0 0 4px;}
.submenu_mask{width:72px;height:12px;margin:-3px 0 0 0;background:#ffffff;}
.submenu_main{
width:415px;height:115px;font-size:12px;padding:8px;
label{width:50px;display: block;height:16px;float:left;font-size:14px;color:#666666;}
select{
float:left;margin:-4px 0 0 5px;border:1px solid #dddddd;padding:2px;
&.select_half{width:70px;}
&.select_full{width:145px;}
}
input[type="text"]{border:1px solid #dddddd;padding:1px 3px;}
input[type="button"]{border:1px solid #cccccc;padding:1px 3px;display: inline;float:left;width:45px;height:45px;margin:0 0 0 5px;background: -webkit-linear-gradient(#F2F2F2, #DBDBDB);background: -moz-linear-gradient(#F2F2F2, #DBDBDB);box-shadow:1px 1px 5px #ddd;filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF2F2F2,endColorstr=#FFDBDBDB)";cursor:pointer;}
}
.submenu_mainLeft{width:200px;height:115px;float:left;margin:0 15px 0 0 ;}
.submenu_mainRight{width:200px;height:115px;float:left;}
.submenu_unit{height:24px;width:200px;padding:1px 0 0 0;margin:0 0 5px 0;float:left;}
.submenu_unitLarge{height:52px;width:149px;padding:1px 0 0 0;margin:0 0 5px 0;float:left;}
.search_results{width:auto;height:auto;margin:10px 0 0 12px;padding:0;font-size:12px;}
.serach_button{background:url(../image/search.png);border:none;width:20px;height:20px;margin:4px 5px 0 0;float:right;cursor:pointer;}
/*表格*/
.main_area{
width:508px;height:518px;margin:20px 0 0 10px;box-shadow:-2px 3px 5px #eeeeee inset;border-bottom:1px solid #eeeeee;position:relative;overflow:hidden;
table{position:absolute;
thead{
tr{
th{
width:96px;font-size:12px;border-width:0 1px 0 0;border-color:#eeeeee;border-style:solid;font-style:normal;color:#666666;text-align:left;
span{float:left;}
.arrow{
margin:0;height:33px;padding:0 0 0 2px;width:13px;display:none;float:right;
&:hover{
border:1px solid #CCCCCCC;background: -webkit-linear-gradient(#F0F0EF, #E8E8E8);background: -moz-linear-gradient(#F0F0EF, #E8E8E8);filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF0F0EF,endColorstr=#FFE8E8E8)";box-shadow:0 0 2px #ccc;
}
&:active{background: -webkit-linear-gradient(#E8E8E8, #F0F0EF);background: -moz-linear-gradient(#E8E8E8, #F0F0EF);filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFE8E8E8,endColorstr=#FFF0F0EF)";}
img{margin:15px 0 0 0;}
}
}
}
}
tbody{
tr{
border-top:1px dashed #eeeeee;
&:hover{background-color:#F5F5F5;}/*box-shadow:0 0 5px #cccccc inset;*/
td{font-size:12px;color:#999999;padding:12px 5px;}
}
}
}
}
.thead_bg{
margin:2px 0 0 0;padding:0 0 1px 7px;height:33px;line-height:33px;position:relative;width:76px;filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF3F3F2,endColorstr=#FFFFFFFF)";
&:hover{background: -webkit-linear-gradient(#F3F3F2, #FFFFFF);background: -moz-linear-gradient(#F3F3F2, #FFFFFF);border-bottom:1px solid #eeeeee;padding:0 0 0 7px;}
}
.filter_float{
position:absolute;padding:8px 10px;border:1px solid #cccccc;box-shadow:1px 1px 5px #dddddd;top:35px;left:85px;background:#ffffff;
div{
width:110px;height:28px;line-height:28px;
input{float:left;margin:8px 5px 0 0;}
label{float:left;}
}
}
.page{
max-width:518px;height:60px;padding:20px 15px 0 0;text-align:right;
a{margin:0 4px;}
}
.page_home{background:url('../image/page_arrows.gif') -26px 0 no-repeat;width:23px;height:17px;display:block;float:left;}
.page_pre{background:url('../image/page_arrows.gif') -1px 0 no-repeat;width:13px;height:17px;display:block;float:left;}
.page_next{background:url('../image/page_arrows.gif') -13px 0 no-repeat;width:13px;height:17px;display:block;float:left;}
.page_last{background:url('../image/page_arrows.gif') -47px 0 no-repeat;width:23px;height:17px;display:block;float:left;}
.page_num{
display:block;float:left;height:17px;line-height:17px;width:16px;font-size:14px;color:#999;text-decoration:none;text-align:center;
&:hover{text-decoration:underline;}
}
.card_group{
width:150px;height:565px;
h4{margin:8px 0;}
.jscroll-e{
.jscroll-h{border:none;}
}
}
/*操作区域*/
.operate_area{
width:162px;height:700px;padding:0 0 0 10px;
fieldset{
border:1px solid #cccccc;padding:5px;margin:14px 0 0 0;background:#F9F9F9;border-radius:6px;font-size:12px;color:#666666;height:586px;
legend{font-size:14px;color:#666666;margin:0 0 0 8px;font-size:14px;}
P{
padding:6px 0;
span{
&:hover{text-shadow:1px 1px 5px #999;}
}
i{float:right;padding:0 5px 0 0;color:#FFAD6E;}
}
}
}
.select_card{
width:150px;height:55px;padding:5px;border:1px solid #cccccc;background:#F9F9F9;border-radius:6px;margin:12px 0 0 0;
select{width:100px;float:left;border:1px solid #ccc;padding:1px;}
}
.select_cardOn{float:left;width:150px;height:23px;}
.select_cardUnder{float:left;height:32px;width:150px;}
.add_ope{
float:left;height:17px;padding:3px 0 0 3px;cursor:pointer;margin:-1px 0 0 3px;-moz-transition: all 0.5s ease-in;-webkit-transition: all 0.5s ease-in;
&:hover{height:23px;padding:0;-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;}
}
.rename_ope{
float:right;height:17px;cursor:pointer;margin:1px 2px 0 0;-moz-transition: all 0.5s ease-in;-moz-transform: translate(0px) rotate(-180deg);-webkit-transition: all 0.5s ease-in;-webkit-transform: translate(0px) rotate(-180deg);
&:hover{-moz-transition: all 0.5s ease-in-out;-moz-transform: translate(0px) rotate(180deg);-webkit-transition: all 0.5s ease-in-out;-webkit-transform: translate(0px) rotate(180deg);}
}
.donwload_out{float:left;height:25px;width:25px;cursor:pointer;background-image:url(../image/download_out.png);margin:6px 0 0 6px;}
.download_inner{
width:11px;height:18px;background:url(../image/download_inner.png);margin:3px 0 0 7px;
&:hover{-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;background-position:0 18px;}
}
.upload_inner{
width:11px;height:18px;background:url(../image/upload_inner.png);margin:3px 0 0 7px;
&:hover{-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;background-position:0 -18px;}
}
.upload_ope{float:left;height:25px;padding:5px 0 0 5px;cursor:pointer;}
.save_ope{float:left;height:25px;padding:5px 0 0 6px;cursor:pointer;}
\ No newline at end of file
/*
http://www.rjboy.cn
By sean at 2010.06 - 2011.03
Demo:
$(".container").hScrollPane({
mover:".press", //指定container对象下的哪个元素需要滚动位置 | 必传项;
moverW:function(){return $(".press").width();}(), //传入水平滚动对象的长度值,不传入的话默认直接获取mover的宽度值 | 可选项;
handleMinWidth:300, //指定handle的最小宽度,要固定handle的宽度请在css中设定handle的width属性(如 width:28px!important;),不传入则不设定最小宽度 | 可选项;
showArrow:true, //指定是否显示左右箭头,默认不显示 | 可选项;
dragable:false, //指定是否要支持拖动效果,默认可以拖动 | 可选项;
handleCssAlter:"draghandlealter", //指定拖动鼠标时滚动条的样式,不传入该参数则没有变化效果 | 可选项;
easing:true, //滚动是否需要滑动效果,默认有滑动效果 | 可选项;
mousewheel:{bind:true,moveLength:500} //mousewheel: bind->'true',绑定mousewheel事件; ->'false',不绑定mousewheel事件;moveLength是指定鼠标滚动一次移动的距离,默认值:{bind:true,moveLength:300} | 可选项;
});
*/
(function($){
$.extend(jQuery.easing,{
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
});
$.fn.hScrollPane=function(settings){
settings=$.extend(true,{},$.fn.hScrollPane.defaults,settings);
this.each(function(){
var container=$(this),
mover=container.find(settings.mover),
w=container.width(),
c=settings.moverW || mover.width(),
dragbar=(container.find(".hScrollPane_dragbar").length==0 && c>w ) ? container.append('<div class="hScrollPane_dragbar"><div class="hScrollPane_draghandle"></div></div>').find(".hScrollPane_dragbar") : container.find(".hScrollPane_dragbar"),//避免多次初始化时的重复append;
handle=dragbar.find(".hScrollPane_draghandle");
if(settings.showArrow){
container.append('<a href="###" class="hScrollPane_leftarrow"></a><a href="###" class="hScrollPane_rightarrow"></a>');
leftArrow=container.find(".hScrollPane_leftarrow");
rightArrow=container.find(".hScrollPane_rightarrow");
dragbar.css({
width:container.width()-leftArrow.outerWidth()*2,
left:leftArrow.outerWidth()
});
leftArrow.unbind();
rightArrow.unbind();
}else{
dragbar.css("width",container.width());
}
mover.stop().css("left","0px");
container.unbind();//避免多次初始化时的事件重复绑定;
handle.unbind();
dragbar.unbind();
handle.stop().css({
width:(w/c)*w >settings.handleMinWidth ? (w/c)*w : settings.handleMinWidth,
left:0
});
if(c<w){
dragbar.hide();
return false;
}else{
dragbar.show();
}
var maxlen=parseInt(dragbar.width())-parseInt(handle.outerWidth());
dragbar.bind("click",function(e){
var flag=e.pageX>handle.offset().left+handle.outerWidth() ? -1 : 1;
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,flag);
});
handle.bind("mousedown",function(e){
var x=e.pageX;
var hx=parseInt(handle.css("left"));
if(settings.handleCssAlter){$(this).addClass(settings.handleCssAlter);}
$(document).bind("mousemove",function(e){
var left=e.pageX-x+hx<0?0:(e.pageX-x+hx>=maxlen?maxlen:e.pageX-x+hx);
handle.stop().css({left:left});
if(settings.easing){
mover.stop().animate({
left:-left/maxlen*(c-w)
},{duration:1500,easing:'easeOutQuint',queue:false});
}else{
mover.css({left:-left/maxlen*(c-w)});
}
return false;
});
$(document).bind("mouseup",function(){
if(settings.handleCssAlter){handle.removeClass(settings.handleCssAlter);}
$(this).unbind("mousemove");
})
return false;
}).click(function(){
return false;
})
if(settings.dragable){
mover.bind("mousedown",function(e){
var x=e.pageX;
$(this).bind("mousemove",function(e){
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,x,e.pageX);
return false;
})
$(document).bind("mouseup",function(){
mover.unbind("mousemove");
})
})
}
if(settings.mousewheel.bind){
container.bind("mousewheel",function(event, delta){
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,delta);
return false;
});
}
if(settings.showArrow){
leftArrow.click(function(){
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,1);
return false;
}).focus(function(){this.blur();});
rightArrow.click(function(){
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,-1);
return false;
}).focus(function(){this.blur();});
}
this.ondragstart=function(){return false;}
this.onselectstart=function(){return false;}
})
}
$.fn.hScrollPane.defaults = {
showArrow:false,
handleMinWidth:0,
dragable:true,
easing:true,
mousewheel:{bind:true,moveLength:300}
};
$.fn.hScrollPane.move=function(settings,mover,handle,w,c,maxlen,x,nx){
if(arguments.length==7){
var left=parseInt(mover.css("left"))+x*settings.mousewheel.moveLength;
}else{
var left=parseInt(mover.css("left"))+((nx-x)/w)*(c-w);
}
left=left.toFixed(0);
left=left>0?0:left<w-c?w-c:left;
var handle_left=(left/(w-c))*maxlen;
if(settings.easing){
mover.stop().animate({
left:left
},{duration:1500,easing:'easeOutQuint',queue:false});
handle.stop().animate({
left:handle_left
},{duration:1500,easing:'easeOutQuint',queue:false});
}else{
mover.stop().animate({
left:left
},{duration:5,queue:false});
handle.css({left:handle_left});
}
}
})(jQuery);
\ No newline at end of file
This diff is collapsed.
/* Copyright (c) 2006 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* $LastChangedDate: 2007-12-20 09:02:08 -0600 (Thu, 20 Dec 2007) $
* $Rev: 4265 $
*
* Version: 3.0
*
* Requires: $ 1.2.2+
*/
(function($) {
$.event.special.mousewheel = {
setup: function() {
var handler = $.event.special.mousewheel.handler;
// Fix pageX, pageY, clientX and clientY for mozilla
if ( $.browser.mozilla )
$(this).bind('mousemove.mousewheel', function(event) {
$.data(this, 'mwcursorposdata', {
pageX: event.pageX,
pageY: event.pageY,
clientX: event.clientX,
clientY: event.clientY
});
});
if ( this.addEventListener )
this.addEventListener( ($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
else
this.onmousewheel = handler;
},
teardown: function() {
var handler = $.event.special.mousewheel.handler;
$(this).unbind('mousemove.mousewheel');
if ( this.removeEventListener )
this.removeEventListener( ($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
else
this.onmousewheel = function(){};
$.removeData(this, 'mwcursorposdata');
},
handler: function(event) {
var args = Array.prototype.slice.call( arguments, 1 );
event = $.event.fix(event || window.event);
// Get correct pageX, pageY, clientX and clientY for mozilla
$.extend( event, $.data(this, 'mwcursorposdata') || {} );
var delta = 0, returnValue = true;
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
//if ( $.browser.opera ) delta = -event.wheelDelta;
event.data = event.data || {};
event.type = "mousewheel";
// Add delta to the front of the arguments
args.unshift(delta);
// Add event to the front of the arguments
args.unshift(event);
return $.event.handle.apply(this, args);
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
})(jQuery);
\ No newline at end of file
/**
*
* Copyright (c) 2009 Jun(qq100015091)
* http://www.xlabi.com
* http://www.xlabi.com/tp/jscroll.html
* jun5091@gmail.com
*/
/*--------------------------------------------------------------------------------------------------*/
$.fn.extend({//添加滚轮事件//by jun
mousewheel:function(Func){
return this.each(function(){
var _self = this;
_self.D = 0;//滚动方向
if($.browser.msie||$.browser.safari){
_self.onmousewheel=function(){_self.D = event.wheelDelta;event.returnValue = false;Func && Func.call(_self);};
}else{
_self.addEventListener("DOMMouseScroll",function(e){
_self.D = e.detail>0?-1:1;
e.preventDefault();
Func && Func.call(_self);
},false);
}
});
}
});
$.fn.extend({
jscroll:function(j){
return this.each(function(){
j = j || {}
j.Bar = j.Bar||{};//2级对象
j.Btn = j.Btn||{};//2级对象
j.Bar.Bg = j.Bar.Bg||{};//3级对象
j.Bar.Bd = j.Bar.Bd||{};//3级对象
j.Btn.uBg = j.Btn.uBg||{};//3级对象
j.Btn.dBg = j.Btn.dBg||{};//3级对象
var jun = { W:"15px"
,BgUrl:""
,Bg:"#efefef"
,Bar:{ Pos:"up"
,Bd:{Out:"#b5b5b5",Hover:"#ccc"}
,Bg:{Out:"#fff",Hover:"#fff",Focus:"orange"}}
,Btn:{ btn:true
,uBg:{Out:"#ccc",Hover:"#fff",Focus:"orange"}
,dBg:{Out:"#ccc",Hover:"#fff",Focus:"orange"}}
,Fn:function(){}}
j.W = j.W||jun.W;
j.BgUrl = j.BgUrl||jun.BgUrl;
j.Bg = j.Bg||jun.Bg;
j.Bar.Pos = j.Bar.Pos||jun.Bar.Pos;
j.Bar.Bd.Out = j.Bar.Bd.Out||jun.Bar.Bd.Out;
j.Bar.Bd.Hover = j.Bar.Bd.Hover||jun.Bar.Bd.Hover;
j.Bar.Bg.Out = j.Bar.Bg.Out||jun.Bar.Bg.Out;
j.Bar.Bg.Hover = j.Bar.Bg.Hover||jun.Bar.Bg.Hover;
j.Bar.Bg.Focus = j.Bar.Bg.Focus||jun.Bar.Bg.Focus;
j.Btn.btn = j.Btn.btn!=undefined?j.Btn.btn:jun.Btn.btn;
j.Btn.uBg.Out = j.Btn.uBg.Out||jun.Btn.uBg.Out;
j.Btn.uBg.Hover = j.Btn.uBg.Hover||jun.Btn.uBg.Hover;
j.Btn.uBg.Focus = j.Btn.uBg.Focus||jun.Btn.uBg.Focus;
j.Btn.dBg.Out = j.Btn.dBg.Out||jun.Btn.dBg.Out;
j.Btn.dBg.Hover = j.Btn.dBg.Hover||jun.Btn.dBg.Hover;
j.Btn.dBg.Focus = j.Btn.dBg.Focus||jun.Btn.dBg.Focus;
j.Fn = j.Fn||jun.Fn;
var _self = this;
var Stime,Sp=0,Isup=0;
$(_self).css({overflow:"hidden",position:"relative",padding:"0px"});
var dw = $(_self).width(), dh = $(_self).height()-1;
var sw = j.W ? parseInt(j.W) : 21;
var sl = dw - sw
var bw = j.Btn.btn==true ? sw : 0;
if($(_self).children(".jscroll-c").height()==null){//存在性检测
$(_self).wrapInner("<div class='jscroll-c' style='top:0px;z-index:9999;zoom:1;position:relative'></div>");
$(_self).children(".jscroll-c").prepend("<div style='height:0px;overflow:hidden'></div>");
$(_self).append("<div class='jscroll-e' unselectable='on' style=' height:100%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-u' style='position:absolute;top:0px;width:100%;left:0;background:blue;overflow:hidden'></div><div class='jscroll-h' unselectable='on' style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-d' style='position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden'></div></div>");
}
var jscrollc = $(_self).children(".jscroll-c");
var jscrolle = $(_self).children(".jscroll-e");
var jscrollh = jscrolle.children(".jscroll-h");
var jscrollu = jscrolle.children(".jscroll-u");
var jscrolld = jscrolle.children(".jscroll-d");
if($.browser.msie){document.execCommand("BackgroundImageCache", false, true);}
jscrollc.css({"padding-right":sw});
jscrolle.css({width:sw,background:j.Bg,"background-image":j.BgUrl});
jscrollh.css({top:bw,background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out,width:sw-2});
jscrollu.css({height:bw,background:j.Btn.uBg.Out,"background-image":j.BgUrl});
jscrolld.css({height:bw,background:j.Btn.dBg.Out,"background-image":j.BgUrl});
jscrollh.hover(function(){if(Isup==0)$(this).css({background:j.Bar.Bg.Hover,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Hover})},function(){if(Isup==0)$(this).css({background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out})})
jscrollu.hover(function(){if(Isup==0)$(this).css({background:j.Btn.uBg.Hover,"background-image":j.BgUrl})},function(){if(Isup==0)$(this).css({background:j.Btn.uBg.Out,"background-image":j.BgUrl})})
jscrolld.hover(function(){if(Isup==0)$(this).css({background:j.Btn.dBg.Hover,"background-image":j.BgUrl})},function(){if(Isup==0)$(this).css({background:j.Btn.dBg.Out,"background-image":j.BgUrl})})
var sch = jscrollc.height();
//var sh = Math.pow(dh,2) / sch ;//Math.pow(x,y)x的y次方
var sh = (dh-2*bw)*dh / sch
if(sh<10){sh=10}
var wh = sh/6//滚动时候跳动幅度
// sh = parseInt(sh);
var curT = 0,allowS=false;
jscrollh.height(sh);
if(sch<=dh){jscrollc.css({padding:0});jscrolle.css({display:"none"})}else{allowS=true;}
if(j.Bar.Pos!="up"){
curT=dh-sh-bw;
setT();
}
jscrollh.bind("mousedown",function(e){
j['Fn'] && j['Fn'].call(_self);
Isup=1;
jscrollh.css({background:j.Bar.Bg.Focus,"background-image":j.BgUrl})
var pageY = e.pageY ,t = parseInt($(this).css("top"));
$(document).mousemove(function(e2){
curT =t+ e2.pageY - pageY;//pageY浏览器可视区域鼠标位置,screenY屏幕可视区域鼠标位置
setT();
});
$(document).mouseup(function(){
Isup=0;
jscrollh.css({background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out})
$(document).unbind();
});
return false;
});
jscrollu.bind("mousedown",function(e){
j['Fn'] && j['Fn'].call(_self);
Isup=1;
jscrollu.css({background:j.Btn.uBg.Focus,"background-image":j.BgUrl})
_self.timeSetT("u");
$(document).mouseup(function(){
Isup=0;
jscrollu.css({background:j.Btn.uBg.Out,"background-image":j.BgUrl})
$(document).unbind();
clearTimeout(Stime);
Sp=0;
});
return false;
});
jscrolld.bind("mousedown",function(e){
j['Fn'] && j['Fn'].call(_self);
Isup=1;
jscrolld.css({background:j.Btn.dBg.Focus,"background-image":j.BgUrl})
_self.timeSetT("d");
$(document).mouseup(function(){
Isup=0;
jscrolld.css({background:j.Btn.dBg.Out,"background-image":j.BgUrl})
$(document).unbind();
clearTimeout(Stime);
Sp=0;
});
return false;
});
_self.timeSetT = function(d){
var self=this;
if(d=="u"){curT-=wh;}else{curT+=wh;}
setT();
Sp+=2;
var t =500 - Sp*50;
if(t<=0){t=0};
Stime = setTimeout(function(){self.timeSetT(d);},t);
}
jscrolle.bind("mousedown",function(e){
j['Fn'] && j['Fn'].call(_self);
curT = curT + e.pageY - jscrollh.offset().top - sh/2;
asetT();
return false;
});
function asetT(){
if(curT<bw){curT=bw;}
if(curT>dh-sh-bw){curT=dh-sh-bw;}
jscrollh.stop().animate({top:curT},100);
var scT = -((curT-bw)*sch/(dh-2*bw));
jscrollc.stop().animate({top:scT},1000);
};
function setT(){
if(curT<bw){curT=bw;}
if(curT>dh-sh-bw){curT=dh-sh-bw;}
jscrollh.css({top:curT});
var scT = -((curT-bw)*sch/(dh-2*bw));
jscrollc.css({top:scT});
};
$(_self).mousewheel(function(){
if(allowS!=true) return;
j['Fn'] && j['Fn'].call(_self);
if(this.D>0){curT-=wh;}else{curT+=wh;};
setT();
})
});
}
});
This diff is collapsed.
// JavaScript Document
$(function() {
$(".advanced_search").toggle(
function () {
$(".submenu").show();
$(this).attr('class','advanced_search_expansion advanced_search');
},
function () {
$(".submenu").hide();
$(this).attr('class','advanced_search');
}
);
$(".main_area table thead tr th").live( 'mouseover', function(e){
$(this).find('.arrow').show();
});
$(".main_area table thead tr th").live('mouseout', function(e) {
$(this).find('.arrow').hide();
});
// $(".arrow").live('click', function(e) {
// $(this).next().show();
// });
$(".bottom_area div").click(function() {
$(this).addClass("bottom_button_active").removeClass("bottom_button");
$(this).siblings().addClass("bottom_button").removeClass("bottom_button_active");
var $dangqian = $(".card_frame .frame_element").eq($(".bottom_area div").index(this));
$dangqian.addClass("card_frame_focus");
$dangqian.siblings().removeClass("card_frame_focus");
});
});
function showMe(thisObj,id){
var objDiv=document.getElementById(id)
objDiv.style.display=(objDiv.style.display=="none")?'':"none"
document.onclick=function(e){
var o = o || window.event || e;
var obj=o.target || o.srcElement;
if (obj!=objDiv &&obj!=thisObj)objDiv.style.display='none'
}
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment