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. python实现ip地址的包含关系判断

    python的IPy模块虽然可以实现一些ip地址的判断,但是不是很完美,有些场景根本判断不出来,还会抛出异常,比如一个地址范围和一个ip/掩码,这种不同类型就无法判断. 对此通过自己写函数来实现ip地 ...

  2. [GPU高性能编程CUDA实战].(桑德斯).聂雪军等.扫描版-百度云分享

    链接:https://pan.baidu.com/s/1NkkDiyRgmfmhm9d2g_GBKQ 提取码:3usj

  3. python 利用selenium爬取百度文库的word文章

    今天学习如何使用selenium库来爬取百度文库里面的收费的word文档 from selenium import webdriver from selenium.webdriver.common.k ...

  4. 【论文笔记系列】AutoML：A Survey of State-of-the-art （上）

    之前已经发过一篇文章来介绍我写的AutoML综述,最近把文章内容做了更新,所以这篇稍微细致地介绍一下.由于篇幅有限,下面介绍的方法中涉及到的细节感兴趣的可以移步到论文中查看. 论文地址:https:/ ...

  5. 实验15: STP

    实验12:  STP Ø    实验目的通过本实验,读者可以掌握如下技能:(1) 理解STP 的工作原理(2) 掌握STP 树的控制(3) 利用PVST 进行负载平衡 Ø    实验拓扑 SW1 和S ...

  6. The import java.io cannot be resolved (类库无法解析的问题解决 )

    导入一个新项目后常会出现 The import java.io cannot be resolved String cannot be resolved to a type 其原因在于没有导入需要的包 ...

  7. ORA-12547: TNS: 丢失连接

    今天服务器挂掉了,公司的人弄了一下,,把服务器修好了,,但是我本地链接数据库一直报这个ORA-12547: TNS: 丢失连接,是服务器上的TNS监听没有启动,需要重启一下,

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

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

  9. HDU4192 Guess the Numbers(表达式计算、栈)

    题意: 给你一个带括号.加减.乘的表达式,和n个数$(n\leq 5)$,问你带入这几个数可不可能等于n 思路: 先处理表达式:先将中缀式转化为逆波兰表达式 转换过程需要用到栈,具体过程如下:1)如果 ...

  10. PC微信逆向--实现消息防撤回

    自从聊天软件消息撤回功能问世后,对于撤回的消息,我们对它一直有种强烈的好奇感."Ta刚撤回了什么?是骂我的话?还是说喜欢我?还是把发给其他人的消息误发给了我?好气呀,都看不到了...&quo ...