zoukankan      html  css  js  c++  java

  • 实用插件的积累

    从事前端职位以来，感触最深的就是，前端的插件应有尽有，如果在项目开发的过程中合理的使用，就会达到事半功倍的效果，那么今天自己也将积累的一些插件分享出来。下面代码中的一些方法知识是我平时使用到的，可能有些没有写到，大家就自己看官方的文档吧

    插件1：Nprogress(进度条)

    github
    有时候看见页面加载的时候会有一个进度条的效果，看着挺炫。大家一看究竟吧。

    1
    2
    3
    使用方法：首先引入包文件，css样式，调用下来方法
    NProgress.start();
    NProgress.done();

    插件2：jquery.form.js(Ajax提交表单)

    官方网址
    1.Add a form to your page. Just a normal form, no special markup require

    1
    2
    3
    4
    5
    <form id="myForm" action="comment.php" method="post">
        Name: <input type="text" name="name" />
        Comment: <textarea name="comment"></textarea>
        <input type="submit" value="Submit Comment" />
    </form>

    2.Include jQuery and the Form Plugin external script files and a short script to initialize the form when the DOM is ready:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
        <head>
           <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
            <script src="http://malsup.github.com/jquery.form.js"></script>
                 <script>
                    
                    $(document).ready(function() {
                    // bind 'myForm' and provide a simple callback function
                     $('#myForm').ajaxForm(function() {
                          alert("Thank you for your comment!");
                          });
                     });
            </script>
      </head>
    </html>

    插件3：bootstrap.datepicker.js（日历）

    官方网址
    依赖bootstrap包，注意如果下载的是bootstrap V3版本的，要引入bootstrap-datepicker3.css文件。

    1
    2
    3
    4
    5
    // 使用方法1：（html标签）
    //在input标签中引入下面内容 （data-date-format="yyyy-mm-dd"是改变显示的格式内容)
    <input data-provide="datepicker" data-date-end-date="0d" data-date-format="yyyy-mm-dd">
    // 如果要使用汉化的话，需要引入汉化的包bootstrap-datepicker.zh-CN.js
    // 然后在input标签中添加“data-date-language="zh-CN"”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 使用方法2：(js方法)
      // 1.首先引入包名
      // 2.给input标签添加一个id属性
    <input type="text" class="form-control input-sm" id="datepicker">
      // 3.在javascript中
      $('#datepicker').datepicker({
      		format:'yyyy-mm-dd',
      		language:'zh-CN'
      	})

    插件4：jquery-validate (验证表单插件)

    github
    依赖jquery包，

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $('表单标签').validate({
    				 onKeyup:true,//何种条件下触发验证
    		        sendForm:false, // return false 阻止表单默认提交
    		eachInvalidField:function(){
    			// 当元素不合法时，会触发此方法
    		},
    		eachValidField:function(){
    			// 每一个合法的表单会触发
    		},
    		valid:function(){
    			//所有表单元素都合法才触发
    		}
    	    ....等等
    	})

    插件5：CKEditor(编辑器)

    下载地址
    文档使用说明
    简单使用说明：
    1.引入包名ckeditor.js
    2.在文本域中添加一个id属性，例如

    1
    <textarea name="" id="textEditor" cols="30" rows="10"></textarea>

    3.在js中引用一个方法

    1
    CKEDITOR.replace( 'textEditor' );

    这样就可以显示出来了，如果不想使用编辑器中的某些菜单选项，可以找到下载文件中的confg.js，自己修改所带的菜单项。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 默认带有的菜单项：
    config.toolbarGroups = [
    		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    大专栏  实用插件的积累e">		{ name: 'links' },
    		{ name: 'insert' },
    		{ name: 'forms' },
    		{ name: 'tools' },
    		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
    		{ name: 'others' },
    		'/',
    		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    		{ name: 'styles' },
    		{ name: 'colors' },
    		{ name: 'about' }
    	];

    插件6：Jcrop(图片裁剪插件)

    官网

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //首先引入相应的包
    //css
      <link rel="stylesheet" href="./css/Jcrop.css">
    //js
    <script src="jquery.min.js"></script>
    <script src="Jcrop.js"></script>
    // html
      <img src="timg.jpg" alt="">
    //js
    $('img').Jcrop({
      // 如果需要这些属性可以传入，不需要可以不传
            boxWidth: 400, //最大盒子的宽度
            aspectRatio: 2 //限制宽高的比例关系  
      }, function () {
       // 当Jcrop调用之后，回调函数设置一些默认的情况
      // console.log(this);//this指的就是你调用的对象，里面有属性可以获得图片裁剪的位置大小：this.ui.stage.width(height)
       // 1.例如默认显示选区位置
            this.newSelection();//声明设置选区
            this.setSelect([x, y, w, h]);//设置选区，前两个参数是左上角坐标值，后两个参数是宽度和高度

          //2. 默认显示缩略图
          var jcrop_api = this;
          thumbnail = this.initComponent('Thumbnailer', { width: 130, height: 130 });//缩略图的引入
    });
    // 一些事件说明:给图片的父元素注册事件
    $(img).parent().on('cropmove cropend',function(selection, coords, c){
          //第三个参数可以拿到图片的裁剪的位置值
          //c.x   c.y  c.w  c.h
      })

    插件7：imgAreaSelect(图片裁剪插件)

    官网

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //html
      <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
      <script type="text/javascript" src="scripts/jquery.min.js"></script>
      <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
      //js
      <script>
      $(document).ready(function () {
        $('img#photo').imgAreaSelect({
            handles: true,
            onSelectEnd: someFunction
        });
     });
     </script>

    插件8：uploadify(图片上传插件)

    官网
    是基于jquery的插件，有两个版本，一个是flash Version,另一个是html5 Version(收费的)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // 简单用法说明：
    // html代码
    <input type="file" id="upfile">
    // js代码（注意先引入jquery文件和uplodify文件）
    $(() {
        $("#upfile").uploadify({
            height        : 30,
            formData      : {},  //用于文件上传给后端的数据信息,相当于jquery中的data属性
            fileObjName   ：'tc_avatar', // 上传时的文件的名字，相当于表单中的name属性的值
            swf           : '/uploadify/uploadify.swf',// flash文件路径
            uploader      : '/uploadify/uploadify.php',// 后台接口
            width         : 120, // 宽度，自己定义
            height        :auto,//高度，自己定义
            buttonClass:'btn btn-success btn-sm',//允许将覆盖的样式修改
            fileSizeLimit:'2MB',//限制上传的文件的大小
            fileTypeExts: '*.gif; *.jpg; *.png',//上传文件格式的限制
            buttonText    : '',// 显示的文本内容
            itemTemplate: '<span></span>',//上传文件的进度信息模板
            onUploadSuccess: function(file, data) {
               // 文件上传成功在前端处理的事情
            }
            ...以上属性自己使用时根据需要选取
        });
    });

    未完待续……
  • 相关阅读:
    云南网页首页布局全代码
    表格样式（鼠标经过时整行变色）
    做自定义圆角矩形
    网页布局
    黄冈中学首页的模板简图
    动态网页简版
    十字绣首页设计
    go组合
    http rpc关联
    php echo print
  • 原文地址：https://www.cnblogs.com/lijianming180/p/12251628.html
Copyright © 2011-2022 走看看