jquery.ui实现新闻模块

jquery也有ui，了解即可，用的不多，类似element ui 和bootstrap

JQuery UI API:

jquery.ui实现新闻模块

draggale拖动，并用属性handle，指定下拖动手柄

    $(".drag-wrapper").draggable({

      handle:".drag-bar"

    });

见说明书：

sortable排序, 并指定元素的透明度。（就是排序选中的那个元素透明度会改变）

    $(".sort-item").sortable({

      opacity:0.3

    });

见说明书

同理，resizable, 缩放，定义下该元素的缩放方向

    $(".resize-item").resizable({

      handles:"s"

    });

完整代码

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <link rel="stylesheet" href="jquery-ui.css">

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    .drag-wrapper {

      width: 400px;

      margin: 50px auto 0;

      /*border: 10px solid #000;*/

    }

    .drag-bar {

      height: 40px;

      font-size: 20px;

      font-weight: bold;

      line-height: 40px;

      text-align: center;

      background-color: #E6E6E6;

      border-top-left-radius: 5px;

      border-top-right-radius: 5px;

      cursor: move;

    }

    .resize-item {

      height: 212px;

      border: 1px solid #e6e6e6;

    }

    .sort-wrapper {

      height: 100%;

      overflow: hidden;

    }

    .sort-item {

      list-style: none;

      padding-top: 10px;

    }

    .sort-item li {

      height: 40px;

      line-height: 40px;

      padding-left: 20px;

      cursor: pointer;

    }

    .sort-item li:hover {

      background-color: #e6e6e6;

    }

  </style>

</head>

<body>

<div class="drag-wrapper">

  <div class="drag-bar">可拖动、排序、变形的新闻模块</div>

  <div class="resize-item">

    <div class="sort-wrapper">

      <ul class="sort-item">

        <li>这是第1条新闻!</li>

        <li>这是第2条新闻!</li>

        <li>这是第3条新闻!</li>

        <li>这是第4条新闻!</li>

        <li>这是第5条新闻!</li>

        <li>这是第6条新闻!</li>

        <li>这是第7条新闻!</li>

        <li>这是第8条新闻!</li>

        <li>这是第9条新闻!</li>

        <li>这是第10条新闻!</li>

      </ul>

    </div>

  </div>

</div>

<script src="jquery-1.12.4.js"></script>

<script src="jquery-ui.js"></script>

<script>

  $(function () {

    $(".drag-wrapper").draggable({

      handle:".drag-bar"

    });

    $(".sort-item").sortable({

      opacity:0.3

    });

    $(".resize-item").resizable({

      handles:"s"

    });

  });

</script>

</body>

</html>

jQuery---jquery.ui实现新闻模块的更多相关文章

  1. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  2. JQuery Smart UI

    JQuery Smart UI 个人开发的一套使用htm+js的开发框架 SmartUI2.0后续声明 摘要: 感谢很多朋友关注,因为今年一直在另外一个公司做顾问,网络环境管制相当严格,所以一直没有更 ...

  3. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. jQuery源代码学习之七—队列模块queue

    一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程 ...

  5. 第四十四课：jQuery UI和jQuery easy UI

    jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...

  6. jquery easy ui 1.3.4 快速入门（1）

    什么是easyui jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂 ...

  7. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  8. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  9. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

随机推荐

  1. Vue中的计算属性

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函 ...

  2. BFS(广度优先搜索华容道游戏)--11--BFS--蓝桥杯卡片换位

    题目描述 你玩过华容道的游戏吗?这是个类似的,但更简单的游戏.看下面 3 x 2 的格子 +---+---+---+ | A | * | * | +---+---+---+ | B | | * | + ...

  3. Spring注入bean的方式

    在Spring容器中为一个bean配置依赖注入有三种方式: · 使用属性的setter方法注入  这是最常用的方式: · 使用构造器注入: · 使用Filed注入(用于注解方式).   使用属性的se ...

  4. HDU_4570_区间dp

    http://acm.hdu.edu.cn/showproblem.php?pid=4570 连题目都看不懂,直接找了题解,copy了过来= =. 一个长度为n的数列,将其分成若干段(每一段的长度要& ...

  5. bootstrap 表单类

    bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form&q ...

  6. oracle安装异常汇总

    . 运行 ./runInstaller 安装界面出现乱码问题 解决方案: export NLS_LANG=AMERICAN_AMERICA.UTF8 export LC_ALL=C .运行 ./run ...

  7. 动手学习Pytorch(4)--过拟合欠拟合及其解决方案

    过拟合.欠拟合及其解决方案 过拟合.欠拟合的概念 权重衰减 丢弃法   模型选择.过拟合和欠拟合 训练误差和泛化误差 在解释上述现象之前,我们需要区分训练误差(training error)和泛化误差 ...

  8. kali重置root密码

    像这样,kali系统的root密码忘记了,只需一分钟时间,快速重置root密码 第一步: 电脑开机后kali系统会进入引导界面,这是我们只需 “e” 进入启动前编辑命令(若系统没有出现这个页面,大家在 ...

  9. 免费网盘！无限申请5TB容量并且不限速的网盘！

    鸽了好久没有更新博客了哎…… 前言 这里我先说一下下,本人深受百度网盘坑害,自己上传的文件,16GB下载花了3天时间 最后下载失败? 所以找到的一个新的储存个人文件的方法. 这个网盘是onedrive ...

  10. docker介绍 架构 安装

    Docker是什么? docker是一个开源的软件部署解决方案: docker也是轻量级的应用容器框架: docker可以打包.发布.运行任何的应用. Docker 是一个开源的应用容器引擎,基于 G ...