اگر با T4 آشنایی داشته باشید بر اساس هر قالبی میتوانید کد تولید کنید.
نظرات مطالب
(function ($, undefined) { $.fn.extend({ 'rtlColResizable': function (options) { var defaults = { //Default values for the plugin's options here }; options = $.extend(defaults, options); var isMouseButtonPressed; var $resizingElement = undefined; var resizingElementStartWidth; var mouseCursorStartX; var isCursorInResizingPosition; var addResizingCursorStyle = function ($element) { $element.css({ 'cursor': 'col-resize', 'user-select': 'none', '-o-user-select': 'none', '-ms-user-select': 'none', '-moz-user-select': 'none', '-khtml-user-select': 'none', '-webkit-user-select': 'none', }); }; var removeResizingCursorStyle = function ($element) { $element.css({ 'cursor': 'default', 'user-select': 'text', '-o-user-select': 'text', '-ms-user-select': 'text', '-moz-user-select': 'text', '-khtml-user-select': 'text', '-webkit-user-select': 'text', }); }; var canResize = function (e) { return (e.offsetX || e.clientX - $(e.target).offset().left) < 10; }; return this.each(function () { var opts = options; var tableColumns = $(this).find('th'); tableColumns.filter(':not(:last-child)').mousedown(function (e) { $resizingElement = $(this); isMouseButtonPressed = true; mouseCursorStartX = e.pageX; resizingElementStartWidth = $resizingElement.width(); }); tableColumns.mousemove(function (e) { if (canResize(e)) { addResizingCursorStyle($(e.target)); isCursorInResizingPosition = true; } else if (!isMouseButtonPressed) { removeResizingCursorStyle($(e.target)); isCursorInResizingPosition = false; } if (isCursorInResizingPosition && isMouseButtonPressed) { $resizingElement.width(resizingElementStartWidth + (mouseCursorStartX - e.pageX)); } }); $(document).mouseup(function () { if (isMouseButtonPressed) { removeResizingCursorStyle($resizingElement); isMouseButtonPressed = false; } }); }); } }); })(jQuery);
<!DOCTYPE html> <html> <head> <title>rtlColResizable Sample</title> </head> <body> <table id="myTable"> <thead> <tr> <th>ستون1</th> <!-- نام ستونها را حتما در این تگ باید تعریف کنید --> <th>ستون2</th> <th>ستون3</th> </tr> </thead> <tr> <td>داده مربوط به ستون 1</td> <td>داده مربوط به ستون 2 </td> <td>داده مربوط به ستون 3</td> </tr> </table> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.rtlColResizable.js"></script> <script> $('table#myTable').rtlColResizable(); </script> </body> </html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
{ "name": "bootstrap.4", "version": "1.0.0", "description": "client side resources of the project", "scripts": {}, "author": "VahidN", "license": "ISC", "dependencies": { "bootstrap": "^4.1.3", "components-font-awesome": "5.0.6", "jquery": "^3.3.1", "popper.js": "^1.14.4" } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="/node_modules/components-font-awesome/css/fa-solid.min.css"> <link rel="stylesheet" href="/node_modules/components-font-awesome/css/fontawesome.min.css"> <title>Bootstrap</title> </head> <body> <div class="container"> </div> <script src="/node_modules/jquery/dist/jquery.min.js"></script> <script src="/node_modules/popper.js/dist/umd/popper.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> </body> </html>
bower install chosen
{ "name": "asp-net-mvc5x-angular2x", "version": "1.0.0", "authors": [ "DNT" ], "license": "MIT", "ignore": [ "node_modules", "bower_components" ], "dependencies": { "chosen": "1.4.2" }, "devDependencies": { } }
<script src="~/node_modules/jquery/dist/jquery.min.js"></script> <script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="~/bower_components/chosen/chosen.jquery.min.js"></script> <link href="~/bower_components/chosen/chosen.min.css" rel="stylesheet" type="text/css" />
declare var jQuery: any;
روش متداول استفاده از jQuery، فراخوانی آن پس از رخداد document ready است. در اینجا معادل این رخداد، hook ویژهای به نام ngAfterViewInit است. بنابراین تمام فراخوانیهای jQuery را باید در این متد انجام داد.
constructor(private _el: ElementRef) { }
import { Component, ElementRef, AfterViewInit } from "@angular/core"; declare var jQuery: any; // untyped @Component({ templateUrl: "app/using-jquery-addons/using-jquery-addons.component.html" }) export class UsingJQueryAddonsComponent implements AfterViewInit { dropDownItems = ["First", "Second", "Third"]; selectedValue = "Second"; constructor(private _el: ElementRef) { } ngAfterViewInit() { jQuery(this._el.nativeElement) .find("select") .chosen() .on("change", (e, args) => { this.selectedValue = args.selected; }); } }
<select> <option *ngFor="let item of dropDownItems" [value]="item" [selected]="item == selectedValue"> {{item}} option </option> </select> <h4> {{selectedValue}}</h4>
npm install -g typings typings install jquery --save --ambient
/// <reference path="../typings/browser/ambient/jquery/index.d.ts" />
// declare var jQuery: any; // untyped declare var jQuery: JQueryStatic; // typed
interface JQuery { //... chosen(options?:any):JQuery; } declare module "jquery" { export = $; }