JavaScript作业七 JQuery开发应用


 

【任务11-1】实现后台模块中的左侧树形菜单的折叠效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>后台管理左侧导航页面</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          购物后台管理
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="list-group">
                    <a href="#" class="list-group-item">添加商品</a>
                    <a href="#" class="list-group-item">商品列表</a>
                    <a href="#" class="list-group-item">商品类型</a>
            </div>
    </div>

  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          影视后台管理
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="list-group">
                    <a href="#" class="list-group-item">添加影视</a>
                    <a href="#" class="list-group-item">影视列表</a>
                    <a href="#" class="list-group-item">影视类型</a>
            </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          餐饮后台管理
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="list-group">
                    <a href="#" class="list-group-item">添加美食</a>
                    <a href="#" class="list-group-item">美食列表</a>
                    <a href="#" class="list-group-item">美食类型</a>
            </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a href="#" class="collapsed" role="button">
          订单管理
        </a>
      </h4>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a href="#"  class="collapsed" role="button">
          交易记录
        </a>
      </h4>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a  href="#" class="collapsed" role="button">
          统计报表
        </a>
      </h4>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a  href="#" class="collapsed" role="button">
          权限分配
        </a>
      </h4>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a href="#"  class="collapsed" role="button">
          修改密码
        </a>
      </h4>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a href="#"  class="collapsed" role="button">
          系统设置
        </a>
      </h4>
    </div>
  </div>
</div>
</body>
</html>

【任务11-2】实现后台模块中的添加商品页面的表单验证功能。

$(function(){
 //商品名称
 $("#goodsName").on("focus", function(){
 $(this).css({
 backgroundColor: "#FFEC8B",
 borderColor: "#999",
 color: "#000000"
 });
 if ($(this).value == "请输入商品名称") {
 $(this).value("");
 }
 }).on("blur", function(){
 $(this).css({
 backgroundColor: "#FFFFFF",
 borderColor: "",
 color: "#000000"
 });
 if ($(this).value == "") {
 $(this).value("请输入商品名称");
 }
 })

//商品单价
 $("input[id $= 'Price']").on("focus", function(){
 $(this).css({
 fontSize: "16px",
 color: "red"
 });
 });

//数量文本
 $("input[type = 'number']:last").on("blur", function(){
 if ($(this).val() < 0) {
 alert("数量不能小于0");
 $(this).select();
 }
 });

//日期
 $("input[type = 'date']").on("blur", function(){
 var dateReg = /(\d{4})[-\/](\d{2})[-\/](\d{1,2})/;
 if (!dateReg.test($(this).val())) {
 alert("日期格式不正确,请输入yyyy-MM-dd或者yyyy/MM/dd格式的日期");
 $(this).select();
 }
 });

//发布按钮
 $("input[type = 'submit']").on("click", function(){
 if ($("f_upload").val() == "") {
 alert("请选择商品缩略图");
 return false;
 }
 if ($("#goodsName").val() == "" || $("#goodsName").val() == "请输入商品名称") {
 alert("请输入商品名称!");
 return false;
 }
 if ($(".tabson textarea".val() == "")) {
 alert("请完善相关信息!");
 return false;
 }
 $(".tabson form").submit();
 });

});

   

【任务11-3】实现后台模块中的商品列表页面的全选和反选效果。

function selectAll(){
 var items = $("[name = 'checkItem']");
 var checkAll = $("#checkAll");
 $("#checkOther").prop("checked", checkAll.checked.prop("checked"));
 for (var i = 0; i < items.length; i++) {
 $(items[i]).prop("checked", checkAll.prop("checked"));
 }
}

function selectOther(){
 var items = $("[name = 'checkItem']");
 $("#checkAll").prop("checked", false);
 for (var i = 0; i < items.length; i++) {
 $(items[i]).prop("checked", !$(items[i].prop("checked")));
 }
}

【任务12-1】通过自定义插件实现商品类型的二级级联效果。

(function($,window,document,undefined){
 //默认参数
 var defaults=[{
 "text":"男装",
 "value":"男装",
 "subType":[{"value":"西装","text":"西装"},
 {"value":"风衣","text":"风衣"},
 {"value":"夹克","text":"夹克"}]
 },{
 "text":"女装",
 "value":"女装",
 "subType":[{"value":"女士上衣","text":"女士上衣"},
 {"value":"女士裙装","text":"女士裙装"},
 {"value":"蕾丝外衣","text":"蕾丝外衣"}]
 },{
 "text": "童装",
 "value": "童装",
 "subType": [{"value":"卡通系列","text":"卡通系列"},
 {"value":"卡哇伊系列","text":"卡哇伊系列"},
 {"value":"运动系列","text":"运动系列"}]
 }];
 //构造方法
 function CascadingMenu(element,options){
 this.$element=element;
 this.settings=$.extend(defaults,options);
 this.firstMenu=null;
 this.secondMenu=null;
 }
 //添加属性或方法
 CascadingMenu.prototype={
 initMenu:function(){
 this.initFirstMenu();
 this.bindSelectChangeEvent();
 //将firstMenu和secondMenu添加到指定的标签中
 return $(this.$element).append(this.firstMenu)
 .append(this.secondMenu);
 },
 initFirstMenu:function(){
 this.firstMenu=$("<select></select>");//创建级联菜单的第一项
 this.firstMenu.append($("<option value='请选择'>-请选择-</option>"))
 //为select添加option项
 for(var i=0;i<this.settings.length;i++){
 var option=$("<option></option>");
 option.append(this.settings[i].text);//设置option的显示内容
 option.val(this.settings[i].value);//设置option的value值
 this.firstMenu.append(option);//将option添加到firstMenu中
 }
 return this.firstMenu;
 },
 bindSelectChangeEvent:function(){
 var that=this;//保存this对象
 that.secondMenu=$("<select></select>");
 that.secondMenu.append($("<option value='请选择'>-请选择-</option>"));
 //设置一级菜单的onChange事件处理函数
 that.firstMenu.on("change",function(){
 //一级菜单发生改变时,二级菜单进行清空
 that.secondMenu.empty();
 //为二级菜单添加第一项“请选择”
 that.secondMenu.append($("<option value='请选择'>-请选择-</option>"));
 //获得一级菜单被选项的索引
 //(因下标从1开始,而数组下标从0开始;数组一致故需要减1)
 var index=this.selectedIndex-1;
 //一级菜单对应的子菜单类型
 var subType=that.settings[index].subType;
 for(var i=0;i<subType.length;i++){
 var option=$("<option></option>");
 option.append(subType[i].text);//设置option的显示内容
 option.val(subType[i].value);//设置option的value值
 that.secondMenu.append(option);//将option添加到secondMenu中
 }
 });
 return that.secondMenu;
 }
 };
 //在自定义插件cascadingMenuPlugins中创建cascadingMenu对象
 $.fn.cascadingMenuPlugins=function(opts){
 console.log(opts);
 var cascadingMenu=new CascadingMenu(this,opts);
 return cascadingMenu.initMenu();
 }
})(jQuery,window,document);

     

【任务12-2】在后台的商品列表页面中,实现表格行的添加与删除效果。

$(".toolbar>li:first").on("click", function (e) { 
 var tableList=$(".tablelist").append('<tr><td><input name="goods" type="checkbox" value=""/></td>
<td class="imgtd"><img src="images/nopic.gif" height="75px" width="100px" /><br/>
<input type="file"/></td><td><input type="text" value="请输入商品名"/></td>
<td><select></select></td><td><input type="text" value="请输入数量"/></td>
<td><input type="text" value="请输入单价"/></td><td><input type="date"/></td>
<td><select></select></td><td><a href="#" class="tablelink">确定</a>
<a href="#" class="tablelink">删除</a></td></tr>'); 
 //设定新添加元素的样式
 tableList.find("input[type='file']").css({margin:"10px 10px 10px 0px",width:"120px"});
 tableList.find("input[type='text']").css({border:"1px solid black",height:"20px",backgroundColor:"#FF9"});
 tableList.find("input[type='text']:gt(0)").css({width:"80px"});
 tableList.find("input[type='date']").css({border:"1px solid black",height:"20px",backgroundColor:"#FF9"});
 //为日期赋予初始值
 tableList.find("input[type='date']").val(getNowTime());
 //对下拉列表进行初始化
 initSelect(tableList.find("select:first"),[{text:"运动",value:"运动"},{text:"男装",value:"男装"}
 ,{text:"女装",value:"女装"},{text:"童装",value:"童装"}]);
 initSelect(tableList.find("select:last"),[{text:"审核",value:"审核"},{text:"未审核",value:"未审核"}]);
 });

 

【任务12-3】实现后台管理模块中报表统计功能。

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>统计报表</title>
 <script type="text/javascript" src="js/jquery-1.x.js"> </script>
 <script type="text/javascript" src="js/jquery.chart.js"></script>
 <link href="css/layout.css" rel="stylesheet" type="text/css" />
 <link href="css/add.css" rel="stylesheet" type="text/css" />
 </head>
<body>
<div class="place"> <span>位置:</span>
 <ul class="placeul">
 <li><a href="#">首页</a></li>
 <li><a href="#">统计报表</a></li>
 </ul>
</div>
<div class="formbody">
 <div class="usual">
 <canvas id="myCanvas1" width="300" height="300" 
 style="border:1px solid #ccc;margin-right:10px;"></canvas>
 <canvas id="myCanvas2" width="300" height="300" 
 style="border:1px solid #ccc;margin-right:10px;"></canvas>
 <canvas id="myCanvas3" width="300" height="300" 
 style="border:1px solid #ccc"></canvas>
 </div>
</div>
<script type="text/javascript">
 var data = {drawData:[{name:"女装",amount:40},
 {name:"男装",amount:80},
 {name:"童装",amount:50},
 {name:"运动",amount:35},
 {name:"内衣",amount:60}]
 };
 var options={bgColor:[{drawColor:"#9cc507"},
 {drawColor:"#8b86ca"},
 {drawColor:"#ff4400"},
 {drawColor:"#ffb81d"},
 {drawColor:"#00b3e3"}]
 ,frontColor:{
 font:" 16px microsoft",
 color:"black"
 }
 };
 //使用自定义样式
 $("#myCanvas1").drawChart(data,options,"PieChart");
 $("#myCanvas2").drawChart(data,options,"Columnar");
 $("#myCanvas3").drawChart(data,options,"FoldLine");

</script>
</body>
</html>

               

声明:May丶乘剑的部落小阁|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - JavaScript作业七 JQuery开发应用


一个偶尔努力、偶尔懈怠的“搬砖”人