betway必威-betway必威官方网站
做最好的网站

必威官方网站:页面内跳转到相应位置的3种方法

首先设置所需的css和html

1.课程管理之显示课程基本信息

  • 1.将course文件夹中的course_step1.html更名为basic.html
  • 2.修改此文件下面的文件引入
<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>
  • 3.在js/course文件下创建basic.js模块
  • 4.根据地址栏中的cs_id到服务器获取数据,并渲染模板,还要添加富文本编辑器
define(['utils','jquery','template','ckeditor','form'],function (obj,$,template,CKEDITOR,form){
   //要根据传过来的id,获取当前的所有的信息,渲染到当前页面上来
    var id = obj.queryString().cs_id;
    $.ajax({
      url:'/api/course/basic',
      type:'get',
      data:{
        cs_id:id
      },
      success:function (info){
          if(info.code==200){
            var htmlStr = template('cs_basic_tpl',info.result);
            $('.steps').html(htmlStr);

            //添加富文本编辑器
            CKEDITOR.replace('cs_brief');
          }
      }
    });//ajax
  • 5.页面中的模板信息如下:
<script type="text/template" id="cs_basic_tpl">
        <div class="brief">
            <div class="thumb">
                ![]({{cs_cover==''?'/views/publicourse.png':cs_cover}})
            </div>
            <dl class="info">
                <dt>{{cs_name}}</dt>
                <dd>讲师:{{tc_name}}</dd>
            </dl>
            </div>
            <!-- 步聚 -->
            <ul class="forwards list-unstyled">
                <li>
                    <a href="/course/basic?cs_id={{cs_id}}" class="active">
                    <b>1</b>
                    基本信息
                    </a>
                </li>
                <li>
                    <a href="/course/pic?cs_id={{cs_id}}">
                    <b>2</b>
                    课程图片
                    </a>
                </li>
                <li>
                    <a href="/course/lesson?cs_id={{cs_id}}">
                    <b>3</b>
                    课时管理
                    </a>
                </li>
            </ul>
            <!-- 基本信息 -->
            <div class="content">
                <!-- 标题 -->
                <div class="title">
                    <h5>基本信息 <small>BASIC INFORMATION</small></h5>
                </div>
                <form action="" class="basic form-horizontal">
                    <input type="hidden" name="cs_id" value="{{cs_id}}">
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">标题</label>
                        <div class="col-md-8">
                            <input type="text" name="cs_name" class="form-control input-sm" value="{{cs_name}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">课程描述</label>
                        <div class="col-md-8 ckeditor">
                            <textarea name="cs_brief" id="cs_brief" rows="15"  class="form-control input-sm">{{cs_brief}}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">讲师</label>
                        <div class="col-md-8">
                            <select name="cs_tc_id" class="form-control input-sm">
                                {{each teacher as tc k}}
                                <option value="{{tc.tc_id}}">{{tc.tc_name}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">分类</label>
                        <div class="col-md-8">
                            <select name="" class="form-control input-sm">
                                {{each category.top as cgt k}}
                                <option value="{{cgt.cg_id}}">{{cgt.cg_name}}</option>
                                {{/each}}
                            </select>
                            <select name="cs_cg_id" class="form-control input-sm">
                                {{each category.childs as cgc k}}
                                <option value="{{cgc.cg_id}}">{{cgc.cg_name}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">标签</label>
                        <div class="col-md-8">
                            <input type="text" value="{{cs_tags}}" name="" class="form-control input-sm">
                            <p class="help-block">将会应用于按标签搜索课程、相关课程的提取等</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            <button id="btnSave" class="btn btn-success btn-sm pull-right">保 存</button>
                        </div>                          
                    </div>
                </form>
            </div>
</script>
  • 6.在basic.html页面中调用定义好的模块
<script>
     require(['js/course/basic']);//调用模块
</script>
  • 7.页面信息填写完毕,单击按钮,向服务器提交数据,因此需要给保存按钮注册事件:
   // 给保存按钮注册事件
  $('.steps').on('click','#btnSave',function (){
         // alert(123);
    $("#cs_brief").val(CKEDITOR.instances.cs_brief.getData());
    $('form').ajaxSubmit({
      url:'/api/course/update/basic',
      type:'post',
      success:function (info){
         if(info.code==200){
           alert('保存成功,即将跳转到图片中心...');
          location.href='/course/pic?cs_id=' info.result.cs_id;
         }
      }
    })
      return false; //阻止默认的刷新行为
  })

1.课程管理之显示课程基本信息

  • 1.将course文件夹中的course_step1.html更名为basic.html
  • 2.修改此文件下面的文件引入
<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>
  • 3.在js/course文件下创建basic.js模块
  • 4.根据地址栏中的cs_id到服务器获取数据,并渲染模板,还要添加富文本编辑器
define(['utils','jquery','template','ckeditor','form'],function (obj,$,template,CKEDITOR,form){
   //要根据传过来的id,获取当前的所有的信息,渲染到当前页面上来
    var id = obj.queryString().cs_id;
    $.ajax({
      url:'/api/course/basic',
      type:'get',
      data:{
        cs_id:id
      },
      success:function (info){
          if(info.code==200){
            var htmlStr = template('cs_basic_tpl',info.result);
            $('.steps').html(htmlStr);

            //添加富文本编辑器
            CKEDITOR.replace('cs_brief');
          }
      }
    });//ajax
  • 5.页面中的模板信息如下:
<script type="text/template" id="cs_basic_tpl">
        <div class="brief">
            <div class="thumb">
                ![]({{cs_cover==''?'/views/publicourse.png':cs_cover}})
            </div>
            <dl class="info">
                <dt>{{cs_name}}</dt>
                <dd>讲师:{{tc_name}}</dd>
            </dl>
            </div>
            <!-- 步聚 -->
            <ul class="forwards list-unstyled">
                <li>
                    <a href="/course/basic?cs_id={{cs_id}}" class="active">
                    <b>1</b>
                    基本信息
                    </a>
                </li>
                <li>
                    <a href="/course/pic?cs_id={{cs_id}}">
                    <b>2</b>
                    课程图片
                    </a>
                </li>
                <li>
                    <a href="/course/lesson?cs_id={{cs_id}}">
                    <b>3</b>
                    课时管理
                    </a>
                </li>
            </ul>
            <!-- 基本信息 -->
            <div class="content">
                <!-- 标题 -->
                <div class="title">
                    <h5>基本信息 <small>BASIC INFORMATION</small></h5>
                </div>
                <form action="" class="basic form-horizontal">
                    <input type="hidden" name="cs_id" value="{{cs_id}}">
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">标题</label>
                        <div class="col-md-8">
                            <input type="text" name="cs_name" class="form-control input-sm" value="{{cs_name}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">课程描述</label>
                        <div class="col-md-8 ckeditor">
                            <textarea name="cs_brief" id="cs_brief" rows="15"  class="form-control input-sm">{{cs_brief}}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">讲师</label>
                        <div class="col-md-8">
                            <select name="cs_tc_id" class="form-control input-sm">
                                {{each teacher as tc k}}
                                <option value="{{tc.tc_id}}">{{tc.tc_name}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">分类</label>
                        <div class="col-md-8">
                            <select name="" class="form-control input-sm">
                                {{each category.top as cgt k}}
                                <option value="{{cgt.cg_id}}">{{cgt.cg_name}}</option>
                                {{/each}}
                            </select>
                            <select name="cs_cg_id" class="form-control input-sm">
                                {{each category.childs as cgc k}}
                                <option value="{{cgc.cg_id}}">{{cgc.cg_name}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 control-label">标签</label>
                        <div class="col-md-8">
                            <input type="text" value="{{cs_tags}}" name="" class="form-control input-sm">
                            <p class="help-block">将会应用于按标签搜索课程、相关课程的提取等</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            <button id="btnSave" class="btn btn-success btn-sm pull-right">保 存</button>
                        </div>                          
                    </div>
                </form>
            </div>
</script>
  • 6.在basic.html页面中调用定义好的模块
<script>
     require(['js/course/basic']);//调用模块
</script>
  • 7.页面信息填写完毕,单击按钮,向服务器提交数据,因此需要给保存按钮注册事件:
   // 给保存按钮注册事件
  $('.steps').on('click','#btnSave',function (){
         // alert(123);
    $("#cs_brief").val(CKEDITOR.instances.cs_brief.getData());
    $('form').ajaxSubmit({
      url:'/api/course/update/basic',
      type:'post',
      success:function (info){
         if(info.code==200){
           alert('保存成功,即将跳转到图片中心...');
          location.href='/course/pic?cs_id=' info.result.cs_id;
         }
      }
    })
      return false; //阻止默认的刷新行为
  })

设置css

2.提取公共性的代码,封装成模块

  • 1.在basic.js中也得根据id,向服务器发送请求,来获取数据渲染模板,因此需要将之前的代码封装成模块

  • 2.在libs文件夹下,新建一个utils.js文件,将manager.js中获取URL中id的代码剪切过来放在里面

    define(function(){
       var obj = {
              queryString:function(){
                   //获取url中的tc_id
                  var search = location.search;// ?tc_id=43&name='aaa'&age=20  获取的url中?后面的所有内容
    
                  search = search.substr(1);//从字符串的第1个索引位置开始截取,如果没有第二个参数表示截取到最后
    
                  var searchArr = search.split("&");
    
                  console.log(searchArr);
    
                  var o ={};
                  for(var i=0;i<searchArr.length;i  ){
                          var temp =  searchArr[i].split('=');
                          // console.log(temp)
                          o[temp[0]] = temp[1];
                          // console.log(o)
                          // {tc_id:143,}
                          // {tc_id:143,name:'aaa'}
                          // {tc_id:143,name:'aaa',age:20}
                  }
                  return o;
               }
               // ,
              // queryHost:function(){
    
              // },
              // queryPort:function(){
    
              // }
       };
    
       return obj;  //这是返回值是在模块执行的时候返回的内容
    })
    
  • 3.在config.js中,添加模块用

          'uploadify':'assets/uploadify/jquery.uploadify.min',
           'region':'assets/jquery-region/jquery.region',
           'ckeditor':'assets/ckeditor/ckeditor',
           ##'utils':'libs/utils',
          // 'common':'js/common'
          'common':'js/dashboard/common'  // 
    
  • 4.在manager.js模块中,进行模块的调用,代码如下:

    define(['jquery','template','datepicker','utils','datepickerzh','form'],function($,template,datepicker,utils){
    
      //获取id
      // var tc_id = o.tc_id;
      ## var tc_id = utils.queryString().tc_id;
          下面的代码不变,此处省略...
    

2.提取公共性的代码,封装成模块

  • 1.在basic.js中也得根据id,向服务器发送请求,来获取数据渲染模板,因此需要将之前的代码封装成模块

  • 2.在libs文件夹下,新建一个utils.js文件,将manager.js中获取URL中id的代码剪切过来放在里面

    define(function(){
       var obj = {
              queryString:function(){
                   //获取url中的tc_id
                  var search = location.search;// ?tc_id=43&name='aaa'&age=20  获取的url中?后面的所有内容
    
                  search = search.substr(1);//从字符串的第1个索引位置开始截取,如果没有第二个参数表示截取到最后
    
                  var searchArr = search.split("&");
    
                  console.log(searchArr);
    
                  var o ={};
                  for(var i=0;i<searchArr.length;i  ){
                          var temp =  searchArr[i].split('=');
                          // console.log(temp)
                          o[temp[0]] = temp[1];
                          // console.log(o)
                          // {tc_id:143,}
                          // {tc_id:143,name:'aaa'}
                          // {tc_id:143,name:'aaa',age:20}
                  }
                  return o;
               }
               // ,
              // queryHost:function(){
    
              // },
              // queryPort:function(){
    
              // }
       };
    
       return obj;  //这是返回值是在模块执行的时候返回的内容
    })
    
  • 3.在config.js中,添加模块用

          'uploadify':'assets/uploadify/jquery.uploadify.min',
           'region':'assets/jquery-region/jquery.region',
           'ckeditor':'assets/ckeditor/ckeditor',
           ##'utils':'libs/utils',
          // 'common':'js/common'
          'common':'js/dashboard/common'  // 
    
  • 4.在manager.js模块中,进行模块的调用,代码如下:

    define(['jquery','template','datepicker','utils','datepickerzh','form'],function($,template,datepicker,utils){
    
      //获取id
      // var tc_id = o.tc_id;
      ## var tc_id = utils.queryString().tc_id;
          下面的代码不变,此处省略...
    
        .demo{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            margin-bottom: 100px;
            margin-right: 50px;
        }
        .btn{
            position: fixed;
            right: 0;
            top: 20px;
            background-color: #0000cc;
            color: #ffffff;
        }

3.课程图片

1.将course_add_step2.html文件名修改为pic.html,并修改内部文件引用

<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>

2.在course文件夹里面,新建一个文件pic.js,定义模块,无论是单击课程图片,还是跳转过来,都要执行以下代码:

define(['jquery','js/util','template','uploadify'],function ($,util,template,uploadify){
  var cs_id = util.queryString().cs_id;
    $.ajax({
      url:'/api/course/picture',
      type:'get',
      data:{cs_id:cs_id},
      success:function (data){
         if(data.code==200){
           // alert('成功了...');
           // 把图片渲染一下
           var htmlStr = template('cs_pic_tpl',data.result);
           $('.steps').html(htmlStr);
         }
      }
    });//ajax
   })

3.修改pic.html页面中的模板

<script type="text/template" id="cs_pic_tpl">
        <div class="brief">
            <div class="thumb">
                {{if cs_cover}}
                ![]({{cs_cover}})
                {{/if}}
            </div>
            <dl class="info">
                <dt>{{cs_name}}</dt>
                <dd>讲师:{{tc_name}}</dd>
            </dl>
        </div>
        <!-- 步聚 -->
        <ul class="forwards list-unstyled">
            <li>
                <a href="/course/basic?cs_id={{cs_id}}" class="done">
                    <b class="fa fa-check"></b>
                    基本信息
                </a>
            </li>
            <li>
                <a href="/course/pic?cs_id={{cs_id}}" class="active">
                    <b>2</b>
                    课程图片
                </a>
            </li>
            <li>
                <a href="/course/lesson?cs_id={{cs_id}}">
                    <b>3</b>
                    课时管理
                </a>
            </li>
        </ul>
        <!-- 课程图片 -->
        <div class="content">
            <!-- 标题 -->
            <div class="title">
                <h5>课程图片 <small>COURSE PICTURE</small></h5>
            </div>
            <!-- 上传图片 -->
            <div class="picture col-md-offset-2">
                <div class="preview">
                    {{if cs_cover_origin}}
                    ![]({{cs_cover_origin}})
                    {{else}}
                    ![](/views/publicourse.png)
                    {{/if}}
                </div>
                <p class="tips">
                    可上传jpg, gif, png格式文件, 图片建议尺寸大于300x150,文件大小不能超过2M。
                </p>
                <div class="col-md-2">
                    <button id="upload" class="btn btn-success btn-sm">选择图片</button>
                </div>
                <div class="col-md-2">
                    <button id="cropBtn" class="btn btn-warning btn-sm" disabled>裁切图片</button>
                </div>
            </div>
        </div>
</script>

4.在pic.html页面中,调用定义好的模块

<script>
        require(['js/course/pic']);
</script>

3.课程图片

1.将course_add_step2.html文件名修改为pic.html,并修改内部文件引用

<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>

2.在course文件夹里面,新建一个文件pic.js,定义模块,无论是单击课程图片,还是跳转过来,都要执行以下代码:

define(['jquery','js/util','template','uploadify'],function ($,util,template,uploadify){
  var cs_id = util.queryString().cs_id;
    $.ajax({
      url:'/api/course/picture',
      type:'get',
      data:{cs_id:cs_id},
      success:function (data){
         if(data.code==200){
           // alert('成功了...');
           // 把图片渲染一下
           var htmlStr = template('cs_pic_tpl',data.result);
           $('.steps').html(htmlStr);
         }
      }
    });//ajax
   })

3.修改pic.html页面中的模板

<script type="text/template" id="cs_pic_tpl">
        <div class="brief">
            <div class="thumb">
                {{if cs_cover}}
                ![]({{cs_cover}})
                {{/if}}
            </div>
            <dl class="info">
                <dt>{{cs_name}}</dt>
                <dd>讲师:{{tc_name}}</dd>
            </dl>
        </div>
        <!-- 步聚 -->
        <ul class="forwards list-unstyled">
            <li>
                <a href="/course/basic?cs_id={{cs_id}}" class="done">
                    <b class="fa fa-check"></b>
                    基本信息
                </a>
            </li>
            <li>
                <a href="/course/pic?cs_id={{cs_id}}" class="active">
                    <b>2</b>
                    课程图片
                </a>
            </li>
            <li>
                <a href="/course/lesson?cs_id={{cs_id}}">
                    <b>3</b>
                    课时管理
                </a>
            </li>
        </ul>
        <!-- 课程图片 -->
        <div class="content">
            <!-- 标题 -->
            <div class="title">
                <h5>课程图片 <small>COURSE PICTURE</small></h5>
            </div>
            <!-- 上传图片 -->
            <div class="picture col-md-offset-2">
                <div class="preview">
                    {{if cs_cover_origin}}
                    ![]({{cs_cover_origin}})
                    {{else}}
                    ![](/views/publicourse.png)
                    {{/if}}
                </div>
                <p class="tips">
                    可上传jpg, gif, png格式文件, 图片建议尺寸大于300x150,文件大小不能超过2M。
                </p>
                <div class="col-md-2">
                    <button id="upload" class="btn btn-success btn-sm">选择图片</button>
                </div>
                <div class="col-md-2">
                    <button id="cropBtn" class="btn btn-warning btn-sm" disabled>裁切图片</button>
                </div>
            </div>
        </div>
</script>

4.在pic.html页面中,调用定义好的模块

<script>
        require(['js/course/pic']);
</script>

设置html

4.图片上传插件的改造及使用

1.在pic.html文件中把选择图片按钮改造一下,改成button并添加id为upload

<button id="upload" class="btn btn-success btn-sm">选择图片</button>

2.在pic.js模块中,书写代码,当单击上传图片的按钮的时候,可以使用插件上传图片:

//单击按钮的时候,图片是可以选择后被上传的,这是原图,并能够显示出来
           $("#upload").uploadify({
             swf:'/views/public/assets/uploadify/uploadify.swf',
             uploader:'/api/uploader/cover',
             width:85,
             height:'auto',
             buttonText:'请选择图片',
             formData:{cs_id:cs_id},
             fileObjName:'cs_cover_original',
             buttonClass:'btn btn-success btn-sm',
             itemTemplate:'',
             onUploadSuccess:function(file, data, response){
               // console.log(data); 如果图片上传成功的话,要将图片显示出来
               $(".preview img").attr('src',JSON.parse(data).result.path);
               $('#cropBtn').prop('disabled',false);// selected  checked  disabled 这三个比较特殊,不能用attr,只能用prop
             }
           });

2.在pic.html页面中调用模块

require(['js/course/pic']);

6.在pic.html中修改图片的路径,给它一个默认的图片

![](/views/publicourse.png)

7.在页面一开始跳转过来的时候,就要显示图片,因此需要发送ajax请求

$.ajax({
    url:'/api/course/picture',
    type:'get',
    data:{cs_id:cs_id},
    success:function (data){
      if(data.code==200){
        $('.preview img').attr('src',data.result.cs_cover_original);//将原图渲染出来
      }
    }
  });

4.图片上传插件的改造及使用

1.在pic.html文件中把选择图片按钮改造一下,改成button并添加id为upload

<button id="upload" class="btn btn-success btn-sm">选择图片</button>

2.在pic.js模块中,书写代码,当单击上传图片的按钮的时候,可以使用插件上传图片:

//单击按钮的时候,图片是可以选择后被上传的,这是原图,并能够显示出来
           $("#upload").uploadify({
             swf:'/views/public/assets/uploadify/uploadify.swf',
             uploader:'/api/uploader/cover',
             width:85,
             height:'auto',
             buttonText:'请选择图片',
             formData:{cs_id:cs_id},
             fileObjName:'cs_cover_original',
             buttonClass:'btn btn-success btn-sm',
             itemTemplate:'',
             onUploadSuccess:function(file, data, response){
               // console.log(data); 如果图片上传成功的话,要将图片显示出来
               $(".preview img").attr('src',JSON.parse(data).result.path);
               $('#cropBtn').prop('disabled',false);// selected  checked  disabled 这三个比较特殊,不能用attr,只能用prop
             }
           });

2.在pic.html页面中调用模块

require(['js/course/pic']);

6.在pic.html中修改图片的路径,给它一个默认的图片

![](/views/publicourse.png)

7.在页面一开始跳转过来的时候,就要显示图片,因此需要发送ajax请求

$.ajax({
    url:'/api/course/picture',
    type:'get',
    data:{cs_id:cs_id},
    success:function (data){
      if(data.code==200){
        $('.preview img').attr('src',data.result.cs_cover_original);//将原图渲染出来
      }
    }
  });
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo" id="demo">这个DIV,id是demo</div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>

5.图片裁切小demo

  • 1.到jcrop.org网站下载插件,是基于jquery的一个插件
http://jcrop.org/download
  • 2.小demo的使用,先引入css,jquery, 及jcrop.js文件
<link rel="stylesheet" href="css/Jcrop.css">
<script src="jquery-1.12.2.min.js"></script>
<script src="js/Jcrop.js"></script>
  • 3.在页面中写js代码调用即可,参数为对象:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片裁切</title>
  <link rel="stylesheet" href="css/Jcrop.css">
  <script src="jquery-1.12.2.min.js"></script>
  <script src="js/Jcrop.js"></script>
   <style>
    .box {
      width: 240px;
      height: 120px;
      border: 1px solid red;
      position: absolute;
      top: 0;
      left: 900px;
    }
  </style>
</head>
<body>
  ![](pool.jpg)
  <div class="box"></div>
</div>
</body>
<script>
  $("#pic").Jcrop();
</script>
</html>
  • 4.常用参数介绍:
    aspectRatio:2,               //宽高比例
    bgColor: 'hotpink',          //背景图片
    bgOpacity:0.3,               //背景透明度
    maxSize: [200,300],          //裁切范围区的最大值
    minSize:[100,80] ,           //裁切范围区的最小值
    canSelect:false,             //为false时无法更改,默认值是true
    canDelete:true,              //用键盘可以删除选区,但是好像不好用
    canDrag:false,               //能否拖拽选区,默认是true
    canResize:false              //可以调整大小,默认是true
  • 5.如果在想在任意位置显示的话,得使用如下代码:
<script>
  $("#pic").Jcrop({
    aspectRatio: 2,
    N: "#ccc",
    bgOpacity: 0.3,
    container: ".div"
    // maxSize: [100, 100],
  },function(){
    jcrop_api = this;
    thumbnail = this.initComponent('Thumbnailer', {
      width: 240,
      height: 120
    });
  });
  $("#box").on("cropmove cropend", function (e, s, c) {
    console.log(c.x, c.y, c.w, c.h);
  });
</script>
  • 6.要想在任意位置显示的话,可以让生成的图片追加到对应的位置上
  $('.jcrop-thumb').appendTo($('.box'));
  • 7.中文在线文件
http://code.ciaoca.com/jquery/jcrop/demo/

5.图片裁切小demo

  • 1.到jcrop.org网站下载插件,是基于jquery的一个插件
http://jcrop.org/download
  • 必威官方网站,2.小demo的使用,先引入css,jquery, 及jcrop.js文件
<link rel="stylesheet" href="css/Jcrop.css">
<script src="jquery-1.12.2.min.js"></script>
<script src="js/Jcrop.js"></script>
  • 3.在页面中写js代码调用即可,参数为对象:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片裁切</title>
  <link rel="stylesheet" href="css/Jcrop.css">
  <script src="jquery-1.12.2.min.js"></script>
  <script src="js/Jcrop.js"></script>
   <style>
    .box {
      width: 240px;
      height: 120px;
      border: 1px solid red;
      position: absolute;
      top: 0;
      left: 900px;
    }
  </style>
</head>
<body>
  ![](pool.jpg)
  <div class="box"></div>
</div>
</body>
<script>
  $("#pic").Jcrop();
</script>
</html>
  • 4.常用参数介绍:
    aspectRatio:2,               //宽高比例
    bgColor: 'hotpink',          //背景图片
    bgOpacity:0.3,               //背景透明度
    maxSize: [200,300],          //裁切范围区的最大值
    minSize:[100,80] ,           //裁切范围区的最小值
    canSelect:false,             //为false时无法更改,默认值是true
    canDelete:true,              //用键盘可以删除选区,但是好像不好用
    canDrag:false,               //能否拖拽选区,默认是true
    canResize:false              //可以调整大小,默认是true
  • 5.如果在想在任意位置显示的话,得使用如下代码:
<script>
  $("#pic").Jcrop({
    aspectRatio: 2,
    N: "#ccc",
    bgOpacity: 0.3,
    container: ".div"
    // maxSize: [100, 100],
  },function(){
    jcrop_api = this;
    thumbnail = this.initComponent('Thumbnailer', {
      width: 240,
      height: 120
    });
  });
  $("#box").on("cropmove cropend", function (e, s, c) {
    console.log(c.x, c.y, c.w, c.h);
  });
</script>
  • 6.要想在任意位置显示的话,可以让生成的图片追加到对应的位置上
  $('.jcrop-thumb').appendTo($('.box'));
  • 7.中文在线文件
http://code.ciaoca.com/jquery/jcrop/demo/

重点来了

6.图片裁切功能的使用

1.在public/assets文件夹下面,添加jquery-jcrop文件夹

2.在libs的config.js文件中,配置路径,并在下面设置依赖项,因为它不支持模块化

'jcrop':'assets/jquery-jcrop/js/jcrop'

'jcrop':{
      deps:['jquery']
    }

3.在pic.html页面中把裁切图片的a标签修改成按钮,并添加一个类名

<button id="cropBtn" class="btn btn-warning btn-sm" disabled>裁切图片</button>

4.在pic.html页面中引入jcrop的css文件,以方便裁切

<link rel="stylesheet" href="/views/public/assets/jquery-jcrop/css/Jcrop.min.css">

5.在pic.js中单击按钮的时候,调用Jcrop(),并将按钮的状态修改为保存,并设置一个自定义属性来存储状态

 $(".steps").on("click",'#cropBtn',function (){
     if($(this).attr('data-status')!='save'){
       $(this).attr('data-status','save').text('保  存');

      }else{

        //选择完了之后就可以进行保存了
      }
  })

6.当第一次点击按钮的时候,完整的代码如下:

/**
 * Created by Administrator on 2017/6/25.
 */
define(['jquery', 'js/util', 'template', 'uploadify','jcrop','form'], function ($, util, template, uploadify) {
  var cs_id = util.queryString().cs_id;
  $.ajax({
    url: '/api/course/picture',
    type: 'get',
    data: {cs_id: cs_id},
    success: function (data) {
      if (data.code == 200) {
        // alert('成功了...');
        // 把图片渲染一下
        var htmlStr = template('cs_pic_tpl', data.result);
        $('.steps').html(htmlStr);

        //单击按钮的时候,图片是可以选择后被上传的,这是原图,并能够显示出来
        $("#upload").uploadify({
          swf: '/views/public/assets/uploadify/uploadify.swf',
          uploader: '/api/uploader/cover',
          width: 85,
          height: 'auto',
          buttonText: '请选择图片',
          formData: {cs_id: cs_id},
          fileObjName: 'cs_cover_original',
          buttonClass: 'btn btn-success btn-sm',
          itemTemplate: '',
          onUploadSuccess: function (file, data, response) {
            // console.log(data); 如果图片上传成功的话,要将图片显示出来
            $(".preview img").attr('src', JSON.parse(data).result.path);
            $('#cropBtn').prop('disabled', false);// selected  checked  disabled 这三个比较特殊,不能用attr,只能用prop
          }
        });//uploadify
      }//data.code
    }//success
  });//ajax

  //当单击按钮的时候,要进行判断,如果是第一次单击按钮的话,就需要裁切并将按钮的值改为保存

   $('.steps').on('click','#cropBtn',function (){
       if($(this).attr('data-status')!='save'){
              //说明此时是第一次单击按钮
              $(this).attr('data-status','save').text('保存');
              $('.preview img').Jcrop({
                aspectRatio: 2,
                setSelect: [20,20,300,150]
              },function (){
                // 这里面的这些数据是用来设置缩略图的
                jcrop_obj = this;  //this就是当前的缩略图对象
                jcrop_obj.initComponent('Thumbnailer', { width: 240, height: 120 });
                $('.thumb').append($('.jcrop-thumb'));
              });
      }else {
              // 说明需要保存图片了  // 往服务器发送ajax请求
           alert(123);
          var result = jcrop_obj.getSelection();
          $.ajax({
             url:'/api/course/update/picture',
             type:'post',
             data:{
               cs_id:id,
               x:result.x,
               y:result.y,
               w:result.w,
               h:result.h
                },
             success:function (info){
                 if(info.code==200){
                    //进行页面的跳转
                 location.href='/course/lesson?cs_id=' info.result.cs_id;
                  }
                }
              })
            }

          })


  })

})

6.图片裁切功能的使用

1.在public/assets文件夹下面,添加jquery-jcrop文件夹

2.在libs的config.js文件中,配置路径,并在下面设置依赖项,因为它不支持模块化

'jcrop':'assets/jquery-jcrop/js/jcrop'

'jcrop':{
      deps:['jquery']
    }

3.在pic.html页面中把裁切图片的a标签修改成按钮,并添加一个类名

<button id="cropBtn" class="btn btn-warning btn-sm" disabled>裁切图片</button>

4.在pic.html页面中引入jcrop的css文件,以方便裁切

<link rel="stylesheet" href="/views/public/assets/jquery-jcrop/css/Jcrop.min.css">

5.在pic.js中单击按钮的时候,调用Jcrop(),并将按钮的状态修改为保存,并设置一个自定义属性来存储状态

 $(".steps").on("click",'#cropBtn',function (){
     if($(this).attr('data-status')!='save'){
       $(this).attr('data-status','save').text('保  存');

      }else{

        //选择完了之后就可以进行保存了
      }
  })

6.当第一次点击按钮的时候,完整的代码如下:

/**
 * Created by Administrator on 2017/6/25.
 */
define(['jquery', 'js/util', 'template', 'uploadify','jcrop','form'], function ($, util, template, uploadify) {
  var cs_id = util.queryString().cs_id;
  $.ajax({
    url: '/api/course/picture',
    type: 'get',
    data: {cs_id: cs_id},
    success: function (data) {
      if (data.code == 200) {
        // alert('成功了...');
        // 把图片渲染一下
        var htmlStr = template('cs_pic_tpl', data.result);
        $('.steps').html(htmlStr);

        //单击按钮的时候,图片是可以选择后被上传的,这是原图,并能够显示出来
        $("#upload").uploadify({
          swf: '/views/public/assets/uploadify/uploadify.swf',
          uploader: '/api/uploader/cover',
          width: 85,
          height: 'auto',
          buttonText: '请选择图片',
          formData: {cs_id: cs_id},
          fileObjName: 'cs_cover_original',
          buttonClass: 'btn btn-success btn-sm',
          itemTemplate: '',
          onUploadSuccess: function (file, data, response) {
            // console.log(data); 如果图片上传成功的话,要将图片显示出来
            $(".preview img").attr('src', JSON.parse(data).result.path);
            $('#cropBtn').prop('disabled', false);// selected  checked  disabled 这三个比较特殊,不能用attr,只能用prop
          }
        });//uploadify
      }//data.code
    }//success
  });//ajax

  //当单击按钮的时候,要进行判断,如果是第一次单击按钮的话,就需要裁切并将按钮的值改为保存

   $('.steps').on('click','#cropBtn',function (){
       if($(this).attr('data-status')!='save'){
              //说明此时是第一次单击按钮
              $(this).attr('data-status','save').text('保存');
              $('.preview img').Jcrop({
                aspectRatio: 2,
                setSelect: [20,20,300,150]
              },function (){
                // 这里面的这些数据是用来设置缩略图的
                jcrop_obj = this;  //this就是当前的缩略图对象
                jcrop_obj.initComponent('Thumbnailer', { width: 240, height: 120 });
                $('.thumb').append($('.jcrop-thumb'));
              });
      }else {
              // 说明需要保存图片了  // 往服务器发送ajax请求
           alert(123);
          var result = jcrop_obj.getSelection();
          $.ajax({
             url:'/api/course/update/picture',
             type:'post',
             data:{
               cs_id:id,
               x:result.x,
               y:result.y,
               w:result.w,
               h:result.h
                },
             success:function (info){
                 if(info.code==200){
                    //进行页面的跳转
                 location.href='/course/lesson?cs_id=' info.result.cs_id;
                  }
                }
              })
            }

          })


  })

})

1.第一种方法直接在html中添加

7.课时管理功能

1.修改lesson.html页面中文件路径的引用

<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>

2.在course中新建一个lesson.js的文件,定义模块,一打开这个页面的时候,要显示信息

define(['jquery','js/util','template','bootstrap'],function ($,util,template,bt){
  var cs_id = util.queryString().cs_id;

  //  发送请求来渲染当前的页面  当前的课时的页面
    $.ajax({
      url:'/api/course/lesson',
      type:'GET',
      data:{cs_id:cs_id},
      success:function (data){
         if(data.code==200){
           //渲染模板
           var htmlStr = template('cs_lesson_tpl',data.result);
           $('.steps').html(htmlStr);
         }
      }
    });
  })

3.lesson.html页面中的模块代码如下:

<script type="text/tempalte" id="cs_lesson_tpl">
        <div class="brief">
                        <div class="thumb">
                            ![](./uploads/course_1.jpg)
                        </div>
                        <dl class="info">
                            <dt>{{cs_name}}</dt>
                            <dd>{{tc_name}}</dd>
                            <dd>课时:{{lessons.length}}</dd>
                        </dl>
                    </div>
                    <!-- 步聚 -->
                    <ul class="forwards list-unstyled">
                        <li>
                            <a href="/course/basic?cs_id={{cs_id}}" class="done">
                            <b class="fa fa-check"></b>
                            基本信息
                            </a>
                        </li>
                        <li>
                            <a href="/course/pic?cs_id={{cs_id}}" class="done">
                            <b class="fa fa-check"></b>
                            课程图片
                            </a>
                        </li>
                        <li>
                            <a href="/course/lesson?cs_id={{cs_id}}" class="active">
                            <b>3</b>
                            课时管理
                            </a>
                        </li>
                    </ul>
                    <!-- 课时管理 -->
                    <div class="content">
                        <!-- 标题 -->
                        <div class="title">
                            <h5>课时管理 <small>LESSON MANAGE</small></h5>
                            <a src="javascript:;" id='addLesson'  data-target="#lesson" class="btn btn-success btn-sm pull-right">
                                <i class="fa fa-plus"></i>
                                课时
                            </a>
                        </div>
                        <div class="lessons">
                            <ul class="list-unstyled">
                                {{each lessons as v i}}
                                <li>
                                    <i class="fa fa-file-video-o"></i>
                                    课时:{{i 1}}
                                    {{v.ct_name}}
                                    {{v.ct_video_duration}}
                                    <!-- 操作 -->
                                    <div class="action pull-right">
                                        <a href="javascript:;" class="btn btn-info btn-xs" data-toggle="modal" data-target="#lesson">编辑</a>
                                        <a href="javascript:;" class="btn btn-info btn-xs">预览</a>
                                        <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                                    </div>
                                </li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
</script>

7.课时管理功能

1.修改lesson.html页面中文件路径的引用

<?php include '/views/common/css.html'?>
<?php include '/views/common/aside.html'?>
<?php include '/views/common/head.html'?>
<?php include '/views/common/script.html'?>

2.在course中新建一个lesson.js的文件,定义模块,一打开这个页面的时候,要显示信息

define(['jquery','js/util','template','bootstrap'],function ($,util,template,bt){
  var cs_id = util.queryString().cs_id;

  //  发送请求来渲染当前的页面  当前的课时的页面
    $.ajax({
      url:'/api/course/lesson',
      type:'GET',
      data:{cs_id:cs_id},
      success:function (data){
         if(data.code==200){
           //渲染模板
           var htmlStr = template('cs_lesson_tpl',data.result);
           $('.steps').html(htmlStr);
         }
      }
    });
  })

3.lesson.html页面中的模块代码如下:

<script type="text/tempalte" id="cs_lesson_tpl">
        <div class="brief">
                        <div class="thumb">
                            ![](./uploads/course_1.jpg)
                        </div>
                        <dl class="info">
                            <dt>{{cs_name}}</dt>
                            <dd>{{tc_name}}</dd>
                            <dd>课时:{{lessons.length}}</dd>
                        </dl>
                    </div>
                    <!-- 步聚 -->
                    <ul class="forwards list-unstyled">
                        <li>
                            <a href="/course/basic?cs_id={{cs_id}}" class="done">
                            <b class="fa fa-check"></b>
                            基本信息
                            </a>
                        </li>
                        <li>
                            <a href="/course/pic?cs_id={{cs_id}}" class="done">
                            <b class="fa fa-check"></b>
                            课程图片
                            </a>
                        </li>
                        <li>
                            <a href="/course/lesson?cs_id={{cs_id}}" class="active">
                            <b>3</b>
                            课时管理
                            </a>
                        </li>
                    </ul>
                    <!-- 课时管理 -->
                    <div class="content">
                        <!-- 标题 -->
                        <div class="title">
                            <h5>课时管理 <small>LESSON MANAGE</small></h5>
                            <a src="javascript:;" id='addLesson'  data-target="#lesson" class="btn btn-success btn-sm pull-right">
                                <i class="fa fa-plus"></i>
                                课时
                            </a>
                        </div>
                        <div class="lessons">
                            <ul class="list-unstyled">
                                {{each lessons as v i}}
                                <li>
                                    <i class="fa fa-file-video-o"></i>
                                    课时:{{i 1}}
                                    {{v.ct_name}}
                                    {{v.ct_video_duration}}
                                    <!-- 操作 -->
                                    <div class="action pull-right">
                                        <a href="javascript:;" class="btn btn-info btn-xs" data-toggle="modal" data-target="#lesson">编辑</a>
                                        <a href="javascript:;" class="btn btn-info btn-xs">预览</a>
                                        <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                                    </div>
                                </li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
</script>

本文由betway必威发布于网页设计,转载请注明出处:必威官方网站:页面内跳转到相应位置的3种方法

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。