mirror of
https://gitlab.com/freepascal.org/fpc/pas2js.git
synced 2025-04-08 22:07:48 +02:00
* Additional explanations
This commit is contained in:
Michaël Van Canneyt
parent
4dc6f58766
commit
09237327b2
36
demo/modules/simple/README.md
Normal file
36
demo/modules/simple/README.md
Normal file
@ -0,0 +1,36 @@
|
||||
# Modules demo
|
||||
|
||||
These demos demonstrate the use of modules. There are 3 demos which
|
||||
basically do the same thing, just using different techniques.
|
||||
|
||||
Functionally the module offers 2 things:
|
||||
|
||||
* a way to clear HTML below a certain tag (identified by it's ID): the **ClearPage** function.
|
||||
the **DefaultClearID** variable is used to determine the HTML tag if no tag is specified in the **ClearPage** function.
|
||||
|
||||
* a way to set the HTML page's title which is visible in the tab caption or browser window
|
||||
title bar. This is done with the **SetPageTitle** function.
|
||||
|
||||
## htmlutils
|
||||
|
||||
In the *htmlutils* demo, the 2 functions and a variable are exported:
|
||||
* ClearPage
|
||||
* SetPageTitle
|
||||
* DefaultClearID
|
||||
|
||||
## Classes
|
||||
|
||||
In the *classes* demo, the 2 functions and a variable are made part of a class
|
||||
**THTMLUtils** , and only a function to create an instance of this class is exported.
|
||||
|
||||
Exported:
|
||||
* CreateUtils
|
||||
|
||||
## ClassesUsingVar
|
||||
|
||||
In the *classesusingvar* demo, the function to create an object is removed and
|
||||
replaced by a variable that contains an instance of the **THTMLUtils** class.
|
||||
This variable is then exported.
|
||||
|
||||
Exported:
|
||||
* Utils
|
||||
@ -9,52 +9,62 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Clear</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Clear</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnClear" class="button is-info">Clear</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnClear" class="button is-info">Clear</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Title</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtTitle" class="input" type="text" placeholder="Enter page title">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Title</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnSetTitle" class="button is-info">Set title</button>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtTitle" class="input" type="text" placeholder="Enter page title">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnSetTitle" class="button is-info">Set title</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<!-- empty label needed -->
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<!-- empty label needed -->
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input id="cbUseDefaultClearID" type="checkbox" >
|
||||
Use DefaultBelowID
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input id="cbUseDefaultClearID" type="checkbox" >
|
||||
Use DefaultBelowID
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
</div> <!-- .column -->
|
||||
<div class="column is-4">
|
||||
<div class="content">
|
||||
<p>Enter the name of a tag ID (<code>content</code>, <code>content2</code>) to clear HTML below that ID. Specifying no ID will clear the whole page</p>
|
||||
<p>Enter a title to set the title of this page. See the effect in the browser tab or window title bar.
|
||||
</div> <!-- .content -->
|
||||
</div> <!-- .column -->
|
||||
</div> <!-- .columns -->
|
||||
</div> <!-- ?box -->
|
||||
<div id="all">
|
||||
<div class="section" id="content">
|
||||
|
||||
@ -9,52 +9,62 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Clear</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Clear</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnClear" class="button is-info">Clear</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnClear" class="button is-info">Clear</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Title</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtTitle" class="input" type="text" placeholder="Enter page title">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Title</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnSetTitle" class="button is-info">Set title</button>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtTitle" class="input" type="text" placeholder="Enter page title">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnSetTitle" class="button is-info">Set title</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<!-- empty label needed -->
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<!-- empty label needed -->
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input id="cbUseDefaultClearID" type="checkbox" >
|
||||
Use DefaultBelowID
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input id="cbUseDefaultClearID" type="checkbox" >
|
||||
Use DefaultBelowID
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
</div> <!-- .column -->
|
||||
<div class="column is-4">
|
||||
<div class="content">
|
||||
<p>Enter the name of a tag ID (<code>content</code>, <code>content2</code>) to clear HTML below that ID. Specifying no ID will clear the whole page</p>
|
||||
<p>Enter a title to set the title of this page. See the effect in the browser tab or window title bar.
|
||||
</div> <!-- .content -->
|
||||
</div> <!-- .column -->
|
||||
</div> <!-- .columns -->
|
||||
</div> <!-- ?box -->
|
||||
<div id="all">
|
||||
<div class="section" id="content">
|
||||
|
||||
@ -9,52 +9,62 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Clear</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Clear</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnClear" class="button is-info">Clear</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnClear" class="button is-info">Clear</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Title</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtTitle" class="input" type="text" placeholder="Enter page title">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Title</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnSetTitle" class="button is-info">Set title</button>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input id="edtTitle" class="input" type="text" placeholder="Enter page title">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button id="btnSetTitle" class="button is-info">Set title</button>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<!-- empty label needed -->
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<!-- empty label needed -->
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input id="cbUseDefaultClearID" type="checkbox" >
|
||||
Use DefaultBelowID
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input id="cbUseDefaultClearID" type="checkbox" >
|
||||
Use DefaultBelowID
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- .field .has-addons -->
|
||||
</div> <!-- .field-body -->
|
||||
</div> <!-- .field .is-horizontal -->
|
||||
</div> <!-- .column -->
|
||||
<div class="column is-4">
|
||||
<div class="content">
|
||||
<p>Enter the name of a tag ID (<code>content</code>, <code>content2</code>) to clear HTML below that ID. Specifying no ID will clear the whole page</p>
|
||||
<p>Enter a title to set the title of this page. See the effect in the browser tab or window title bar.
|
||||
</div> <!-- .content -->
|
||||
</div> <!-- .column -->
|
||||
</div> <!-- .columns -->
|
||||
</div> <!-- ?box -->
|
||||
<div id="all">
|
||||
<div class="section" id="content">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user