font-family: Gill Sans, "Gillius ADF", Gillius, GilliusADF, Sans-Serif;
}
h1 { color: #606060 }
- p { font-weight: bold }
+ h2 { font-size: 100% }
+ .pane { background: #eee; border-radius: 1em;
+ padding: 0.25em 1em; margin: 0.75em; }
</style>
</head>
<body>
+ <img src="images/mkws-logo-300px.jpeg" alt="MKWS logo" =
+ style="float:right; margin: 1.5em"/>
<h1>MKWS: the MasterKey Widget Set</h1>
- <p>
- This site contains tools, not content:
- </p>
+
+ <div class="pane">
+ <h2>This site contains tools, not content:</h2>
<ul>
<li>
<a href="mkws.js">mkws.js</a>
JavaScript code that powers the MasterKey Widget Set
</li>
<li>
- <a href="/libjs-pz2/pz2api.1.js">/libjs-pz2/pz2api.1.js</a>
+ <a href="/pazpar2/js/pz2.js">/pazpar2/js/pz2.js</a>
--
Low-level JavaScript library for access to the MasterKey web
service.
--
A stylesheet which styles only MasterKey widgets, and does not
otherwise interfere with application-site's styles.
- <!--
- <p style="color:darkred">
- Note. This is not yet quite true: the stylesheet needs tweaking
- to make it more specific to only the MKWS components. At present
- it spills over into styling parts of the containing site, too.
- </p>
- -->
</li>
</ul>
- <p>
- For examples of how to use the widget-set, see:
- </p>
+ </div>
+
+ <div class="pane">
+ <h2>For examples of how to use the widget-set, see:</h2>
<ul>
<li>
A very simple application at
It's worth viewing the source to see how small it is.
</li>
<li>
- <a href="http://example.indexdata.com/index-full.html"
+ <a href="http://example.indexdata.com/language.html"
>A more detailed version</a>
that contains a configuration structure instead of accepting
the defaults. Includes a custom translation option to present
</li>
<li>
The
- <a href="http://example.indexdata.com/index-jquery.html"
+ <a href="http://example.indexdata.com/jquery.html"
>jQuery plugin</a>
version, consisting of a single line of JavaScript code.
</li>
<li>
An application that
- <a href="http://example.indexdata.com/index-lowlevel.html"
+ <a href="http://example.indexdata.com/lowlevel.html"
>uses lower-level MKWS components</a>
rather than the all-in-one <tt>#mkwsResults</tt> division,
allowing it to use a rather different layout.
</li>
<li>
- <a href="http://example.indexdata.com/index-mobile.html"
+ An application that specifies how to display brief and full records
+ <a href="http://example.indexdata.com/templates.html"
+ >using Handlebar templates</a>.
+ (Read about
+ <a href="http://handlebarsjs.com/"
+ >the templating language</a>.)
+ </li>
+ <li>
+ <a href="http://example.indexdata.com/mobile.html"
>A version suitable for mobile devices</a>,
with a responsive design that moves components around
depending on the screen size.
</li>
<li>
- <a href="http://example.indexdata.com/index-popup.html"
+ <a href="http://example.indexdata.com/popup.html"
>A version that uses a jQuery popup</a>.
</li>
<li>
+ <a href="http://example.indexdata.com/dict.html"
+ >An application that uses MKWS to find dictionary
+ definitions of words when you highlight them</a>.
+ </li>
+ <li>
+ <a href="http://example.indexdata.com/auto.html"
+ >An application that runs an automatic search on load</a>.
+ </li>
+ <li>
+ <a href="http://example.indexdata.com/localauth.html"
+ >An application that uses a local authentication regime</a>,
+ and the corresponding
+ <a href="http://example.indexdata.com/apache-config.txt"
+ >Apache2 configuration stanza</a>.
+ </li>
+ <li>
An existing web-site,
<a href="http://sagp.miketaylor.org.uk/"
>The Self-Appointed Grammar Police</a>,
which has been fitted with a popup MKWS search-box.
</li>
</ul>
- <p>
- The set of targets can be maintained:
- </p>
+ </div>
+
+ <div class="pane">
+ <h2>The set of targets can be maintained:</h2>
<ul>
<li>
Use the main
and act as the "MK Demo" library administrator.
</li>
</ul>
- <p>
- Documentation:
- </p>
+ </div>
+
+ <div class="pane">
+ <h2>Documentation:</h2>
<ul>
<li>
The <a href="whitepaper.html">The whitepaper, including a reference section.</a>
which can be used to guide the customisation of its CSS styles.
</li>
</ul>
+ </div>
</body>
</html>