--- a/jpoker/jquery/demos/css/real-world.css Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,104 +0,0 @@ -/*************************************/ -/* Blueprint: reset.css */ - -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, -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%; - font-family: inherit; - vertical-align: baseline; -} - -/* Remember to define focus styles! */ -:focus { - outline: 0; -} -body { - line-height: 1; - color: black; - background: white; -} -ol, ul { - list-style: none; -} - -/* Tables still need 'cellspacing="0"' in the markup. */ -table { - border-collapse: separate; - border-spacing: 0; -} -caption, th, td { - text-align: left; - font-weight: normal; -} - -/* Remove possible quote marks (") from <q>, <blockquote>. */ -blockquote:before, blockquote:after, -q:before, q:after { - content: ""; -} -blockquote, q { - quotes: "" ""; -} - -.clear { - clear:both; -} - -/*************************************/ -/* Layout */ -body, html { - height: 100%; - font-family:sans-serif; - font-size:13px; - margin:0px; - padding:0px; -} -body, html { - height: 100%; - font-family:sans-serif; - font-size:13px; - -} -#main { - height:auto; - background: #E8EEF7; - border-left:1px solid #ccc; - border-bottom:1px solid #ccc; - margin:0 0 0 200px; -} - #header { - height:30px; - padding:10px; - font-size:2em; - font-weight:bold; - text-align: center; - border-bottom:1px solid #ccc; - background: #E8EEF7; - } - #main #content { - padding:10px; - background: #FFF; - } - #main #break { - padding:10px; - border-top:1px solid #ccc; - } -#sidebar { - float:left; - width:200px; - height:100%; - border-right:1px solid #ccc; -} - #sidebar div { - padding:10px; - }
--- a/jpoker/jquery/demos/css/style.css Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,6 +0,0 @@ -body { margin: 10px; padding: 0; font-family: Arial; font-size: 12px; background: #E6F7D4; } -.proxy { border: 1px dotted black; } - -h2 { padding: 5px; margin: 5px; border-bottom: 2px solid #bbb; line-height: 7px; font-size: 14px; margin-top: 20px; margin-bottom: 0px; color: #333; } -.playground { background: #fff; margin-left: 5px; margin-right: 5px; position: relative; padding: 10px; } -.example { width: 200px; height: 100px; background: #fff; position: relative; } \ No newline at end of file
--- a/jpoker/jquery/demos/functional/css/demo.css Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,303 +0,0 @@ -/* -------------------------------------------------------------- - - jQuery UI: Demo Viewer - --------------------------------------------------------------- */ - - -/*************************************/ -/* Blueprint: reset.css */ - -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, -dl, dt, dd, ol, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; -} - -#sidebar ul, #sidebar li { - margin: 0; - padding: 0; - border: 0; - outline: 0; - list-style: none; -} - -.sortable-container li { - margin: 0; - padding: 0; - border: 0; - outline: 0; - list-style: circle; - background: #E8EEF7; - margin:2px; - padding: 5px; - width: 100px; -} - -label { - margin-right: 5px; -} - -/* Remember to define focus styles! */ -:focus { - outline: 0; -} -body { - line-height: 1; - color: black; - background: white; -} -ol, ul { - list-style: none; -} - -/* Tables still need 'cellspacing="0"' in the markup. */ -table { - border-collapse: separate; - border-spacing: 0; -} -caption, th, td { - text-align: left; - font-weight: normal; -} - -/* Remove possible quote marks (") from <q>, <blockquote>. */ -blockquote:before, blockquote:after, -q:before, q:after { - content: ""; -} -blockquote, q { - quotes: "" ""; -} - -/*************************************/ -/* Viewer: Layout */ - -body, html { - height: 100%; - font-family:sans-serif; - font-size:13px; -} -#main { - margin:0 0 0 200px; -} - #main #header { - height:30px; - padding:10px; - border-bottom:1px solid #ccc; - background: #E8EEF7; - font-size:2em; - font-weight:bold; - text-align: center; - } - #main #content { - padding:10px; - } -#sidebar { - float:left; - width:200px; - height:100%; - border-right: 1px solid #ccc; -} - #sidebar ul { - margin-top:10px; - line-height:1.2em; - } - #sidebar ul li a{ - border-bottom: 1px solid #E8EEF7; - display:block; - padding: 3px 3px 3px 12px; - font-size: 95%; - text-decoration: none; - color: #000; - height: 15px; - } - #sidebar ul li a:hover, - #sidebar ul li a:focus{ - background: #E8EEF7; - border-color: #C3D9FF; - } - #sidebar ul li.menutitle { - padding: 2px 2px 6px 8px; - border-bottom: 1px solid #E8EEF7; - text-align: left; - font-size:1.1em; - font-weight: bold; - } - -/*************************************/ -/* Viewer: models */ - -#main #content h1 { - font-size:1.5em; - font-weight: bold; - margin:10px 10px 0px 10px; -} -#main #content .menutitle { - margin:0px 0px; - padding: 2px 2px 6px 0; - text-align: left; - font-size:1.1em; - font-weight: bold; -} -#main #content .ui-wrapper { - margin:0px 10px; -} -#main #content .ui-details { - margin:0px 10px 10px 0px; - border-bottom: 2px solid #E8EEF7; -} - -#main #content .ui-demo-options { - background: #E8EEF7; - border-bottom: 1px #C3D9FF solid; - padding: 10px; - margin: 10px 0 20px 0; -} - -#main #content .ui-demo-view-code { - background: url('../img/bgcode.gif'); - border-left: 6px solid #39F; - color: #555; - display: block; - font: normal 0.9em "Lucida Sans Unicode",serif; - margin-bottom: 12px; - padding: 8px 10px; - white-space: pre; -} -#main #content .ui-demo-description { - margin-bottom: 10px; -} -#main #content .link-view-source { - margin-left: 5px; -} -#main #content .proxy { - border: 1px dashed #000; -} - -#main #content .lightblue-bg{ - background: #E8EEF7; -} -#main #content .blue-bg { - background: #C3D9FF; -} -#main #content .green-bg { - background: #74DD82; -} -#main #content a { - color:#000; -} - -.snippet { - white-space: nowrap; - overflow: hidden; - empty-cells: show; -} - -/*************************************/ -/* Components */ - -.draggable { - width: 100px; - height: 40px; - top: 10px; - right: 10px; - background-color: #68BFEF; - border: 2px solid #0090DF; - padding: 5px; - margin: 0 0 12px 12px; -} - -div.drag-handle -{ - cursor: move; - background-color: #900; - height: 15px; -} - -.block { - border: 2px solid #0090DF; - background-color: #68BFEF; - width: 75px; - height: 75px; - margin: 10px; - z-index: 100; -} -.drop { - background-color: #e9b96e; - border: 3px double #c17d11; - width: 150px; - margin: 10px; - min-height: 200px; - min-height:200px; - height:auto !important; - height:200px; - opacity: 0.7; - filter:alpha(opacity:70); - text-align: center; -} -.droppable-active { - opacity: 1.0; - filter:alpha(opacity:100); -} -.droppable-hover { - outline: 1px dotted black; - background-color: #73d216; - border-color: #4e9a06; -} -.silver { - background-color: #fafafa; - border-color: silver; -} -.draggable.green { - background-color: #73d216; - border-color: #4e9a06; -} - -.draggable.red { - background-color: #ef2929; - border-color: #cc0000; -} - -.ui-selecting { - background-color: #eee; -} -.ui-selected { - background-color: #E6F7D4; -} -.sortable-container #example1 li { - background: #E8EEF7; -} - -.sortable-container #example2 li { - background: none; -} - -.sortable-container #example3 li { - list-style: none; -} -.droppable-photos-container { - background: #E8EEF7; - border: 2px #ccc dotted; - width:144px; - height: 108px; - float:left; - margin-top: 2px; - padding: 2px; -} -.droppable-img-content { - float: left; padding: 5px; -}
Binary file jpoker/jquery/demos/functional/img/bgcode.gif has changed
Binary file jpoker/jquery/demos/functional/img/loading.gif has changed
Binary file jpoker/jquery/demos/functional/img/puppy.jpg has changed
--- a/jpoker/jquery/demos/functional/index.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,77 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta http-equiv="Content-Language" content="en" /> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <title>jQuery UI: Demo Viewer</title> - - <!-- jQuery --> - <script type="text/javascript" src="../../../jquery-1.2.4b.js"></script> - - <!-- jQuery Plugins --> - <script src="../../../plugins/corner/jquery.corner.js" type="text/javascript"></script> - - <!-- jQuery UI --> - <script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script> - - <script src="../../../ui/ui.draggable.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/ui.droppable.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/ui.resizable.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/ui.sortable.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/ui.selectable.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/ui.tabs.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/ui.dialog.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/ui.slider.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/ui.accordion.js" type="text/javascript" charset="utf-8"></script> - <script src="../../../ui/datepicker/core/ui.datepicker.js" type="text/javascript" charset="utf-8"></script> - - <script src="js/demo.js" type="text/javascript" charset="utf-8"></script> - - <style type="text/css"> - @import "css/demo.css"; - </style> - - <link rel="stylesheet" href="../../../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" /> -</head> -<body> - <div id="sidebar"> - <ul id="component-links"> - <li class="menutitle">Components</li> - <li><a href="#ui.accordion" title="Goto Accordion's Component Page">Accordion</a></li> - <li><a href="#ui.dialog" title="Goto Dialog's Component Page">Dialog</a></li> - <li><a href="#ui.draggable" title="Goto Draggable's Component Page">Draggable</a></li> - <li><a href="#ui.droppable" title="Goto Droppable's Component Page">Droppable</a></li> - <li><a href="#ui.resizable" title="Goto Resizable's Component Page">Resizable</a></li> - <li><a href="#ui.selectable" title="Goto Selectable's Component Page">Selectable</a></li> - <li><a href="#ui.sortable" title="Goto Sortable's Component Page">Sortable</a></li> - <li><a href="#ui.tabs" title="Goto Tabs Component Page">Tabs</a></li> - </ul> - </div> - <div id="main"> - <div id="header"> - <h1>jQuery UI 1.5 - Demos</h1> - </div> - <div id="content"> - <div id="containerDemo"> - <p>Welcome to Demo Viewer, an interactive page for looking at and playing with each jQuery UI component.</p> - </div> - </div> - </div> - - <script type="text/javascript"> - $(function() { - - $('#component-links a').click(function() { - var comp = $(this).attr('href').replace(/^#/, ""); - loadDemo(comp); - }); - - // hash listener - if (location.hash) { - loadDemo(location.hash.replace(/^#/, "")); - } - - }); - </script> -</body> -</html>
--- a/jpoker/jquery/demos/functional/js/demo.js Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,153 +0,0 @@ -var uid = 0; - -/** - * Render a demo template page - * @author Eduardo Lundgren (braeker) - * @param {Object} model - */ -var uiRenderDemo = function(model) { - - var title = model.title, renderAt = $(model.renderAt); - - renderAt.append( - '<h1>'+ title +'</h1><br>' - ); - - $.each(model.demos, function(i, demo) { - - /** - * Rendering each demo - */ - - if (!demo) return; - - var uiHtmlRendered = $('<div class="ui-html-rendered"></div>'); - - if (model.onRenderStart) model.onRenderStart.apply(window); - - var gid = 'ui-gen-'+uid++, demoBox = $('<div id="'+gid+'">'); - - renderAt.append(demoBox); - - var detailsHtml = $( - '<br><div class="ui-details"><div class="menutitle">'+demo.title+'</div></div>' - ); - - var descBox = $( - '<div class="ui-demo-description">'+(demo.desc||'')+'</div>' - ); - - var optionsBox = $( - '<div class="ui-demo-options"><label for="select-'+gid+'">More options:</label></div>' - ); - - var codesBox = $( - '<div id="code-'+gid+'">' - ) - .css({display: 'none'}); - - var sourceTmpl = $( - '<div class="ui-demo-view-code snippet"></div>' - ); - - var preTmpl = $( - '<pre></pre>' - ); - - var codeTmpl = $( - '<code></code>' - ); - - var htmlCode = '', sourceHtml = sourceTmpl.clone(), sourceJs = sourceTmpl.clone(), entitiesHtml = function(html) { - return html.replace(/</g,"<").replace(/>/g,">"); - }; - - // Render simple HTML - if (typeof demo.html == 'string') { - uiHtmlRendered.html(demo.html); - htmlCode = demo.html; - } - // Render data html by URL - if (typeof demo.html == 'object' && demo.html.url) { - - $.ajax({ - type: "GET", - url: demo.html.url, - cache: false, - success: function(data) { - uiHtmlRendered.html(data); - htmlCode = data; - - // set html code view - sourceHtml.html(preTmpl.clone().html( codeTmpl.clone().html(entitiesHtml(htmlCode)) )); - - $.each(demo.options, function(x, o) { - // eval the first source of <select> - if (!x) jQuery.globalEval(o.source); - }); - - // fire renderEnd callback to ajax async transactions - if (model.onRenderEnd) model.onRenderEnd.apply(window); - } - }); - - } - // set html code view - sourceHtml.html(preTmpl.clone().html( codeTmpl.clone().html(entitiesHtml(htmlCode)) )); - - var select = $('<select id="select-'+ gid+'">').change(function() { - var ecode = $(this).val(); - - jQuery.globalEval(demo.destroy); - jQuery.globalEval(ecode); - - sourceJs.html(preTmpl.html(ecode)); - }); - - var a = $('<a>View Source</a>').attr('href', 'javascript:void(0);').addClass('link-view-source').click(function() { - el = this; - codesBox.slideToggle("slow", function(){ - var text = $(el).text(); - if(/view source/i.test(text)) { - $(el).text("Hide Source"); - } else { - $(el).text("View Source"); - } - }); - }); - - demoBox.append( - detailsHtml, descBox, uiHtmlRendered, optionsBox.append( - select, a, '<br>', codesBox.append('<br>JavaScript:<br><br>', sourceJs, 'HTML:<br><br>', sourceHtml) - ) - ); - - // population select with the demo options - $.each(demo.options, function(x, o) { - if (o && o.desc) { - select.append($('<option>' + o.desc + '</option>').val(o.source)); - // eval the first source of <select> - if (!x) { - sourceJs.html(preTmpl.html(o.source)); - jQuery.globalEval(o.source); - } - } - }); - - // fire renderEnd callback to direct-html-render - if (typeof demo.html != 'object' && model.onRenderEnd) model.onRenderEnd.apply(window); - - }); -}; - -var loadDemo = function(comp) { - $('#containerDemo').html("<img src='img/loading.gif'>"); - - $("#containerDemo").ajaxError(function(request, settings){ - $(this).html("Ops, there is no template file for this component."); - }); - - $.get(comp+'.html', function(data) { - $('#containerDemo').html(data); - }); -}; \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.accordion.data.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,35 +0,0 @@ -<ul id="accordionDemo" class="ui-accordion-container" style="width: 200px;"> - <li> - <span class="ui-accordion-left"></span> - <a href='#' class="ui-accordion-link"> - Test 1 - <span class="ui-accordion-right"></span> - </a> - <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - </div> - </li> - <li> - <span class="ui-accordion-left"></span> - <a href='#' class="ui-accordion-link">Test 2<span class="ui-accordion-right"></span></a> - <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - </div> - </li> - <li> - <span class="ui-accordion-left"></span> - <a href='#' class="ui-accordion-link">Test 3<span class="ui-accordion-right"></span></a> - <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - </div> - </li> - <li> - <span class="ui-accordion-left"></span> - <a href='#' class="ui-accordion-link">Test 4<span class="ui-accordion-right"></span></a> - <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - </div> - </li> - <li> - <span class="ui-accordion-left"></span> - <a href='#' class="ui-accordion-link">Test 5<span class="ui-accordion-right"></span></a> - <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - </div> - </li> -</ul> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.accordion.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,33 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Accordion Demos', - - desc: 'Simple accordion', - - demos: [ - - { - title: 'Simple accordion', - html: { url: 'ui.accordion.data.html' }, - destroy: '$("#accordionDemo").accordion("destroy");', - - options: [ - { desc: 'Simple Accordion', source: '$("#accordionDemo").accordion();' }, - { desc: 'Simple Accordion Mouse over', source: '$("#accordionDemo").accordion({event: "mouseover"});' } - ] - } - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.dialog.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,42 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Dialog Demos', - - demos: [ - - { - title: 'Simple Dialog', - html: '<div id="divDialog">Dialog Text...</div>', - destroy: '$("#divDialog").dialog("destroy");', - - options: [ - { desc: 'Simple Dialog', source: '$("#divDialog").dialog();' } - ] - } -/* - { - title: 'Simple image drag', - html: '<img id="dragImage" src="img/puppy.jpg" style="width: 228px; height:157px;">', - destroy: '$("#dragImage").draggable("destroy");', - - options: [ - { desc: 'Simple Drag', source: '$("#dragImage").draggable();' }, - { desc: 'Simple Drag on axis x', source: '$("#dragImage").draggable({axis:"x"});' } - ] - } -*/ - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
--- a/jpoker/jquery/demos/functional/ui.draggable.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,85 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Draggable Demos', - - demos: [ - - { - title: 'Drag div element', - desc: 'With few lines of code you could make a div draggable. You can try more options on the fly!', - html: '<div id="divDrag" class="draggable">Drag me</div><br>', - destroy: '$("#divDrag").draggable("destroy");', - options: [ - { desc: 'Simple Drag', source: '$("#divDrag").draggable();' }, - { desc: 'Dragging elements in a Region', source: '$("#divDrag").draggable({ containment: "parent" });' }, - { desc: 'Axis x', source: '$("#divDrag").draggable({ axis: "x" });' }, - { desc: 'Axis y', source: '$("#divDrag").draggable({ axis: "y" });' }, - { desc: 'Axis x, Change cursor', source: '$("#divDrag").draggable({ axis: "x", cursor: "move" });' }, - { desc: 'Cursor position [top/left]', source: '$("#divDrag").draggable({ cursorAt: {top: 2, left: 2 } });' }, - { desc: 'Cursor position [right/bottom]', source: '$("#divDrag").draggable({ cursorAt: {bottom: 20, right: 14} });' }, - { desc: 'Drag on a Grid', source: '$("#divDrag").draggable({ grid: [50, 50] });' }, - { desc: 'Using a helper clone', source: '$("#divDrag").draggable({ helper: "clone" });' }, - { desc: 'Change the opacity', source: '$("#divDrag").draggable({ opacity: 0.40 });' }, - { desc: 'Drag and Revert to the original position', source: '$("#divDrag").draggable({ revert: true, helper: "clone" });' } - ] - }, - - { - title: 'Drag with a handle', - desc: 'Drag element by a handle.', - html: '<div id="draggable-handle-div" class="draggable"><div class="drag-handle"></div>Drag me</div>', - destroy: '$("#draggable-handle-div").draggable("destroy");', - - options: [ - { desc: 'Drag using a handle', source: '$("#draggable-handle-div").draggable({ handle: "div" });' }, - { desc: 'Drag using a handle with a helper', source: '$("#draggable-handle-div").draggable({ helper: "clone", handle: "div" });' } - ] - }, - - { - title: 'Drag prevention for pre-defined elements', - desc: 'You can change elements to not drag the parent.', - html: '<div id="draggable-dragPrevention" class="draggable"><a href="#">Drag me</a><br><input type="text" value="select me" style="width: 90px; font-size: 10px;" /></div>', - destroy: '$("#draggable-dragPrevention").draggable("destroy");', - - options: [ - { desc: 'Drag using a handle', source: '$("#draggable-dragPrevention").draggable({ dragPrevention: "a,input,textarea" });' }, - { desc: 'Drag using a handle with a helper', source: '$("#draggable-dragPrevention").draggable({ helper: "clone", dragPrevention: "a,input,textarea" });' } - ] - }, - - { - title: 'Simple image drag', - desc: 'You also can make images draggable!', - html: '<img id="dragImage" src="img/puppy.jpg" style="width: 228px; height:157px;">', - destroy: '$("#dragImage").draggable("destroy");', - - options: [ - { desc: 'Using a helper clone', source: '$("#dragImage").draggable({ helper: "clone" });' }, - { desc: 'Simple Drag', source: '$("#dragImage").draggable();' }, - { desc: 'Axis x', source: '$("#dragImage").draggable({ axis: "x" });' }, - { desc: 'Axis y', source: '$("#dragImage").draggable({ axis: "y" });' }, - { desc: 'Axis x, Change cursor', source: '$("#dragImage").draggable({ axis: "x", cursor: "move" });' }, - { desc: 'Cursor position [top/left]', source: '$("#dragImage").draggable({ cursorAt: {top: 2, left: 2 } });' }, - { desc: 'Cursor position [right/bottom]', source: '$("#dragImage").draggable({ cursorAt: {bottom: 20, right: 14} });' }, - { desc: 'Drag on a Grid', source: '$("#dragImage").draggable({ grid: [50, 50] });' }, - { desc: 'Change the opacity', source: '$("#dragImage").draggable({ opacity: 0.40 });' }, - { desc: 'Drag and Revert to the original position', source: '$("#dragImage").draggable({ revert: true, helper: "clone" });' } - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.droppable.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,87 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Doppable Demos', - - demos: [ - - { - title: 'Droppable', - desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!', - html: { url: 'ui.droppable.photos.html' }, - destroy: '$(".droppable-photos-container").droppable("destroy");', - options: [ - { - desc: 'Photo manager', - source: '$(".droppable-photos-container").droppable({ accept: ".img_content", drop: function(ev, ui) { ui.draggable.clone().fadeOut("fast", function() { $(this).fadeIn("fast") }).appendTo($(this).empty()); } });' - } - ] - }, - - { - title: 'Droppable', - desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!', - html: '<div class="block">.block</div><div class="draggable red">.red</div><div class="draggable green">.green</div><div class="drop">Drop on me!<br><br></div>', - destroy: '$(".drop").droppable("destroy");', - options: [ - { - desc: 'Accept all, Active Class', - source: '$(".drop").droppable({ accept: ".block, .red, .green", activeClass: "droppable-active", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Only accept .block', - source: '$(".drop").droppable({ accept: ".block", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Only accept .red', - source: '$(".drop").droppable({ accept: ".red", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Only accept .green', - source: '$(".drop").droppable({ accept: ".green", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Accept all, Hover Class', - source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "droppable-hover", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Accept all, Mouse tolerance', - source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "pointer", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Accept all, Touch tolerance', - source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "touch", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Accept all, Activate/Deactivate callbacks', - source: '$(".drop").droppable({ accept: ".block, .red, .green, .red, .green", activate: function(ev, ui) { $(this).append("Activate! "); }, deactivate: function(ev, ui) { $(this).append("Deactivate! "); }});' - }, - { - desc: 'Accept all, Over/Out callbacks', - source: '$(".drop").droppable({ accept: ".block, .red, .green", over: function(ev, ui) { $(this).append("Over! "); }, out: function(ev, ui) { $(this).append("Out! "); }});' - } - ] - } - ], - - onRenderEnd: function() { - $(".block, .green, .red").draggable({helper: "clone"}); - - $('ul.droppable-gallery img').addClass('img_content').draggable({ - helper: 'clone' - }); - - } - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.droppable.photos.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,17 +0,0 @@ -<div id="droppablePhotos" style="min-height: 130px; min-height:130px; height:auto !important; zoom:1;"> - - <ul class="droppable-gallery"> - <li class="droppable-img-content"> - <img src="../real-world/photo-manager/img/thumbs/P1010020.JPG" alt="Tatry 1" title="Drag me!" /> - </li> - <li class="droppable-img-content"> - <img src="../real-world/photo-manager/img/thumbs/P1010039.JPG" alt="Tatry 3" title="Drag me!" /> - </li> - <li class="droppable-img-content"> - <img src="../real-world/photo-manager/img/thumbs/P1010044.JPG" alt="Tatry 4" title="Drag me!" /> - </li> - </ul> - - <div class="droppable-photos-container" style="text-align: center;">Drop here!</div> - -</div> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.resizable.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,47 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Resizable Demos', - - demos: [ - - { - title: 'Image Resizing', - desc: 'Try resize images! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoree.', - html: '<img id="resizebleImage" src="img/puppy.jpg">', - destroy: '$("#resizebleImage").resizable("destroy");', - - options: [ - { desc: 'All handles', source: '$("#resizebleImage").resizable({ handles: "all"});' }, - { desc: 'Transparent Axis', source: '$("#resizebleImage").resizable({ transparent:true });' }, - { desc: 'Transparent Axis, minWidth', source: '$("#resizebleImage").resizable({ transparent:true, minWidth: 100 });' }, - { desc: 'Transparent Axis 3', source: '$("#resizebleImage").resizable({ transparent:true });' } - ] - }, - - { - title: 'Textarea Resizing', - desc: 'Try <b>resize textarea</b>! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoree.', - html: '<textarea id="resizebleTextarea">I am a textarea!</textarea>', - destroy: '$("#resizebleTextarea").resizable("destroy");', - options: [ - { desc: 'Simple Resizing', source: '$("#resizebleTextarea").resizable();' }, - { desc: 'Transparent Axis 2', source: '$("#resizebleTextarea").resizable({ transparent:true });' }, - { desc: 'Transparent Axis 3', source: '$("#resizebleTextarea").resizable({ transparent:true });' } - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.selectable.data.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,8 +0,0 @@ -<ul id="selectable-example" style="list-style:none; height: 40px; cursor: default;"> - <li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>MacBook Pro</li> - <li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>iMac</li> - <li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>MacBook</li> - <li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>Time Capsule</li> - <li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>Apple Cinema Display</li> - <li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>Mac mini</li> -</ul> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.selectable.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,33 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Selectable Demos', - - demos: [ - - { - title: 'Selectable', - desc: 'With few lines of code you could have selectable elements. You can try more options on the fly!', - html: { url: 'ui.selectable.data.html' }, - destroy: '$("#selectable-example").selectable("destroy");', - options: [ - { - desc: 'Make a simple selectable list', - source: '$("#selectable-example").selectable();' - } - ] - } - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.sortable.ex1.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,41 +0,0 @@ -<div class="sortable-container"> - - <div id="example1"> - - <button onclick="$('#selectedUsers').sortable('enable')">Enable</button> - <button onclick="$('#selectedUsers').sortable('disable')">Disable</button> - <button onclick="alert($('#selectedUsers').sortable('serialize'))">Serialize!</button> - <button onclick="alert($('#selectedUsers').sortable('toArray'))">ID's to Array!</button> - - - <br><br> - - <div style="min-height: 110px; min-height:110px; height:auto !important;"> - - Selected users - - <ul id="selectedUsers" style="cursor: hand; cursor: pointer;"> - <li id='user_Susan'>Susan</li> - <li id='user_Beth'>Beth</li> - <li id='user_Bob'>Bob</li> - <li id='user_Edward'>Edward</li> - <li id='user_Kate'>Kate</li> - </ul> - - <br> - - User list - - <ul id="userList" style="cursor: hand; cursor: pointer;"> - <li id='user_Jack'>Jack</li> - <li id='user_John'>John</li> - <li id='user_Marry'>Marry</li> - <li id='user_Claire'>Claire</li> - <li id='user_Daniel'>Daniel</li> - </ul> - - </div> - - </div> - -</div> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.sortable.ex2.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,25 +0,0 @@ -<div class="sortable-container"> - - <div id="example2"> - - <ul id="nestedList" style="cursor: hand; cursor: pointer;"> - <li>Drag us</li> - <li>around</li> - <li>and change - <ul> - <li>Lorem</li> - <li>Ipsum</li> - </ul> - </li> - <li>our</li> - <li>positions - <ul> - <li>Something else</li> - <li>Foo bar</li> - </ul> - </li> - </ul> - - </div> - -</div> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.sortable.ex3.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,19 +0,0 @@ -<div class="sortable-container"> - - <div id="example3"> - - <div style="min-height: 50px; min-height:50px; height:auto !important;"> - - <ul id="placeholderSortable" style="list-style-position: inside; height: 30px; cursor: hand; cursor: pointer;"> - <li id='user_Jack' style="float: left;">Jack</li> - <li id='user_John' style="float: left;">John</li> - <li id='user_Marry' style="float: left;">Marry</li> - <li id='user_Claire' style="float: left;">Claire</li> - <li id='user_Daniel' style="float: left;">Daniel</li> - </ul> - - </div> - - </div> - -</div> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.sortable.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,61 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Sortable Demos', - - demos: [ - - { - title: 'Sortable', - desc: 'With few lines of code you could have sortable elements. You can try more options on the fly!', - html: { url: 'ui.sortable.ex1.html' }, - destroy: '$("#selectedUsers").sortable("destroy");', - options: [ - { - desc: 'Make a simple sortable list', - source: - '$("#selectedUsers").sortable({ connectWith: ["#userList"] }); ' + - '$("#userList").sortable({ connectWith: ["#selectedUsers"] });' - } - ] - }, - - { - title: 'Sortable', - desc: 'Nested list', - html: { url: 'ui.sortable.ex2.html' }, - destroy: '$("#nestedList").sortable("destroy");', - options: [ - { - desc: 'Nested list, itens li, revert true, tree true.', - source: '$("#nestedList").sortable({ items: "li", revert: true, tree: true });' - } - ] - }, - - { - title: 'Sortable', - desc: 'Floating, with defined placeholder class', - html: { url: 'ui.sortable.ex3.html' }, - destroy: '$("#placeholderSortable").sortable("destroy");', - options: [ - { - desc: 'Floating, with defined placeholder class', - source: '$("#placeholderSortable").sortable({ placeholder: "ui-selected", revert: true });' - } - ] - } - - ] - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script> \ No newline at end of file
--- a/jpoker/jquery/demos/functional/ui.tabs.ex1.html Tue Jul 01 18:25:22 2008 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,35 +0,0 @@ -<div id="tabsEx1"> - - <button onclick="$('#tabsEx1 > ul').tabs('add', '#appended-tab', 'New Tab');">Add new tab</button> - <button onclick="$('#tabsEx1 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);">Insert tab</button> - <button onclick="$('#tabsEx1 > ul').tabs('disable', 1);">Disable tab 2</button> - <button onclick="$('#tabsEx1 > ul').tabs('enable', 1);">Enable tab 2</button> - <button onclick="$('#tabsEx1 > ul').tabs('select', 2);">Select tab 3</button> - - <br><br> - - <ul style="height: 30px;"> - <li><a href="#fragment-1"><span>One</span></a></li> - <li><a href="#fragment-2"><span>Two</span></a></li> - <li><a href="#fragment-3"><span>Three</span></a></li> - </ul> - <div id="fragment-1"> - <p>First tab is active by default</p> - </div> - <div id="fragment-2"> - <p><b>Second tab is active</b></p><br> - <p>Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:</p><br> - <ol> - <li>If a fragment identifier (hash) in the URL of the page refers to the id of a tab panel of a tab interface the corresponding tab will become the initial tab.</li> - <li>Same if you use the cookie option to save the latest selected tab in.</li> - <li>Last not least you can set the selected tab by attaching the selected tab class - class (default: "ui-tabs-selected") to one of the <code>li</code> elements - representing a single tab.</li> - </ol> - </div> - <div id="fragment-3"> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
