jQuery技术

jQuery progression.js 进度条

字号+ 作者:H5之家 来源:H5之家 2017-01-17 17:00 我要评论( )

jQuery progression.js 进度条 - Progression.js A jQuery plugin that gives users real time hints amp; progress updates as they complete forms 运行一下 D

jQuery progression.js 进度条 Progression.js

A jQuery plugin that gives users real time hints & progress updates as they complete forms

运行一下

Documentation ..:: Getting Started Include the relevant files

Firstly include jQuery and the progression.css and progress.js files. Place these before </head> section

<link href='progression.css' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="progression.js"></script> Create a form

You must give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression.

The helper text for the tooltip can be set by adding data-helper to the element. This is demonstrated below

<form> <p> <label for="">Name</label> <input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" value="" placeholder="" /> </p> </form> ##### Initiate the plugin

Once you have created your form you will need to initiate the plugin.

At its most basic level you can initiate the plugin like:

$(document).ready(function ($) { $("#myform").progression(); });

If you want to initiate the plugin with options then you can do so like:

$("#myform").progression({ tooltipWidth: '200', tooltipPosition: 'right', tooltipOffset: '50', showProgressBar: true, showHelper: true, tooltipFontSize: '14', tooltipFontColor: 'fff', progressBarBackground: 'fff', progressBarColor: '6EA5E1', tooltipBackgroundColor: 'a2cbfa', tooltipPadding: '10', tooltipAnimate: true }); ..:: Options

Variable Default Value Description Valid Options

tooltipWidth 200 The width in pixels that you would like the tooltip to be

tooltipPosition right Whether the tooltip should sit to the left or right of the form left/right

tooltipOffset 50 The width in pixels that you would like the offset of the tooltip to be

showProgressBar true Whether the progress bar should be displayed or not true/false

showHelper true Whether the helper text should be shown or not true/false

tooltipFontSize 14 Set the font size of the helper text in pixels

tooltipFontColor ffffff The hash color reference of the helper text

progressBarBackground ffffff The hash color reference of the progress bar background

progressBarColor 6EA5E1 The hash color reference of the progress bar

tooltipPadding 10 The padding for the tooltip in pixels

tooltipAnimate true Whether to animate the tooltip or not true/false

下载

  • 上一篇:jQuery CleverTabs
  • jQuery SmartTab:下一篇
  • 章节

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jquery ajax.getscript缓存问题

      jquery ajax.getscript缓存问题

      2017-01-17 17:01

    • jquery form交付密码安全吗怎么解决?

      jquery form交付密码安全吗怎么解决?

      2017-01-16 10:03

    • [jquery mobile]经典收藏 50个jQuery Mobile开发技巧集萃

      [jquery mobile]经典收藏 50个jQuery Mobile开发技巧集萃

      2017-01-15 16:03

    • jQuery Mobile框架初学者入门教程

      jQuery Mobile框架初学者入门教程

      2017-01-13 15:00

    网友点评