@@ -125,7 +125,8 @@ <% end %> <%= header 'Control.ContextMenu' %> -<%= introduction 'Contextual menus for Prototype.' %> +<%= introduction 'Pure JavaScript/CSS contextual menus for Prototype.' %> +<% @title = 'Control.ContextMenu : Pure JavaScript/CSS contextual menus for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_contextmenu.rhtml @@ -46,6 +46,7 @@ <% end %> <%= header 'Control.ProgressBar' %> <%= introduction 'CSS based progress bar widget for Prototype.' %> +<% @title = 'Control.ProgressBar : CSS based progress bar widget for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_progressbar.rhtml @@ -64,6 +64,7 @@ <%= header 'Control.Rating' %> <%= introduction 'Unobtrusive CSS based rating widget for Prototype.' %> +<% @title = 'Control.Rating : Unobtrusive CSS based rating widget for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_rating.rhtml @@ -94,6 +94,7 @@ <%= header 'Control.ScrollBar' %> <%= introduction 'Pure JavaScript/CSS scroll bars for Prototype.' %> +<% @title = 'Control.ScrollBar : Pure JavaScript/CSS scroll bars for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_scrollbar.rhtml @@ -1,5 +1,6 @@ <%= header 'Control.Selection' %> <%= introduction 'Programmable object selection API for Prototype.' %> +<% @title = 'Control.Selection : Programmable object selection API for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_selection.rhtml @@ -208,6 +208,7 @@ <%= header 'Control.SelectMultiple' %> <%= introduction 'Unobtrusive select multiple input alternative for Prototype.' %> +<% @title = 'Control.SelectMultiple : Unobtrusive select multiple input alternative for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_selectmultiple.rhtml @@ -141,6 +141,7 @@ <%= header 'Control.Tabs' %> <%= introduction 'Unobtrusive CSS tabs for Prototype.' %> +<% @title = 'Control.Tabs : Unobtrusive CSS tabs for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_tabs.rhtml @@ -178,6 +178,7 @@ <%= header 'Control.TextArea' %> <%= introduction 'Cross browser textarea manipulation for Prototype.' %> +<% @title = 'Control.TextArea : Cross browser textarea manipulation for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_textarea.rhtml @@ -171,6 +171,7 @@ <%= header 'Control.Window' %> <%= introduction 'Windows, Modals, LightBoxes and Tooltips for Prototype.' %> +<% @title = 'Control.Window : Windows, Modals, LightBoxes and Tooltips for Prototype' %> <% tabs 'main_tabs' do |tabs| %> <% tabs.tab 'tutorial', 'Tutorial' %> app/views/page/control/_window.rhtml @@ -1 +1,935 @@ -index \ No newline at end of file +<%= header 'LivePipe UI' %> +<%= introduction 'High Quality Controls &amp; Widgets for Prototype' %> +<% paragraph 'Introduction' do %>LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. <a href="http://www.opensource.org/licenses/mit-license.php">MIT licensed</a> and actively maintained.<% end %> +<% paragraph 'Event Oriented Programming' do %><% link_to 'Object.Event', core_url %> introduces a mechanism to create and observe events on any object, not just DOM Elements. This is used by all <%= link_to 'controls', controls_url %>, and allows for fine grained control of your user interface. Making use of this is as easy as:<% end %> +<% javascript do %> + var w = new Control.Window(); + w.observe('afterOpen',function(){ + //insert your custom logic here + }); +<% end %> + +<% paragraph 'Controls' do %><% end %> + +<% tabs 'main_tabs' do |tabs| %> + <% tabs.tab 'tabs', 'Tabs' %> + <% tabs.tab 'window', 'Window' %> + <% tabs.tab 'textarea', 'TextArea' %> + <% tabs.tab 'select_multiple', 'SelectMultiple' %> + <% tabs.tab 'rating', 'Rating' %> + <% tabs.tab 'progressbar', 'ProgressBar' %> + <% tabs.tab 'scrollbar', 'ScrollBar' %> +<% end %> + +<% section 'tabs' do %> + <p>You're already using the simplest example of <%= link_to 'Control.Tabs', control_tabs_url %>. This control can also be customized to a variety of different navigation types. The image switcher below is one of many possibilities.</p> + <% content_for :head do %> + <style> + .tabbed_images { + list-style:none; + margin:0; + padding:0; + clear:both; + } + + .tabbed_images li { + list-style:none; + float:left; + margin:0; + padding:0; + } + + .tabbed_images li a { + border:1px solid #ccc; + display:block; + float:left; + margin:0 10px 0 0; + } + + .tabbed_images li a.active, + .tabbed_images li a:hover { + border:1px solid #333; + } + + .tabbed_images li a img { + border:none; + padding:2px; + margin:0; + } + + #image_1, + #image_2, + #image_3, + #image_4, + #image_5 { + margin-top:10px; + padding:2px; + border:1px solid #ccc; + } + </style> + <% end %> + + <ul class="tabbed_images" id="tabs_example"> + <li><a href="#image_1"><img src="/stylesheets/sample_images/tabs_example_1_small.jpg"/></a></li> + <li><a href="#image_2"><img src="/stylesheets/sample_images/tabs_example_2_small.jpg"/></a></li> + <li><a href="#image_3"><img src="/stylesheets/sample_images/tabs_example_3_small.jpg"/></a></li> + <li><a href="#image_4"><img src="/stylesheets/sample_images/tabs_example_4_small.jpg"/></a></li> + </ul> + <img src="/stylesheets/sample_images/tabs_example_1_big.jpg" id="image_1"/> + <img src="/stylesheets/sample_images/tabs_example_2_big.jpg" id="image_2"/> + <img src="/stylesheets/sample_images/tabs_example_3_big.jpg" id="image_3"/> + <img src="/stylesheets/sample_images/tabs_example_4_big.jpg" id="image_4"/> + <script> + new Control.Tabs('tabs_example',{ + hover: true + }) + </script> +<% end %> +<% section 'window' do %> + <p>The table below shows a few of the possible customizations of <%= link_to 'Control.Window', control_window_url %>.</p> + <% examples_table false,'Name','Options' do |examples| %> + <% examples.item :name => '<a href="#centered">Centered Window / Content on Page</a>', :options => "className: 'simple_window', closeOnClick: true" %> + <% examples.item :name => '<a href="#relative">Relative Window / Dynamic Content</a>', :options => "position: 'relative', className: 'simple_window', closeOnClick: true" %> + <% examples.item :name => '<a href="#hoverbox">HoverBox</a>', :options => "position: 'relative', offsetLeft: 75, width: 175, hover: true, className: 'tooltip'" %> + <% examples.item :name => '<a href="?ajax">Relative Window / Content from Ajax</a>', :options => "offsetLeft: 150, position: 'relative', className: 'simple_window', closeOnClick: 'container'" %> + <% examples.item :name => '<a href="/stylesheets/sample_images/tabs_example_1_big.jpg" id="styled_window_one" title="Piha Beach, New Zealand">Draggable / Styled Window One</a>', :options => "window_factory() options" %> + <% examples.item :name => '<a href="/stylesheets/sample_images/tabs_example_2_big.jpg" id="styled_window_two" title="Pioneer Mountains, Idaho">Draggable / Styled Window Two</a>', :options => "window_factory() options" %> + <% examples.item :name => '<a href="/stylesheets/sample_images/tabs_example_3_big.jpg" id="modal">Modal Window</a>', :options => "fade: true, overlayOpacity: 0.75, className: 'modal'" %> + <% examples.item :name => '<a href="#" id="tooltip">Tooltip</a>', :options => "className: 'tooltip'" %> + <% end %> + <% window_css = capture do %> + #control_overlay { + background-color:#000; + } + + .modal { + background-color:#fff; + padding:10px; + border:1px solid #333; + } + + .tooltip { + border:1px solid #000; + background-color:#fff; + height:25px; + width:200px; + font-family:"Lucida Grande",Verdana; + font-size:10px; + color:#333; + } + + .simple_window { + width:250px; + height:50px; + border:1px solid #000; + background-color:#fff; + padding:10px; + text-align:left; + font-family:"Lucida Grande",Verdana; + font-size:12px; + color:#333; + } + + .window { + background-image:url("/stylesheets/window_background.png"); + background-position:top left; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + padding:10px; + font-family:"Lucida Grande",Verdana; + font-size:13px; + font-weight:bold; + color:#fff; + text-align:center; + min-width:150px; + min-height:100px; + } + + .window .window_contents { + margin-top:10px; + width:100%; + height:100%; + } + + .window .window_header { + text-align:center; + } + + .window .window_title { + margin-top:-7px; + margin-bottom:7px; + font-size:11px; + cursor:move; + } + + .window .window_close { + display:block; + position:absolute; + top:4px; + left:5px; + height:13px; + width:13px; + background-image:url("/stylesheets/window_close.gif"); + cursor:pointer; + cursor:hand; + } + <% end %> + <% window_js = capture do %> + //Centered Window / Content on Page + var centered = new Control.Window($(document.body).down('[href=#centered]'),{ + className: 'simple_window', + closeOnClick: true + }); + + //Relative Window / Dynamic Content + var relative = new Control.Window($(document.body).down('[href=#relative]'),{ + position: 'relative', + className: 'simple_window', + closeOnClick: true + }); + relative.container.insert('This content was inserted with JavaScript.'); + + //HoverBox + var relative = new Control.Window($(document.body).down('[href=#hoverbox]'),{ + position: 'relative', + hover: true, + offsetLeft: 75, + width: 175, + className: 'tooltip' + }); + + //Relative Window / Content from Ajax + var ajax = new Control.Window($(document.body).down('[href=?ajax]'),{ + className: 'simple_window', + closeOnClick: 'container', + offsetLeft: 150 + }); + + //styled examples use the window factory for a shared set of behavior + var window_factory = function(container,options){ + var window_header = new Element('div',{ + className: 'window_header' + }); + var window_title = new Element('div',{ + className: 'window_title' + }); + var window_close = new Element('div',{ + className: 'window_close' + }); + var window_contents = new Element('div',{ + className: 'window_contents' + }); + var w = new Control.Window(container,Object.extend({ + className: 'window', + closeOnClick: window_close, + draggable: window_header, + insertRemoteContentAt: window_contents, + afterOpen: function(){ + window_title.update(container.readAttribute('title')) + } + },options || {})); + w.container.insert(window_header); + window_header.insert(window_title); + window_header.insert(window_close); + w.container.insert(window_contents); + return w; + }; + + var styled_window_one = window_factory($('styled_window_one')); + + var styled_window_two = window_factory($('styled_window_two')); + + //Modal Window + var modal = new Control.Modal($('modal'),{ + overlayOpacity: 0.75, + className: 'modal', + fade: true + }); + + //ToolTip + var tooltip = new Control.ToolTip($('tooltip'),'Windows can also act as tool tips.',{ + className: 'tooltip' + }); + <% end %> + <% content_for :head do %> + <script> + document.observe('dom:loaded',function(){ + <%= window_js %> + }); + </script> + <style> + <%= window_css %> + </style> + <% end %> + <% content_for :body do %> + <div id="centered">This content was already on the page.</div> + <div id="hoverbox">Windows can act as hover boxes.</div> + <% end %> +<% end %> + +<% section 'textarea' do %> + <p>The example below demonstrates both components of <%= link_to 'Control.TextArea', control_textarea_url %> as it is used in other areas of the site. This implementation is specific to the <a href="http://daringfireball.net/projects/markdown/">Markdown</a> formatting language.</p> + <% textarea_css = capture do %> + #markdown_example { + width:100%; + height:200px; + } + + #markdown_toolbar { + position:relative; + list-style:none; + border:1px solid #d7d7d7; + background-color:#F6F6F6; + margin:0; + padding:0; + height:18px; + margin-bottom:2px; + } + + #markdown_toolbar li { + list-style:none; + margin:0; + padding:0; + float:left; + } + + #markdown_toolbar li a { + width:24px; + height:16px; + float:left; + display:block; + background-image:url("/stylesheets/markdown_icons.gif"); + border:1px solid #fff; + border-right-color:#d7d7d7; + } + + #markdown_toolbar li a:hover { + border-color:#900; + } + + #markdown_toolbar li span { + display:none; + } + + #markdown_toolbar li a#markdown_help_button { + position:absolute; + top:0; + right:0; + border-left-color:#d7d7d7; + border-right-color:#fff; + } + + #markdown_toolbar li a#markdown_help_button:hover { + border-left-color:#900; + border-right-color:#900; + } + + #markdown_italics_button { background-position: 0 -119px; } + #markdown_bold_button { background-position: 0 -102px; } + #markdown_link_button { background-position: 0 0; } + #markdown_image_button { background-position: 0 -170px; } + #markdown_unordered_list_button { background-position: 0 -34px; } + #markdown_ordered_list_button { background-position: 0 -51px; } + #markdown_quote_button { background-position: 0 -68px; } + #markdown_code_button { background-position: 0 -136px; } + #markdown_help_button { background-position: 0 -153px; } + #markdown_heading_button { background-position: 0 -85px; } + <% end %> + + <% textarea_js = capture do %> + //setup + var textarea = new Control.TextArea('markdown_example'); + var toolbar = new Control.TextArea.ToolBar(textarea); + toolbar.container.id = 'markdown_toolbar'; //for css styles + + //preview of markdown text + var converter = new Showdown.converter; + var converter_callback = function(value){ + $('markdown_formatted').update(converter.makeHtml(value)); + } + converter_callback(textarea.getValue()); + textarea.observe('change',converter_callback); + + //buttons + toolbar.addButton('Italics',function(){ + this.wrapSelection('*','*'); + },{ + id: 'markdown_italics_button' + }); + + toolbar.addButton('Bold',function(){ + this.wrapSelection('**','**'); + },{ + id: 'markdown_bold_button' + }); + + toolbar.addButton('Link',function(){ + var selection = this.getSelection(); + var response = prompt('Enter Link URL',''); + if(response == null) + return; + this.replaceSelection('[' + (selection == '' ? 'Link Text' : selection) + '](' + (response == '' ? 'http://link_url/' : response).replace(/^(?!(f|ht)tps?:\/\/)/,'http://') + ')'); + },{ + id: 'markdown_link_button' + }); + + toolbar.addButton('Image',function(){ + var selection = this.getSelection(); + var response = prompt('Enter Image URL',''); + if(response == null) + return; + this.replaceSelection('.replace(/^(?!(f|ht)tps?:\/\/)/,'http://') + ')'); + },{ + id: 'markdown_image_button' + }); + + toolbar.addButton('Heading',function(){ + var selection = this.getSelection(); + if(selection == '') + selection = 'Heading'; + this.replaceSelection("\n" + selection + "\n" + $R(0,Math.max(5,selection.length)).collect(function(){'-'}).join('') + "\n"); + },{ + id: 'markdown_heading_button' + }); + + toolbar.addButton('Unordered List',function(event){ + this.collectFromEachSelectedLine(function(line){ + return event.shiftKey ? (line.match(/^\*{2,}/) ? line.replace(/^\*/,'') : line.replace(/^\*\s/,'')) : (line.match(/\*+\s/) ? '*' : '* ') + line; + }); + },{ + id: 'markdown_unordered_list_button' + }); + + toolbar.addButton('Ordered List',function(event){ + var i = 0; + this.collectFromEachSelectedLine(function(line){ + if(!line.match(/^\s+$/)){ + ++i; + return event.shiftKey ? line.replace(/^\d+\.\s/,'') : (line.match(/\d+\.\s/) ? '' : i + '. ') + line; + } + }); + },{ + id: 'markdown_ordered_list_button' + }); + + toolbar.addButton('Block Quote',function(event){ + this.collectFromEachSelectedLine(function(line){ + return event.shiftKey ? line.replace(/^\> /,'') : '> ' + line; + }); + },{ + id: 'markdown_quote_button' + }); + + toolbar.addButton('Code Block',function(event){ + this.collectFromEachSelectedLine(function(line){ + return event.shiftKey ? line.replace(/ /,'') : ' ' + line; + }); + },{ + id: 'markdown_code_button' + }); + + toolbar.addButton('Help',function(){ + window.open('http://daringfireball.net/projects/markdown/dingus'); + },{ + id: 'markdown_help_button' + }); + <% end %> + + <% content_for :head do %> + <style> + <%= textarea_css %> + </style> + <script src="/javascripts/showdown.js"></script> + <script> + document.observe('dom:loaded',function(){ + <%= textarea_js %> + }); + </script> + <% end %> + <textarea id="markdown_example">Select some text or enter your own, and play with the buttons above.</textarea> + <%= subhead 'Preview' %> + <div id="markdown_formatted"></div> +<% end %> + +<% section 'select_multiple' do %> + <p><%= link_to 'Control.SelectMultiple', control_selectmultiple_url %> provides a sensible alternative to the traditional select multiple input that attaches to an existing select input on any page.</p> + + <% selectmultiple_js = capture do %> + + //complex example, note how we need to pass in different CSS selectors because of the complex HTML structure + var select_multiple_two = new Control.SelectMultiple('select_multiple_two','select_multiple_two_options',{ + checkboxSelector: 'table.select_multiple_table tr td input[type=checkbox]', + nameSelector: 'table.select_multiple_table tr td.select_multiple_name', + afterChange: function(){ + if(select_multiple_two && select_multiple_two.setSelectedRows) + select_multiple_two.setSelectedRows(); + } + }); + + //adds and removes highlighting from table rows + select_multiple_two.setSelectedRows = function(){ + this.checkboxes.each(function(checkbox){ + var tr = $(checkbox.parentNode.parentNode); + tr.removeClassName('selected'); + if(checkbox.checked) + tr.addClassName('selected'); + }); + }.bind(select_multiple_two); + select_multiple_two.checkboxes.each(function(checkbox){ + $(checkbox).observe('click',select_multiple_two.setSelectedRows); + }); + select_multiple_two.setSelectedRows(); + + //link open and closing + $('select_multiple_two_open').observe('click',function(event){ + $(this.select).style.visibility = 'hidden'; + new Effect.BlindDown(this.container,{ + duration: 0.3 + }); + Event.stop(event); + return false; + }.bindAsEventListener(select_multiple_two)); + $('select_multiple_two_close').observe('click',function(event){ + $(this.select).style.visibility = 'visible'; + new Effect.BlindUp(this.container,{ + duration: 0.3 + }); + Event.stop(event); + return false; + }.bindAsEventListener(select_multiple_two)); + <% end %> + + <% complex_example = capture do %> + <!-- Complex example HTML --> + <div id="select_two_container"> + <select id="select_multiple_two"> + <option value="tigers">Tigers</option> + <option value="lions">Lions</option> + <option value="kitties">Kitties</option> + <option value="lygers">Lygers</option> + <option value="pumas">Pumas</option> + <option value="cheetahs">Cheetahs</option> + </select> + <a href="" id="select_multiple_two_open">Select Multiple</a> + <div style="display:none;" id="select_multiple_two_options" class="select_multiple_container"> + <div class="select_multiple_header">Select Multiple Felines</div> + <table cellspacing="0" cellpadding="0" class="select_multiple_table" width="100%"> + <tr class="odd"> + <td class="select_multiple_name">Tigers</td> + <td class="select_multiple_checkbox"><input type="checkbox" value="tigers"/></td> + </tr> + <tr class="even"> + <td class="select_multiple_name">Lions</td> + <td class="select_multiple_checkbox"><input type="checkbox" value="lions"/></td> + </tr> + <tr class="odd"> + <td class="select_multiple_name">Kitties</td> + <td class="select_multiple_checkbox"><input type="checkbox" value="kitties"/></td> + </tr> + <tr class="even"> + <td class="select_multiple_name">Lygers</td> + <td class="select_multiple_checkbox"><input type="checkbox" value="lygers"/></td> + </tr> + <tr class="odd"> + <td class="select_multiple_name">Pumas</td> + <td class="select_multiple_checkbox"><input type="checkbox" value="pumas"/></td> + </tr> + <tr class="even"> + <td class="select_multiple_name">Cheetahs</td> + <td class="select_multiple_checkbox"><input type="checkbox" value="cheetahs"/></td> + </tr> + </table> + <div class="select_multiple_submit"><input type="button" value="Done" id="select_multiple_two_close"/></div> + </div> + </div> + <% end %> + + <% selectmultiple_css = capture do %> + /* CSS is mostly for the complex example */ + + #select_multiple_one, + #select_multiple_two { + width:200px; + } + + #select_two_container { + position:relative; + } + + .select_multiple_submit { + background-image:url("/stylesheets/popup_footer.gif"); + background-image:top center; + background-repeat:repeat-x; + padding:10px; + height:22px; + text-align:right; + } + + .select_multiple_label { + margin-left:5px; + font-family:"Lucida Grande",Verdana; + font-size:11px; + } + + .select_multiple_container { + width:300px; + position:absolute; + top:0; + left:0; + z-index:500; + border:1px solid #222; + border-top:none; + } + + .select_multiple_container .select_multiple_header { + background-image:url("/stylesheets/black_background.gif"); + background-repeat:repeat-x; + background-position:top center; + color:#eee; + font-family:"Lucida Grande",Verdana; + font-weight:bold; + font-size:12px; + margin:0; + padding:7px 0 8px 10px; + background-color:#000; + } + + table.select_multiple_table td { + height:27px; + border-bottom:1px solid #ddd; + font-family:"Lucida Grande",Verdana; + color:#333; + font-size:11px; + } + + table.select_multiple_table tr.even { + background-color:#FCFCFC; + } + + table.select_multiple_table tr.odd { + background-color:#F7F7F7; + } + + table.select_multiple_table tr.selected { + background-image:none; + background-color:#D9E9FE; + } + + .select_multiple_name { + padding-left:15px; + font-weight:bold; + } + + .select_multiple_checkbox { + text-align:right; + } + + .select_multiple_checkbox input { + margin-right:15px; + } + <% end %> + + <% content_for :head do %> + <style> + <%= selectmultiple_css %> + </style> + <script> + document.observe('dom:loaded',function(){ + <%= selectmultiple_js %> + }); + </script> + <% end %> + + <%= complex_example %> + <br/><br/><br/><br/> +<% end %> + +<% section 'rating' do %> + <% rating_js = capture do %> + var rating_one = new Control.Rating('rating_one'); + var rating_two = new Control.Rating('rating_two',{value: 2.4}); + var rating_four = new Control.Rating('rating_four',{value: 4,rated: true}); + var rating_five = new Control.Rating('rating_five',{value: 6,rated: false,max:9}); + var rating_six = new Control.Rating('rating_six',{ + value: 6, + rated: false, + min: 3, + max: 12, + multiple: true, + reverse: true + }); + var rating_seven = new Control.Rating('rating_seven',{ + input: 'rating_seven_input', + multiple: true + }); + var rating_eight = new Control.Rating('rating_eight',{ + input: 'rating_eight_select', + multiple: true + }); + <% end %> + <% rating_css = capture do %> + .rating_container { + clear:both; + } + + .rating_container a { + float:left; + display:block; + width:25px; + height:25px; + border:0; + background-image:url("/stylesheets/rating.gif"); + } + + .rating_container a.rating_off { + background-position:0 0px; + } + + .rating_container a.rating_half { + background-position:0 -25px; + } + + .rating_container a.rating_on { + background-position:0 -50px; + } + + .rating_container a.rating_selected { + background-position:0 -75px; + } + <% end %> + + <% content_for :head do %> + <style> + <%= rating_css %> + </style> + <script> + document.observe('dom:loaded',function(){ + <%= rating_js %> + }); + </script> + <% end %> + <p><%= link_to 'Control.Rating', control_rating_url %> attaches to any div, and is easy to integrate with your existing Ajax applications. It can also interact with other form elements that are already on the page.</p> + <table width="100%" cellpadding="0" cellspacing="0" class="api_table"> + <thead> + <tr><td>Example</td><td class="right">Options</td></tr> + </thead> + <tbody> + <tr> + <td><div id="rating_one" class="rating_container"> + <a href="#" class="rating_on"></a> + <a href="#" class="rating_on"></a> + <a href="#" class="rating_half"></a> + <a href="#" class="rating_off"></a> + <a href="#" class="rating_off"></a> + </div></td> + <td class="right">{}</td> + </tr> + <tr> + <td><div id="rating_two" class="rating_container"></div></td> + <td class="right">{value: 2.4}</td> + </tr> + <tr> + <td><div id="rating_four" class="rating_container"></div></td> + <td class="right">{value: 4, rated: true}</td> + </tr> + <tr> + <td><div id="rating_five" class="rating_container"></div></td> + <td class="right">{value: 6, rated: false, max:9}</td> + </tr> + <tr> + <td><div id="rating_six" class="rating_container"></div></td> + <td class="right">{value: 6, rated: false, min: 3, max: 12, multiple: true, reverse: true}</td> + </tr> + <tr> + <td><div id="rating_seven" class="rating_container"></div><input id="rating_seven_input" value="2" style="width:50px;"/></td> + <td class="right">{input: 'rating_seven_input', multiple: true}</td> + </tr> + <tr> + <td><div id="rating_eight" class="rating_container"></div> + <select id="rating_eight_select"> + <option value="1">Bad</option> + <option value="2">Good</option> + <option value="3">Great</option> + <option value="4">Excellent</option> + <option value="5">Really Excellent</option> + </select></td> + <td class="right">{input: 'rating_eight_select', multiple: true}</td> + </tr> + </tbody> + </table> +<% end %> + +<% section 'progressbar' do %> + <p><%= link_to 'Control.ProgressBar', control_progressbar_url %> is a percentage based progress bar that can be set to grow in one of three ways: on a timed interval, when events in your application tell it to, or it can be set to poll a given URL.</p> + <% progress_bar_css = capture do %> + #progress_bar { + width:102px; + height:7px; + border:1px solid #ccc; + padding:0; + margin:0; + position:relative; + background-image:url("/stylesheets/progress_bar.gif"); + background-repeat:repeat-x; + } + + #progress_bar div { + background-color:#fff; + } + <% end %> + <% progress_bar_html = capture do %> + <div id="progress_bar"></div> + <div style="margin-top:10px;"> + <input type="button" value="Start" id="progress_bar_start"/> + <input type="button" value="Stop" id="progress_bar_stop"/> + <input type="button" value="Reset" id="progress_bar_reset"/> + <input type="button" value="+ 5%" id="progress_bar_step_5"/> + <input type="button" value="+ 25%" id="progress_bar_step_25"/> + </div> + <% end %> + <% progress_bar_js = capture do %> + var progress_bar = new Control.ProgressBar('progress_bar',{ + interval: 0.15 + }); + $('progress_bar_stop').observe('click',progress_bar.stop.bind(progress_bar)); + $('progress_bar_start').observe('click',progress_bar.start.bind(progress_bar)); + $('progress_bar_reset').observe('click',progress_bar.reset.bind(progress_bar)); + $('progress_bar_step_5').observe('click',progress_bar.step.bind(progress_bar,5)); + $('progress_bar_step_25').observe('click',progress_bar.step.bind(progress_bar,25)); + <% end %> + <% content_for :head do %> + <style> + <%= progress_bar_css %> + </style> + <script> + document.observe('dom:loaded',function(){ + <%= progress_bar_js %> + }); + </script> + <% end %> + <%= progress_bar_html %> + <br/><br/><br/><br/> +<% end %> + +<% section 'scrollbar' do %> + <% paragraph do %><%= link_to 'Control.ProgressBar', control_progressbar_url %> provides a pure JavaScript/CSS scroll bar implementation and includes mouse wheel support, a proportionally drawn handle, and can accommodate dynamic content and layout changes with the <b>recalculateLayout()</b> method.<% end %> + + <% scrollbar_css = capture do %> + #scrollbar_container { + position:relative; + width:500px; + } + + #scrollbar_track { + position:absolute; + top:0; + right:0; + height:100%; + width:10px; + background-color:transparent; + cursor:move; + } + + #scrollbar_handle { + width:10px; + background-color:#5c92e7; + cursor:move; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + opacity:0.9; + -moz-opacity:0.9; + } + + #scrollbar_content { + overflow:hidden; + width:485px; + height:250px; + } + <% end %> + <% scrollbar_js = capture do %> + var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track'); + + $('scroll_down_50').observe('click',function(event){ + scrollbar.scrollBy(-50); + event.stop(); + }); + + $('scroll_up_50').observe('click',function(event){ + scrollbar.scrollBy(50); + event.stop(); + }); + + $('scroll_top').observe('click',function(event){ + scrollbar.scrollTo('top'); + event.stop(); + }); + + $('scroll_bottom').observe('click',function(event){ + //to animate a scroll operation you can pass true + //or a callback that will be called when scrolling is complete + scrollbar.scrollTo('bottom',function(){ + if(typeof(console) != "undefined") + console.log('Finished scrolling to bottom.'); + }); + event.stop(); + }); + + $('scroll_second').observe('click',function(event){ + //you can pass a number or element to scroll to + //if you pass an element, it will be centered, unless it is + //near the bottom of the container + scrollbar.scrollTo($('second_subhead')); + event.stop(); + }); + + $('scroll_third').observe('click',function(event){ + //passing true will animate the scroll + scrollbar.scrollTo($('third_subhead'),true); + event.stop(); + }); + + $('scroll_insert').observe('click',function(event){ + $('scrollbar_content').insert('<p><b>Inserted: ' + $('repeat').innerHTML + '</b></p>'); + //you only need to call this if ajax or dom operations modify the layout + //this is automatically called when the window resizes + scrollbar.recalculateLayout(); + event.stop(); + }); + <% end %> + + <% content_for :head do %> + <script> + document.observe('dom:loaded',function(){ + <%= scrollbar_js %> + }); + </script> + <style> + <%= scrollbar_css %> + </style> + <% end %> + + <div style="float:right;"> + <h3>Scroll To...</h3> + <ul> + <li><a href="#" id="scroll_down_50">Up 50 Pixels</a></li> + <li><a href="#" id="scroll_up_50">Down 50 Pixels</a></li> + <li><a href="#" id="scroll_top">Top</a></li> + <li><a href="#" id="scroll_bottom">Bottom (Animated)</a></li> + <li><a href="#" id="scroll_second">Second Subhead</a></li> + <li><a href="#" id="scroll_third">Third Subhead (Animated)</a></li> + </ul> + </div> + <div id="scrollbar_container"> + <div id="scrollbar_track"><div id="scrollbar_handle"></div></div> + <div id="scrollbar_content"> + <h3>Use the Mouse Wheel or Handle to Scroll</h3> + <p>Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consectetuer. Phasellus molestie, sem vel laoreet pretium, arcu arcu rutrum eros, ac mattis felis ante at orci. Vivamus vel mauris. Ut porttitor, nunc eu tincidunt gravida, orci odio luctus mi, id venenatis dui nunc sit amet turpis. Mauris urna nisl, feugiat a, ultrices id, ultrices et, est. Nam eu felis non tortor luctus congue. Mauris consequat malesuada augue. Donec eu nibh in libero tempor aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sapien erat, imperdiet tincidunt, vestibulum eget, fringilla vel, odio. Ut risus. Ut pretium neque ac velit. Vivamus diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Nunc luctus fringilla mi. Nunc ultrices nisi ac urna.</p> + <h3 id="second_subhead">Convallis Felis ac Massa Accumsan</h3> + <p id="repeat">Phasellus faucibus adipiscing quam. Maecenas gravida, diam sit amet mollis accumsan, risus diam ornare leo, non sollicitudin lorem mi vitae ante. In at mi. In vestibulum nunc eleifend justo. Nullam semper. Nulla venenatis ornare ipsum. Phasellus pharetra. Suspendisse molestie. Fusce porta vulputate quam. Etiam vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas vulputate magna nec diam. Aliquam sagittis lectus a pede. Sed fermentum, risus non sollicitudin posuere, erat arcu iaculis nibh, eu faucibus sapien velit dapibus ipsum. Proin fringilla sapien sed dui.</p> + <h3 id="third_subhead">Eleifend Justo Nullam Semper</h3> + <p>Cras eros tellus, posuere at, condimentum eget, fringilla nec, lectus. Mauris ut enim. Quisque imperdiet rutrum elit. Curabitur in nunc. Sed pretium. Aliquam convallis. Proin venenatis. Proin sed magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc tincidunt. Nam vitae leo at urna dictum venenatis.</p> + <p>Cras iaculis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nisl. Duis quis enim at justo euismod accumsan. Duis mollis. Curabitur sed ante. Morbi bibendum iaculis ligula. Suspendisse aliquet est. Sed velit orci, sagittis non, posuere vitae, aliquet in, massa. Vestibulum egestas.</p> + </div> + </div> + <p><a href="#" id="scroll_insert">Insert Paragraph and recalculateLayout()</a></p> +<% end %> \ No newline at end of file app/views/page/index.rhtml b6616d3c33d03232a75a5453f375611e483ab3b7 Ryan Johnson arjini@gmail.com http://github.com/saucytiger/livepipe.net-documentation/commit/ad0961676fe8707c099e3a48a77c60027574d658 ad0961676fe8707c099e3a48a77c60027574d658 2008-06-11T18:24:32-07:00 2008-06-11T18:24:32-07:00 title changes + better index page 8daeeb209474f88b19e20b7d4851bb84be03bbd5 Ryan Johnson arjini@gmail.com