jquery选项卡（动态页面）

  |   jquery Javascript 前端

我刚才发表一篇关于制作类似网易新闻导航条的效果静态页面的文章，这个是静态的东西。不过我想要改成有动态数据，这个比较有点难的。学习动态数据之前要掌握好javascript或者jquery的基础知识，这样就可以进行动态数据的开发。

静态页面：

<!doctype html>
<html>
<head>
    <title>导航栏</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!--demo展示所用css，不用关心 begin-->
    <link rel="stylesheet" type="text/css" href="dao/assets/reset.css" />
    <!--demo展示所用css end-->
    <!--组件依赖css begin-->
    <link rel="stylesheet" type="text/css" href="dao/assets/widget/navigator/navigator.default.css" /><!--皮肤文件，若不使用该皮肤，可以不加载-->
    <!--组件依赖css end-->

    <!--组件依赖js begin-->
    <script type="text/javascript" src="dao/dist/zepto.js"></script>
    <script type="text/javascript" src="dao/src/extend/touch.js"></script>
    <script type="text/javascript" src="dao/src/extend/iscroll.js"></script>
    <script type="text/javascript" src="dao/src/extend/highlight.js"></script>
    <script type="text/javascript" src="dao/src/extend/parseTpl.js"></script>
    <script type="text/javascript" src="dao/src/core/gmu.js"></script>
    <script type="text/javascript" src="dao/src/core/event.js"></script>
    <script type="text/javascript" src="dao/src/core/widget.js"></script>
    <script type="text/javascript" src="dao/src/widget/navigator/navigator.js"></script>
    <script type="text/javascript" src="dao/src/widget/navigator/scrolltonext.js"></script>
    <script type="text/javascript" src="dao/src/widget/navigator/$scrollable.js"></script>
    <script type="text/javascript" src="dao/src/widget/navigator/evenness.js"></script>
    <!--组件依赖js end-->

    <style type="text/css">
        .ui-scroller {
            float: left;
        }
    </style>
</head>
<body>

<div id="wrap">

    <div id="nav">
        <ul>
          <li><a href="javascript:;">太阳</a></li>
            <li><a href="javascript:;">水星</a></li>
            <li><a href="javascript:;">金星</a></li>
            <li><a href="javascript:;">地球</a></li>
            <li><a href="javascript:;">火星</a></li>
            <li><a href="javascript:;">木星</a></li>
            <li><a href="javascript:;">土星</a></li>
            <li><a href="javascript:;">天王星</a></li>
            <li><a href="javascript:;">海王星</a></li>
            <li><a href="javascript:;">冥王星</a></li>
        </ul>
    </div>
</div>

<script>

    $('#nav').navigator();
  
</script>


</body>
</html>

动态页面：

<!doctype html>
<html>
<head>
    <title>导航栏</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!--demo展示所用css，不用关心 begin-->
    <link rel="stylesheet" type="text/css" href="dao/assets/reset.css" />
    <!--demo展示所用css end-->
    <!--组件依赖css begin-->
    <link rel="stylesheet" type="text/css" href="dao/assets/widget/navigator/navigator.default.css" /><!--皮肤文件，若不使用该皮肤，可以不加载-->
    <!--组件依赖css end-->

    <!--组件依赖js begin-->
    <script type="text/javascript" src="dao/dist/zepto.js"></script>
    <script type="text/javascript" src="dao/src/extend/touch.js"></script>
    <script type="text/javascript" src="dao/src/extend/iscroll.js"></script>
    <script type="text/javascript" src="dao/src/extend/highlight.js"></script>
    <script type="text/javascript" src="dao/src/extend/parseTpl.js"></script>
    <script type="text/javascript" src="dao/src/core/gmu.js"></script>
    <script type="text/javascript" src="dao/src/core/event.js"></script>
    <script type="text/javascript" src="dao/src/core/widget.js"></script>
    <script type="text/javascript" src="dao/src/widget/navigator/navigator.js"></script>
    <script type="text/javascript" src="dao/src/widget/navigator/scrolltonext.js"></script>
    <script type="text/javascript" src="dao/src/widget/navigator/$scrollable.js"></script>
    <script type="text/javascript" src="dao/src/widget/navigator/evenness.js"></script>
    <!--组件依赖js end-->

    <style type="text/css">
        .ui-scroller {
            float: left;
        }
    </style>
</head>
<body>

<div id="wrap">

    <div id="nav">
        <ul>
         
        </ul>
    </div>
</div>

<script type="text/javascript">
function call(){
    $('#nav').navigator();
	}
	$.ajax({
		url: '',
		type: 'GET',
		dataType: 'jsonp',
		success: function(data) {
			var sylength = data.data.length;
      //alert($length)
      var str = '';
      for (var i = 0; i < sylength; i++) {
        str+='<li><a href="javascript:;">'+data.data[i].brand_name+'</a></li>';
      }
      $("#nav ul").append(str);
			call();
		}
	});
</script>


</body>
</html>

我花了好几周没有解决这个加载zepto.js文件的问题，就想到了回调函数方法就立即解决好了。

注意是：要改ajax动态数据的时候，如果没有call()方法回调函数的话，无法加载zepto.js文件，这个很重要的啊！