sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

better list demo

Browse source
This commit is contained in:
Rolux 2010-07-01 17:06:04 +02:00
commit 894f27f760
5 changed files with 159 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

1
demos/test/list.css
View file

@ -4,4 +4,5 @@
#totals {
margin-top: 2px;
font-size: 9px;
color: rgb(192, 192, 192);
}

5
demos/test/list.html
View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE HTML>
<html>
<head>
<title>oxjs List Demo</title>
@ -10,6 +10,5 @@
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
<script type="text/javascript" src="list.js"></script>
</head>
<body>
</body>
<body></body>
</html>

140
demos/test/list.js
View file

@ -133,7 +133,7 @@ $(function() {
operator: "-",
title: "Year",
visible: true,
width: 80
width: 60
},
{
align: "right",
@ -198,25 +198,131 @@ $(function() {
}),
$toolBar = Ox.Bar({
size: 24
}),
size: 24
}),
$button = Ox.Button({
id: "groupsButton",
value: ["Show Groups", "Hide Groups"]
}).css({
float: "left",
margin: "4px"
}).width(80).appendTo($toolBar),
$select = Ox.Select({
id: "selectView",
id: "viewSelect",
items: [
{
checked: true,
id: "list",
title: "View: List"
title: "View as List"
},
{
id: "icons",
title: "View: Icons"
}
title: "View as Icons"
},
{
id: "clips",
title: "View with Clips"
},
{
id: "timelines",
title: "View with Timelines"
},
{
id: "timelines",
title: "View with Maps"
},
{
id: "timelines",
title: "View with Calendars"
},
{
id: "timelines",
title: "View as Clips"
},
{
id: "timelines",
title: "View on Map"
},
{
id: "timelines",
title: "View on Calendar"
},
]
}).css({
float: "left",
margin: "4px"
}).width(128).appendTo($toolBar);
}).width(120).appendTo($toolBar);
$input = new Ox.Input({
autocomplete: {
"Find: All": [],
"Find: Title": [
"A bout de souffle",
"Casino",
"Diaries, Notes and Sketches",
"L'age d'or",
"Far From Heaven",
"In girum imus nocte et consumimur igni",
"It Felt Like a Kiss",
"Mulholland Dr.",
"Querelle",
"Vertigo"
],
"Find: Director": [
"Luis Buñuel",
"Adam Curtis",
"Guy Debord",
"Rainer Werner Fassbinder",
"Jean-Luc Godard",
"Todd Haynes",
"Alfred Hitchcock",
"David Lynch",
"Jonas Mekas",
"Martin Scorsese"
],
"Find: Country": [
"Austria",
"Canada",
"France",
"Germany",
"Italy",
"Japan",
"Spain",
"Switzerland",
"UK",
"USA"
],
"Find: Cinematographer": []
},
clear: true,
highlight: false,
id: "find",
label: [
"Find: All",
"Find: Title",
"Find: Director",
"Find: Country",
"Find: Year",
"Find: Language",
"Find: Genre",
"Find: Writer",
"Find: Producer",
"Find: Cinematographer",
"Find: Editor",
"Find: Actor",
"Find: Character",
"Find: Name",
"Find: Keyword",
"Find: Summary",
"Find: Dialog",
],
labelWidth: 85
}).css({
float: "right",
margin: "4px"
}).width(300).appendTo($toolBar);
$contentPanel = new Ox.SplitPanel({
elements: [
@ -289,7 +395,7 @@ $(function() {
]
},
],
size: "large"
size: "medium"
}),
$mainPanel = new Ox.SplitPanel({
@ -308,7 +414,7 @@ $(function() {
elements: [
{
element: $mainMenu,
size: 24
size: 20
},
{
element: $mainPanel
@ -363,13 +469,15 @@ $(function() {
});
Ox.Event.bind(null, "load_list", function(event, data) {
Ox.print(data)
var dhms = ["day", "hour", "minute", "second"],
html = [
Ox.print("data", data)
var html = [
data.items + " movie" + (data.items != 1 ? "s" : ""),
$.map(Ox.formatDuration(data.runtime).split(":"), function(v, i) {
return v + " " + dhms[i] + ((v != "1" && v != "01") ? "s" : "");
}).join(" "),
Ox.formatDuration(data.runtime, "long"),
Ox.formatDuration(data.runtime, "medium"),
Ox.formatDuration(data.runtime, 3, "short"),
data.files + " file" + (data.files != 1 ? "s" : ""),
Ox.formatDuration(data.duration, "short"),
Ox.formatValue(data.size, "B"),
Ox.formatValue(data.pixels, "px")
];
$totals.html(html.join(", "));