From: Eduardo Lundgren Date: Mon, 9 Jun 2008 06:20:15 +0000 (+0000) Subject: - Added functional demo application X-Git-Tag: 1.5.1~130 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=d185e8cc05d0b50b4f688e0e2bcba15f39b33f21;p=jquery-ui.git - Added functional demo application - Removed datepicker folder from functional demo folder --- diff --git a/demos/functional/css/base.css b/demos/functional/css/base.css new file mode 100644 index 000000000..3a9ca5931 --- /dev/null +++ b/demos/functional/css/base.css @@ -0,0 +1,961 @@ +/* Site + -------------------------------- */ + +html { + overflow-y: scroll; + background: #5f5f5f url('../images/html_bg.png') repeat-x scroll; +} + +body { + margin: 0; + padding: 0 0 20px; + background: transparent url('../images/body_bg.jpg') no-repeat center top; + min-height: 100%; + /* font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; */ + font-family: "Arial", "Helvetica", "Verdana", "sans-serif"; +} + +#wrapper { + margin: 0 auto; + width: 956px; + position: relative; + /* + background: url('../images/body_footer_bg.jpg') no-repeat center bottom; + padding-bottom: 365px; + */ +} + +#banner { + height: 125px; +} + +#content .bg { + opacity: 0; + -moz-opacity: 0; + filter: alpha(opacity=0); +} + +table.layout-grid a.disabled, table.layout-grid a.disabled:hover { + color: #aaa; + cursor: default; + text-decoration: line-through; +} + +div.notice { + background: #FFF1AF; + padding: 3px; + margin-bottom: 5px; + font-size: 12px; + border: 1px solid #EFD500; +} + + +/* Logo + -------------------------------- */ + +h1.logo { + position: absolute; + top: 55px; + left: 28px; + margin: 0; +} + +h1.logo, +h1.logo a { + width: 235px; + height: 55px; +} + +h1.logo a { + display: block; + background: url('../images/logo.gif') no-repeat; +} + +h1.logo a span { + display: none; +} + + +/* Dock + -------------------------------- */ + +#dock { + height: 25px; + float: left; + position: absolute; + top: 0; + right: 2px; +} + +#dock .left { + float: left; + width: 3px; + height: 25px; + background: url('../images/dock.png') no-repeat left top; +} + +#dock .right { + float: left; + width: 3px; + height: 25px; + background: url('../images/dock.png') no-repeat right top; +} + +#dock ul, +#dock ul li { + float: left; + list-style-type: none; + margin: 0; + padding: 0; +} + +#dock ul { + padding: 0 6px; + height: 25px; + background-color: #000; +} + +#dock ul li { + padding: 0 6px; + position: relative; +} + +#dock ul li a { + float: left; + display: block; + padding: 0 5px; + color: #ccc; + text-decoration: none; + font-size: 12px; + line-height: 22px; +} + +#dock ul li a:hover, +#dock ul li.selected a { + color: #fff; + border-bottom: 2px solid #ff9c08; +} + +#dock ul li.selected a { + font-weight: bold; +} + + +/* Navigation + -------------------------------- */ + +#navigation { + height: 41px; + float: left; + position: absolute; + top: 62px; + right: 0px; +} + +#navigation .left { + float: left; + width: 5px; + height: 41px; + /* background: url('../images/navigation.png') no-repeat left top; */ + background: url('../images/navigation_l.png') no-repeat left top; +} + +#ie6 #navigation .left { + background: transparent none; + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/navigation_l.png', sizingMethod='scale'); + zoom: 1; +} + +#navigation .right { + float: left; + width: 3px; + height: 41px; + background: url('../images/navigation.png') no-repeat right top; +} + +#navigation ul, +#navigation ul li { + float: left; + list-style-type: none; + margin: 0; + padding: 0; + font-size: 13px; + line-height: 38px; +} + +#navigation ul { + height: 41px; + background: url('../images/navigation.png') repeat-x 0 -41px; +} + +#navigation ul li a { + float: left; + display: block; + height: 41px; + padding: 0 18px; + color: #ccc; + text-decoration: none; + background: url('../images/navigation_s.png') no-repeat right top; +} + +#navigation ul li.selected a { + color: #fff; +} + +#navigation ul li.last a{ + background-image: none; +} + +#navigation ul li a:hover { + color: #fff; +} + + +/* Content + -------------------------------- */ + +#content-wrapper { + background: #FFF url('../images/content_bg.png') repeat-y 0 0; +} + +#content { + background: url('../images/content_body_bg.png') no-repeat 0 13px; + zoom: 1; +} + +.content-top { + font-size: 1px; + height: 13px; + background: url('../images/content_top_bg.png'); +} + +.content { + padding: 0 3px 0 3px; + overflow: hidden; +} + +#content .content { + min-height: 380px; + background: url('../images/dot.png') repeat-y 203px 0; +} + +#home #content .content, +#download #content .content, +#demos #content .content { + background: none; +} + +#ie6 #content .content { + height: 380px; + overflow-y: visible; +} + +/* Layout */ + +.content-head { + height: 74px; + border-bottom: 1px solid #ccc; + background-color: #fff; +} + +.content-head h2 { + float: left; + margin: 0; + padding: 20px 0 20px 24px; + color: #ff9c08; + font: normal 29px/30px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + letter-spacing: .5px; +} + +.content-head h2 span { + padding-right: 16px; + border-right: 1px solid #ccc; +} + +.content-head p { + margin: 0; + padding: 28px 0 0 12px; + float: left; + font: normal 15px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + letter-spacing: .5px; +} + + +/* Layout + -------------------------------- */ + +.themes { + background: url('../images/themes_bg.png') repeat-x scroll 0 -1px; +} + + +/* Layout + -------------------------------- */ + +.layout-grid { + width: 100%; +} + +.layout-grid td { + vertical-align: top; +} + +.layout-grid td.home { + background: url('../images/home_bg.jpg') no-repeat scroll right top; + height: 412px; + padding: 0 600px 0 24px; +} + +.layout-grid td.left-nav { + width: 200px; +} + +.layout-grid td.normal { + border-left: 1px solid #ccc; + padding: 20px 24px; + font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; +} + +.layout-grid td.demos { + background: url('../images/demos_bg.jpg') no-repeat; + height: 337px; + overflow: hidden; +} + +.layout-grid td.download { + background: url('../images/demos_bg.jpg') no-repeat; + height: 337px; +} + + +/* Home + -------------------------------- */ + +.home h3 { + margin: 0; + padding: 17px 0 11px 0; + color: #ff9c08; + font: normal 30px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + letter-spacing: .5px; +} + +.home p.large { + padding-bottom: 15px; + color: #000; + font: bold 13px/19px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + letter-spacing: .2px; + line-height: 16px; +} + +.home p { + margin: 0; + padding-bottom: 14px; + color: #333; + font: normal 11px/14px 'Trebuchet MS', 'Arial', 'Helvetica', sans-serif; +} + +.teaserbox { + position: absolute; + top: 265px; + left: 452px; + width: 450px; +} + +.teaserbox ul { + list-style-type: square; +} + +.teaserbox p { + margin: 5px; + padding: 0px; +} + +.teaserbox h4 { + margin-bottom: 0px; + position: relative; + left: 1px; + top: 1px; + color: #fff; +} + +.teaserbox h4 span { + position: absolute; + top: -1px; + left: -1px; + color: #000; +} + + +/* Side Menu + -------------------------------- */ + +.section { + padding: 24px 23px 8px 22px; + border-bottom: 1px dashed #ccc; +} + + + +ul.side-menu, +ul.side-menu li, +p.side-menu-title { + list-style-type: none; + margin: 0; + padding: 0; + letter-spacing: 0.75pt; +} + +ul.side-menu li a { + font: normal 11px 'Arial', 'Helvetica', sans-serif; + text-decoration: none; + color: #000; +} + +ul.side-menu li a:hover { + color: #e87b10; +} + +p.side-menu-title { + font: bold 15px 'Arial', 'Helvetica', sans-serif; + color: #e87b10; +} + +ul.side-menu { + padding: 5px 2px 0; +} + + +/* Normal + -------------------------------- */ + +.normal h3, +.normal h4 { + margin: 0; + font-weight: normal; +} + +.normal h3 { + padding: 0 0 9px; +} + +.normal h4 { + padding-bottom: 21px; + border-bottom: 1px dashed #999; + font-size: 12px; + font-weight: bold; +} + +.normal .pull-quote { + padding: 6px 0; + line-height: 20px; + text-transform: uppercase; + font-size: 12px; +} + +.normal p { + font-size: 12px; +} + + +/* Download + -------------------------------- */ + +td.download { + /*height: 650px !important;*/ +} + +.download .click-to-download { + position: relative; + margin: 61px 3px 0; + padding: 0 19px; + background: url('../images/download-top.gif') no-repeat left top; + width: 270px; + height: 226px; + float: left; + font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; +} + +.download .click-to-download .bg-footer, +.download .click-to-download .bg { + position: absolute; + bottom: 0; + left: 0; + width: 308px; + height: 102px; + background: url('../images/download-bottom.png') no-repeat left top; +} + +.download .click-to-download .bg { + background-position: left bottom; +} + +.download .click-to-download h3 { + margin: 0; + padding: 14px 0 10px; + font-weight: normal; + font-size: 21px; +} + +.download .click-to-download h3 span { + font-size: 10px; +} + +.download .click-to-download p { + margin: 0; + padding: 12px 0 0; + font-size: 12px; +} + +.download .click-to-download a.download { + display: block; + position: absolute; + left: 65px; + top: 136px; + height: 38px !important; + width: 240px; + font-size: 16px; + font-weight: bold; +} + +.download .click-to-download a.download:link { + color: #333; + text-decoration: none; +} + +.download .click-to-download a.download:visited { + color: #333; + text-decoration: none; +} + +.download .builder { + position: absolute; + top: 475px; + right: 16px; + width: 612px; + font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + font-size: 12px; + opacity: 0; + filter: alpha(opacity=0); +} + +.download .builder h3 { + margin: 0; + padding: 5px 10px 10px; + font-weight: normal; + font-size: 21px; +} + +.download .builder p { + margin: 0; + padding: 0 0 0 12px; + font-size: 12px; +} + +.download .builder .top { + height: 8px; + background-image: url('../images/builder_top.png'); +} + +.download .builder .bottom { + height: 8px; + background-image: url('../images/builder_bottom.png'); +} + +.download .builder .content { + background-image: url('../images/builder_bg.png'); +} + +.download .p { + padding: 5px 10px 10px; +} + +.components-list { + font-size: 12px; +} + +.components-list table { + width: 100%; +} + +.components-list th, +.components-list td { + text-align: left; + vertical-align: middle !important; + padding: 3px; +} + +.components-list th { + line-height: 22px; + padding: 0 0 4px 2px; + cursor: default; +} + +.components-list label { + padding-left: 5px; +} + +.list-section { + border-bottom: 1px dashed #bbb; + background: #EAEAEA; + padding: 10px 10px 10px 10px; + width: 715px; + line-height: 18px; +} + +.list-padding { + padding: 5px; + line-height: 18px; +} + +.list-component { + background-color: #F4F4F4; +} + +.list-component-selected { + font-weight: bold; +} + +.text-bg-up, +.text-bg-down { + background:#FFFFFF url(../images/text-bg-up.gif) repeat-x scroll 0pt; + background-position:0px 0px; +} + +.text-bg-down { background:#FFFFFF url(../images/text-bg-down.gif) repeat-x scroll 0pt !important; } + +.ui-transparent { + opacity:0; + filter:Alpha(Opacity=0); +} +.text-align-right { + text-align: right !important; +} +.text-align-left { + text-align: left !important; +} +.text-align-center { + text-align: center !important; +} +.label-files { + background: url(../images/group.png) no-repeat; + padding-left: 19px; + line-height: 20px; + cursor: pointer; +} + +.download #total-size { + width: 160px; + margin-left: 90px; + text-align: right; +} + +.big { + font-size: 13px; + font-weight: bold; +} + +.title-big { + font-size: 14px; + font-weight: bold; + letter-spacing: .3px; +} + + +/* Launch Pad + -------------------------------- */ + +#launch-pad { + height: 127px; + overflow: hidden; + background: url('../images/launch-pad_bg.png') repeat-y center top; + padding: 11px 0px 11px 16px; +} + +#launch-pad .launch-pad-button { + float: left; + width: 255px; + height: 106px; + background: url('../images/launch-pad_button.png') no-repeat; + padding: 21px 22px 0 23px; + margin: 0 6px; + cursor: pointer; + cursor: hand; + position: relative; +} + +#ie6 #launch-pad .launch-pad-button { + height: 106px; +} + +#launch-pad .launch-pad-button .bg { + position: absolute; + top: 0; + left: 0; + width: 310px; + height: 127px; + background: url('../images/launch-pad_button.png') no-repeat left bottom; +} + +#launch-pad .launch-pad-button h3, +#launch-pad .launch-pad-button p { + position: relative; +} + +#launch-pad .launch-pad-button.left { + margin-left: 0; +} + +#launch-pad .launch-pad-button.right { + margin-right: 0; +} + +#launch-pad .launch-pad-button h3 { + margin: 0; + padding: 0 0 4px; + color: #ff9c08; + font: normal 18px 'Arial', 'Helvetica', sans-serif; + letter-spacing: .8px +} + +#launch-pad .launch-pad-button h3 a, +#launch-pad .launch-pad-button h3 a:hover { + color: #ff9c08; + text-decoration: none; +} + +#launch-pad .launch-pad-button p { + margin: 0; + padding: 0 2px; + color: #cbcbcb; + font: normal 11px/15px 'Arial', 'Helvetica', sans-serif; + letter-spacing: .2px; +} + + +/* Footer + -------------------------------- */ + +#footer { + height: 45px; + padding: 10px 0; + position: relative; +} + +#footer .inner { + position: relative; + z-index: 2; +} + +#ie6 #footer .inner { + zoom: 1; +} + +#footer .bg { + background: url('../images/footer_bg.png') no-repeat left top; + width: 100%; + height: 65px; + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#ie6 #footer .bg { + background: transparent none; + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/footer_bg.png', sizingMethod='scale'); + zoom: 1; +} + +#footer p { + margin: 0; + padding: 0; + color: #5e5e5e; + font: normal 9px 'Arial', 'Helvetica', sans-serif; + text-transform: uppercase; +} + +#footer p a { + color: #bbb; +} + +#footer span.first { + display: block; + float: left; + padding: 6px 0 0 16px; +} + +#footer .block { + display: block; + float: left; +} + +#footer .block span, +#footer span.empty { + display: none; +} + +#footer .liferay { + margin: 3px 22px 0px 3px; + background: url('../images/icon_liferay.gif'); + width: 98px; + height: 22px; + border: 0; +} + +#footer .adobe { + margin: 2px 0 0 0; + background: url('../images/icon_adobe.png'); + width: 28px; + height: 28px; +} + +/* Demoflow + -------------------------------- */ + +div.demoflow-button-left { + position: absolute; + left: -3px; + top: 371px; + background: url('../images/demos_arrows.png') no-repeat left top; + width: 52px; + height: 45px; + cursor: pointer; cursor: hand; + z-index: 999; +} + +div.demoflow-button-left .bg { + background: url('../images/demos_arrows.png') no-repeat left bottom; + width: 52px; + height: 45px; + position: absolute; + top: 0; + left: 0; +} + +div.demoflow-button-right { + position: absolute; + right: -4px; + top: 371px; + background: url('../images/demos_arrows.png') no-repeat right top; + width: 52px; + height: 45px; + cursor: pointer; cursor: hand; + z-index: 999; +} + +div.demoflow-button-right .bg { + position: absolute; + left: 0; + top: 0; + background: url('../images/demos_arrows.png') no-repeat right bottom; + width: 52px; + height: 45px; +} + +.demoflow { + position: relative; + top: 22px; + left: 0; + width: 950px; + height: 337px; +} + +.demoflow div { + float: left; + height: 100px; + width: 75px; + cursor: pointer; cursor: hand; +} + +.ie .demoflow div { + zoom: 1; +} + +.demoflow div { + border: 1px solid #666; +} + + +.demoflow div:hover { + border: 1px solid #666; + /*opacity: 1 !important;*/ +} + +.demoflow div img { + height: 100%; + width: 100%; +} + +.demoflow div.shadow { + height: 100%; + width: 100%; + position: absolute; + top: 0px; + left: 0px; + background-color: black; +} + +.ie .demoflow div.shadow { + display: none; +} + +/* Functional Demos */ + +#links { + float:left; + width:155px; + font-size: 13px; +} + +#functional ul { + list-style: none; + padding: 0; + margin: 0; +} + +#functional #links ul { + margin-top:10px; + line-height:1.2em; +} + +#functional #links ul li a{ + border-bottom: 1px solid #F4F4F4; + display:block; + padding: 3px 3px 3px 12px; + font-size: 95%; + text-decoration: none; + color: #000; + height: 15px; +} + +#functional #links ul li a:hover, +#functional #links ul li a:focus { + background: #EAEAEA; + border-color: #BBBBBB; +} + +/* About */ + +div.about ul { + list-style-type: square; + margin-bottom: 50px; +} + +div.about ul li h5 { + font-size: 16px; + margin-bottom: 10px; +} + +div.about ul li a:link, div.about ul li a:visited { + text-decoration: none; + color: #666; +} + +div.about ul li a:hover { + color: #000; +} + +div.about ul li p { + padding-right: 40px; + padding-left: 20px; +} \ No newline at end of file diff --git a/demos/functional/css/chilli-recipes.css b/demos/functional/css/chilli-recipes.css new file mode 100644 index 000000000..76330713b --- /dev/null +++ b/demos/functional/css/chilli-recipes.css @@ -0,0 +1,98 @@ +/* +=============================================================================== +Chili is the jQuery code highlighter plugin +............................................................................... + Copyright 2007 / Andrea Ercolino +------------------------------------------------------------------------------- +LICENSE: http://www.opensource.org/licenses/mit-license.php +WEBSITE: http://noteslog.com/chili/ +=============================================================================== +*/ + +/* +this file shows how to configure a static setup +it must be linked from the head of a page like: + +*/ + +.html .php { color: red; font-weight: bold; } +.html .tag { color: navy; font-weight: bold; } +.html .aname { color: purple; } +.html .avalue { color: fuchsia; } +.html .mlcom { color: green; } +.html .entity { color: teal; } + +.javascript .mlcom { color: #4040c2; } +.javascript .com { color: green; } +.javascript .regexp { color: maroon; } +.javascript .string { color: teal; } +.javascript .keywords { color: navy; font-weight: bold; } +.javascript .global { color: blue; } +.javascript .numbers { color: red; } + +.mysql .function { color: #e17100; } +.mysql .keyword { color: navy; font-weight: bold; } +.mysql .mlcom { color: gray; } +.mysql .com { color: green; } +.mysql .number { color: red; } +.mysql .hexnum { color: red; font-weight: bold; } +.mysql .string { color: purple; } +.mysql .quid { color: fuchsia; } +.mysql .id { color: maroon; } +.mysql .value { color: gray; font-weight: bold; } +.mysql .variable { color: #4040c2; } + +.php .com { color: green; } +.php .const1 { color: red; } +.php .const2 { color: red; } +.php .func { color: #e17100; } +.php .global { color: red; } +.php .keyword { color: navy; font-weight: bold; } +.php .mlcom { color: gray; } +.php .name { color: maroon; } +.php .number { color: red; } +.php .string1 { color: purple; } +.php .string2 { color: fuchsia; } +.php .value { color: gray; font-weight: bold; } +.php .variable { color: #4040c2; } + +.css .mlcom { color: #4040c2; } +.css .color { color: green; } +.css .string { color: teal; } +.css .attrib { color: navy; font-weight: bold; } +.css .value { color: blue; } +.css .number { color: red; } + + + +/* +=============================================================================== +Chili is the jQuery code highlighter plugin +............................................................................... + Copyright 2007 / Andrea Ercolino +------------------------------------------------------------------------------- +LICENSE: http://www.opensource.org/licenses/mit-license.php +WEBSITE: http://noteslog.com/chili/ +=============================================================================== +*/ + +.javascript .mlcom { color: #4040c2; } +.javascript .com { color: green; } +.javascript .regexp { color: maroon; } +.javascript .string { color: teal; } +.javascript .keywords { color: navy; font-weight: bold; } +.javascript .global { color: blue; } +.javascript .numbers { color: red; } + +.javascript .jquery .object { color: red; font-weight: bold; } +.javascript .jquery .private { background-color: #CCCC99; } +.javascript .jquery .attributes { background-color: #CCCC00; } +.javascript .jquery .traversing { background-color: #CCCC00; } +.javascript .jquery .manipulation { background-color: #CCCC00; } +.javascript .jquery .utilities { background-color: #CCCCFF; } +.javascript .jquery .core { background-color: #7F7FFF; color: white; } +.javascript .jquery .ajax { background-color: #7F7FFF; color: #FFD400; } +.javascript .jquery .css { background-color: #999900; color: white; } +.javascript .jquery .effects { background-color: #FFAA00; } +.javascript .jquery .events { background-color: #FFD400; } + diff --git a/demos/functional/css/functional_demos.css b/demos/functional/css/functional_demos.css new file mode 100644 index 000000000..ddbf82f6f --- /dev/null +++ b/demos/functional/css/functional_demos.css @@ -0,0 +1,205 @@ +/*************************************/ +/* Viewer: models */ + +#containerDemo { + width: 690px; + zoom: 1; +} +#containerDemo .ui-wrapper { + margin:0px 10px; +} +#containerDemo .ui-details { + margin:0px 10px 10px 0px; + border-bottom: 2px solid #bbb; +} + +#containerDemo .menutitle { + font-size: 14px; + letter-spacing: .5px; + padding-bottom: 3px; +} + +#containerDemo .ui-demo-options { + background: #f2f2f2; + border-bottom: 1px #bbb solid; + padding: 10px; + margin: 10px 0 20px 0; + width: 690px; + _width: 670px; + font-size: 12px; +} + +.sortable-container li { + margin: 0; + padding: 0; + border: 0; + outline: 0; + list-style: circle; + background: #EAEAEA; + font-size: 12px; + margin:2px; + padding: 3px; + width: 100px; +} + +.colored { + display: block; + background: #fff; + margin-top: 5px; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; + white-space: pre; + padding: 10px; + font-size: 11px; + font-family: Courier New; + width: 640px; + overflow-x: auto; + overflow-y: hidden; + /*min height hack*/ + * min-height:25px; + * height:auto !important; + * height:25px; + * padding: 15px; +} + +#containerDemo .ui-demo-description { + margin-bottom: 10px; + font-size: 12px; +} +#containerDemo .link-view-source { + margin-left: 5px; +} +#containerDemo .proxy { + border: 1px dashed #000; +} + +#containerDemo .lightblue-bg{ + background: #E8EEF7; +} +#containerDemo .blue-bg { + background: #C3D9FF; +} +#containerDemo .green-bg { + background: #74DD82; +} +#containerDemo a { + color:#000; +} + +.snippet { + white-space: nowrap; + overflow: hidden; + empty-cells: show; +} + +/*************************************/ +/* Components */ + +.proxy { + border: 1px dashed #000/*#3399ff*/; +} + +.resizable { + width: 100px; height: 100px; + border: 1px solid #000; + padding: 10px; + font-size: 12px; +} + +.draggable { + width: 100px; + height: 40px; + top: 10px; + right: 10px; + background-color: #68BFEF; + border: 2px solid #0090DF; + padding: 5px; + margin: 0 0 12px 12px; + font-size: 12px; +} + +div.drag-handle +{ + cursor: move; + background-color: #0090DF; + 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 #example2 li { + background: none; +} + +.sortable-container #example3 li { + list-style: none; +} +.droppable-photos-container { + border: 2px #ccc dotted; + width:144px; + height: 108px; + float:left; + margin-top: 2px; + padding: 2px; +} +.droppable-img-content { + float: left; padding: 5px; +} + +#accordionDemo, select { + position: relative; + font-size: 12px; +} + +.ui-accordion-data { + padding: 10px; +} diff --git a/demos/functional/datepicker/debug.html b/demos/functional/datepicker/debug.html deleted file mode 100644 index 0edb43275..000000000 --- a/demos/functional/datepicker/debug.html +++ /dev/null @@ -1,21 +0,0 @@ - - - Only core files for easy debug - - - - - - - - - - - - - - \ No newline at end of file diff --git a/demos/functional/datepicker/demo/img/active-bg.gif b/demos/functional/datepicker/demo/img/active-bg.gif deleted file mode 100644 index d608c5469..000000000 Binary files a/demos/functional/datepicker/demo/img/active-bg.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/ar.gif b/demos/functional/datepicker/demo/img/ar.gif deleted file mode 100644 index f34c90f5c..000000000 Binary files a/demos/functional/datepicker/demo/img/ar.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/au.gif b/demos/functional/datepicker/demo/img/au.gif deleted file mode 100644 index db005b4c7..000000000 Binary files a/demos/functional/datepicker/demo/img/au.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/br.gif b/demos/functional/datepicker/demo/img/br.gif deleted file mode 100644 index 8b8bf147d..000000000 Binary files a/demos/functional/datepicker/demo/img/br.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/calendar.gif b/demos/functional/datepicker/demo/img/calendar.gif deleted file mode 100644 index d0abaa7c0..000000000 Binary files a/demos/functional/datepicker/demo/img/calendar.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/calendar2.gif b/demos/functional/datepicker/demo/img/calendar2.gif deleted file mode 100644 index 519a1fd4a..000000000 Binary files a/demos/functional/datepicker/demo/img/calendar2.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/cn.gif b/demos/functional/datepicker/demo/img/cn.gif deleted file mode 100644 index 5482753d6..000000000 Binary files a/demos/functional/datepicker/demo/img/cn.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/dark-bg.gif b/demos/functional/datepicker/demo/img/dark-bg.gif deleted file mode 100644 index 1dea48a8f..000000000 Binary files a/demos/functional/datepicker/demo/img/dark-bg.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/hover-bg.gif b/demos/functional/datepicker/demo/img/hover-bg.gif deleted file mode 100644 index fbf94fc2c..000000000 Binary files a/demos/functional/datepicker/demo/img/hover-bg.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/id.gif b/demos/functional/datepicker/demo/img/id.gif deleted file mode 100644 index d7f4ab8a3..000000000 Binary files a/demos/functional/datepicker/demo/img/id.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/ie.gif b/demos/functional/datepicker/demo/img/ie.gif deleted file mode 100644 index 827c498d2..000000000 Binary files a/demos/functional/datepicker/demo/img/ie.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/ke.gif b/demos/functional/datepicker/demo/img/ke.gif deleted file mode 100644 index e352177c7..000000000 Binary files a/demos/functional/datepicker/demo/img/ke.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/lb.gif b/demos/functional/datepicker/demo/img/lb.gif deleted file mode 100644 index f204918fe..000000000 Binary files a/demos/functional/datepicker/demo/img/lb.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/next.gif b/demos/functional/datepicker/demo/img/next.gif deleted file mode 100644 index be0959b1b..000000000 Binary files a/demos/functional/datepicker/demo/img/next.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/normal-bg.gif b/demos/functional/datepicker/demo/img/normal-bg.gif deleted file mode 100644 index bdb506869..000000000 Binary files a/demos/functional/datepicker/demo/img/normal-bg.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/nz.gif b/demos/functional/datepicker/demo/img/nz.gif deleted file mode 100644 index 86b89cb27..000000000 Binary files a/demos/functional/datepicker/demo/img/nz.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/prev.gif b/demos/functional/datepicker/demo/img/prev.gif deleted file mode 100644 index 95d840f47..000000000 Binary files a/demos/functional/datepicker/demo/img/prev.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/se.gif b/demos/functional/datepicker/demo/img/se.gif deleted file mode 100644 index 7301c598e..000000000 Binary files a/demos/functional/datepicker/demo/img/se.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/tab.png b/demos/functional/datepicker/demo/img/tab.png deleted file mode 100644 index 01c8ab417..000000000 Binary files a/demos/functional/datepicker/demo/img/tab.png and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/us.gif b/demos/functional/datepicker/demo/img/us.gif deleted file mode 100644 index 39c472e26..000000000 Binary files a/demos/functional/datepicker/demo/img/us.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/img/za.gif b/demos/functional/datepicker/demo/img/za.gif deleted file mode 100644 index 197cbd888..000000000 Binary files a/demos/functional/datepicker/demo/img/za.gif and /dev/null differ diff --git a/demos/functional/datepicker/demo/jquery.localisation.js b/demos/functional/datepicker/demo/jquery.localisation.js deleted file mode 100644 index b11e37835..000000000 --- a/demos/functional/datepicker/demo/jquery.localisation.js +++ /dev/null @@ -1,64 +0,0 @@ -/* http://keith-wood.name/localisation.html - Localisation assistance for jQuery v1.0.2. - Written by Keith Wood (kbwood@iprimus.com.au) June 2007. - Under the Creative Commons Licence http://creativecommons.org/licenses/by/3.0/ - Share or Remix it but please Attribute the author. */ - -(function($) { // Hide scope, no $ conflict - -/* Load applicable localisation package(s) for one or more jQuery packages. - Assumes that the localisations are named -.js - and loads them in order from least to most specific. - For example, $.localise('jquery-calendar'); - with the browser set to 'en-US' would attempt to load - jquery-calendar-en.js and jquery-calendar-en-US.js. - Also accepts an array of package names to process. - Optionally specify whether or not to include the base file, - the desired language, and/or the timeout period, e.g. - $.localise(['jquery-calendar', 'jquery-timeentry'], - {loadBase: true; language: 'en-AU', timeout: 300}); */ -$.localise = function(pkg, settings) { - var saveSettings = {async: $.ajaxSettings.async, timeout: $.ajaxSettings.timeout}; - $.ajaxSetup({async: false, timeout: (settings && settings.timeout ? settings.timeout : 500)}); - var localiseOne = function(pkg, lang) { - if (settings && settings.loadBase) { - $.getScript(pkg + '.js'); - } - if (lang.length >= 2) { - $.getScript(pkg + '-' + lang.substring(0, 2) + '.js'); - } - if (lang.length >= 5) { - $.getScript(pkg + '-' + lang.substring(0, 5) + '.js'); - } - }; - var lang = normaliseLang(settings && settings.language ? settings.language : $.defaultLanguage); - if (isArray(pkg)) { - for (i = 0; i < pkg.length; i++) { - localiseOne(pkg[i], lang); - } - } - else { - localiseOne(pkg, lang); - } - $.ajaxSetup(saveSettings); -}; - -/* Retrieve the default language set for the browser. */ -$.defaultLanguage = normaliseLang(navigator.language ? navigator.language /* Mozilla */ : - navigator.userLanguage /* IE */); - -/* Ensure language code is in the format aa-AA. */ -function normaliseLang(lang) { - lang = lang.replace(/_/, '-').toLowerCase(); - if (lang.length > 3) { - lang = lang.substring(0, 3) + lang.substring(3).toUpperCase(); - } - return lang; -} - -/* Determine whether an object is an array. */ -function isArray(a) { - return (a.constructor && a.constructor.toString().match(/\Array\(\)/)); -} - -})(jQuery); diff --git a/demos/functional/datepicker/demo/ui.datepicker.alt.css b/demos/functional/datepicker/demo/ui.datepicker.alt.css deleted file mode 100644 index d07a6e7bf..000000000 --- a/demos/functional/datepicker/demo/ui.datepicker.alt.css +++ /dev/null @@ -1,158 +0,0 @@ -/* Alternate UI date picker styles */ -#ui-datepicker-div, .ui-datepicker-inline { - font-family: Arial, Helvetica, sans-serif; - font-size: 14px; - padding: 0; - margin: 0; - background: #d8d8d8 url(../img/dark-bg.gif) repeat; - color: #008; - width: 220px; -} -#ui-datepicker-div { - display: none; - border: 1px solid #008; - z-index: 9999; /*must have*/ -} -.ui-datepicker-inline { - float: left; - display: block; - border: 0; -} -.ui-datepicker-dialog { - padding: 5px !important; - border: 4px ridge #88c !important; -} -button.ui-datepicker-trigger { - width: 25px; -} -img.ui-datepicker-trigger { - margin: 2px; - vertical-align: middle; -} -.ui-datepicker-prompt { - float: left; - padding: 2px; - xbackground: #d8d8d8 url(../img/dark-bg.gif) repeat; - background: transparent; - color: #008; -} -* html .ui-datepicker-prompt { - width: 185px; -} -.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker { - clear: both; - float: left; - width: 100%; -} -.ui-datepicker-control, .ui-datepicker-links { - font-weight: bold; - font-size: 80%; - letter-spacing: 1px; -} - -.ui-datepicker-links label { /* disabled links */ - padding: 2px 5px; - color: #88c; -} -.ui-datepicker-clear, .ui-datepicker-prev { - float: left; - width: 34%; -} -.ui-datepicker-current { - float: left; - width: 30%; - text-align: center; -} -.ui-datepicker-close, .ui-datepicker-next { - float: right; - width: 34%; - text-align: right; -} -.ui-datepicker-header { - padding: 1px 0 3px; - - text-align: center; - font-weight: bold; - height: 1.3em; -} -.ui-datepicker-header select { - background: #d8d8d8 url(../img/dark-bg.gif) repeat; - color: #008; - border: 0px; - font-weight: bold; -} -.ui-datepicker { - background: #f8f8f8 url(../img/normal-bg.gif) repeat; - color: #008; - text-align: center; - font-size: 100%; -} -.ui-datepicker a { - display: block; - width: 100%; -} -.ui-datepicker-titleRow { - background: #d8d8d8 url(../img/dark-bg.gif) repeat; -} -.ui-datepicker-weekEndCell { - background: #d8d8d8 url(../img/dark-bg.gif) repeat; -} -.ui-datepicker-daysCellOver { - background: #3c75c4 url(../img/active-bg.gif) repeat; -} -.ui-datepicker-unselectable { - color: #88c; -} -.ui-datepicker-today { - font-weight: bold; -} -.ui-datepicker-currentDay { - background: #3c75c4 url(../img/active-bg.gif) repeat; -} - -/* ________ CALENDAR LINKS _______ - -** Reset link properties and then override them with !important */ -#ui-datepicker-div a, .ui-datepicker-inline a { - cursor: pointer; - margin: 0; - padding: 0; - background: none; - color: #000; -} -.ui-datepicker-control a, .ui-datepicker-links a { - padding: 2px 5px !important; -} -.ui-datepicker-control a:hover { - background: #9dbae1 url(../img/hover-bg.gif) repeat !important; -} -.ui-datepicker-links a:hover, .ui-datepicker-titleRow a:hover { - background: #9dbae1 url(../img/hover-bg.gif) repeat !important; -} - -/* ___________ MULTIPLE MONTHS _________*/ - -.ui-datepicker-multi .datepicker { - border: 1px solid #008; -} -.ui-datepicker-oneMonth { - float: left; - width: 220px; -} -.ui-datepicker-newRow { - clear: left; -} - -/* ___________ IE6 IFRAME FIX ________ */ - -.ui-datepicker-cover { - display: none; /*sorry for IE5*/ - display/**/: block; /*sorry for IE5*/ - position: absolute; /*must have*/ - z-index: -1; /*must have*/ - filter: mask(); /*must have*/ - top: -4px; /*must have*/ - left: -4px; /*must have*/ - width: 200px; /*must have*/ - height: 200px; /*must have*/ -} \ No newline at end of file diff --git a/demos/functional/datepicker/demo/ui.datepicker.demo.css b/demos/functional/datepicker/demo/ui.datepicker.demo.css deleted file mode 100644 index 2920d857f..000000000 --- a/demos/functional/datepicker/demo/ui.datepicker.demo.css +++ /dev/null @@ -1,53 +0,0 @@ -#tab_menu1 { margin:0.5em 0 0 0; padding:0; font-size:1em; } -.tab_group1 { clear:left; padding-top:0; display:none; } -.demoLabel { float: left; width: 18em; } -.ar_day { color: white !important; background: #eee url(img/ar.gif) no-repeat center !important; } -.au_day { color: blue !important; background: #eee url(img/au.gif) no-repeat center !important; } -.br_day { color: green !important; background: #eee url(img/br.gif) no-repeat center !important; } -.cn_day { color: red !important; background: #eee url(img/cn.gif) no-repeat center !important; } -.id_day { color: white !important; background: #eee url(img/id.gif) no-repeat center !important; } -.ie_day { color: white !important; background: #eee url(img/ie.gif) no-repeat center !important; } -.ke_day { color: red !important; background: #eee url(img/ke.gif) no-repeat center !important; } -.lb_day { color: white !important; background: #eee url(img/lb.gif) no-repeat center !important; } -.nz_day { color: blue !important; background: #eee url(img/nz.gif) no-repeat center !important; } -.se_day { color: blue !important; background: #eee url(img/se.gif) no-repeat center !important; } -.us_day { color: white !important; background: #eee url(img/us.gif) no-repeat center !important; } -.za_day { color: green !important; background: #eee url(img/za.gif) no-repeat center !important; } -code { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; } -pre { clear: both; padding-left: 2em; background: #eee; } -#embedButton { width: 7em; } -#embedButton + img { position: relative; left: -21px; top: -1px; } -.tabs { - list-style: none; -} -.tabs li { - float: left; -} -.tabs li a { - display:block; - padding: 0.4em .75em; - margin: 0; - border-left: 1px solid #fff; - border-right: 1px solid #ddd; - cursor: pointer; - cursor: hand; - text-decoration: none; - color: #eee; - border-top: 1px solid #F9F9F9; - background: #78A5CE; -} -.tabs li a:hover, .tabs li a.over { - border-top: 1px solid #000; - background: #333; -} -.tab_group1 h3 { - font-weight: bold; - margin-top:15px; - border-bottom: 1px solid #ddd; -} -.nextFeature { - margin-top: 15px; -} -ol li { - margin-top: 1em; -} \ No newline at end of file diff --git a/demos/functional/datepicker/demo/ui.datepicker.demo.js b/demos/functional/datepicker/demo/ui.datepicker.demo.js deleted file mode 100644 index 3d7d9b640..000000000 --- a/demos/functional/datepicker/demo/ui.datepicker.demo.js +++ /dev/null @@ -1,81 +0,0 @@ -// Initialise the date picker demonstrations -$(document).ready(function () { - // initialize tab interface - tabs.init(); - // reset defaults to English - $.datepicker.setDefaults($.datepicker.regional['']); - // replace script tags with HTML code - $(".demojs").each(function () { - $(this).before( '
' +
-			$(this).html().replace(/
" ); - eval( $(this).html() ); - }); - // Localization - if ($.browser.safari) - $('.languageSelect,.l10nDatepicker,#frFullFormat').attr({ disabled: 'disabled' }); - else - $('.languageSelect').change(localise); - // Stylesheets - $('#altStyle').datepicker({buttonImage: 'demo/img/calendar2.gif', - prevText: ' Prev', - nextText: 'Next '}); - $('#button3').click(function() { - $(this).datepicker('dialog', $('#altDialog').val(), - setAltDateFromDialog, {prompt: 'Choose a date', speed: '', - prevText: ' Prev', - nextText: 'Next '}); - }); -}); - -// Load and apply a localisation package for the date picker -function localise() { - var input = $('input', this.parentNode.parentNode); - var date = $(input).datepicker('getDate'); - var language = $(this).val(); - $.localise('../../../source/i18n/ui.datepicker', {language: language}); - $(input).datepicker('change', $.datepicker.regional[language]); - $.datepicker.setDefaults($.datepicker.regional['']); // Reset for general usage - if (date) { - $(input).datepicker('setDate', date); - input.val($.datepicker.formatDate( - $.datepicker.regional[language].dateFormat, date)); - } -} - -// Demonstrate a callback from inline configuration -function showDay(input) { - var date = $(input).datepicker('getDate'); - $('#inlineDay').html(date ? $.datepicker.formatDate('DD', date) : 'blank'); -} - -// Display a date selected in a "dialog" -function setAltDateFromDialog(date) { - $('#altDialog').val(date); -} - -// Custom Tabs written by Marc Grabanski -var tabs = -{ - init : function () - { - // Setup tabs - $("div[@class^=tab_group]").hide(); - $("div[@class^=tab_group]:first").show().id; - $("ul[@id^=tab_menu] a:eq(0)").addClass('over'); - - // Slide visible up and clicked one down - $("ul[@id^=tab_menu] a").each(function(i){ - $(this).click(function () { - $("ul[@id^=tab_menu] a.over").removeClass('over'); - $(this).addClass('over'); - $("div[@class^=tab_group]:visible").hide(); - $( $(this).attr("href") ).fadeIn(); - tabs.stylesheet = $(this).attr("href") == "#styles" ? 'alt' : 'default'; - $('link').each(function() { - this.disabled = (this.title != '' && this.title != tabs.stylesheet); - }); - return false; - }); - }); - } -} diff --git a/demos/functional/datepicker/index.html b/demos/functional/datepicker/index.html deleted file mode 100644 index f62d05a1e..000000000 --- a/demos/functional/datepicker/index.html +++ /dev/null @@ -1,887 +0,0 @@ - - - - - jQuery UI Datepicker - - - - - - - - - - -
-
- -
-
-

Defaults

-

A date picker can easily be added to an input field with default settings.

-

Default date picker: -

- -

IE select issue: -

-

The defaults are:

-
    -
  • Date picker appears on focus
    • -
  • Text is in English
    • -
  • Date format is mm/dd/yyyy
    • -
  • Clear/Close controls show at the top
    • -
  • Month and year are selectable directly
    • -
  • 10 years before and after the selected year are shown
    • -
  • Show a single month
    • -
  • Select a single date
    • -
  • Week starts on Sunday
    • -
  • Day names are clickable to change the first day of the week
    • -
  • Days in other months are not displayed
    • -
  • No date restrictions
    • -
  • Clicking elsewhere closes the date picker
    • -
-

Processed fields are marked with a class of hasDatepicker - and are not re-processed if targetted a second time.

-

You can override the default settings that apply to all date picker instances.

- -
-
-

Invocation

-

The date picker can be invoked in a variety of ways, as shown below. - Also shown is the use of an image only trigger, - and how the controls and buttons appear when disabled.

-

Datepicker appears on focus: - -

- -

Appears via text button: - -

- -

Appears both ways: - -

- -

You can embed the trigger image within the input area via CSS.

-

Embedded button: -

- -

Enable and disable datepicker with 'enable' and 'disable' commands.

- -

The date picker can also be triggered externally for a particular input.

-

External trigger: -

- -

Or even opened as a "dialog". If the blockUI plugin is available, - it is used to create a modal dialog.

-

Date picker dialog: - -

- -
-
-

Keystrokes

-

The date picker also responds to keystrokes entered in the input field.

-

Keyboard driven: -

-

The relevant keystrokes are:

-
    -
  • page up/downprevious/next month
    • -
  • ctrl+page up/downprevious/next year
    • -
  • ctrl+homecurrent month or open when closed
    • -
  • ctrl+left/rightprevious/next day
    • -
  • ctrl+up/downprevious/next week
    • -
  • enteraccept the selected date
    • -
  • ctrl+endclose and erase the date
    • -
  • escapeclose the date picker without selection
    • -
-
-
-

Restricting

-

You can restrict the functionality of the date picker in various ways. - The first example sets the first day of the week to Monday and prevents it from being - changed, as well as preventing the month and year from being selected directly.

-

Restricted functionality: -

- -

You can also limit the range of dates selectable within the date picker. - Here it's between 26-Jan-05 and 26-Jan-07.

-

Limited dates: -

- -

Or set a range relative to today by specifying a number - rather than an exact date, in this case in the coming year.

-

Limited dates (relative): -

- -

The relative dates can also be specified as a number and a period - - 'd' for days, 'w' for weeks, 'm' for months, or 'y' for years.

-

Limited dates (extended): -

- -

Note that the range of selectable months and years changes appropriately. Also, - note that the Today link is no longer available as today is not in the range. - By default, the Prev and Next links are disabled if they are not - applicable. You can override this to remove them instead, with the - hideIfNoPrevNext setting.

-
-
-

Date Formats

-

You can set a variety of date formats for the date picker, - with the default being 'mm/dd/yy'.

-

Medium format: -

- -

Long format: -

- -

Full format: -

- -

Display dates without the century. The century is then determined based on the - shortYearCutoff setting, which defaults to 10 years in the future ('+10'). - Year values less than or equal to this cutoff are interpreted as being in the current - century, while those greater than the cutoff are taken to be in the previous century.

-

No century: -

- -

ISO date format: -

- -

French full format: -

- -

The formatting codes are:

-
    -
  • dday of month (no leading zero)
    • -
  • ddday of month (two digit)
    • -
  • Dday name short
    • -
  • DDday name long
    • -
  • mmonth of year (no leading zero)
    • -
  • mmmonth of year (two digit)
    • -
  • Mmonth name short
    • -
  • MMmonth name long
    • -
  • yyear (two digit)
    • -
  • yyyear (four digit)
    • -
  • '...'literal text
    • -
  • ''single quote
    • -
-
-
-

Customize

-

You can customize the selectability and/or appearance of individual days - by setting a callback function that accepts a date and returns an array - with the first entry being true/false for selectability and the second - entry being a CSS class to apply (or '' for none). One appropriate - function is built-in that prevents the selection of days on weekends.

-

No weekends: -

- -

Or you can provide your own function. The one below highlights and - prevents selection of a set of national days.

-

National days: -

- -

With CSS like the following:

-
.au_day { color: blue !important; background: #eee url(au.gif) no-repeat center !important; }
-
-
-

Localisation

-

You can localise the date picker for other languages and regional differences. - The date picker defaults to English with a date format of MM/DD/YYYY, - but you can easily translate the text into another language and date format.

-

- : -

-

The presentation is slightly different for right-to-left languages.

-

- : -

-

You need to load the appropriate language package, which - adds a language set ($.datepicker.regional[langCode]) and - automatically sets this language as the default for all date pickers.

-
<script type="text/javascript" src="ui.datepicker-fr.js"></script>
-

Thereafter, if desired, you can restore the original language settings.

-
$.datepicker.setDefaults($.datepicker.regional['']);
-

And then configure the language per date picker instance.

- -

Localisation packages:

-

Localisation packages can be found below under Settings and Documentation.

-
-
-

Date Range

-

Use a custom field settings function to create a date range control: - two date fields, each restricting the other. The function takes an - input field as an argument and returns a settings object (anonymous).

-

Date range: - to -

- -

Select a date range on one date picker, first click is the start date and second click is the end date. - The last example show six months in two rows of three months - with Previous and Next moving three months at a time.

-

Date range: -

- - -

Two months with range select: -

- -

Six months with range select: -

- -
-
-

Miscellaneous 1

-

Set the date shown when first opening the date picker. The default is today.

-

Open at 01-Jan-2007: -

- -

Open at 7 days from today: -

- -

Or specify a period from today - 'd' for days, - 'w' for weeks, 'm' for months, or 'y' for years. -

Open at 2 weeks from today: -

- -

Show the weeks of the year. Defaults to the ISO 8601 definition (weeks start - on Mondays and the first week of the year contains January 4). Change the - week calculation by setting calculateWeek to a function that - takes a date as a parameter and returns the number of the week.

-

Show week of the year: -

- -

Additional settings let you move the Clear/Close controls - to the bottom, hide the Clear control to make the date mandatory, - display the days in other months (non-selectable), - and show a status bar (with a custom display for today). - Callback functions are also added to operate when a date - is selected and when the datepicker is closed. - If no onSelect callback is specified, the - onchange event of the input field is triggered.

-

Additional settings: -

- -
-
-

Miscellaneous 2

-

Hide the datepicker on demand (press alt-h here) or - remove the datepicker altogether if you've finished with it.

-

Remove popup datepicker: -   -

-

Remove inline datepicker: -

- -

(Advanced Technique)
Connect the date picker to linked drop-downs. You still need an input field, - but it is hidden following the drop-downs.

-

Linked drop-downs: - - - -

- -
-
-

Changing Settings

-

If necessary, the datepicker settings for an input (or set of inputs) - can be changed on the fly. As an example, here we change the - animation and speed at which the datepicker appears.

-

Display animation and speed: - - -

-

Change datepicker: -

-

When the option in the select changes, the following function is called:

- -

Date pickers can also be configured inline. - Add attributes to the input control with the namespace "date:" - corresponding to the date picker properties. - The attribute values are evaluated as JavaScript.

-

Inline configuration 1: - - blank

-

Inline configuration 2: -

- -
-
-

Inline

-

The date picker can be used inline rather than as a popup. - Use inline mode by attaching the datepicker to a span or div element.

- -
- -

Show a number of months at once and set the range directly.

-

Inline range with two months:

-
- -
-

- Selected range is:   - -

- -

(Advanced Technique)
- Set initial value of inline date range to one week before and after today's date. - Set the text field to current selected date.

-

- -

- -
-
-

Stylesheets

-

The date picker can be formatted through the use of a stylesheet. - The default stylesheet is used in the rest of this demo - with an alternate one used here.

-

Alternate style: -

-

In a dialog: - -

-

The basic HTML structure of the date picker is shown below:

-
<div id="datepicker_div" class="datepicker_multi">
-  <div class="datepicker_control">
-    <div class="datepicker_clear"><a>Clear</a></div>
-    <div class="datepicker_close"><a>Close</a></div>
-  </div>
-  <div class="datepicker_links">
-    <div class="datepicker_prev"><a>&lt;Prev</a></div>
-    <div class="datepicker_current"><a>Today</a></div>
-    <div class="datepicker_next"><a>Next&gt;</a></div>
-  </div>
-  <div class="datepicker_oneMonth datepicker_newRow">
-    <div class="datepicker_header">
-      <select class="datepicker_newMonth"></select>
-      <select class="datepicker_newYear"></select>
-    </div>
-    <table class="datepicker" cellpadding="0" cellspacing="0">
-      <thead>
-        <tr class="datepicker_titleRow">
-          <td><a>Su</a></td><td><a>Mo</a></td>...
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="datepicker_daysRow">
-          <td class="datepicker_daysCell datepicker_weekEndCell
-            datepicker_otherMonth datepicker_unselectable">31</td>
-          <td class="datepicker_daysCell"><a>1</a></td>
-          <td class="datepicker_daysCell datepicker_daysCellOver"><a>2</a></td>
-          <td class="datepicker_daysCell datepicker_daysCellOver datepicker_currentDay"><a>3</a></td>
-          <td class="datepicker_daysCell datepicker_today"><a>4</a></td>
-          ...
-        </tr>
-        ...
-      </tbody>
-    </table>
-  </div>
-  <div class="datepicker_oneMonth">
-    ...
-  </div>
-  <div style="clear: both;"></div>
-</div>
-
-
-

Compatibility

-

v3.3 to v3.4

-

The jQuery UI interfaces changed again, so here's another compatibility module.

-

Users of v3.3 of the datepicker should use the following - header code to work with their existing implementation:

-
<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
-<script type="text/javascript" src="ui.datepicker.js"></script>
-<script type="text/javascript" src="ui.datepicker.compatibility-3.3.js"></script>
-

Download the ui.datepicker.compatibility-3.3.js module.

-

To migrate fully, the following steps need to be taken:

-
    -
  • Replace references to the $(selector).attachDatepicker(...) - function with $(selector).datepicker(...).
    • -
  • Replace references to the $(selector).removeDatepicker() - function with $(selector).datepicker('destroy').
    • -
  • Replace references to the $(selector).datepicker.changDatepicker(...) - function with $(selector).datepicker('change', ...).
    • -
  • Replace references to the $(selector).datepicker.enableDatepicker() - function with $(selector).datepicker('enable').
    • -
  • Replace references to the $(selector).disableDatepicker() - function with $(selector).datepicker('disable').
    • -
  • Replace references to the $(selector).isDisabledDatepicker() - function with $(selector).datepicker('isDisabled').
    • -
  • Replace references to the $(selector).showDatepicker() - function with $(selector).datepicker('show').
    • -
  • Replace references to the $.datepicker.hideDatepicker() - function with $(selector).datepicker('hide').
    • -
  • Replace references to the $(selector).getDatepickerDate() - function with $(selector).datepicker('getDate').
    • -
  • Replace references to the $(selector).setDatepickerDate(...) - function with $(selector).datepicker('setDate', ...).
    • -
-

For example, this old style code:

-
$('inputs').attachDatepicker(...);
-$('inputs').changeDatepicker(...);
-

becomes:

-
$('inputs').datepicker(...);
-$('inputs').datepicker('change', ...);
- -

v3.2 to v3.4

-

To align the datepicker more closely with other jQuery UI components, - further changes were made in v3.3, resulting in another compatibility module.

-

Users of v3.2 of the datepicker should use the following - header code to work with their existing implementation:

-
<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
-<script type="text/javascript" src="ui.datepicker.js"></script>
-<script type="text/javascript" src="ui.datepicker.compatibility-3.2.js"></script>
-

Download the ui.datepicker.compatibility-3.2.js module.

-

To migrate fully, the following steps need to be taken:

-
    -
  • Replace references to the $.datepicker.reconfigureFor(selector, ...) - function with $(selector).datepicker('change', ...).
    • -
  • Replace references to the $.datepicker.enableFor(selector) - function with $(selector).datepicker('enable').
    • -
  • Replace references to the $.datepicker.disableFor(selector) - function with $(selector).datepicker('disable').
    • -
  • Replace references to the $.datepicker.isDisabled(selector) - function with $(selector).datepicker('isDisabled').
    • -
  • Replace references to the $.datepicker.showFor(selector) - function with $(selector).datepicker('show').
    • -
  • Replace references to the $.datepicker.getDateFor(selector) - function with $(selector).datepicker('getDate').
    • -
  • Replace references to the $.datepicker.setDateFor(selector, ...) - function with $(selector).datepicker('setDate', ...).
    • -
-

For example, this old style code:

-
$.datepicker.reconfigureFor('inputs', {...});
-

becomes:

-
$('inputs').datepicker('change', {...});
- -

v2.x to v3.3

-

The date picker has been refactored to better fit - within the jQuery UI project. - This has involved renaming the main function and some properties, - resulting in current uses of the plugin no longer functioning correctly. - To assist in the transition to the new format a compatibility - plugin is also provided, allowing current code to continue - to operate with minimal changes.

-

Existing users of v2 of the calendar should use the following - header code to work with their existing implementation:

-
<link rel="stylesheet" type="text/css" href="ui.datepicker.css"/>
-<script type="text/javascript" src="ui.datepicker.js"></script>
-<script type="text/javascript" src="jquery-calendar-compatibility.js"></script>
-

Download the jquery-calendar-compatibility.js module.

-

To migrate fully, the following steps need to be taken:

-
    -
  • Replace references to the jquery-calendar* - files with ui.datepicker*.
    • -
  • Replace references to the popUpCal - object with $.datepicker.
    • -
  • Replace references to the calendar - function with datepicker.
    • -
  • Replace references to the autoPopUp - setting with showOn.
    • -
  • Replace references to the fieldSettings - setting with beforeShow.
    • -
  • Replace references to the customDate - setting with beforeShowDay.
    • -
  • Replace references to inline attributes with the cal: - namespace with date:.
    • -
  • Replace references to the hideCalendar - function with hideDatepicker.
    • -
  • Replace references to the dialogCalendar - function with dialogDatepicker.
    • -
  • Replace references to the $.datepicker.reconfigureFor(selector, ...) - function with $(selector).datepicker('change', ...).
    • -
  • Replace references to the $.datepicker.enableFor(selector) - function with $(selector).datepicker('enable').
    • -
  • Replace references to the $.datepicker.disableFor(selector) - function with $(selector).datepicker('disable').
    • -
  • Replace references to the $.datepicker.showFor(selector) - function with $(selector).datepicker('show').
    • -
  • Replace references to the $.datepicker.getDateFor(selector) - function with $(selector).datepicker('getDate').
    • -
  • Replace references to the $.datepicker.setDateFor(selector, ...) - function with $(selector).datepicker('setDate', ...).
    • -
  • Replace references to the calendar* - CSS styles with datepicker*.
    • -
-

For example, this old style code:

-
$('inputs').calendar({autoPopUp: 'both', fieldSettings: setDateRange,
-	customDate: popUpCal.noWeekends});
-	
-<input type="text" id="inlineConfig" cal:defaultDate="+7"/>
-

becomes:

-
$('inputs').datepicker({showOn: 'both', beforeShow: setDateRange,
-	beforeShowDay: $.datepicker.noWeekends});
-	
-<input type="text" id="inlineConfig" date:defaultDate="+7"/>
-
-

Localization Packages

- - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/demos/functional/images/Thumbs.db b/demos/functional/images/Thumbs.db new file mode 100644 index 000000000..378e981d2 Binary files /dev/null and b/demos/functional/images/Thumbs.db differ diff --git a/demos/functional/images/ajax-loader.gif b/demos/functional/images/ajax-loader.gif new file mode 100644 index 000000000..5a4f384a8 Binary files /dev/null and b/demos/functional/images/ajax-loader.gif differ diff --git a/demos/functional/images/body_bg.jpg b/demos/functional/images/body_bg.jpg new file mode 100644 index 000000000..0beed722f Binary files /dev/null and b/demos/functional/images/body_bg.jpg differ diff --git a/demos/functional/images/body_bg.png b/demos/functional/images/body_bg.png new file mode 100644 index 000000000..2213c6ace Binary files /dev/null and b/demos/functional/images/body_bg.png differ diff --git a/demos/functional/images/content_bg.png b/demos/functional/images/content_bg.png new file mode 100644 index 000000000..6cb278c7e Binary files /dev/null and b/demos/functional/images/content_bg.png differ diff --git a/demos/functional/images/content_body_bg.png b/demos/functional/images/content_body_bg.png new file mode 100644 index 000000000..cca6d945f Binary files /dev/null and b/demos/functional/images/content_body_bg.png differ diff --git a/demos/functional/images/content_top_bg.png b/demos/functional/images/content_top_bg.png new file mode 100644 index 000000000..1faf799e9 Binary files /dev/null and b/demos/functional/images/content_top_bg.png differ diff --git a/demos/functional/images/dot.png b/demos/functional/images/dot.png new file mode 100644 index 000000000..dfbcff237 Binary files /dev/null and b/demos/functional/images/dot.png differ diff --git a/demos/functional/images/favicon.ico b/demos/functional/images/favicon.ico new file mode 100644 index 000000000..77e3bd2dd Binary files /dev/null and b/demos/functional/images/favicon.ico differ diff --git a/demos/functional/images/footer_bg.png b/demos/functional/images/footer_bg.png new file mode 100644 index 000000000..b96db440e Binary files /dev/null and b/demos/functional/images/footer_bg.png differ diff --git a/demos/functional/images/functional-demo-face.png b/demos/functional/images/functional-demo-face.png new file mode 100644 index 000000000..cf21240a8 Binary files /dev/null and b/demos/functional/images/functional-demo-face.png differ diff --git a/demos/functional/images/html_bg.png b/demos/functional/images/html_bg.png new file mode 100644 index 000000000..e97e6042d Binary files /dev/null and b/demos/functional/images/html_bg.png differ diff --git a/demos/functional/images/icon_liferay.gif b/demos/functional/images/icon_liferay.gif new file mode 100644 index 000000000..bfdf1d439 Binary files /dev/null and b/demos/functional/images/icon_liferay.gif differ diff --git a/demos/functional/images/logo.gif b/demos/functional/images/logo.gif new file mode 100644 index 000000000..a6cfb9745 Binary files /dev/null and b/demos/functional/images/logo.gif differ diff --git a/demos/functional/index.html b/demos/functional/index.html new file mode 100644 index 000000000..b5ccf8155 --- /dev/null +++ b/demos/functional/index.html @@ -0,0 +1,164 @@ + + + + jQuery UI - Functional demos + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+
+ +
+
+

+ Functional Demos +

+

+ Learn how to build Cross-Browser Rich Internet Applications! +

+ +
+
+ + + + + + +
+
+

+ Interaction +

+ +
+
+
+

+ Widgets +

+ + +
+
+ 		+ +
+

+ Instructions +

+

+ + The functional demos are provided to give users an idea of how jQueryUI works. You only need to copy and paste code from the demos. Have fun playing with it. +

+ +
+ +
+ +
+
+ +
+
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/demos/functional/js/beautify.js b/demos/functional/js/beautify.js new file mode 100644 index 000000000..6c6ef29b4 --- /dev/null +++ b/demos/functional/js/beautify.js @@ -0,0 +1,533 @@ +/* + + JS Beautifier +--------------- + $Date: 2008-04-21 16:13:36 +0300 (Mon, 21 Apr 2008) $ + $Revision: 53 $ + + + Written by Einars "elfz" Lielmanis, + http://elfz.laacz.lv/beautify/ + + Originally converted to javascript by Vital, + http://my.opera.com/Vital/blog/2007/11/21/javascript-beautify-on-javascript-translated + + + You are free to use this in any way you want, in case you find this useful or working for you. + + Usage: + js_beautify(js_source_text); + +*/ + + +function js_beautify(js_source_text, indent_size, indent_character) +{ + + var input, output, token_text, last_type, last_text, last_word, current_mode, modes, indent_level, indent_string; + var whitespace, wordchar, punct, parser_pos, line_starters, in_case; + var prefix, token_type; + + function print_newline(ignore_repeated) + { + ignore_repeated = typeof ignore_repeated === 'undefined' ? true: ignore_repeated; + + // remove trailing whitespace and indent + while (output.length && (output[output.length - 1] === ' ' || output[output.length - 1] === indent_string)) { + output.pop(); + } + + if (!output.length) { + return; // no newline on start of file + } + + if (output[output.length - 1] !== "\n" || !ignore_repeated) { + output.push("\n"); + } + for (var i = 0; i < indent_level; i++) { + output.push(indent_string); + } + } + + + + function print_space() + { + var last_output = output.length ? output[output.length - 1] : ' '; + if (last_output !== ' ' && last_output !== '\n' && last_output !== indent_string) { // prevent occassional duplicate space + output.push(' '); + } + } + + + function print_token() + { + output.push(token_text); + } + + function indent() + { + indent_level++; + } + + + function unindent() + { + if (indent_level) { + indent_level--; + } + } + + + function remove_indent() + { + if (output.length && output[output.length - 1] === indent_string) { + output.pop(); + } + } + + + function set_mode(mode) + { + modes.push(current_mode); + current_mode = mode; + } + + + function restore_mode() + { + current_mode = modes.pop(); + } + + + function in_array(what, arr) + { + for (var i = 0; i < arr.length; i++) + { + if (arr[i] === what) { + return true; + } + } + return false; + } + + + + function get_next_token() + { + var n_newlines = 0; + var c = ''; + + do { + if (parser_pos >= input.length) { + return ['', 'TK_EOF']; + } + c = input.charAt(parser_pos); + + parser_pos += 1; + if (c === "\n") { + n_newlines += 1; + } + } + while (in_array(c, whitespace)); + + if (n_newlines > 1) { + for (var i = 0; i < 2; i++) { + print_newline(i === 0); + } + } + var wanted_newline = (n_newlines === 1); + + + if (in_array(c, wordchar)) { + if (parser_pos < input.length) { + while (in_array(input.charAt(parser_pos), wordchar)) { + c += input.charAt(parser_pos); + parser_pos += 1; + if (parser_pos === input.length) { + break; + } + } + } + + // small and surprisingly unugly hack for 1E-10 representation + if (parser_pos !== input.length && c.match(/^[0-9]+[Ee]$/) && input.charAt(parser_pos) === '-') { + parser_pos += 1; + + var t = get_next_token(parser_pos); + c += '-' + t[0]; + return [c, 'TK_WORD']; + } + + if (c === 'in') { // hack for 'in' operator + return [c, 'TK_OPERATOR']; + } + return [c, 'TK_WORD']; + } + + if (c === '(' || c === '[') { + return [c, 'TK_START_EXPR']; + } + + if (c === ')' || c === ']') { + return [c, 'TK_END_EXPR']; + } + + if (c === '{') { + return [c, 'TK_START_BLOCK']; + } + + if (c === '}') { + return [c, 'TK_END_BLOCK']; + } + + if (c === ';') { + return [c, 'TK_END_COMMAND']; + } + + if (c === '/') { + var comment = ''; + // peek for comment /* ... */ + if (input.charAt(parser_pos) === '*') { + parser_pos += 1; + if (parser_pos < input.length) { + while (! (input.charAt(parser_pos) === '*' && input.charAt(parser_pos + 1) && input.charAt(parser_pos + 1) === '/') && parser_pos < input.length) { + comment += input.charAt(parser_pos); + parser_pos += 1; + if (parser_pos >= input.length) { + break; + } + } + } + parser_pos += 2; + return ['/*' + comment + '*/', 'TK_BLOCK_COMMENT']; + } + // peek for comment // ... + if (input.charAt(parser_pos) === '/') { + comment = c; + while (input.charAt(parser_pos) !== "\x0d" && input.charAt(parser_pos) !== "\x0a") { + comment += input.charAt(parser_pos); + parser_pos += 1; + if (parser_pos >= input.length) { + break; + } + } + parser_pos += 1; + if (wanted_newline) { + print_newline(); + } + return [comment, 'TK_COMMENT']; + } + + } + + if (c === "'" || // string + c === '"' || // string + (c === '/' && + ((last_type === 'TK_WORD' && last_text === 'return') || (last_type === 'TK_START_EXPR' || last_type === 'TK_END_BLOCK' || last_type === 'TK_OPERATOR' || last_type === 'TK_EOF' || last_type === 'TK_END_COMMAND')))) { // regexp + var sep = c; + var esc = false; + c = ''; + + if (parser_pos < input.length) { + + while (esc || input.charAt(parser_pos) !== sep) { + c += input.charAt(parser_pos); + if (!esc) { + esc = input.charAt(parser_pos) === '\\'; + } else { + esc = false; + } + parser_pos += 1; + if (parser_pos >= input.length) { + break; + } + } + + } + + parser_pos += 1; + if (last_type === 'TK_END_COMMAND') { + print_newline(); + } + return [sep + c + sep, 'TK_STRING']; + } + + if (in_array(c, punct)) { + while (parser_pos < input.length && in_array(c + input.charAt(parser_pos), punct)) { + c += input.charAt(parser_pos); + parser_pos += 1; + if (parser_pos >= input.length) { + break; + } + } + return [c, 'TK_OPERATOR']; + } + + return [c, 'TK_UNKNOWN']; + } + + + //---------------------------------- + + indent_character = indent_character || ' '; + indent_size = indent_size || 4; + + indent_string = ''; + while (indent_size--) { + indent_string += indent_character; + } + + input = js_source_text; + + last_word = ''; // last 'TK_WORD' passed + last_type = 'TK_START_EXPR'; // last token type + last_text = ''; // last token text + output = []; + + whitespace = "\n\r\t ".split(''); + wordchar = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_$'.split(''); + punct = '+ - * / % & ++ -- = += -= *= /= %= == === != !== > < >= <= >> << >>> >>>= >>= <<= && &= | || ! !! , : ? ^ ^= |='.split(' '); + + // words which should always start on new line. + line_starters = 'continue,try,throw,return,var,if,switch,case,default,for,while,break,function'.split(','); + + // states showing if we are currently in expression (i.e. "if" case) - 'EXPRESSION', or in usual block (like, procedure), 'BLOCK'. + // some formatting depends on that. + current_mode = 'BLOCK'; + modes = [current_mode]; + + indent_level = 0; + parser_pos = 0; // parser position + in_case = false; // flag for parser that case/default has been processed, and next colon needs special attention + while (true) { + var t = get_next_token(parser_pos); + token_text = t[0]; + token_type = t[1]; + if (token_type === 'TK_EOF') { + break; + } + + switch (token_type) { + + case 'TK_START_EXPR': + + set_mode('EXPRESSION'); + if (last_type === 'TK_END_EXPR' || last_type === 'TK_START_EXPR') { + // do nothing on (( and )( and ][ and ]( .. + } else if (last_type !== 'TK_WORD' && last_type !== 'TK_OPERATOR') { + print_space(); + } else if (in_array(last_word, line_starters) && last_word !== 'function') { + print_space(); + } + print_token(); + break; + + case 'TK_END_EXPR': + + print_token(); + restore_mode(); + break; + + case 'TK_START_BLOCK': + + set_mode('BLOCK'); + if (last_type !== 'TK_OPERATOR' && last_type !== 'TK_START_EXPR') { + if (last_type === 'TK_START_BLOCK') { + print_newline(); + } else { + print_space(); + } + } + print_token(); + indent(); + break; + + case 'TK_END_BLOCK': + if (last_type === 'TK_START_BLOCK') { + // nothing + unindent(); + } else { + unindent(); + print_newline(); + } + print_token(); + restore_mode(); + break; + + case 'TK_WORD': + + if (token_text === 'case' || token_text === 'default') { + if (last_text === ':') { + // switch cases following one another + remove_indent(); + } else { + // case statement starts in the same line where switch + unindent(); + print_newline(); + indent(); + } + print_token(); + in_case = true; + break; + } + + prefix = 'NONE'; + if (last_type === 'TK_END_BLOCK') { + if (!in_array(token_text.toLowerCase(), ['else', 'catch', 'finally'])) { + prefix = 'NEWLINE'; + } else { + prefix = 'SPACE'; + print_space(); + } + } else if (last_type === 'TK_END_COMMAND' && current_mode === 'BLOCK') { + prefix = 'NEWLINE'; + } else if (last_type === 'TK_END_COMMAND' && current_mode === 'EXPRESSION') { + prefix = 'SPACE'; + } else if (last_type === 'TK_WORD') { + prefix = 'SPACE'; + } else if (last_type === 'TK_START_BLOCK') { + prefix = 'NEWLINE'; + } else if (last_type === 'TK_END_EXPR') { + print_space(); + prefix = 'NEWLINE'; + } + + if (in_array(token_text, line_starters) || prefix === 'NEWLINE') { + + if (last_text === 'else') { + // no need to force newline on else break + print_space(); + } else if ((last_type === 'TK_START_EXPR' || last_text === '=') && token_text === 'function') { + // no need to force newline on 'function': (function + // DONOTHING + } else if (last_type === 'TK_WORD' && (last_text === 'return' || last_text === 'throw')) { + // no newline between 'return nnn' + print_space(); + } else if (last_type !== 'TK_END_EXPR') { + if ((last_type !== 'TK_START_EXPR' || token_text !== 'var') && last_text !== ':') { + // no need to force newline on 'var': for (var x = 0...) + if (token_text === 'if' && last_type === 'TK_WORD' && last_word === 'else') { + // no newline for } else if { + print_space(); + } else { + print_newline(); + } + } + } + } else if (prefix === 'SPACE') { + print_space(); + } + print_token(); + last_word = token_text; + break; + + case 'TK_END_COMMAND': + + print_token(); + break; + + case 'TK_STRING': + + if (last_type === 'TK_START_BLOCK' || last_type === 'TK_END_BLOCK') { + print_newline(); + } else if (last_type === 'TK_WORD') { + print_space(); + } + print_token(); + break; + + case 'TK_OPERATOR': + + var start_delim = true; + var end_delim = true; + + if (token_text === ':' && in_case) { + print_token(); // colon really asks for separate treatment + print_newline(); + break; + } + + in_case = false; + + if (token_text === ',') { + if (last_type === 'TK_END_BLOCK') { + print_token(); + print_newline(); + } else { + if (current_mode === 'BLOCK') { + print_token(); + print_newline(); + } else { + print_token(); + print_space(); + } + } + break; + } else if (token_text === '--' || token_text === '++') { // unary operators special case + if (last_text === ';') { + // space for (;; ++i) + start_delim = true; + end_delim = false; + } else { + start_delim = false; + end_delim = false; + } + } else if (token_text === '!' && last_type === 'TK_START_EXPR') { + // special case handling: if (!a) + start_delim = false; + end_delim = false; + } else if (last_type === 'TK_OPERATOR') { + start_delim = false; + end_delim = false; + } else if (last_type === 'TK_END_EXPR') { + start_delim = true; + end_delim = true; + } else if (token_text === '.') { + // decimal digits or object.property + start_delim = false; + end_delim = false; + + } else if (token_text === ':') { + // zz: xx + // can't differentiate ternary op, so for now it's a ? b: c; without space before colon + start_delim = false; + } + if (start_delim) { + print_space(); + } + + print_token(); + + if (end_delim) { + print_space(); + } + break; + + case 'TK_BLOCK_COMMENT': + + print_newline(); + print_token(); + print_newline(); + break; + + case 'TK_COMMENT': + + // print_newline(); + print_space(); + print_token(); + print_newline(); + break; + + case 'TK_UNKNOWN': + print_token(); + break; + } + + last_type = token_type; + last_text = token_text; + } + + return output.join(''); + +} diff --git a/demos/functional/js/behaviour.functionaldemos.js b/demos/functional/js/behaviour.functionaldemos.js new file mode 100644 index 000000000..8e375db28 --- /dev/null +++ b/demos/functional/js/behaviour.functionaldemos.js @@ -0,0 +1,13 @@ +$(document).ready(function() { + + $('.component-links a').click(function() { + var comp = $(this).attr('href').replace(/^#/, ""); + loadDemo(comp); + }); + + // hash listener + if (location.hash) { + loadDemo(location.hash.replace(/^#/, "")); + } + +}); \ No newline at end of file diff --git a/demos/functional/js/behaviour.js b/demos/functional/js/behaviour.js new file mode 100644 index 000000000..2ac0305f7 --- /dev/null +++ b/demos/functional/js/behaviour.js @@ -0,0 +1,205 @@ +$(document).ready(function() { + + // link demos + + $(".demoflow div.wrapper").click(function() { + + var demo = $(this).children('img').attr('_demo'); + + if (demo) { + location.href = '/repository/real-world/' + demo; + }else { + //alert('Under construction!'); + } + + }); + + if ($("div.demoflow").size()) { + + var inst = new $.ui.carousel($("div.demoflow")[0], { height: 200, width: 310 }); + + $("div.demoflow-button-left, div.demoflow-button-right").bind("mousedown", function() { + var right = this.className.indexOf("right") == -1; + if(inst.autoRotator) window.clearInterval(inst.autoRotator); + inst.timer = window.setInterval(function() { inst.rotate(right ? "right" : null); }, 13); + }) + .bind("mouseup", function() { + window.clearInterval(inst.timer); + }); + + $('.demoflow div.shadow').hover(function() { + this._lastopacity = $(this).css('opacity'); + $(this).stop().animate({opacity: 0 }, 300); + }, function() { + $(this).stop().animate({opacity: this._lastopacity }, 300); + }); + + + window.setTimeout(function() { + inst.element.animate({ opacity: 1 },2000); inst.rotate(0,2000,0.45); + window.setTimeout(function() { + inst.autoRotator = window.setInterval(function() { inst.rotate(0,2000,0.45); },5000); + },3000); + },0); + + } + + $('a').click(function(){ + this.blur(); + }); + + // smooth hover effects by DragonInteractive + var hover = hoverEffects(); + hover.init(); + +}); + + $.ui.carousel = function(element, options) { + + this.element = $(element); + this.options = $.extend({}, options); + var self = this; + + $.extend(this, { + start: Math.PI/2, + step: 2*Math.PI/$("> *", this.element).length, + radiusX: 400, + radiusY: -45, + paddingX: this.element.outerWidth() / 2, + paddingY: this.element.outerHeight() / 2 + }); + + $("> *", this.element).css({ position: "absolute", top: 0, left: 0, zIndex: 1 }); + this.rotate(); + this.rotate("right"); + + this.element.parent().bind("mousewheel", function(e,delta) { + if(self.autoRotator) window.clearInterval(self.autoRotator); + self.rotate(delta < 0 ? "right" : "left"); + return false; + }); + + }; + + $.ui.carousel.prototype.rotate = function(d,ani,speed) { + + this.start = this.start + (d == "right" ? -(speed || 0.03) : (speed || 0.03)); + var o = this.options; + var self = this; + + setTimeout(function(){ + $("> *", self.element).each(function(i) { + var angle = self.start + i * self.step; + var x = self.radiusX * Math.cos(angle); + var y = self.radiusY * Math.sin(angle); + var _self = this; + + var width = o.width * ((self.radiusY+y) / (2 * self.radiusY)); + width = (width * width * width) / (o.width * o.width); //This makes the pieces smaller + var height = parseInt(width * o.height / o.width); + + //This is highly custom - it will hide the elements at the back + $(_self).css({ visibility: height < 30 ? "hidden" : "visible" }); + if(height < 30 && !ani) return; //This imrpoves the speed, but cannot be used with animation + + + if(ani) { + $(_self).animate({ + top: Math.round(self.paddingY + y - height/2) + "px", + left: Math.round(self.paddingX + x - width/2) + "px", + width: Math.round(width) + "px", + height: Math.round(height) + "px" + },{ duration: ani, easing: "easeOutQuad" }); + $(_self).css({ zIndex: Math.round(parseInt(100 * (self.radiusY+y) / (2 * self.radiusY))) }); + } else { + $(_self).css({ + top: self.paddingY + y - height/2 + "px", + left: self.paddingX + x - width/2 + "px", + width: width + "px", + height: height + "px", + zIndex: parseInt(100 * (self.radiusY+y) / (2 * self.radiusY)) + }); + } + + $("div.shadow",_self).css({ opacity: 1 - (width / o.width) }); + + }); + }, 0); + } + + +/** + * All credit here goes to DragonInteractive and Yuri Vishnevsky + */ +var hoverEffects = function() { + var me = this; + var args = arguments; + var self = { + c: { + navItems: '.download .click-to-download, #launch-pad .launch-pad-button, div.demoflow-button-left, div.demoflow-button-right', + navSpeed: ($.browser.safari ? 600: 350), + snOpeningSpeed: ($.browser.safari ? 400: 250), + snOpeningTimeout: 150, + snClosingSpeed: function() { + if (self.subnavHovered()) return 123450; + return 150 + }, + snClosingTimeout: 700 + }, + init: function() { + //$('.bg', this.c.navItems).css({ + // 'opacity': 0 + //}); + this.initHoverFades() + }, + subnavHovered: function() { + var hovered = false; + $(self.c.navItems).each(function() { + if (this.hovered) hovered = true + }); + return hovered + }, + initHoverFades: function() { + //$('#navigation .bg').css('opacity', 0); + $(self.c.navItems).hover(function() { + self.fadeNavIn.apply(this) + }, + function() { + var el = this; + setTimeout(function() { + if (!el.open) self.fadeNavOut.apply(el) + }, + 10) + }) + }, + fadeNavIn: function() { + $('.bg', this).stop().animate({ + 'opacity': 1 + }, + self.c.navSpeed) + }, + fadeNavOut: function() { + $('.bg', this).stop().animate({ + 'opacity': 0 + }, + self.c.navSpeed) + }, + initSubmenus: function() { + $(this.c.navItems).hover(function() { + $(self.c.navItems).not(this).each(function() { + self.fadeNavOut.apply(this); + }); + this.hovered = true; + var el = this; + self.fadeNavIn.apply(el); + }, + function() { + this.hovered = false; + var el = this; + if (!el.open) self.fadeNavOut.apply(el); + }) + } + }; + + return self; +}; \ No newline at end of file diff --git a/demos/functional/js/chili-recipes.js b/demos/functional/js/chili-recipes.js new file mode 100644 index 000000000..727ffa09c --- /dev/null +++ b/demos/functional/js/chili-recipes.js @@ -0,0 +1,163 @@ +/* +=============================================================================== +Chili is the jQuery code highlighter plugin +............................................................................... + Copyright 2007 / Andrea Ercolino +------------------------------------------------------------------------------- +LICENSE: http://www.opensource.org/licenses/mit-license.php +WEBSITE: http://noteslog.com/chili/ +=============================================================================== +*/ + +/* +this file shows how to configure a static setup +it must be linked from the head of a page like: + +*/ + +ChiliBook.recipeLoading = false; + +ChiliBook.recipes[ "jquery.js" ] = +{ + steps: + { + mlcom : { exp: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\// } + , com : { exp: /\/\/.*/ } + , regexp : { exp: /\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*/ } + , string : { exp: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/ } + , numbers : { exp: /\b[+-]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][+-]?\d+)?\b/ } + , keywords: { exp: /\b(arguments|break|case|catch|continue|default|delete|do|else|false|for|function|if|in|instanceof|new|null|return|switch|this|true|try|typeof|var|void|while|with)\b/ } + , global : { exp: /\b(toString|valueOf|window|element|prototype|constructor|document|escape|unescape|parseInt|parseFloat|setTimeout|clearTimeout|setInterval|clearInterval|NaN|isNaN|Infinity)\b/ } + + , "jquery utilities" : { + exp : /(?:\$\.browser|\$\.each|\$\.extend|\$\.grep|\$\.map|\$\.merge|\$\.trim)\b/ + , replacement: '$$' + } + ,"jquery private" : { + exp : /(?:\$\.find|\$\.parents|\$\.sibling|\.domManip|\.eventTesting|\.extend|\.get|\.init|\.jquery|\.pushStack)\b/ + , replacement: '$$' + } + ,"jquery ajax" : { + exp : /(?:\$\.ajax|\$\.ajaxSetup|\$\.ajaxTimeout|\$\.get|\$\.getIfModified|\$\.getJSON|\$\.getScript|\$\.post|.ajaxComplete|.ajaxError|.ajaxSend|.ajaxStart|.ajaxStop|.ajaxSuccess|.load|.loadIfModified|.serialize)\b/ + , replacement: '$$' + } + , "jquery object" : { + exp : /jQuery|\$(?=\W)/ + , replacement: '$$' + } + ,"jquery core" : { + exp : /\$\.extend|\$\.noConflict|\.(?:each|eq|get|gt|index|lt|size)\b/ + , replacement: '$$' + } + ,"jquery css" : { + exp : /\.(?:css|height|width)\b/ + , replacement: '$$' + } + ,"jquery attributes" : { + exp : /\.(?:addClass|attr|html|removeAttr|removeClass|text|toggleClass|val)\b/ + , replacement: '$$' + } + ,"jquery traversing" : { + exp : /\.(?:add|children|contains|end|filter|find|is|next|not|parent|parents|prev|siblings)\b/ + , replacement: '$$' + } + ,"jquery manipulation": { + exp : /\.(?:after|append|appendTo|before|clone|empty|insertAfter|insertBefore|prepend|prependTo|remove|wrap)\b/ + , replacement: '$$' + } + ,"jquery effects" : { + exp : /\.(?:animate|fadeIn|fadeOut|fadeTo|hide|show|slideDown|slideToggle|slideUp|toggle)\b/ + , replacement: '$$' + } + ,"jquery events" : { + exp : /\.(?:bind|blur|change|click|dblclick|error|focus|hover|keydown|keypress|keyup|load|mousedown|mousemove|mouseout|mouseover|mouseup|one|ready|resize|scroll|select|submit|toggle|trigger|unbind|unload)\b/ + , replacement: '$$' + } + } +}; + +ChiliBook.recipes[ "html.js" ] = +{ + steps: { + mlcom : { exp: /\