xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > Metronic开发框架经验小结,设置点击文本框或图片

Metronic开发框架经验小结,设置点击文本框或图片

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-10 21:40
<input id="startDate" value="" readonly="true" type="text" style="cursor: pointer" class="user_datepicker ">
<input class="canlderImg" data-tag="start" type="image" src="../../i/canlder1.png">
结束:
<input id="endDate" value="" readonly="true" type="text" style="cursor:pointer;" class="user_datepicker">
<input class="canlderImg" data-tag="end" type="image" src="../../i/canlder1.png" >

JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式

在上篇基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验。

// js代码

1. 方法调用模式:

1、Select2控件介绍

$("#startDate").datepicker();

$("#endDate").datepicker();

//点击图片弹出日历控件则需要给图片绑定点击事件
$(.canlderImg).on("click",function(e){

var tag=$(e.target).attr("data-tag");
if(tag=="start"){
  $("#startDate").datepicker( "show" );
}else if(tag=="end"){
  $("#endDate").datepicker( "show" );
}

});

先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来执行方法,this即指当前的myobject对象。

这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:,具体的使用案例,可以参考地址:。

以上这篇设置点击文本框或图片弹出日历控件的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

var blogInfo={
  blogId:123,
  blogName:"werwr",
  showBlog:function(){alert(this.blogId);}
};

blogInfo.showBlog();

我们在整个框架里面,用到了很多Select2控件来处理内容的显示,包括单选的下拉列表(包括级联选择框)、复选的下拉列表、树形下拉列表等方式,界面效果如下所示。

2. 函数调用模式

1)编辑界面下的省份、城市、所在行政区的级联界面效果,选择省份,会加载对应省份下的城市,选择城市,会继续加载城市下的行政区,从而实现多级关联的下拉列表效果。

定义一个函数,设置一个变量名保存函数,这时this指向到window对象。

图片 1

var myfunc = function(a,b){
  return a b;
}

alert(myfunc(3,4));

2)编辑界面下的多项选择下拉列表

3. 构造器调用模式

图片 2

定义一个函数对象,在对象中定义属性,在其原型对象中定义方法。在使用prototype的方法时,必须实例化该对象才能调用其方法。

但我们选择其中的内容的时候,系统自动显示出没有选择的列表数据,非常直观友好,如下所示。

var myfunc = function(a){
  this.a = a;
};
myfunc.prototype = {
  show:function(){alert(this.a);}
}

var newfunc = new myfunc("123123123");
newfunc.show();

图片 3

4. apply,call调用模式

3)树形列表的下拉列表

var myobject={};
var sum = function(a,b){
  return a b;
};
var sum2 = sum.call(myobject,10,30); //var sum2 = sum.apply(myobject,[10,30]); 
alert(sum2);

有时候,我们的一些数据可能有层次关系的,如所属机构、上层列表等等。

以上这篇JS函数的定义与调用方法推荐就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

图片 4

您可能感兴趣的文章:

  • JavaScript函数的4种调用方法详解
  • Javascript 函数的四种调用模式
  • JS函数的几种定义方式分析
  • Javascript调用函数方法的几种方式介绍
  • javascript函数的四种调用模式
  • js函数调用的方式
  • js函数调用常用方法详解
  • js中函数调用的两种常用方法使用介绍
  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

图片 5

2、Select2控件的实际使用代码分析

1)基础界面代码及操作

使用select2控件,一般是在常规的select控件上,设置一下即可(设置它的class为select2)。

<div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">重要级别</label>
    <div class="col-md-8">
      <select id="Importance" name="Importance" class="form-control select2" placeholder="重要级别..."></select>
    </div>
  </div>
</div>
 <div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">认可程度</label>
    <div class="col-md-8">
      <select id="Recognition" name="Recognition" class="form-control select2" placeholder="认可程度..."></select>
    </div>
  </div>
</div>

如果是固定列表,那么也就是设置它的Option内容即可,如下所示。

<div class="col-md-6">
  <div class="form-group">
    <label class="control-label col-md-4">吸烟</label>
    <div class="col-md-8">
      <select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸烟...">
        <option>吸烟</option>
        <option>不吸烟</option>
      </select>
    </div>
  </div>
</div>

简单的select2控件初始化代码如下所示。

$(document).ready(function() {
 $(".js-example-basic-single").select2();
});

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:Metronic开发框架经验小结,设置点击文本框或图片

关键词: mg电子游艺平台