免费吃鸡开挂神器

書名： jQuery 1.3 with PHP
作者名： Kae Verens
本章字數： 874字
更新時間： 2021-04-01 13:36:00

Contextual help

In some desktop application, there are contextual help applications, where you would click on a help icon, and then click the item you want help on.

It is called "contextual" help because the help that is shown is very specific to the item you need help on, as opposed to the general help, which documents the entire page.

As developers, we like to write concise code. So, when asking for an email address, we might simply write this HTML:

<tr><th>Mobile</th><td><input name="mobile" /></td></tr>

However, help text tends to be much larger. Obviously, if you don't understand immediately what is required, then it needs to be explained in-depth.

If we were to embed the help text into the HTML source for every element in the page that we intend to use contextual help on, then the resulting text would be probably larger than the page source itself.

This is a waste of bandwidth if the user doesn't require help or needs help on only one item.

It's also a waste of database queries if the text is obtained from a database.

Because of this, it makes sense that contextual help should be downloaded only as required, through Ajax.

The behavior of the contextual help is important—it must be intuitive and unobtrusive.

The example I've written, as can be seen in the following screenshot, starts by showing a ? on the top right of the screen:

When clicked on this ? icon, smaller help icons will be shown next to all the elements in the page. These icons have help associated with them. When the first icon is clicked again, the smaller icons will vanish. Clicking the smaller icons will trigger the Ajax call.

An Ajax call is sent to the help provider application, with the name of the help to be obtained. A JSON object is returned to jQuery, which then displays the result below the item that was questioned. The document body is asked to remove the obtained help from the screen the next time the screen is clicked.

Here's the HTML we will work from. Save it as contextual_help.html in your example directory:

<html>
  <head>
    <script src="jquery.min.js"></script>
    <script src="contextual_help.js"></script>
    <style type="text/css">

      #ch_opener{
        position:absolute;top:0;right:0;
        border:1px solid #000;background:#ff0;
        -moz-border-radius:10px;width:20px;height:20px;
        text-align:center;
      }

      .contextual_help_links{
        border:1px solid #000;background:#ff0;
        -moz-border-radius:5px;width:10px;height:10px;
        text-align:center;font-size:8px;display:inline-block;
      }

      .contextual_help_result{
        position:absolute;border:1px solid #000;
        background:#fff;opacity:.7;
      }

    </style>
  </head>
  <body>
    <form>
      <table>
        <tr>
          <th>Name</th>
          <td class="contextual_help name">
            <input name="name" />
          </td>
        </tr>
        <tr>
          <th>Email</th>
          <td class="contextual_help email">
            <input name="email" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

Note the classes added to the table cells. This tells the jQuery script what help text is associated with the cell. The first part, contextual_help, says "there is contextual help associated with this element." The jQuery script sees that, and then takes the string after that to be the name of the help that is requested.

In this example, I've removed the JavaScript from the body of the HTML and placed it externally. Some of the reasons for including JavaScript from an external file are as follows:

The client will cache the script, reducing bandwidth.
Easier to read—you won't have to mentally shift between PHP, HTML, JavaScript, and CSS if each language is kept separate.
Easier to debug.
Less bandwidth wasted if the JavaScript is not loaded in the first place (search engines) or if JavaScript is loaded on demand, instead of all being loaded at once.
Neater. In my opinion, neatness is very important as it makes code easier to edit even a year later when you come back to it.

On the server side, it is assumed that a parameter named "name" will be sent, and a JSON object will be returned based on that.

Save the following file as contextual_help.php:

<?php

$name=$_REQUEST['name'];
switch($name){
  case 'email': // {
    $help='Enter your email address here.<br />Please note that itwill be verified, so make sure it is correct.';
    break;
  // }
  case 'name': // {
    $help='Enter your full name here. No more than 255 letters,please!';
    break;
  // }
  default: // {
    $help='Unknown help requested: '.$name;
  // }
}

echo '{"name":"'.addslashes($name).'","help":"'.addslashes($help).'"}';
?>

You could enhance that in various ways, as mentioned earlier—make it read from a database, add a multi-lingual element to it, and so on.

Here is the JavaScript that does all the magic; place it in contextual_help.js:

function contextual_help_setup(){
  $('<a id="ch_opener" href="javascript:;">?</a>')
    .click(contextual_help_toggle)
    .appendTo(document.body);
}

function contextual_help_toggle(){
  if(document.contextual_help_active){
    $('.contextual_help_links').remove();
    document.contextual_help_active=false;
    return;
  }
  $('<a href="javascript:;" class="contextual_help_links">?</a>')
    .click(contextual_help_call)
    .appendTo($('.contextual_help'));
  document.contextual_help_active=true;
}

function contextual_help_call(){
  var parent_class=this.parentNode.className;
  var help_to_get=parent_class
    .replace(/contextual_help ([^ ]*)( |$)/,'$1');
  $.getJSON(
    'contextual_help.php?name='+help_to_get,
    contextual_help_show
  );
}

function contextual_help_show(data){
  var parent_el=$('.'+data.name);
  if(!parent_el.length)return;
  var pos=parent_el.position();
  var style='left:'+pos.left+'px;top:'
    +(pos.top+parent_el.height())+'px;';
  $('<div class="contextual_help_result" style="'+style+'">'+data.help+'</div>').appendTo(parent_el);
  contextual_help_toggle();
  $(document.body).click(contextual_help_hide);
}

function contextual_help_hide(){
  $(document.body).unbind('click',contextual_help_hide);
  $('.contextual_help_result').remove();
}
$(document).ready(contextual_help_setup);

See the example in action now by opening contextual_help.html.

First, the script is set up unobtrusively with the contextual_help_setup function, which adds the ? icon to the top right of the document.

When that icon is clicked, the contextual_help_toggle function either shows, or hides the smaller icons next to their contexts. Each call to this function will alternate (or toggle) the behavior.

If a smaller icon is clicked, then the contextual_help_call function determines what help is actually required, by looking at the class name of the element that help is requested from. Then a request is sent to the server.

The server returns the answer to contextual_help_show, which shows the result and tells the document to hide the result when it is clicked (with contextual_help_hide).

This could be enhanced further, by building up a widget to display the help, which could ask the reader to enhance the help, rate the help, and so on.

官术网_书友最值得收藏!

jQuery 1.3 with PHP

Contextual help