天天看点

weui和jquery weui的区别、下载和在项目中的引用、使用、应用

 jquery weui == weui + jquery插件; jquery-weui是官方weui的升级版本,扩展了官方的weui。jquery-weui是官方weui的jquery版本。

在javaWeb 项目中,使用的方式有另种,

第一种:在官网上下载压缩包

1、下载jquery weui

weui和jquery weui的区别、下载和在项目中的引用、使用、应用

压缩文件加压后,css的位置

weui和jquery weui的区别、下载和在项目中的引用、使用、应用

2、weui官网下载

weui和jquery weui的区别、下载和在项目中的引用、使用、应用

压缩包解压后的css位置

weui和jquery weui的区别、下载和在项目中的引用、使用、应用

在项目中,将上上面下载的css,放到CSS文件夹中,

weui和jquery weui的区别、下载和在项目中的引用、使用、应用

在HTML中的应用

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>weui</title>

    <link rel="stylesheet" href="css/weui.min.css" target="_blank" rel="external nofollow" />

    <link rel="stylesheet" href="css/jquery-weui.min.css" target="_blank" rel="external nofollow" />

</head>

<body>

    <div class="weui-cells weui-cells_form">

        <div class="weui-cell">

            <div class="weui-cell__hd"><label for="" class="weui-label">姓名</label></div>

            <div class="weui-cell__bd">

              <input class="weui-input" type="text" value="" placeholder="请输入姓名" id="name">

            </div>

        </div>

        <div class="weui-cell">

            <div class="weui-cell__hd"><label for="" class="weui-label" id="gender">性别</label></div>

            <div class="weui-cell__bd">

              <input class="weui-input" type="text" value="" placeholder="">

            </div>

        </div>

    </div>

    <div style="margin: 10px;">

        <a  class="weui-btn weui-btn_primary" οnclick="clicking()">按钮</a>

        <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-btn weui-btn_disabled weui-btn_primary">按钮</a>

        <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-btn weui-btn_warn">确认</a>

        <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-btn weui-btn_disabled weui-btn_warn">确认</a>

        <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-btn weui-btn_default">按钮</a>

        <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-btn weui-btn_disabled weui-btn_default">按钮</a>

        <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-btn weui-btn_plain-default">按钮</a>

        <a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-btn weui-btn_plain-primary">按钮</a>

    </div>

</body>

<script type="text/javascript" src="jslib/jquery-2.1.4.js" ></script>

<script type="text/javascript" src="jslib/fastclick.js" ></script>

<script>

  $(function() {

    FastClick.attach(document.body);

  });

</script>

<script type="text/javascript" src="jslib/jquery-weui.min.js" ></script>

<script type="text/javascript">

    $(function(){

        var name = $("#name").val();

        console.log(name);

        //

    });

   function clicking(){

      $.alert("自定义的消息内容", function() {

          console.log("1111111111111111111");

        });

   }

</script>

</html>

第二种方法:

就是不用下载,直接引用css路径

weui和jquery weui的区别、下载和在项目中的引用、使用、应用

这个的坏处是,入关官方进行了修改,可能会影响到你的项目页面的显示