Of Stack

Simple example of the usage of the jquery.qtip prompt information plug in

  • 2021-06-28 11:15:47
  • OfStack

This article illustrates the usage of the jquery.qtip prompt information plug-in.Share it for your reference, as follows:

The company asked to write a message about the effect of the prompt, the plug-in queried on the Internet, feel good, below is what you learned 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(
  function(){
    // The plug-in default style display is used below ,content Is the content to be displayed (including text and pictures) 
    $("#huangbiao").qtip({
      content: 'Stems are great for indicating the context of the tooltip.',
      style: {
        tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners
      }
    });
    //style json Is the setting of the prompt style that is external div Style settings, but no specific location 
    $("#huangbiao1").qtip({
      content: ' Set display text style ',
      style: {
        width: 200,
        padding: 5,
        background: '#A2D959',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 7,
          radius: 5,
          color: '#A2D959'
        },
        tip: 'bottomLeft',
        name: 'dark' // Inherit the rest of the attributes from the preset dark style
      }
    });
    //name:'green'  Is inherited from the default prompt style, there are other name You can refer to the help documentation 
    $("#huangbiao2").qtip({
      content: ' Use plug-in customized styles ',
      style: {
        name: 'green' // Notice the corner value is identical to the previously mentioned positioning corners
      }
    });
    //target: Indicates where the prompt information is displayed in the control 
    //tooltip:
    $("#huangbiao3").qtip({
      content: 'Stems are great for indicating the context of the tooltip.',
      position: {
        corner: {
          target: 'topLeft',
          tooltip: 'bottomLeft'
        }
      }
    });
    $("#huangbiao4").qtip({
      content: '<img src="img/2.jpg">',
    });
    //show  It refers to what is displayed. when What triggers it to show, hide and show Corresponding 
    //solo:
    $("#huangbiao5").qtip({
      content: '<img src="img/2.jpg">',
      show:{
        when:'click',
        solo:false
      },
      hide:{
        when:'click',
        solo:false
      }
    });
    // Displays a style similar to Window mode, containing title And content tips 
    $("#huangbiao6").qtip({
      content: {
        title: {
          text: 'content-title-text',
          button: 'button'
        },
        text: 'content-text'
      },
      fixed:true
    });
    //api: Is a callback function, beforeShow Is the prompt message before the prompt is displayed. beforeHide The opposite is true; onRender Is called after the content is rendered 
    $("#huangbiao7").qtip({
      content: 'use callback function',
      api:{
        beforeShow:function(){
          alert("beforeShow api function");
        },
        beforeHide:function(){
          alert("beforeHide api function");
        }
      }
    });
    $("#huangbiao9").qtip({
      content: '',
      style:{
        width:"1024px",
        height:"1024px",
        background:"black"
      }
    });
  }
);
</script>
<title> Untitled Document </title>
</head>
  <div style="text-align:center;"><span id="huangbiao"> Show plain text </span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao1"> Set display text style </span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao2"> Use plug-in customized styles </span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao3"> Set the display position of the prompt </span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao4"> display picture </span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao5"> Hit Event Show and Hide Tips </span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao6"> Tips with title </span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao7"> VC & Delphi </span></div>
  <p>
  <div style="text-align:center;"><span id="huangbiao9"> Cover Full Screen </span></div>
<body>
</body>
</html>

More readers interested in jQuery-related content can view this site's topics: jQuery Common Plug-ins and Usage Summary, Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Drag and Skills Summary, jQuery Extension Skills Summary, jQuery Common Classic Special Effects Summary, etc.jQuery Animation and Utility Summary and jquery Selector Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.

Related articles: