The document provides an overview and examples of using the jQuery UI library to add rich interfaces to web applications. It discusses widgets like tabbed panels, accordion panels, and date pickers. It covers downloading and installing jQuery UI, and provides code examples for creating static and dynamic tabbed panels, accordion panels, and using the date picker widget.
Moving to Dojo 1.7 and the path to 2.0James Thomas
With the upcoming 1.7 release, The Dojo Toolkit is beginning to introduce major structural and architectural changes in the toolkit, setting the path for their new major 2.0 release due in 2012.
These fundamental changes to the architecture and technologies underpinning the toolkit will dramatically change how we write Dojo applications in the future, bringing with it huge benefits in performance, cross-library compatibility and support for mobile platforms.
In this presentation, I'll be walking through these changes, explaining the benefits and how it'll impact developers. I'll also be providing migration tips to help you start taking advantage of these benefits in your application today, based upon my experience using Dojo 1.7 on the Watson project.
This talk will be technical in nature, aiming at developers and team leads who are using the toolkit in their products or on client engagements.
Slides from talk "Getting Started with Dojo Toolkit" at Cologne.JS in August 2010
some sample Dojo Code from my presentation is on http://code.google.com/p/dojodemo/
Cologne.JS is a local JavaScript user group: http://colognejs.de/
Moving to Dojo 1.7 and the path to 2.0James Thomas
With the upcoming 1.7 release, The Dojo Toolkit is beginning to introduce major structural and architectural changes in the toolkit, setting the path for their new major 2.0 release due in 2012.
These fundamental changes to the architecture and technologies underpinning the toolkit will dramatically change how we write Dojo applications in the future, bringing with it huge benefits in performance, cross-library compatibility and support for mobile platforms.
In this presentation, I'll be walking through these changes, explaining the benefits and how it'll impact developers. I'll also be providing migration tips to help you start taking advantage of these benefits in your application today, based upon my experience using Dojo 1.7 on the Watson project.
This talk will be technical in nature, aiming at developers and team leads who are using the toolkit in their products or on client engagements.
Slides from talk "Getting Started with Dojo Toolkit" at Cologne.JS in August 2010
some sample Dojo Code from my presentation is on http://code.google.com/p/dojodemo/
Cologne.JS is a local JavaScript user group: http://colognejs.de/
An overview of the practical and useful Dojo Toolkit for the Fairfield County JavaScript Meetup, Sept. 26 2012. A shout to Chris Barber and his excellent presentation which served as inspiration.
Drupal Camp Porto - Developing with Drupal: First StepsLuís Carneiro
The goal of this presentation is to give Drupal new comers some insights about key aspects of developing with Drupal.
The idea is to give the audience some guidelines about good practices of Drupal development along with some tips and, by a simple example application, present the most common and important structures/characteristics of the Drupal API.
This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
The presentation covers:
*Adding JS to the page, both at module and theme level
*Writing Drupal aware JS code
*Libraries management
*Ajax framework
*Drupal JS functions
*Drupal JS theme functions
The jQuery community has provided thousands of useful plugins which can be stitched together to create exceptional websites. However, organizing those plugins, tracking their upstream changes and managing dependencies can become a nightmare with a system to help you manage. JavascriptMVC, and specifically its new version 3 release, provides a framework for organizing outside code, integrating it into your workflow and compressing down to a single output javascript file. This talk will focus on taking external plugins such as jQuery Tools, jQuery UI and other popular plugins and creating a workflow for building larger applications from these components. I will show how to use the JavascriptMVC “getter” and “pluginify” scripts to pull external resources. With JavascriptMVC 3, css and javascript can be packaged together creating truly convenient widgets. I will also demonstrate how often-used pieces of functionality can be abstracted into plugins and shared with the general community via Github.
Presentation about the Mozilla Application Framework and XUL (XML user interface language).
XUL is one of the main building blocks for Mozilla applications and Firefox extensions.
Although there are currently about 150 gallery-related extensions in TER, none of them fullfills the needs of modern gallery applications or is hard to use and not-well maintained. YAG is the first gallery extension for TYPO3 that is about to change this. Implemented using Fluid/Extbase and modern Ajax technology, it has a dedicated backend module for managing its contents and uses an advanced theming concept for personlization in the frontend. YAG also ships with mass-file upload and enhanced resolution handling. Integrated image caching enables delivery of every managed photo in every resolution.
TYPO3 frontend caching enables quick page load and short response times which makes YAG usable for high-traffic sites. Web sites with up to 20.000 photos are more than a proof-of-concept.
We will also present you the new features available with the upcomming YAG Version 2.0, like using the full power of the TYPO3 page tree and frontend editing with a fine grained access control concept.
During this 45minutes talk we will present to you an overview of YAG's features and you will learn how the Front- and Backend looks like. There will be a short introduction into the theming concept so you will get an impression on how to create your own personlized theme.
If you think about joining this session, take a look at http://www.yag-gallery.de for further information and a bunch of demo-pages that shows the power of the extension.
PHP is a very popular scripting language in the world. Currently, PHP is used in more than 81 % of websites. PHP is the most extensively used server side scripting language. Over 79% of server implementations today are in PHP.
An overview of the practical and useful Dojo Toolkit for the Fairfield County JavaScript Meetup, Sept. 26 2012. A shout to Chris Barber and his excellent presentation which served as inspiration.
Drupal Camp Porto - Developing with Drupal: First StepsLuís Carneiro
The goal of this presentation is to give Drupal new comers some insights about key aspects of developing with Drupal.
The idea is to give the audience some guidelines about good practices of Drupal development along with some tips and, by a simple example application, present the most common and important structures/characteristics of the Drupal API.
This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.
The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.
The presentation covers:
*Adding JS to the page, both at module and theme level
*Writing Drupal aware JS code
*Libraries management
*Ajax framework
*Drupal JS functions
*Drupal JS theme functions
The jQuery community has provided thousands of useful plugins which can be stitched together to create exceptional websites. However, organizing those plugins, tracking their upstream changes and managing dependencies can become a nightmare with a system to help you manage. JavascriptMVC, and specifically its new version 3 release, provides a framework for organizing outside code, integrating it into your workflow and compressing down to a single output javascript file. This talk will focus on taking external plugins such as jQuery Tools, jQuery UI and other popular plugins and creating a workflow for building larger applications from these components. I will show how to use the JavascriptMVC “getter” and “pluginify” scripts to pull external resources. With JavascriptMVC 3, css and javascript can be packaged together creating truly convenient widgets. I will also demonstrate how often-used pieces of functionality can be abstracted into plugins and shared with the general community via Github.
Presentation about the Mozilla Application Framework and XUL (XML user interface language).
XUL is one of the main building blocks for Mozilla applications and Firefox extensions.
Although there are currently about 150 gallery-related extensions in TER, none of them fullfills the needs of modern gallery applications or is hard to use and not-well maintained. YAG is the first gallery extension for TYPO3 that is about to change this. Implemented using Fluid/Extbase and modern Ajax technology, it has a dedicated backend module for managing its contents and uses an advanced theming concept for personlization in the frontend. YAG also ships with mass-file upload and enhanced resolution handling. Integrated image caching enables delivery of every managed photo in every resolution.
TYPO3 frontend caching enables quick page load and short response times which makes YAG usable for high-traffic sites. Web sites with up to 20.000 photos are more than a proof-of-concept.
We will also present you the new features available with the upcomming YAG Version 2.0, like using the full power of the TYPO3 page tree and frontend editing with a fine grained access control concept.
During this 45minutes talk we will present to you an overview of YAG's features and you will learn how the Front- and Backend looks like. There will be a short introduction into the theming concept so you will get an impression on how to create your own personlized theme.
If you think about joining this session, take a look at http://www.yag-gallery.de for further information and a bunch of demo-pages that shows the power of the extension.
PHP is a very popular scripting language in the world. Currently, PHP is used in more than 81 % of websites. PHP is the most extensively used server side scripting language. Over 79% of server implementations today are in PHP.
How to Use Publicity to Grow Your StartupJoy Schoffler
Presented by Leverage PR and Startup America, this presentation provides great tips on how to use publicity to grow your startup. This presentation also discusses to to raise crowdfunding capital with publicity.
Walks through the top 8 improvements coming to Drupal 8, including videos and code samples to demonstrate "before vs. after."
Given to the @DrupalNS meet up in Bedford, Nova Scotia on July 28, 2014.
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
This class is intended for people who know some HTML and CSS, and covers the fundamental principles of Drupal theming geared toward people who wish to take a static mockup of a site design and turn it into a Drupal theme. You will also learn about using base themes, grid-based layout and helper modules to streamline and customize your Drupal theme.
Trainer Ryan Price has built entertainment sites, social networks, and eCommerce sites for clients including Popular Science, Field and Stream and Outdoor Life magazines. With over 10 years of experience building sites with PHP and other technologies, Ryan began immersing himself in Drupal around 2006. Ryan often teaches and writes articles along with Mike Anello, and the duo is also known for producing the DrupalEasy Podcast with their host Andrew Riley.
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
3. Overview
• Set of rich GUI elements and effects
– Tabbed panels, slider, etc
– Effects similar to Scripaculous
– Drag and drop API
• Pros
– Official part of j
p jQuery
y
– Well tested
– Very clean design
– Many still show meaningful results if JavaScript disabled
– Theming framework
• Cons
– No autocompleter (!)
7
– Not as extensive as Dojo, ext/JS, or YUI
Downloading
• Download custom bundle
– h //j
http://jqueryui.com/download
i /d l d
– Select widgets and effects you want
– Press “Download” to download ZIP file of result
• Unzip
– Unzip result into location of your choice
• D
Download additional themes
l d dditi l th
– http://jqueryui.com/download
– Deselect all widgets and options, choose different theme
• You can also interactively build a customized theme
– Unzip and copy entries in “css” folder to “css” folder of
original download
• Bookmark the documentation
8
– http://docs.jquery.com/UI/
4. Installing Files
• Load normal jQuery as before
– jQuery UI download gives an additional copy in “js”
folder, so if you are using jQuery UI, one download from
jq y
jqueryui.com is sufficient
• As discussed in previous sections, it is common to rename
jQuery-1.3.x.min.js to jQuery.js to simplify upgrades
• Copy jQuery ui 1.7.x.custom.min.js
jQuery-ui-1.7.x.custom.min.js
– E.g., copy download_folder/js/jQuery-ui-
1.7.x.custom.min.js to WebContent/scripts
– It is common to leave detailed name for this file, since UI
i t l d t il d f thi fil i
capabilities change from version to version
• Copy CSS “theme” folder
py
– E.g., copy download_folder/css/ui-lightness to
WebContent/css/
9
Setting Up Page: Overview
• Load required jQuery UI files
– jquery.js (renamed from jquery-1.3.2.min.js)
– jquery-ui-1.7.1.custom.min.js
– Any custom CSS files your app uses
• Load your files that use jQuery UI
– Any custom JavaScript files your app uses
– themename/jquery-ui-1.7.1.custom.min.css
10
6. Overview
• Idea
– T bb d panel where clicking tabs changes content inside
Tabbed l h li ki t b h t t i id
• HTML
– Make a div container to hold the tabs
• <div id="main-tabbed-panel-div">…</div>
– Include a ul list containing internal hyperlinks
• <ul>
<li><a href="#panel1">Go to Panel 1</a></li>
<li><a href="#panel2">Go to Panel 2</a></li>
</ul>
– Include divs whose ids match the href values (minus “#”)
# )
• <div id="panel1">Content for panel 1</div>
<div id="panel2">Content for panel 2</div>
• Basic JavaScript
– Call “tabs()” on the div container
• $("#main-tabbed-panel-div").tabs();
13
Example: HTML
<div id="static-tabbed-panel-div">
<ul>
<li><a href="#panel1">Panel 1</a></li>
<li><a href="#panel2">Panel 2</a></li>
<li><a href="#panel3">Panel 3</a></li>
</ul>
<div id="panel1">
<p>Content for first panel.</p>
<p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p>
<p>Foo bar baz </p><p>Yadda yadda yadda </p>
</div>
<div id="panel2">
<p>Content for second panel.</p>
<p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p>
</div>
<div id="panel3">
<p>Content for thi d panel.</p>
< >C t t f third l </ >
<p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p>
</div>
14 </div>
7. Example: JavaScript
$(function() {
$("#static-tabbed-panel-div").tabs();
$("# t ti t bb d l di ") t b ()
…
})
});
15
Example: Results
16
8. Options for jQuery UI Widgets
• You can supply anonymous object
– Object has optional fields
– Fields specify configuration and operational options
• Examples
– $("#some-id").tabs();
– $("#some-id") tabs({ option1: "foo",
$( #some id ).tabs({ foo
option2: "bar",
option3: "baz" })
No t ili
N trailing
comma
17
Main Options for tabs({…}) for
Static Content
• selected (default: 0)
– T b to be selected initially
Tab b l d i i i ll
• collapsible (default: false)
– Can you click selected tab to hide it (and thus all panels)?
• $("#main-id").tabs({ collapsible: true });
• disabled (default: empty array)
– A array of t b numbers (0-based) that should be disabled
An f tab b (0 b d) th t h ld b di bl d
on startup
• event (default: click)
( )
– The type of event that should initiate tab selection
• $("#main-id").tabs({ event: "mouseover" });
• fx
– Many options for specifying animation when tabs are
18
selected. See docs for details.
10. Example: HTML
<div id="ajax-tabbed-panel-div">
<ul>
<li><a href="time-panel.jsp">Show Time</a></li>
<li><a href="list-panel.jsp?range=5">
Show Small Numbers</a></li>
<li><a href="list-panel.jsp?range=500">
Show Big Numbers</a></li>
</ul>
</div>
21
Example: JavaScript
$(function() {
$( #ajax tabbed panel div ).tabs({
$("#ajax-tabbed-panel-div") tabs({ collapsible: true });
…
});
22
11. Example: JSP
• time-panel.jsp
<h3>It is now <%= new java.util.Date() %></h3>
Do you know where your closures are doing?
• list-panel.jsp
p j p
<% double range = 10.0;
try {
String r = request.getParameter("range");
range = I t
Integer.parseInt(r);
I t( )
} catch(Exception e) {} %>
<h3>Numbers from 0 to <%= range %></h3>
<ul>
<li><%= Math.random() * range %></li>
<li><%= Math.random() * range %></li>
<li><%= Math.random() * range %></li>
<li><%= Math.random() * range %></li>
<li><%= Math.random() * range %></li>
</ul>
23
Example: Results
24
13. Overview
• Idea
– Horizontally stacked panels with wide tabs
• HTML
– Make a div container to hold the tabs
• <div id="main-accordion-panel-div">…</div>
– Include alternating pairs of text with links and content
• <h2><a href="#">Panel 1</a></h2>
• <div>Content for Panel 1</div>
• <h2><a href="#">Panel 2</ ></h2>
<h2>< h f "#">P l 2</a></h2>
• <div>Content for Panel 2</div>
• Basic Ja aSc pt
as c JavaScript
– Call “accordion()” on the div container
27
• $("#main-accordion-panel-div").accordion();
Example: HTML
<div id="accordion-panel-div">
<h2><a href="#">Panel 1</a></h2>
href= # >Panel
<div>
<p>Content for first panel.</p>
<p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p>
</div>
<h2><a href="#">Panel 2</a></h2>
<div>
<p>Content for second panel.</p>
<p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p>
</div>
<h2><a href="#">Panel 3</a></h2>
<div>
<p>Content for third panel.</p>
<p>Foo, bar, baz.</p><p>Yadda, yadda, yadda.</p>
</div>
28 </div>
14. Example: JavaScript
$(function() {
$("#accordion-panel-div").accordion();
$("# di l di ") di ()
…
})
});
29
Example: Results
30
16. Overview
• Idea
– Click in textfield to pop up calendar. Choosing day from
calendar puts date string into textfield
• HTML
– Make an input field
• <input type="text" id="date-field"/>
p yp
• Basic JavaScript
– Call “datepicker()” on the textfield
• $("#date-field").datepicker();
33
Example: HTML
<form action=#">
<table>
<tr><td align="right">
From: <input type="text"/></td></tr>
<tr><td align="right">
Departure Date: <input type="text" id="start-date"/></td></tr>
/ / /
<tr><td align="right">
To: <input type="text"/></td></tr>
<tr><td a g
t td align="right">
g t
Return Date: <input type="text" id="end-date"/></td></tr>
<tr><td align="center">
<input type="button" value="Show Flights"/>
<input type="button" value="Show Hotels"/>
/
</td></tr>
</table>
</form>
34
19. Overview
• Idea
– Interactive slider to let user choose numeric values
• Also supports double-handled sliders for choosing ranges
• HTML
– Make a placeholder div
• <div id="div-for-slider"></div>
• Basic JavaScript
– Call “slider()” on the div, supply function to be called
when slider moves
• $("#div-for-slider").slider({ slide: sliderEventHandler });
– Look up value later
• Event handler takes two arguments: event and ui. Use
ui.value to get current slider value
39
Example: HTML
<form action="#">
<table>
…
<tr><td align="right">
Temperature:
</td>
<td align="left" width="300">
<div id="slider-div" style="margin-left: 10px"></div>
<div id="temp-display" align="center">32</div>
/
</td></tr>
<tr><td align="center" colspan="2">
<input type="button" value="Order Coffee />
type= button value= Order Coffee"/>
</td></tr>
</table>
</form>
/
40
22. Overview
• Idea
– Sh
Shows progress from 0% to 100%
f
• Output only: does not accept user input
• HTML
– Make a placeholder div
• <div id="div-for-progress-bar"></div>
• Basic JavaScript
– Call “progressbar()” on the div
• $("#div-for-progress").progressbar();
– Have another event that changes values of bar
• Look up value with
$("#div-for-progress").progressbar("option", "value");
• Change value with
$("#div-for-progress").progressbar("option", "value", num);
45
Example: HTML
<form action="#">
<div id="progressbar-div"></div>
<di id " b di "></di >
<input type="button" value="Click 10 Times"
id="progressbar-button"/>
</form>
46