Menu
Woocommerce Menu

简述JavaScript对传统文档对象模型的支持,jquery插件splitScren实现页面分屏切换模板特效

0 Comment

 AngularJS应用首要借助于调整器来调整数据在应用程序中的流动。调整器采取ng-controller指令定义。调控器是一个满含属性/属性和JavaScript对象的效应。各类调节器接受$scope参数钦定应用程序/模块,由调节器调节。

 那是将其在JavaScript语言中期版本中引入的模型。我们都被有着浏览器都援救,但只允许访谈文件的少数关键部分,如表单,表单成分和图像。

闲来无事,搞了个页面包车型客车分屏效果,先来看下效果:

<div ng-app="" ng-controller="studentController">
...
</div>

该模型提供了若干个只读属性,如标题,U奥迪Q3L和上次改成提供有关文书档案全部的新闻。除了有由该模型可用以安装和获得文书档案的属性值提供各类措施。
文书档案属性在观念DOM:

是因为可自定义宽高的目标,荧屏分块由CSS调整,由js调整测度等分模块效果一般.

在此间,大家已经宣称选拔ng-controller指令的调整器studentController。作为下一步,大家将概念studentController如下

上边是文书档案属性,能够应用守旧DOM访谈列表:

图片 1

  •     studentController 定义 $scope 作为JavaScript对象参数。
  •     $scope 表示应用程序,使用studentController对象。
  •     $scope.student 是studentController对象的习性。
  •     firstName和lastName是$scope.student
    对象的两特天性。大家已经通过了默许值给她们。
  •     fullName 是$scope.student对象的函数,它的天职是再次回到合併的称呼。
  •     在fullName函数中,大家今日要学生对象回来组合的名字。
  •    
    作为贰个注解,还足以定义调整器对象在单独的JS文件,并把有关文件中的HTML页面。

图片 2

次第相关注明:

今昔能够动用ng-model或使用表明式如下使用studentController学生的属性。

图片 3

HTML结构:

  •     今后有 student.firstName 和 student.lastname 几个输入框。
  •     未来有 student.fullName()方法增加到HTML。
  •     以后,只要输入first
    name和lastname输入框中输入什么,能够看来多个称呼自动更新。

 文书档案方法在价值观DOM:

<div class="header">
      header
</div>
  <div class="container" id="displayArea">
      <!-- 分屏内容渲染区域 -->
  </div>
<div class="footer">
 <!--省略其他代码-->
</div>

例子

此地是由古板DOM扶助的不二秘籍列表:

js调用:

上边的事例将展现使用调控器。
testAngularJS.html 文件内容如下:

图片 4

//分屏数据
      var iframes = [
          {
            id:'frames_1',
            frameName:'百度一下',
            src:'http://www.baidu.com'
          },
          {
            id:'frames_1',
            frameName:'百度地图',
            src:'http://map.baidu.com'
          },
          {
            id:'frames_1',
            frameName:'百度下',
            src:'http://www.baidu.com'
          },
          {
            id:'frames_1',
            frameName:'百度视频',
            src:'http://v.baidu.com'
          },
          {
            id:'frames_1',
            frameName:'百度新闻2',
            src:'http://news.baidu.com'
          },
          {
            id:'frames_1',
            frameName:'test6',
            src:'6.html'
          },
          {
            id:'frames_1',
            frameName:'百度新闻',
            src:'http://news.baidu.com'
          },
          {
            id:'frames_1',
            frameName:'88888',
            src:'6.html'
          },
          {
            id:'frames_1',
            frameName:'百度更多',
            src:'http://www.baidu.com/more/'
          }
        ];
      //自适应屏幕
      window.onload = function(){
        Panel.resize();
      }
      window.onresize = function(){
        Panel.resize();
      }

      //初始化分屏
      var splitScreen = new splitScreen($('#displayArea'),iframes);

      //监听removeSettingCls自定义事件
      splitScreen._on('removeSettingCls',function(){
        splitScreen.toggleTopbar(function(){
            $('.ulTab li[data-fp="setting"]').removeClass('currentLi');
          });
      });
      //分屏切换
      function changeModel(obj){
        var fpmodel = $(obj).attr('data-fp');
        if(fpmodel !="setting"){
          splitScreen.screenMode(fpmodel,function(){
            $(obj).addClass('currentLi').siblings().removeClass('currentLi');
          });
        }else{
          splitScreen.toggleTopbar(function(){
            $(obj).toggleClass('currentLi');
          });
        }
      }
<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

 例子:

splitScreen.js相关代码表达:

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图