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. kaggle实战之 bag of words meet bag of poopcorn

    由于编辑器总是崩溃,我只能直接把代码贴上了. import numpy #first step import pandas as pd import numpy as np # Read data f ...

  2. vscode 调试 react 项目

    主要分为以下三个步骤 安装 debug for chrome 配置 launch.json 文件 配置内容如下 { "version": "0.2.0", &q ...

  3. ROS中３D机器人建模(一)

    一,机器人建模的ROS软件包 *urdf : 机器人建模最重要的ros软件包是urdf软件包.这个软件包包含一个用于统一机器人描述格式(URDF)的C++解析器,它是一个表示机器人模型的XML文件,还 ...

  4. 视觉slam十四讲课后习题ch3--5题

    题目回顾: 假设有一个大的Eigen矩阵,我想把它的左上角3x3块提取出来,然后赋值为I3x3.编程实现.解:提取大矩阵左上角3x3矩阵,有两种方式: 1.直接从0-2循环遍历大矩阵的前三行和三列 2 ...

  5. Python logging记录日志

    Python logging记录日志 调试的几种方法: 使用print()在控制台上输出 使用assert断言 使用logging模块 logging提供了一组便利的函数,用来做简单的日志,(当然也能 ...

  6. re模块 findall()详解

    1. findall() 函数的2种表示形式 import re kk = re.compile(r'\d+') kk.findall('one1two2three3four4') #[1,2,3,4 ...

  7. Altium Designer打印多块PCB到热转印纸上、拼板发给工厂

    接下来介绍的方法的优势有: 节省电脑性能(来自不同PCB文件的图案被放置时只在第1块会卡顿一小会儿,之后不再卡顿) 便于排版(拖放图案时绝不会改变图案内容,拖放图案时鼠标拖住的矩形框的尺寸与图案的尺寸 ...

  8. API 接口设计规范

    概述 这篇文章分享 API 接口设计规范,目的是提供给研发人员做参考. 规范是死的,人是活的,希望自己定的规范,不要被打脸. 路由命名规范 动作 前缀 备注 获取 get get{XXX} 获取 ge ...

  9. Golang设置https访问，以及http如何重定向到https

    设置https访问: 原始代码为http监听: func main() { server := &http.Server{ Addr: ":8080", ... } go ...

  10. 深入了解MySQL，一篇简短的总结

    MySQL的基本语法 这里作为MySQL部分模块的深入了解,大部分都是理论方面的笔记,不会写具体用法. 具体用法会记录在下面这个随笔分类下,不过暂时还没更新完,等过段时间会更新下事务.存储过程.索引等 ...