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. CUDA学习（五）之使用共享内存（shared memory）进行归约求和（一个包含N个线程的线程块）

    共享内存(shared memory)是位于SM上的on-chip(片上)一块内存,每个SM都有,就是内存比较小,早期的GPU只有16K(16384),现在生产的GPU一般都是48K(49152). ...

  2. CUDA学习（四）之使用全局内存进行归约求和（一个包含N个线程的线程块）

    问题:使用CUDA进行数组元素归约求和,归约求和的思想是每次循环取半. 详细过程如下: 假设有一个包含8个元素的数组,索引下标从0到7,现通过3次循环相加得到这8个元素的和,使用一个间隔变量,该间隔变 ...

  3. 搭建DevOps模式的项目

    在后端的开发领域,各类开发框架都已经很多,在开发项目时可以根据不同的需要和需求选择合适的开发框架.然而在需要开发一个完善的工程化项目时,仅仅一个后端开发框架是不够的,还面临着在对开发项目的快速迭代中进 ...

  4. jmeter性能测试2：基础功能介绍

    对于英语不好的同学建议先改为简体中文再进行使用 1.添加->threads->线程组(控制总体并发)            线程数:虚拟用户数.一个虚拟用户占用一个进程或线程        ...

  5. 死磕mysql

    数据库创建语句 create database new; 创建一个名为new 的数据库 drop database new; 删除名为new的数据库 数据库名为小写,当初教我的那个人对我说在某个系统中 ...

  6. virtualenv 指定 python 解释器的版本

    使用如下命令为 ubuntu 系统安装 virtualenv sudo apt-get install python-virtualenv 当我们使用 virtualenv 命令创建虚拟环境时,默认使 ...

  7. sublime 快捷键 【转】

    Sublime Text 3 快捷键精华版   备用,方便查询 Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+S ...

  8. 【python爬虫】windoes的爬虫中文乱码现象，通用转码解决

    page = session.get(url="https://www.qidian.com/") page.encoding = page.apparent_encoding p ...

  9. 13-MyBatis03(逆向工程)

    MyBatis逆向工程 1.导入jar包 <dependency> <groupId>org.mybatis</groupId> <artifactId> ...

  10. Ubuntu mysql踩坑记录

    安装: 1.sudo apt-get install mysql-server 2. apt-get isntall mysql-client 3.  sudo apt-get install lib ...